Skip to content

Commit e5018db

Browse files
pabel-rhpabel-rh
authored
RHDH Test Day - FAB Updates (redhat-developer#997)
* Incorporated changes * Incorporated Debsmita's comments * Minor changes * Minor changes * Incorporated Debsmita's comments * Minor changes * Debsmita's comments * Minor changes * More examples * Minor change
1 parent 2368bb2 commit e5018db

File tree

2 files changed

+187
-41
lines changed

2 files changed

+187
-41
lines changed

‎assemblies/assembly-configuring-a-floating-action-button.adoc

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
[id="{context}"]
44
= Configuring a floating action button in {product}
55

6-
You can use the floating action button plugin to configure any action button as a floating button in any page in the {product-short} instance as you want. The floating action button plugin is disabled by default. You can also configure floating action buttons to display as submenu options within the main floating action button by assigning the floating action buttons to the same slot.
6+
You can use the floating action button plugin to configure any action as a floating button in the {product-short} instance. The floating action button plugin is enabled by default. You can also configure floating action buttons to display as submenu options within the main floating action button by assigning the floating action buttons to the same `slot` field of your `dynamic-plugins.yaml` file.
77

88
include::modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc[leveloffset=+1]

‎modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc

+186-40
Original file line numberDiff line numberDiff line change
@@ -16,51 +16,197 @@ To configure a floating action button as a dynamic plugin, complete any of the f
1616
.Example of a bulk-import plugin as a floating action button
1717
[source,yaml]
1818
----
19-
dynamicPlugins:
20-
frontend:
21-
red-hat-developer-hub.backstage-plugin-bulk-import:
22-
# Start of the floating action button configuration
23-
mountPoints:
24-
- mountPoint: global.floatingactionbutton/config
25-
importName: BulkImportPage <1>
26-
config:
27-
slot: 'page-end'
28-
icon: bulkImportIcon
29-
label: 'Bulk import'
30-
toolTip: 'Register multiple repositories in bulk'
31-
to: /bulk-import/repositories
32-
# End of the floating action button configuration
33-
appIcons:
34-
- name: bulkImportIcon
35-
importName: BulkImportIcon
36-
dynamicRoutes:
37-
- path: /bulk-import/repositories
38-
importName: BulkImportPage
39-
menuItem:
40-
icon: bulkImportIcon
41-
text: Bulk import
19+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
20+
disabled: false
21+
pluginConfig:
22+
dynamicPlugins:
23+
frontend:
24+
red-hat-developer-hub.backstage-plugin-bulk-import:
25+
# Start of the floating action button configuration
26+
mountPoints:
27+
- mountPoint: global.floatingactionbutton/config
28+
importName: BulkImportPage # <1>
29+
config:
30+
slot: 'page-end'
31+
icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg> # <2>
32+
label: 'Bulk import'
33+
toolTip: 'Register multiple repositories in bulk'
34+
to: /bulk-import/repositories
35+
# End of the floating action button configuration
36+
appIcons:
37+
- name: bulkImportIcon
38+
importName: BulkImportIcon
39+
dynamicRoutes:
40+
- path: /bulk-import/repositories
41+
importName: BulkImportPage
42+
menuItem:
43+
icon: bulkImportIcon
44+
text: Bulk import
4245
----
4346
<1> (Required) The import name with an associated component to the mount point.
47+
<2> Use the `svg` value to display a black BulkImportPage icon.
4448
45-
* To configure a dynamic plugin as a floating action button that opens an external link, specify the `global.floatingactionbutton/config` mount point in your `app-config-dynamic.yaml` file. For example:
49+
* To configure an action as a floating action button that opens an external link, specify the `global.floatingactionbutton/config` mount point in your `dynamic-plugins.yaml` file within the `backstage-plugin-global-floating-action-button` plugin. For example:
4650
+
4751
.Example of a floating action button that opens GitHub
4852
[source,yaml]
4953
----
50-
dynamicPlugins:
51-
frontend:
52-
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
53-
mountPoints:
54-
- mountPoint: application/listener
55-
importName: DynamicGlobalFloatingActionButton
56-
- mountPoint: global.floatingactionbutton/config
57-
importName: NullComponent
58-
config:
59-
icon: github
60-
label: 'Git'
61-
toolTip: 'Github'
62-
to: https://github.com/redhat-developer/rhdh-plugins
54+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
55+
disabled: false
56+
pluginConfig:
57+
dynamicPlugins:
58+
frontend:
59+
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
60+
mountPoints:
61+
- mountPoint: application/listener
62+
importName: DynamicGlobalFloatingActionButton
63+
- mountPoint: global.floatingactionbutton/config
64+
importName: NullComponent # <1>
65+
config:
66+
icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>' # <2>
67+
label: 'Quay'
68+
showLabel: true
69+
toolTip: 'Quay'
70+
to: 'https://quay.io'
71+
- mountPoint: global.floatingactionbutton/config
72+
importName: NullComponent
73+
config:
74+
icon: github
75+
label: 'Git'
76+
toolTip: 'Github'
77+
to: https://github.com/redhat-developer/rhdh-plugins
6378
----
79+
<1> (Required) The import name with an associated component to the mount point.
80+
<2> Use the `svg` value to display the `Quay` icon.
81+
82+
* To configure a floating action button that contains a submenu, define the `global.floatingactionbutton/config` mount point in the same `slot` field in your `dynamic-plugins.yaml` file for multiple actions. The default slot is `page-end` when not specified. For example:
83+
+
84+
.Example of a floating action button with submenu actions
85+
[source,yaml]
86+
----
87+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
88+
disabled: false
89+
pluginConfig:
90+
dynamicPlugins:
91+
frontend:
92+
red-hat-developer-hub.backstage-plugin-bulk-import:
93+
# Start of fab config
94+
mountPoints:
95+
- mountPoint: global.floatingactionbutton/config
96+
importName: BulkImportPage # <1>
97+
config:
98+
slot: 'page-end'
99+
icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
100+
label: 'Bulk import'
101+
toolTip: 'Register multiple repositories in bulk'
102+
to: /bulk-import/repositories
103+
# end of fab config
104+
appIcons:
105+
- name: bulkImportIcon
106+
importName: BulkImportIcon
107+
dynamicRoutes:
108+
- path: /bulk-import/repositories
109+
importName: BulkImportPage
110+
menuItem:
111+
icon: bulkImportIcon
112+
text: Bulk import
113+
114+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-global-floating-action-button
115+
disabled: false
116+
pluginConfig:
117+
dynamicPlugins:
118+
frontend:
119+
red-hat-developer-hub.backstage-plugin-global-floating-action-button:
120+
mountPoints:
121+
- mountPoint: application/listener
122+
importName: DynamicGlobalFloatingActionButton
123+
- mountPoint: global.floatingactionbutton/config
124+
importName: NullComponent # <1>
125+
config:
126+
icon: github
127+
label: 'Git'
128+
toolTip: 'Github'
129+
to: https://github.com/redhat-developer/rhdh-plugins
130+
- mountPoint: global.floatingactionbutton/config
131+
importName: NullComponent # <1>
132+
config:
133+
icon: '<svg viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M200.134 0l55.555 117.514-55.555 117.518h-47.295l55.555-117.518L152.84 0h47.295zM110.08 99.836l20.056-38.092-2.29-8.868L102.847 0H55.552l48.647 102.898 5.881-3.062zm17.766 74.433l-17.333-39.034-6.314-3.101-48.647 102.898h47.295l25-52.88v-7.883z" fill="#40B4E5"/><path d="M152.842 235.032L97.287 117.514 152.842 0h47.295l-55.555 117.514 55.555 117.518h-47.295zm-97.287 0L0 117.514 55.555 0h47.296L47.295 117.514l55.556 117.518H55.555z" fill="#003764"/></svg>'
134+
label: 'Quay'
135+
showLabel: true
136+
toolTip: 'Quay'
137+
to: 'https://quay.io'
138+
----
139+
<1> (Required) The import name with an associated component to the mount point.
140+
141+
* To configure a floating action button to display only on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `visibleOnPaths` property as shown in the following example:
142+
+
143+
.Example of a floating action button to display specific pages
144+
[source,yaml]
145+
----
146+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
147+
disabled: false
148+
pluginConfig:
149+
dynamicPlugins:
150+
frontend:
151+
red-hat-developer-hub.backstage-plugin-bulk-import:
152+
# start of fab config
153+
mountPoints:
154+
- mountPoint: global.floatingactionbutton/config
155+
importName: BulkImportPage # <1>
156+
config:
157+
slot: 'page-end'
158+
icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
159+
label: 'Bulk import'
160+
toolTip: 'Register multiple repositories in bulk'
161+
to: /bulk-import/repositories
162+
visibleOnPaths: ['/catalog', '/settings']
163+
# end of fab config
164+
appIcons:
165+
- name: bulkImportIcon
166+
importName: BulkImportIcon
167+
dynamicRoutes:
168+
- path: /bulk-import/repositories
169+
importName: BulkImportPage
170+
menuItem:
171+
icon: bulkImportIcon
172+
text: Bulk import
173+
----
174+
<1> (Required) The import name with an associated component to the mount point.
175+
176+
* To hide a floating action button on specific pages, configure the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin and set the `excludeOnPaths` property as shown in the following example:
177+
+
178+
.Example of a floating action button to hide specific pages
179+
[source,yaml]
180+
----
181+
- package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
182+
disabled: false
183+
pluginConfig:
184+
dynamicPlugins:
185+
frontend:
186+
red-hat-developer-hub.backstage-plugin-bulk-import:
187+
# start of fab config
188+
mountPoints:
189+
- mountPoint: global.floatingactionbutton/config
190+
importName: BulkImportPage # <1>
191+
config:
192+
slot: 'page-end'
193+
icon: <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>
194+
label: 'Bulk import'
195+
toolTip: 'Register multiple repositories in bulk'
196+
to: /bulk-import/repositories
197+
excludeOnPaths: ['/bulk-import']
198+
# end of fab config
199+
appIcons:
200+
- name: bulkImportIcon
201+
importName: BulkImportIcon
202+
dynamicRoutes:
203+
- path: /bulk-import/repositories
204+
importName: BulkImportPage
205+
menuItem:
206+
icon: bulkImportIcon
207+
text: Bulk import
208+
----
209+
<1> (Required) The import name with an associated component to the mount point.
64210
65211
== Floating action button parameters
66212
Use the parameters as shown in the following table to configure your floating action button plugin.
@@ -83,12 +229,12 @@ Use the parameters as shown in the following table to configure your floating ac
83229

84230
| `icon`
85231
| Icon of the floating action button. Recommended to use filled icons from the link:https://fonts.google.com/icons[Material Design library]. You can also use an svg icon. For example: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e8eaed"><g><rect fill="none" height="24" width="24"/></g><g><path d="M11,7L9.6,8.4l2.6,2.6H2v2h10.2l-2.6,2.6L11,17l5-5L11,7z M20,19h-8v2h8c1.1,0,2-0.9,2-2V5c0-1.1-0.9-2-2-2h-8v2h8V19z"/></g></svg>`
86-
| `StringReact.ReactElement`
232+
| `String`, `React.ReactElement`, `SVG image icon`, `HTML image icon`
87233
| Not applicable
88234
| No
89235

90236
| `showLabel`
91-
| Display of the abel next to your icon
237+
| Display of the label next to your icon
92238
| `Boolean`
93239
| Not applicable
94240
| No
@@ -145,5 +291,5 @@ Use the parameters as shown in the following table to configure your floating ac
145291

146292
[NOTE]
147293
====
148-
If multiple floating button actions are assigned to the same `Slot`, these floating buttons are displayed as submenu options within the main floating action button.
294+
If multiple floating button actions are assigned to the same `slot` value, the floating buttons are displayed as submenu options within the main floating action button.
149295
====

0 commit comments

Comments
 (0)