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

chore: remove variants for now

Browse Source 
Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
This commit is contained in:
Gabriel Dugny
2026-01-09 18:30:54 +01:00
parent 92562d14af
commit 9b26bad524
13 changed files with 107 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/content/toggle-button-group.mdx
+4 -4
View File
@@ -11,7 +11,7 @@ import {
toggleButtonGroupDisallowEmptySnippet,
toggleButtonGroupIconsSnippet,
toggleButtonGroupIconsOnlySnippet,
toggleButtonGroupVariantsSnippet,
toggleButtonGroupSurfacesSnippet,
} from './toggle-button-group.props';
import { ToggleButtonGroupSnippet } from '@/snippets/stories-snippets';
import { PageTitle } from '@/components/PageTitle';
@@ -41,14 +41,14 @@ import { ToggleButtonGroupDefinition } from '../utils/definitions';
## Examples
### Variants
### Surfaces
<Snippet
align="center"
py={4}
open
preview={<ToggleButtonGroupSnippet story="Variants" />}
code={toggleButtonGroupVariantsSnippet}
preview={<ToggleButtonGroupSnippet story="Surfaces" />}
code={toggleButtonGroupSurfacesSnippet}
/>
### Single Selection
docs-ui/src/content/toggle-button-group.props.ts
+16 -41
View File
@@ -74,19 +74,14 @@ export const toggleButtonGroupIconsOnlySnippet = `<ToggleButtonGroup selectionMo
<ToggleButton id="next" aria-label="Next" iconEnd="arrowRight" />
</ToggleButtonGroup>`;
export const toggleButtonGroupVariantsSnippet = `<Flex direction="column" gap="4">
export const toggleButtonGroupSurfacesSnippet = `<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>
<ToggleButton id="option1">Option 1</ToggleButton>
<ToggleButton id="option2">Option 2</ToggleButton>
<ToggleButton id="option3">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
@@ -94,14 +89,9 @@ export const toggleButtonGroupVariantsSnippet = `<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>
<ToggleButton id="option1">Option 1</ToggleButton>
<ToggleButton id="option2">Option 2</ToggleButton>
<ToggleButton id="option3">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
@@ -109,14 +99,9 @@ export const toggleButtonGroupVariantsSnippet = `<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>
<ToggleButton id="option1">Option 1</ToggleButton>
<ToggleButton id="option2">Option 2</ToggleButton>
<ToggleButton id="option3">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
@@ -124,14 +109,9 @@ export const toggleButtonGroupVariantsSnippet = `<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>
<ToggleButton id="option1">Option 1</ToggleButton>
<ToggleButton id="option2">Option 2</ToggleButton>
<ToggleButton id="option3">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
@@ -139,14 +119,9 @@ export const toggleButtonGroupVariantsSnippet = `<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>
<ToggleButton id="option1">Option 1</ToggleButton>
<ToggleButton id="option2">Option 2</ToggleButton>
<ToggleButton id="option3">Option 3</ToggleButton>
</ToggleButtonGroup>
</Flex>
</Flex>
docs-ui/src/content/toggle-button.mdx
+6 -6
View File
@@ -5,7 +5,7 @@ import { ToggleButtonSnippet } from '@/snippets/stories-snippets';
import {
toggleButtonPropDefs,
toggleButtonUsageSnippet,
toggleButtonVariantsSnippet,
toggleButtonSurfacesSnippet,
toggleButtonSizesSnippet,
toggleButtonIconsSnippet,
toggleButtonDisabledSnippet,
@@ -24,8 +24,8 @@ import { ToggleButtonDefinition } from '../utils/definitions';
<Snippet
align="center"
py={4}
preview={<ToggleButtonSnippet story="Variants" />}
code={toggleButtonVariantsSnippet}
preview={<ToggleButtonSnippet story="Default" />}
code={toggleButtonUsageSnippet}
/>
## Usage
@@ -38,14 +38,14 @@ import { ToggleButtonDefinition } from '../utils/definitions';
## Examples
### Variants
### Surfaces
<Snippet
align="center"
py={4}
open
preview={<ToggleButtonSnippet story="Variants" />}
code={toggleButtonVariantsSnippet}
preview={<ToggleButtonSnippet story="Surfaces" />}
code={toggleButtonSurfacesSnippet}
/>
### Sizes
docs-ui/src/content/toggle-button.props.ts
+6 -17
View File
@@ -5,12 +5,6 @@ import {
} from '@/utils/propDefs';
export const toggleButtonPropDefs: Record<string, PropDef> = {
variant: {
type: 'enum',
values: ['primary', 'secondary'],
default: 'primary',
responsive: true,
},
size: {
type: 'enum',
values: ['small', 'medium'],
@@ -38,40 +32,35 @@ export const toggleButtonUsageSnippet = `import { ToggleButton } from '@backstag
<ToggleButton>Toggle</ToggleButton>`;
export const toggleButtonVariantsSnippet = `<Flex direction="column" gap="4">
export const toggleButtonSurfacesSnippet = `<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>
<ToggleButton>Toggle</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>
<ToggleButton>Toggle</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>
<ToggleButton>Toggle</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>
<ToggleButton>Toggle</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>
<ToggleButton>Toggle</ToggleButton>
</Flex>
</Flex>
</Flex>`;