paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 31 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>`;
packages/ui/src/components/ToggleButton/ToggleButton.module.css
+19 -58
View File
@@ -33,72 +33,32 @@
cursor: pointer;
transition: background-color 150ms ease, box-shadow 150ms ease,
color 150ms ease, transform 100ms ease;
}
.bui-ToggleButton[data-variant='secondary'] {
background-color: var(--bui-bg-neutral-on-surface-0);
color: var(--bui-fg-primary);
box-shadow: none;
&[data-hovered]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-0-hover);
&[data-selected],
&[data-pressed] {
background: var(--bui-bg-solid);
color: var(--bui-fg-solid);
}
&[data-pressed]:not([data-disabled]),
&[data-selected]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-0-pressed);
&:not([data-selected])[data-hovered] {
background: var(--bui-bg-surface-2);
}
&[data-on-surface='1'] {
background-color: var(--bui-bg-neutral-on-surface-1);
&[data-hovered]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-1-hover);
}
&[data-pressed]:not([data-disabled]),
&[data-selected]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-1-pressed);
}
&[data-disabled] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
color: var(--bui-fg-disabled);
}
&[data-on-surface='2'] {
background-color: var(--bui-bg-neutral-on-surface-2);
&[data-hovered]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-2-hover);
}
&[data-pressed]:not([data-disabled]),
&[data-selected]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-2-pressed);
}
&[data-disabled][data-hovered] {
background: var(--bui-bg-neutral-on-surface-0-disabled);
}
&[data-on-surface='3'] {
background-color: var(--bui-bg-neutral-on-surface-3);
&[data-hovered]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-3-hover);
}
&[data-pressed]:not([data-disabled]),
&[data-selected]:not([data-disabled]) {
background-color: var(--bui-bg-neutral-on-surface-3-pressed);
}
&[data-disabled][data-selected] {
background: var(--bui-bg-solid-disabled);
color: var(--bui-fg-disabled);
}
}
.bui-ToggleButton[data-variant='primary'][data-selected],
.bui-ToggleButton[data-variant='primary'][data-pressed] {
background: var(--bui-bg-solid);
color: var(--bui-fg-solid);
}
.bui-ToggleButton[data-variant='primary']:not([data-selected])[data-hovered] {
background: var(--bui-bg-surface-2);
}
.bui-ToggleButton[data-focus-visible] {
outline: none;
box-shadow: inset 0 0 0 2px var(--bui-ring);
@@ -106,15 +66,16 @@
.bui-ToggleButton[data-disabled] {
cursor: not-allowed;
color: var(--bui-fg-disabled);
background: var(--bui-bg-neutral-on-surface-0-disabled);
box-shadow: inset 0 0 0 1px var(--bui-border-disabled);
}
.bui-ToggleButton[data-pressed]:not([data-disabled]) {
.bui-ToggleButton[data-pressed] {
transform: scale(0.98);
}
.bui-ToggleButton[data-disabled][data-pressed] {
transform: none;
}
.bui-ToggleButton[data-size='small'] {
height: 2rem;
font-size: var(--bui-font-size-3);
packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx
+9 -23
View File
@@ -37,10 +37,6 @@ const meta = preview.meta({
control: 'select',
options: ['small', 'medium'],
},
variant: {
control: 'select',
options: ['primary', 'secondary'],
},
},
});
@@ -50,13 +46,13 @@ export const Default = meta.story({
},
});
export const Variants = meta.story({
export const Surfaces = meta.story({
args: {
children: 'Toggle',
},
parameters: {
argTypes: {
variant: {
size: {
control: false,
},
},
@@ -66,36 +62,31 @@ export const Variants = meta.story({
<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>
@@ -176,13 +167,8 @@ export const MixedIcons = meta.story({
export const Disabled = meta.story({
render: () => (
<Flex align="center">
<ToggleButton variant="primary" isDisabled>
Primary
</ToggleButton>
<ToggleButton variant="secondary" isDisabled>
Secondary
</ToggleButton>
<ToggleButton variant="primary" defaultSelected isDisabled>
<ToggleButton isDisabled>Disabled</ToggleButton>
<ToggleButton defaultSelected isDisabled>
Selected
</ToggleButton>
</Flex>
packages/ui/src/components/ToggleButton/ToggleButton.tsx
-1
View File
@@ -30,7 +30,6 @@ export const ToggleButton = forwardRef(
ToggleButtonDefinition,
{
size: 'small',
variant: 'primary',
...props,
},
);
packages/ui/src/components/ToggleButton/definition.ts
-1
View File
@@ -27,6 +27,5 @@ export const ToggleButtonDefinition = {
},
dataAttributes: {
size: ['small', 'medium'] as const,
variant: ['primary', 'secondary'] as const,
},
} as const satisfies ComponentDefinition;
packages/ui/src/components/ToggleButton/types.ts
-4
View File
@@ -26,10 +26,6 @@ import type { Responsive, Surface } from '../../types';
*/
export interface ToggleButtonProps extends AriaToggleButtonProps {
size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
variant?:
| 'primary'
| 'secondary'
| Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
iconStart?: ReactElement;
iconEnd?: ReactElement;
children?: ReactNode;
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
-4
View File
@@ -39,10 +39,6 @@
border: 0;
}
.bui-ToggleButtonGroup :global(.bui-ToggleButton)[data-variant='secondary'] {
box-shadow: none;
}
/* Horizontal radius rules (default orientation) */
.bui-ToggleButtonGroup:not([data-orientation='vertical'])
> :global(.bui-ToggleButton) {
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx
+16 -116
View File
@@ -72,7 +72,7 @@ export const MultipleSelection = meta.story({
),
});
export const Variants = meta.story({
export const Surfaces = meta.story({
args: {
selectionMode: 'single',
defaultSelectedKeys: ['option1'],
@@ -93,29 +93,9 @@ export const Variants = meta.story({
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>
@@ -126,29 +106,9 @@ export const Variants = meta.story({
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>
@@ -159,29 +119,9 @@ export const Variants = meta.story({
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>
@@ -192,29 +132,9 @@ export const Variants = meta.story({
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>
@@ -225,29 +145,9 @@ export const Variants = meta.story({
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>
packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+30 -10
View File
@@ -15,12 +15,28 @@
*/
import clsx from 'clsx';
import { forwardRef, Ref } from 'react';
import { forwardRef, Ref, createContext, useContext } from 'react';
import { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';
import type { ToggleButtonGroupProps } from './types';
import { useStyles } from '../../hooks/useStyles';
import { ToggleButtonGroupDefinition } from './definition';
import styles from './ToggleButtonGroup.module.css';
import type { Breakpoint } from '../..';
/** @internal */
export interface ToggleButtonGroupContextValue {}
const ToggleButtonGroupContext = createContext<
ToggleButtonGroupContextValue | undefined
>(undefined);
/**
* Hook to access the ToggleButtonGroup context.
* @internal
*/
export const useToggleButtonGroupContext = () => {
return useContext(ToggleButtonGroupContext);
};
/** @public */
export const ToggleButtonGroup = forwardRef(
@@ -41,16 +57,20 @@ export const ToggleButtonGroup = forwardRef(
} = cleanedProps;
const resolvedOrientation = dataAttributes['data-orientation'];
const contextValue: ToggleButtonGroupContextValue = {};
return (
<AriaToggleButtonGroup
className={clsx(classNames.root, styles[classNames.root], className)}
ref={ref}
orientation={resolvedOrientation}
{...dataAttributes}
{...rest}
>
{children}
</AriaToggleButtonGroup>
<ToggleButtonGroupContext.Provider value={contextValue}>
<AriaToggleButtonGroup
className={clsx(classNames.root, styles[classNames.root], className)}
ref={ref}
orientation={resolvedOrientation}
{...dataAttributes}
{...rest}
>
{children}
</AriaToggleButtonGroup>
</ToggleButtonGroupContext.Provider>
);
},
);
packages/ui/src/components/ToggleButtonGroup/types.ts
+1
View File
@@ -16,6 +16,7 @@
import type { ToggleButtonGroupProps as AriaToggleButtonGroupProps } from 'react-aria-components';
import { Responsive } from '../../types';
import type { Breakpoint } from '../..';
/** @public */
export interface ToggleButtonGroupProps