paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

docs: Add surface examples to the ToggleButton/ToggleButtonGroups

Browse Source 
Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
This commit is contained in:
Gabriel Dugny
2026-01-09 17:48:58 +01:00
parent 7d777922af
commit 92562d14af
5 changed files with 348 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/content/toggle-button-group.mdx
+11
View File
@@ -11,6 +11,7 @@ import {
toggleButtonGroupDisallowEmptySnippet,
toggleButtonGroupIconsSnippet,
toggleButtonGroupIconsOnlySnippet,
toggleButtonGroupVariantsSnippet,
} from './toggle-button-group.props';
import { ToggleButtonGroupSnippet } from '@/snippets/stories-snippets';
import { PageTitle } from '@/components/PageTitle';
@@ -40,6 +41,16 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
## Examples
### Variants
<Snippet
align="center"
py={4}
open
preview={<ToggleButtonGroupSnippet story="Variants" />}
code={toggleButtonGroupVariantsSnippet}
/>
### Single Selection
<Snippet
docs-ui/src/content/toggle-button-group.props.ts
+82 -4
View File
@@ -32,10 +32,10 @@ export const toggleButtonGroupUsageSnippet = `import { ToggleButtonGroup, Toggle
<ToggleButton id="cats">Cats</ToggleButton>
</ToggleButtonGroup>`;
export const toggleButtonGroupSingleSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['apples']}>
<ToggleButton id="apples">Apples</ToggleButton>
<ToggleButton id="oranges">Oranges</ToggleButton>
<ToggleButton id="bananas">Bananas</ToggleButton>
export const toggleButtonGroupSingleSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['dogs']}>
<ToggleButton id="dogs">Dogs</ToggleButton>
<ToggleButton id="cat">Cats</ToggleButton>
<ToggleButton id="bird">Birds</ToggleButton>
</ToggleButtonGroup>`;
export const toggleButtonGroupMultipleSnippet = `<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['frontend']}>
@@ -73,3 +73,81 @@ export const toggleButtonGroupIconsOnlySnippet = `<ToggleButtonGroup selectionMo
<ToggleButton id="star" aria-label="Star" iconStart="starLine" />
<ToggleButton id="next" aria-label="Next" iconEnd="arrowRight" />
</ToggleButtonGroup>`;
export const toggleButtonGroupVariantsSnippet = `<Flex direction="column" gap="4">
<Flex direction="column" gap="4">
<Text>Default</Text>
<Flex align="center" p="4" gap="4">
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="primary">Primary 1</ToggleButton>
<ToggleButton id="option2" variant="primary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="primary">Option 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="secondary">Secondary 1</ToggleButton>
<ToggleButton id="option2" variant="secondary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="secondary">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Flex align="center" surface="0" p="4" gap="4">
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="primary">Primary 1</ToggleButton>
<ToggleButton id="option2" variant="primary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="primary">Option 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="secondary">Secondary 1</ToggleButton>
<ToggleButton id="option2" variant="secondary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="secondary">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Flex align="center" surface="1" p="4" gap="4">
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="primary">Primary 1</ToggleButton>
<ToggleButton id="option2" variant="primary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="primary">Option 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="secondary">Secondary 1</ToggleButton>
<ToggleButton id="option2" variant="secondary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="secondary">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4" gap="4">
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="primary">Primary 1</ToggleButton>
<ToggleButton id="option2" variant="primary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="primary">Option 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="secondary">Secondary 1</ToggleButton>
<ToggleButton id="option2" variant="secondary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="secondary">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4" gap="4">
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="primary">Primary 1</ToggleButton>
<ToggleButton id="option2" variant="primary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="primary">Option 3</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['option1']}>
<ToggleButton id="option1" variant="secondary">Secondary 1</ToggleButton>
<ToggleButton id="option2" variant="secondary">Option 2</ToggleButton>
<ToggleButton id="option3" variant="secondary">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
</Flex>`;
docs-ui/src/content/toggle-button.props.ts
+36 -3
View File
@@ -38,9 +38,42 @@ export const toggleButtonUsageSnippet = `import { ToggleButton } from '@backstag
<ToggleButton>Toggle</ToggleButton>`;
export const toggleButtonVariantsSnippet = `<Flex align="center">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
export const toggleButtonVariantsSnippet = `<Flex direction="column" gap="4">
<Flex direction="column" gap="4">
<Text>Default</Text>
<Flex align="center" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Flex align="center" surface="0" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Flex align="center" surface="1" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
</Flex>`;
export const toggleButtonSizesSnippet = `<Flex align="center">
packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx
+36 -3
View File
@@ -62,9 +62,42 @@ export const Variants = meta.story({
},
},
render: () => (
<Flex align="center">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
<Flex direction="column" gap="4">
<Flex direction="column" gap="4">
<Text>Default</Text>
<Flex align="center" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Flex align="center" surface="0" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Flex align="center" surface="1" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4">
<ToggleButton variant="primary">Primary</ToggleButton>
<ToggleButton variant="secondary">Secondary</ToggleButton>
</Flex>
</Flex>
</Flex>
),
});
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
+183
View File
@@ -72,6 +72,189 @@ export const MultipleSelection = meta.story({
),
});
export const Variants = meta.story({
args: {
selectionMode: 'single',
defaultSelectedKeys: ['option1'],
},
parameters: {
argTypes: {
selectionMode: {
control: false,
},
},
},
render: () => (
<Flex direction="column" gap="4">
<Flex direction="column" gap="4">
<Text>Default</Text>
<Flex align="center" p="4" gap="4">
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="primary">
Primary 1
</ToggleButton>
<ToggleButton id="option2" variant="primary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="primary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="secondary">
Secondary 1
</ToggleButton>
<ToggleButton id="option2" variant="secondary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="secondary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 0</Text>
<Flex align="center" surface="0" p="4" gap="4">
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="primary">
Primary 1
</ToggleButton>
<ToggleButton id="option2" variant="primary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="primary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="secondary">
Secondary 1
</ToggleButton>
<ToggleButton id="option2" variant="secondary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="secondary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 1</Text>
<Flex align="center" surface="1" p="4" gap="4">
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="primary">
Primary 1
</ToggleButton>
<ToggleButton id="option2" variant="primary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="primary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="secondary">
Secondary 1
</ToggleButton>
<ToggleButton id="option2" variant="secondary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="secondary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 2</Text>
<Flex align="center" surface="2" p="4" gap="4">
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="primary">
Primary 1
</ToggleButton>
<ToggleButton id="option2" variant="primary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="primary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="secondary">
Secondary 1
</ToggleButton>
<ToggleButton id="option2" variant="secondary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="secondary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
<Flex direction="column" gap="4">
<Text>On Surface 3</Text>
<Flex align="center" surface="3" p="4" gap="4">
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="primary">
Primary 1
</ToggleButton>
<ToggleButton id="option2" variant="primary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="primary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
selectionMode="single"
defaultSelectedKeys={['option1']}
>
<ToggleButton id="option1" variant="secondary">
Secondary 1
</ToggleButton>
<ToggleButton id="option2" variant="secondary">
Option 2
</ToggleButton>
<ToggleButton id="option3" variant="secondary">
Option 3
</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
</Flex>
),
});
export const DisabledGroup = meta.story({
args: {
selectionMode: 'single',