Skip to content

Commit

Permalink
fix(fab): update plugin readme (#246)
Browse files Browse the repository at this point in the history
  • Loading branch information
@debsmita1
debsmita1 authored Jan 7, 2025
1 parent d3f5940 commit 01c8d1c
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 3 deletions.
5 changes: 5 additions & 0 deletions workspaces/global-floating-action-button/.changeset/eleven-fireants-cheat.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@red-hat-developer-hub/backstage-plugin-global-floating-action-button': patch
---

update global floating action button plugin readme
27 changes: 24 additions & 3 deletions ...s/global-floating-action-button/plugins/global-floating-action-button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<{}>) => (
<SidebarPage>
... /* highlight-add-start */
<GlobalFloatingButton
<GlobalFloatingActionButton
floatingButtons={[
{
color: 'success',
Expand All @@ -52,3 +52,24 @@ This plugin has been added to the example app in this workspace, meaning it can
</SidebarPage>
);
```

#### 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`<br>`React.ReactElement` | An icon for your floating button. | optional |
| **showLabel** | `Boolean` | To display the label next to your icon. | optional |
| **size** | `'small'`<br>`'medium'`<br>`'large'` | A name for your action button. | [optional] default to `'medium'` |
| **color** | `'default'`<br>`'error'`<br>`'info'`<br>`'inherit'`<br>`'primary'`<br>`'secondary'`<br>`'success'`<br>`'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.

0 comments on commit 01c8d1c

Please sign in to comment.