chore: wip ToggleButton/ToggleButtonGroup

Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>

docs-ui/src/content/toggle-button-group.mdx

@@ -0,0 +1,115 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+  toggleButtonGroupPropDefs,
+  toggleButtonGroupUsageSnippet,
+  toggleButtonGroupSingleSnippet,
+  toggleButtonGroupMultipleSnippet,
+  toggleButtonGroupVerticalSnippet,
+  toggleButtonGroupDisabledSnippet,
+  toggleButtonGroupDisallowEmptySnippet,
+  toggleButtonGroupIconsSnippet,
+  toggleButtonGroupIconsOnlySnippet,
+} from './toggle-button-group.props';
+import { ToggleButtonGroupSnippet } from '@/snippets/stories-snippets';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ToggleButtonGroupDefinition } from '../utils/definitions';
+
+<PageTitle
+  title="ToggleButtonGroup"
+  description="A grouping container for related ToggleButtons supporting single or multiple selection."
+/>
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<ToggleButtonGroupSnippet story="SingleSelection" />}
+  code={toggleButtonGroupSingleSnippet}
+/>
+
+## Usage
+
+<CodeBlock code={toggleButtonGroupUsageSnippet} />
+
+## API reference
+
+<PropsTable data={toggleButtonGroupPropDefs} />
+
+## Examples
+
+### Single Selection
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="SingleSelection" />}
+  code={toggleButtonGroupSingleSnippet}
+/>
+
+### Multiple Selection
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="MultipleSelection" />}
+  code={toggleButtonGroupMultipleSnippet}
+/>
+
+### Icons and Text
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="WithIcons" />}
+  code={toggleButtonGroupIconsSnippet}
+/>
+
+### Icons Only
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="IconsOnly" />}
+  code={toggleButtonGroupIconsOnlySnippet}
+/>
+
+### Disallow Empty Selection
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="DisallowEmptySelection" />}
+  code={toggleButtonGroupDisallowEmptySnippet}
+/>
+
+### Vertical Orientation
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="Orientation" />}
+  code={toggleButtonGroupVerticalSnippet}
+/>
+
+### Disabled
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonGroupSnippet story="DisabledGroup" />}
+  code={toggleButtonGroupDisabledSnippet}
+/>
+
+<Theming definition={ToggleButtonGroupDefinition} />
+
+<ChangelogComponent component="toggle-button-group" />

docs-ui/src/content/toggle-button-group.props.ts

@@ -0,0 +1,75 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  type PropDef,
+} from '@/utils/propDefs';
+
+export const toggleButtonGroupPropDefs: Record<string, PropDef> = {
+  selectionMode: {
+    type: 'enum',
+    values: ['single', 'multiple'],
+    default: 'single',
+  },
+  orientation: {
+    type: 'enum',
+    values: ['horizontal', 'vertical'],
+    default: 'horizontal',
+    responsive: true,
+  },
+  selectedKeys: { type: 'enum', values: ['Iterable<Key>'] },
+  defaultSelectedKeys: { type: 'enum', values: ['Iterable<Key>'] },
+  onSelectionChange: { type: 'enum', values: ['(keys) => void'] },
+  isDisabled: { type: 'boolean', default: 'false' },
+  disallowEmptySelection: { type: 'boolean', default: 'false' },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const toggleButtonGroupUsageSnippet = `import { ToggleButtonGroup, ToggleButton } from '@backstage/ui';
+
+<ToggleButtonGroup selectionMode="single">
+  <ToggleButton id="dogs">Dogs</ToggleButton>
+  <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>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupMultipleSnippet = `<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['frontend']}>
+  <ToggleButton id="frontend">Frontend</ToggleButton>
+  <ToggleButton id="backend">Backend</ToggleButton>
+  <ToggleButton id="platform">Platform</ToggleButton>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupVerticalSnippet = `<ToggleButtonGroup selectionMode="single" orientation="vertical">
+  <ToggleButton id="low">Low</ToggleButton>
+  <ToggleButton id="medium">Medium</ToggleButton>
+  <ToggleButton id="high">High</ToggleButton>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupDisabledSnippet = `<ToggleButtonGroup selectionMode="single" isDisabled>
+  <ToggleButton id="cat">Cat</ToggleButton>
+  <ToggleButton id="dog">Dog</ToggleButton>
+  <ToggleButton id="bird">Bird</ToggleButton>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupDisallowEmptySnippet = `<ToggleButtonGroup selectionMode="single" disallowEmptySelection defaultSelectedKeys={['one']}>
+  <ToggleButton id="one">One</ToggleButton>
+  <ToggleButton id="two">Two</ToggleButton>
+  <ToggleButton id="three">Three</ToggleButton>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupIconsSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['cloud']}>
+  <ToggleButton id="cloud" iconStart="cloud">Cloud</ToggleButton>
+  <ToggleButton id="starred" iconStart="starFill">Starred</ToggleButton>
+  <ToggleButton id="next" iconEnd="arrowRight">Next</ToggleButton>
+</ToggleButtonGroup>`;
+
+export const toggleButtonGroupIconsOnlySnippet = `<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
+  <ToggleButton id="cloud" aria-label="Cloud" iconStart="cloud" />
+  <ToggleButton id="star" aria-label="Star" iconStart="starLine" />
+  <ToggleButton id="next" aria-label="Next" iconEnd="arrowRight" />
+</ToggleButtonGroup>`;

docs-ui/src/content/toggle-button.mdx

@@ -0,0 +1,94 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ToggleButtonSnippet } from '@/snippets/stories-snippets';
+import {
+  toggleButtonPropDefs,
+  toggleButtonUsageSnippet,
+  toggleButtonVariantsSnippet,
+  toggleButtonSizesSnippet,
+  toggleButtonIconsSnippet,
+  toggleButtonDisabledSnippet,
+  toggleButtonControlledSnippet,
+} from './toggle-button.props';
+import { PageTitle } from '@/components/PageTitle';
+import { Theming } from '@/components/Theming';
+import { ChangelogComponent } from '@/components/ChangelogComponent';
+import { ToggleButtonDefinition } from '../utils/definitions';
+
+<PageTitle
+  title="ToggleButton"
+  description="A button that toggles between selected and unselected states."
+/>
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<ToggleButtonSnippet story="Variants" />}
+  code={toggleButtonVariantsSnippet}
+/>
+
+## Usage
+
+<CodeBlock code={toggleButtonUsageSnippet} />
+
+## API reference
+
+<PropsTable data={toggleButtonPropDefs} />
+
+## Examples
+
+### Variants
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="Variants" />}
+  code={toggleButtonVariantsSnippet}
+/>
+
+### Sizes
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="Sizes" />}
+  code={toggleButtonSizesSnippet}
+/>
+
+### With Icons
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="WithIcons" />}
+  code={toggleButtonIconsSnippet}
+/>
+
+### Disabled
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="Disabled" />}
+  code={toggleButtonDisabledSnippet}
+/>
+
+### Controlled
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ToggleButtonSnippet story="Controlled" />}
+  code={toggleButtonControlledSnippet}
+/>
+
+<Theming definition={ToggleButtonDefinition} />
+
+<ChangelogComponent component="toggle-button" />
+

docs-ui/src/content/toggle-button.props.ts

@@ -0,0 +1,59 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  type PropDef,
+} 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'],
+    default: 'small',
+    responsive: true,
+  },
+  iconStart: { type: 'enum', values: ['ReactNode'] },
+  iconEnd: { type: 'enum', values: ['ReactNode'] },
+  isSelected: { type: 'boolean' },
+  defaultSelected: { type: 'boolean' },
+  onChange: { type: 'enum', values: ['(isSelected: boolean) => void'] },
+  isDisabled: { type: 'boolean', default: 'false' },
+  children: { type: 'enum', values: ['ReactNode'] },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const toggleButtonUsageSnippet = `import { ToggleButton } from '@backstage/ui';
+
+<ToggleButton>Toggle</ToggleButton>`;
+
+export const toggleButtonVariantsSnippet = `<Flex align="center">
+  <ToggleButton variant="primary">Primary</ToggleButton>
+  <ToggleButton variant="secondary">Secondary</ToggleButton>
+</Flex>`;
+
+export const toggleButtonSizesSnippet = `<Flex align="center">
+  <ToggleButton size="small">Small</ToggleButton>
+  <ToggleButton size="medium">Medium</ToggleButton>
+</Flex>`;
+
+export const toggleButtonIconsSnippet = `<Flex align="center">
+  <ToggleButton iconStart="star">Favorite</ToggleButton>
+  <ToggleButton iconEnd="check">Confirm</ToggleButton>
+</Flex>`;
+
+export const toggleButtonDisabledSnippet = `<Flex align="center">
+  <ToggleButton isDisabled>Disabled</ToggleButton>
+  <ToggleButton defaultSelected isDisabled>Selected</ToggleButton>
+</Flex>`;
+
+export const toggleButtonControlledSnippet = `const [selected, setSelected] = useState(false);
+
+<ToggleButton isSelected={selected} onChange={setSelected}>
+  {selected ? 'On' : 'Off'}
+</ToggleButton>`;

docs-ui/src/snippets/stories-snippets.tsx

@@ -30,6 +30,8 @@ import * as TableStories from '../../../packages/ui/src/components/Table/stories
 import * as TagGroupStories from '../../../packages/ui/src/components/TagGroup/TagGroup.stories';
 import * as PasswordFieldStories from '../../../packages/ui/src/components/PasswordField/PasswordField.stories';
 import * as VisuallyHiddenStories from '../../../packages/ui/src/components/VisuallyHidden/VisuallyHidden.stories';
+import * as ToggleButtonStories from '../../../packages/ui/src/components/ToggleButton/ToggleButton.stories';
+import * as ToggleButtonGroupStories from '../../../packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories';
 
 // Helper function to create snippet components
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -75,6 +77,10 @@ export const HeaderSnippet = createSnippetComponent(HeaderStories);
 export const HeaderPageSnippet = createSnippetComponent(HeaderPageStories);
 export const TableSnippet = createSnippetComponent(TableStories);
 export const TagGroupSnippet = createSnippetComponent(TagGroupStories);
+export const ToggleButtonSnippet = createSnippetComponent(ToggleButtonStories);
+export const ToggleButtonGroupSnippet = createSnippetComponent(
+  ToggleButtonGroupStories,
+);
 export const VisuallyHiddenSnippet = createSnippetComponent(
   VisuallyHiddenStories,
 );

docs-ui/src/utils/data.ts

@@ -116,6 +116,14 @@ export const components: Page[] = [
     title: 'TextField',
     slug: 'text-field',
   },
+  {
+    title: 'ToggleButton',
+    slug: 'toggle-button',
+  },
+  {
+    title: 'ToggleButtonGroup',
+    slug: 'toggle-button-group',
+  },
   {
     title: 'Tooltip',
     slug: 'tooltip',