RHIDP-5514: Floating action button

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

@@ -0,0 +1,8 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-a-floating-action-button
+[id="{context}"]
+= Configuring a floating action button in {product}
+
+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.
+
+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

@@ -0,0 +1,149 @@
+:_mod-docs-content-type: PROCEDURE
+[id="proc-configuring-floating-action-button-as-a-dynamic-plugin_{context}"]
+= Configuring a floating action button as a dynamic plugin
+
+You can configure the floating action button as a dynamic plugin to perform actions or open an internal or external link.
+
+.Prerequisties
+You must have sufficient permissions as a platform engineer.
+
+.Procedure
+
+To configure a floating action button as a dynamic plugin, complete any of the following tasks:
+
+* Specify the `global.floatingactionbutton/config` mount point in your `app-config-dynamic.yaml` file. For example: 
++
+.Example of a bulk-import plugin as a floating action button
+[source,yaml]
+----
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-bulk-import:
+        # Start of the floating action button configuration
+        mountPoints:
+          - mountPoint: global.floatingactionbutton/config
+            importName: BulkImportPage <1>
+            config:
+              slot: 'page-end'
+              icon: bulkImportIcon
+              label: 'Bulk import'
+              toolTip: 'Register multiple repositories in bulk'
+              to: /bulk-import/repositories
+        # End of the floating action button configuration
+        appIcons:
+          - name: bulkImportIcon
+            importName: BulkImportIcon
+        dynamicRoutes:
+          - path: /bulk-import/repositories
+            importName: BulkImportPage
+            menuItem:
+              icon: bulkImportIcon
+              text: Bulk import
+----
+<1> (Required) The import name with an associated component to the mount point.
+
+* 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:
++
+.Example of a floating action button that opens GitHub
+[source,yaml]
+----
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+        mountPoints:
+          - mountPoint: application/listener
+            importName: DynamicGlobalFloatingActionButton
+          - mountPoint: global.floatingactionbutton/config
+            importName: NullComponent
+            config:
+              icon: github
+              label: 'Git'
+              toolTip: 'Github'
+             	to: https://github.com/redhat-developer/rhdh-plugins
+----
+
+== Floating action button parameters
+Use the parameters as shown in the following table to configure your floating action button plugin.
+
+.Floating action button parameters
+|===
+| Name | Description | Type | Default value | Required
+
+| `slot`
+| Position of the floating action button. Valid values: `PAGE_END`, `BOTTOM_LEFT`
+| `enum`
+| `PAGE_END`
+| No
+
+| `label`
+| Name of the floating action button
+| `String`
+| Not applicable
+| Yes
+
+| `icon`
+| Icon of the floating action button. Recommended to use filled icons from the link:https://fonts.google.com/icons[Material Design library].
+| `StringReact.ReactElement`
+| Not applicable
+| No
+
+| `showLabel`
+| Display of the abel next to your icon
+| `Boolean` 
+| Not applicable
+| No
+
+| `size`
+| Size of the floating action button
+| `small`, `medium`, `large`
+| `medium`
+| No
+
+| `color`
+| 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].
+| `default`, `error`, `info`, `inherit`, `primary`, `secondary`, `success`, `warning`
+| `default`
+| No
+
+| `onClick`
+| Performed action when selecting a floating action button
+| `React.MouseEventHandler`
+| Not applicable
+| No
+
+| `to`
+| Link that opens when selecting a floating action button
+| `String`
+| Not applicable
+| No
+
+| `toolTip`
+| Text that appears when hovering over a floating action button
+| `String`
+| Not applicable
+| No
+
+| `priority`
+| Order of the floating action buttons displayed in the submenu. A larger value means higher priority. 
+| `number`
+| Not applicable
+| No
+
+| `visibleOnPaths`
+| Display floating action button on the specified paths
+| `string[]`
+| Display floating action button on all paths
+| No
+
+| `excludeOnPaths`
+| Hide floating action button on the specified paths
+| `string[]`
+| Display floating action button on all paths
+| No
+
+|===
+
+[NOTE]
+====
+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.
+====

titles/customizing/master.adoc

@@ -23,6 +23,9 @@ include::assemblies/assembly-configuring-templates.adoc[leveloffset=+1]
 include::modules/customizing-the-learning-paths/proc-customize-rhdh-learning-paths.adoc[leveloffset=+1]
 
 
+include::assemblies/assembly-configuring-a-floating-action-button.adoc[leveloffset=+1]
+
+
 include::assemblies/assembly-configuring-techdocs.adoc[leveloffset=+1]