diff --git a/docs-ui/src/content/toggle-button-group.mdx b/docs-ui/src/content/toggle-button-group.mdx index cc9110189c..19034f0ac5 100644 --- a/docs-ui/src/content/toggle-button-group.mdx +++ b/docs-ui/src/content/toggle-button-group.mdx @@ -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 } - code={toggleButtonGroupVariantsSnippet} + preview={} + code={toggleButtonGroupSurfacesSnippet} /> ### Single Selection diff --git a/docs-ui/src/content/toggle-button-group.props.ts b/docs-ui/src/content/toggle-button-group.props.ts index 63fdd2afd3..d1c9c915dc 100644 --- a/docs-ui/src/content/toggle-button-group.props.ts +++ b/docs-ui/src/content/toggle-button-group.props.ts @@ -74,19 +74,14 @@ export const toggleButtonGroupIconsOnlySnippet = ` `; -export const toggleButtonGroupVariantsSnippet = ` +export const toggleButtonGroupSurfacesSnippet = ` Default - Primary 1 - Option 2 - Option 3 - - - Secondary 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3 @@ -94,14 +89,9 @@ export const toggleButtonGroupVariantsSnippet = ` - Primary 1 - Option 2 - Option 3 - - - Secondary 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3 @@ -109,14 +99,9 @@ export const toggleButtonGroupVariantsSnippet = ` - Primary 1 - Option 2 - Option 3 - - - Secondary 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3 @@ -124,14 +109,9 @@ export const toggleButtonGroupVariantsSnippet = ` - Primary 1 - Option 2 - Option 3 - - - Secondary 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3 @@ -139,14 +119,9 @@ export const toggleButtonGroupVariantsSnippet = ` - Primary 1 - Option 2 - Option 3 - - - Secondary 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3 diff --git a/docs-ui/src/content/toggle-button.mdx b/docs-ui/src/content/toggle-button.mdx index 48afdededc..593d97b02a 100644 --- a/docs-ui/src/content/toggle-button.mdx +++ b/docs-ui/src/content/toggle-button.mdx @@ -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'; } - code={toggleButtonVariantsSnippet} + preview={} + code={toggleButtonUsageSnippet} /> ## Usage @@ -38,14 +38,14 @@ import { ToggleButtonDefinition } from '../utils/definitions'; ## Examples -### Variants +### Surfaces } - code={toggleButtonVariantsSnippet} + preview={} + code={toggleButtonSurfacesSnippet} /> ### Sizes diff --git a/docs-ui/src/content/toggle-button.props.ts b/docs-ui/src/content/toggle-button.props.ts index 596b7af71b..9df1a24791 100644 --- a/docs-ui/src/content/toggle-button.props.ts +++ b/docs-ui/src/content/toggle-button.props.ts @@ -5,12 +5,6 @@ import { } from '@/utils/propDefs'; export const toggleButtonPropDefs: Record = { - 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 Toggle`; -export const toggleButtonVariantsSnippet = ` +export const toggleButtonSurfacesSnippet = ` Default - Primary - Secondary + Toggle On Surface 0 - Primary - Secondary + Toggle On Surface 1 - Primary - Secondary + Toggle On Surface 2 - Primary - Secondary + Toggle On Surface 3 - Primary - Secondary + Toggle `; diff --git a/packages/ui/src/components/ToggleButton/ToggleButton.module.css b/packages/ui/src/components/ToggleButton/ToggleButton.module.css index f11c8bac45..e23c4d53eb 100644 --- a/packages/ui/src/components/ToggleButton/ToggleButton.module.css +++ b/packages/ui/src/components/ToggleButton/ToggleButton.module.css @@ -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); diff --git a/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx b/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx index 36fa774ab5..f4be5cb46b 100644 --- a/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx +++ b/packages/ui/src/components/ToggleButton/ToggleButton.stories.tsx @@ -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({ Default - Primary - Secondary + Toggle On Surface 0 - Primary - Secondary + Toggle On Surface 1 - Primary - Secondary + Toggle On Surface 2 - Primary - Secondary + Toggle On Surface 3 - Primary - Secondary + Toggle @@ -176,13 +167,8 @@ export const MixedIcons = meta.story({ export const Disabled = meta.story({ render: () => ( - - Primary - - - Secondary - - + Disabled + Selected diff --git a/packages/ui/src/components/ToggleButton/ToggleButton.tsx b/packages/ui/src/components/ToggleButton/ToggleButton.tsx index 211ff03b6d..dd11554621 100644 --- a/packages/ui/src/components/ToggleButton/ToggleButton.tsx +++ b/packages/ui/src/components/ToggleButton/ToggleButton.tsx @@ -30,7 +30,6 @@ export const ToggleButton = forwardRef( ToggleButtonDefinition, { size: 'small', - variant: 'primary', ...props, }, ); diff --git a/packages/ui/src/components/ToggleButton/definition.ts b/packages/ui/src/components/ToggleButton/definition.ts index 78e026eed8..98c22fef35 100644 --- a/packages/ui/src/components/ToggleButton/definition.ts +++ b/packages/ui/src/components/ToggleButton/definition.ts @@ -27,6 +27,5 @@ export const ToggleButtonDefinition = { }, dataAttributes: { size: ['small', 'medium'] as const, - variant: ['primary', 'secondary'] as const, }, } as const satisfies ComponentDefinition; diff --git a/packages/ui/src/components/ToggleButton/types.ts b/packages/ui/src/components/ToggleButton/types.ts index bf6c08f521..aba31e4f25 100644 --- a/packages/ui/src/components/ToggleButton/types.ts +++ b/packages/ui/src/components/ToggleButton/types.ts @@ -26,10 +26,6 @@ import type { Responsive, Surface } from '../../types'; */ export interface ToggleButtonProps extends AriaToggleButtonProps { size?: 'small' | 'medium' | Partial>; - variant?: - | 'primary' - | 'secondary' - | Partial>; iconStart?: ReactElement; iconEnd?: ReactElement; children?: ReactNode; diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css index 173679f64b..36309ad9dd 100644 --- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css +++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css @@ -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) { diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx index f023757cca..70f3810a49 100644 --- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx +++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx @@ -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']} > - - Primary 1 - - - Option 2 - - - Option 3 - - - - - Secondary 1 - - - Option 2 - - - Option 3 - + Option 1 + Option 2 + Option 3 @@ -126,29 +106,9 @@ export const Variants = meta.story({ selectionMode="single" defaultSelectedKeys={['option1']} > - - Primary 1 - - - Option 2 - - - Option 3 - - - - - Secondary 1 - - - Option 2 - - - Option 3 - + Option 1 + Option 2 + Option 3 @@ -159,29 +119,9 @@ export const Variants = meta.story({ selectionMode="single" defaultSelectedKeys={['option1']} > - - Primary 1 - - - Option 2 - - - Option 3 - - - - - Secondary 1 - - - Option 2 - - - Option 3 - + Option 1 + Option 2 + Option 3 @@ -192,29 +132,9 @@ export const Variants = meta.story({ selectionMode="single" defaultSelectedKeys={['option1']} > - - Primary 1 - - - Option 2 - - - Option 3 - - - - - Secondary 1 - - - Option 2 - - - Option 3 - + Option 1 + Option 2 + Option 3 @@ -225,29 +145,9 @@ export const Variants = meta.story({ selectionMode="single" defaultSelectedKeys={['option1']} > - - Primary 1 - - - Option 2 - - - Option 3 - - - - - Secondary 1 - - - Option 2 - - - Option 3 - + Option 1 + Option 2 + Option 3 diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx index 8e536f4406..908b5881dc 100644 --- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -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 ( - - {children} - + + + {children} + + ); }, ); diff --git a/packages/ui/src/components/ToggleButtonGroup/types.ts b/packages/ui/src/components/ToggleButtonGroup/types.ts index 16ca11d482..e01b9afda0 100644 --- a/packages/ui/src/components/ToggleButtonGroup/types.ts +++ b/packages/ui/src/components/ToggleButtonGroup/types.ts @@ -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