From 01c8d1c126dcd110e791c98f1d7df764a59e65a8 Mon Sep 17 00:00:00 2001 From: Debsmita Santra Date: Tue, 7 Jan 2025 13:55:06 +0530 Subject: [PATCH] fix(fab): update plugin readme (#246) --- .../.changeset/eleven-fireants-cheat.md | 5 ++++ .../global-floating-action-button/README.md | 27 ++++++++++++++++--- 2 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 workspaces/global-floating-action-button/.changeset/eleven-fireants-cheat.md diff --git a/workspaces/global-floating-action-button/.changeset/eleven-fireants-cheat.md b/workspaces/global-floating-action-button/.changeset/eleven-fireants-cheat.md new file mode 100644 index 000000000..e4a097eef --- /dev/null +++ b/workspaces/global-floating-action-button/.changeset/eleven-fireants-cheat.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch +--- + +update global floating action button plugin readme diff --git a/workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md b/workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md index 67b82e363..9063d2a50 100644 --- a/workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md +++ b/workspaces/global-floating-action-button/plugins/global-floating-action-button/README.md @@ -18,19 +18,19 @@ This plugin has been added to the example app in this workspace, meaning it can yarn workspace app add @red-hat-developer-hub/backstage-plugin-global-floating-action-button ``` -2. Add **Bulk import** Sidebar Item in `packages/app/src/components/Root/Root.tsx`: +2. Add **GlobalFloatingActionButton** component to `packages/app/src/components/Root/Root.tsx` with the desired actions you want to associate with your floating buttons: ```tsx title="packages/app/src/components/Root/Root.tsx" /* highlight-add-next-line */ import { - GlobalFloatingButton, + GlobalFloatingActionButton, Slot, } from '@red-hat-developer-hub/backstage-plugin-global-floating-action-button'; export const Root = ({ children }: PropsWithChildren<{}>) => ( ... /* highlight-add-start */ - ); ``` + +#### Floating Action Button Parameters + +| Name | Type | Description | Notes | +| ------------------ | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | +| **slot** | `enum` | The position where the fab will be placed. Valid values: `PAGE_END`, `BOTTOM_CENTER`. | [optional] default to `PAGE_END`. | +| **label** | `String` | A name for your action button. | required | +| **icon** | `String`
`React.ReactElement` | An icon for your floating button. | optional | +| **showLabel** | `Boolean` | To display the label next to your icon. | optional | +| **size** | `'small'`
`'medium'`
`'large'` | A name for your action button. | [optional] default to `'medium'` | +| **color** | `'default'`
`'error'`
`'info'`
`'inherit'`
`'primary'`
`'secondary'`
`'success'`
`'warning'` | The color of the component. It supports both default and custom theme colors, which can be added as shown in the [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). | [optional] default to `'default'`. | +| **onClick** | `React.MouseEventHandler` | the action to be performed on `onClick`. | optional | +| **to** | `String` | Specify an href if the action button should open a internal/external link. | optional | +| **toolTip** | `String` | The text to appear on hover. | optional | +| **priority** | `number` | When multiple sub-menu actions are displayed, the button can be prioritized to position either at the top or the bottom. | optional | +| **visibleOnPaths** | `string[]` | The action button will appear only on the specified paths and will remain hidden on all other paths. | [optional] default to displaying on all paths. | +| **excludeOnPaths** | `string[]` | The action button will be hidden only on the specified paths and will appear on all other paths. | [optional] default to displaying on all paths. | + +**NOTE** + +If multiple floating button actions are assigned to the same `Slot`, they will appear as sub-menu options within the floating button.