proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc (#1181)

Co-authored-by: GitHub Actions <[email protected]>

Author: openshift-cherrypick-robot

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

@@ -5,4 +5,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.
 
-include::modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc[leveloffset=+1]
+include::modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc[leveloffset=+1]
+
+include::modules/configuring-a-floating-action-button/ref-floating-action-button-parameters.adoc[leveloffset=+1]

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

@@ -11,14 +11,14 @@ You must have sufficient permissions as a platform engineer.
 
 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: 
+* 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]
 ----
 - package: ./dynamic-plugins/dist/red-hat-developer-hub-backstage-plugin-bulk-import
   disabled: false
-  pluginConfig:  
+  pluginConfig:
     dynamicPlugins:
       frontend:
         red-hat-developer-hub.backstage-plugin-bulk-import:
@@ -206,90 +206,4 @@ To configure a floating action button as a dynamic plugin, complete any of the f
                 icon: bulkImportIcon
                 text: Bulk import
 ----
-<1> (Required) The import name with an associated component to the mount point.
-
-== 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]. 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>`
-| `String`, `React.ReactElement`, `SVG image icon`, `HTML image icon`
-| Not applicable
-| No
-
-| `showLabel`
-| Display of the label 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` value, the floating buttons are displayed as submenu options within the main floating action button.
-====
+<1> (Required) The import name with an associated component to the mount point.

modules/configuring-a-floating-action-button/ref-floating-action-button-parameters.adoc

@@ -0,0 +1,88 @@
+:_mod-docs-content-type: PROCEDURE
+[id="ref-floating-action-button-parameters_{context}"]
+= 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]. 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>`
+| `String`, `React.ReactElement`, `SVG image icon`, `HTML image icon`
+| Not applicable
+| No
+
+| `showLabel`
+| Display of the label 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` value, the floating buttons are displayed as submenu options within the main floating action button.
+====