Skip to content

Commit 53184bc

Browse files
pabel-rhpabel-rh
authored
RHIDP-5514: Floating action button (redhat-developer#925)
* Added new content for FAB * Minor edits * Adding content to customizing * Changing capitalization in docs * Minor changes * Incorporated Christoph's comments * Removed static plugin mentions * Incorporated Lindsey's comments * Refined content * Changed topic name * Updated priority description * Incorporated Heena's comments * Minor changes * Minor change * Removed the part that talked about enabling * Removed unwanted step * Minor change * Added svg icon example
1 parent 9a381cb commit 53184bc

File tree

3 files changed

+160
-0
lines changed

3 files changed

+160
-0
lines changed

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:_mod-docs-content-type: ASSEMBLY
2+
:context: configuring-a-floating-action-button
3+
[id="{context}"]
4+
= Configuring a floating action button in {product}
5+
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.
7+
8+
include::modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc[leveloffset=+1]

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

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
:_mod-docs-content-type: PROCEDURE
2+
[id="proc-configuring-floating-action-button-as-a-dynamic-plugin_{context}"]
3+
= Configuring a floating action button as a dynamic plugin
4+
5+
You can configure the floating action button as a dynamic plugin to perform actions or open an internal or external link.
6+
7+
.Prerequisties
8+
You must have sufficient permissions as a platform engineer.
9+
10+
.Procedure
11+
12+
To configure a floating action button as a dynamic plugin, complete any of the following tasks:
13+
14+
* Specify the `global.floatingactionbutton/config` mount point in your `app-config-dynamic.yaml` file. For example:
15+
+
16+
.Example of a bulk-import plugin as a floating action button
17+
[source,yaml]
18+
----
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
42+
----
43+
<1> (Required) The import name with an associated component to the mount point.
44+
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:
46+
+
47+
.Example of a floating action button that opens GitHub
48+
[source,yaml]
49+
----
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
63+
----
64+
65+
== Floating action button parameters
66+
Use the parameters as shown in the following table to configure your floating action button plugin.
67+
68+
.Floating action button parameters
69+
|===
70+
| Name | Description | Type | Default value | Required
71+
72+
| `slot`
73+
| Position of the floating action button. Valid values: `PAGE_END`, `BOTTOM_LEFT`
74+
| `enum`
75+
| `PAGE_END`
76+
| No
77+
78+
| `label`
79+
| Name of the floating action button
80+
| `String`
81+
| Not applicable
82+
| Yes
83+
84+
| `icon`
85+
| 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`
87+
| Not applicable
88+
| No
89+
90+
| `showLabel`
91+
| Display of the abel next to your icon
92+
| `Boolean`
93+
| Not applicable
94+
| No
95+
96+
| `size`
97+
| Size of the floating action button
98+
| `small`, `medium`, `large`
99+
| `medium`
100+
| No
101+
102+
| `color`
103+
| Color of the component. It supports both default and custom theme colors, that are added from the link:https://mui.com/material-ui/customization/palette/#custom-colors[Palette Getting started guide].
104+
| `default`, `error`, `info`, `inherit`, `primary`, `secondary`, `success`, `warning`
105+
| `default`
106+
| No
107+
108+
| `onClick`
109+
| Performed action when selecting a floating action button
110+
| `React.MouseEventHandler`
111+
| Not applicable
112+
| No
113+
114+
| `to`
115+
| Link that opens when selecting a floating action button
116+
| `String`
117+
| Not applicable
118+
| No
119+
120+
| `toolTip`
121+
| Text that appears when hovering over a floating action button
122+
| `String`
123+
| Not applicable
124+
| No
125+
126+
| `priority`
127+
| Order of the floating action buttons displayed in the submenu. A larger value means higher priority.
128+
| `number`
129+
| Not applicable
130+
| No
131+
132+
| `visibleOnPaths`
133+
| Display floating action button on the specified paths
134+
| `string[]`
135+
| Display floating action button on all paths
136+
| No
137+
138+
| `excludeOnPaths`
139+
| Hide floating action button on the specified paths
140+
| `string[]`
141+
| Display floating action button on all paths
142+
| No
143+
144+
|===
145+
146+
[NOTE]
147+
====
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.
149+
====

Diff for: ‎titles/customizing/master.adoc

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ include::assemblies/assembly-configuring-templates.adoc[leveloffset=+1]
2323
include::modules/customizing-the-learning-paths/proc-customize-rhdh-learning-paths.adoc[leveloffset=+1]
2424

2525

26+
include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]
27+
28+
2629
include::assemblies/assembly-configuring-techdocs.adoc[leveloffset=+1]
2730

2831

0 commit comments

Comments
 (0)