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

chore: support render function, document it, remove now unused POC context

Browse Source 
Signed-off-by: Gabriel Dugny <gabriel.dugny@believe.com>
This commit is contained in:
Gabriel Dugny
2026-01-10 14:05:22 +01:00
parent 44530400dc
commit 6921b2c824
9 changed files with 300 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs-ui/src/content/toggle-button-group.props.ts
+25 -11
View File
@@ -30,6 +30,7 @@ export const toggleButtonGroupUsageSnippet = `import { ToggleButtonGroup, Toggle
<ToggleButtonGroup selectionMode="single">
<ToggleButton id="dogs">Dogs</ToggleButton>
<ToggleButton id="cats">Cats</ToggleButton>
<ToggleButton id="birds">Birds</ToggleButton>
</ToggleButtonGroup>`;
export const toggleButtonGroupSingleSnippet = `<ToggleButtonGroup selectionMode="single" defaultSelectedKeys={['dogs']}>
@@ -45,9 +46,9 @@ export const toggleButtonGroupMultipleSnippet = `<ToggleButtonGroup selectionMod
</ToggleButtonGroup>`;
export const toggleButtonGroupVerticalSnippet = `<ToggleButtonGroup selectionMode="single" orientation="vertical">
<ToggleButton id="low">Low</ToggleButton>
<ToggleButton id="medium">Medium</ToggleButton>
<ToggleButton id="high">High</ToggleButton>
<ToggleButton id="morning">Morning</ToggleButton>
<ToggleButton id="afternoon">Afternoon</ToggleButton>
<ToggleButton id="evening">Evening</ToggleButton>
</ToggleButtonGroup>`;
export const toggleButtonGroupDisabledSnippet = `<ToggleButtonGroup selectionMode="single" isDisabled>
@@ -62,16 +63,29 @@ export const toggleButtonGroupDisallowEmptySnippet = `<ToggleButtonGroup selecti
<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>
export const toggleButtonGroupIconsSnippet = `import { RiCloudLine, RiStarFill, RiStarLine, RiArrowRightSLine } from '@remixicon/react';
<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
<ToggleButton id="cloud" aria-label="Cloud" iconStart={<RiCloudLine />} />
<ToggleButton
id="starred"
aria-label="Starred"
iconStart={<RiStarFill />}
/>
<ToggleButton id="star" iconStart={<RiStarLine />}>
Star
</ToggleButton>
<ToggleButton id="next" iconEnd={<RiArrowRightSLine />}>
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" />
export const toggleButtonGroupIconsOnlySnippet = `import { RiCloudLine, RiStarLine, RiArrowRightSLine } from '@remixicon/react';
<ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={['cloud']}>
<ToggleButton id="cloud" iconStart={<RiCloudLine />} />
<ToggleButton id="star" iconStart={<RiStarLine />} />
<ToggleButton id="next" iconEnd={<RiArrowRightSLine />} />
</ToggleButtonGroup>`;
export const toggleButtonGroupSurfacesSnippet = `<Flex direction="column" gap="4">
docs-ui/src/content/toggle-button.mdx
+13
View File
@@ -10,6 +10,7 @@ import {
toggleButtonIconsSnippet,
toggleButtonDisabledSnippet,
toggleButtonControlledSnippet,
toggleButtonFunctionChildrenSnippet,
} from './toggle-button.props';
import { PageTitle } from '@/components/PageTitle';
import { Theming } from '@/components/Theming';
@@ -88,6 +89,18 @@ import { ToggleButtonDefinition } from '../utils/definitions';
code={toggleButtonControlledSnippet}
/>
### Dynamic Content with Function Children
The `children` prop can be a function that receives render props, allowing you to dynamically customize the button content based on component state (such as `isSelected`, `isDisabled`, `isHovered`, etc.).
<Snippet
align="center"
py={4}
open
preview={<ToggleButtonSnippet story="DynamicContent" />}
code={toggleButtonFunctionChildrenSnippet}
/>
<Theming definition={ToggleButtonDefinition} />
<ChangelogComponent component="toggle-button" />
docs-ui/src/content/toggle-button.props.ts
+115 -7
View File
@@ -23,7 +23,12 @@ export const toggleButtonPropDefs: Record<string, PropDef> = {
defaultSelected: { type: 'boolean' },
onChange: { type: 'enum', values: ['(isSelected: boolean) => void'] },
isDisabled: { type: 'boolean', default: 'false' },
children: { type: 'enum', values: ['ReactNode'] },
children: {
type: 'enum',
values: ['ReactNode', '(values: ToggleButtonRenderProps) => ReactNode'],
description:
'The children of the component. A function may be provided to alter the children based on component state (such as `isSelected`, `isDisabled`, `isHovered`, etc.).',
},
...classNamePropDefs,
...stylePropDefs,
};
@@ -70,9 +75,12 @@ export const toggleButtonSizesSnippet = `<Flex align="center">
<ToggleButton size="medium">Medium</ToggleButton>
</Flex>`;
export const toggleButtonIconsSnippet = `<Flex align="center">
<ToggleButton iconStart="star">Favorite</ToggleButton>
<ToggleButton iconEnd="check">Confirm</ToggleButton>
export const toggleButtonIconsSnippet = `import { RiStarLine, RiStarFill, RiCheckLine } from '@remixicon/react';
<Flex align="center">
<ToggleButton iconStart={<RiStarLine />}>Favorite</ToggleButton>
<ToggleButton iconStart={<RiStarFill />} defaultSelected>Starred</ToggleButton>
<ToggleButton iconEnd={<RiCheckLine />}>Confirm</ToggleButton>
</Flex>`;
export const toggleButtonDisabledSnippet = `<Flex align="center">
@@ -80,8 +88,108 @@ export const toggleButtonDisabledSnippet = `<Flex align="center">
<ToggleButton defaultSelected isDisabled>Selected</ToggleButton>
</Flex>`;
export const toggleButtonControlledSnippet = `const [selected, setSelected] = useState(false);
export const toggleButtonControlledSnippet = `import { useState } from 'react';
import { RiStarFill, RiStarLine } from '@remixicon/react';
<ToggleButton isSelected={selected} onChange={setSelected}>
{selected ? 'On' : 'Off'}
const [selected, setSelected] = useState(false);
<ToggleButton
isSelected={selected}
onChange={setSelected}
iconStart={selected ? <RiStarFill /> : <RiStarLine />}
>
{selected ? 'Starred' : 'Not starred'}
</ToggleButton>`;
export const toggleButtonFunctionChildrenSnippet = `import { RiStarFill, RiStarLine } from '@remixicon/react';
<Flex direction="column" gap="4">
<Flex direction="column" gap="2">
<Text weight="bold">Example 1: Selection State</Text>
<Flex align="center" gap="2">
<ToggleButton defaultSelected>
{({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
</ToggleButton>
<ToggleButton>
{({ isSelected }) => (isSelected ? '✓ Selected' : 'Not Selected')}
</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="2">
<Text weight="bold">Example 2: Multiple States</Text>
<Flex align="center" gap="2">
<ToggleButton defaultSelected>
{({ isSelected, isHovered }) => {
const states = [];
if (isSelected) states.push('on');
else states.push('off');
if (isHovered) states.push('hovered');
return \`Email (\${states.join(', ')})\`;
}}
</ToggleButton>
<ToggleButton>
{({ isSelected, isHovered }) => {
const states = [];
if (isSelected) states.push('on');
else states.push('off');
if (isHovered) states.push('hovered');
return \`Push (\${states.join(', ')})\`;
}}
</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="2">
<Text weight="bold">Example 3: Conditional Icons</Text>
<Flex align="center" gap="2">
<ToggleButton>
{({ isSelected }) => (
<>
{isSelected ? <RiStarFill /> : <RiStarLine />}
<span>{isSelected ? 'Starred' : 'Star'}</span>
</>
)}
</ToggleButton>
</Flex>
</Flex>
<Flex direction="column" gap="2">
<Text weight="bold">Example 4: Status Indicators</Text>
<Flex align="center" gap="2">
<ToggleButton defaultSelected>
{({ isSelected }) => (
<Flex align="center" gap="2">
<span
style={{
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: isSelected
? 'var(--bui-fg-success)'
: 'var(--bui-fg-secondary)',
}}
/>
<span>Active</span>
</Flex>
)}
</ToggleButton>
<ToggleButton>
{({ isSelected }) => (
<Flex align="center" gap="2">
<span
style={{
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: isSelected
? 'var(--bui-fg-danger)'
: 'var(--bui-fg-secondary)',
}}
/>
<span>Inactive</span>
</Flex>
)}
</ToggleButton>
</Flex>
</Flex>
</Flex>`;