mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
103 lines
2.9 KiB
Plaintext
103 lines
2.9 KiB
Plaintext
import { Meta, Controls, Story } from '@storybook/addon-docs/blocks';
|
|
import * as ToggleGroupStories from './toggle-group.stories';
|
|
import * as ToggleGroupSimpleStories from './toggle-group-simple.stories';
|
|
import * as ToggleGroupItemStories from './toggle-group-item.stories';
|
|
|
|
<Meta of={ToggleGroupStories} />
|
|
|
|
# ToggleGroup
|
|
|
|
A set of two-state buttons that can be toggled on or off, in single or multiple selection mode.
|
|
|
|
## How to use
|
|
|
|
### ToggleGroupSimple (preset)
|
|
|
|
Use `ToggleGroupSimple` for an items-based API. Pass a list of items with `value` and `label` (string, icon, or ReactNode). Supports icon-only, label-only, or icon + label:
|
|
|
|
```tsx
|
|
import { ToggleGroupSimple } from '@signozhq/ui';
|
|
import { Bold, Italic, LayoutGrid } from '@signozhq/icons';
|
|
|
|
const items = [
|
|
{ value: 'left', label: 'Left' },
|
|
{ value: 'center', label: 'Center' },
|
|
{ value: 'right', label: 'Right' },
|
|
];
|
|
|
|
export default function MyComponent() {
|
|
return (
|
|
<ToggleGroupSimple
|
|
type="single"
|
|
items={items}
|
|
defaultValue="center"
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
For icon-only items, add `aria-label` for accessibility:
|
|
|
|
```tsx
|
|
const iconItems = [
|
|
{ value: 'bold', label: <Bold style={{ height: 12, width: 12 }} />, 'aria-label': 'Bold' },
|
|
{ value: 'italic', label: <Italic style={{ height: 12, width: 12 }} />, 'aria-label': 'Italic' },
|
|
];
|
|
|
|
<ToggleGroupSimple type="multiple" items={iconItems} defaultValue={['bold']} />
|
|
```
|
|
|
|
<Story of={ToggleGroupSimpleStories.Default} />
|
|
|
|
## ToggleGroupSimple Props
|
|
|
|
<Controls of={ToggleGroupSimpleStories.Default} />
|
|
|
|
### Manual composition with ToggleGroup
|
|
|
|
For full control over each option, use `ToggleGroup` with `ToggleGroupItem` as children:
|
|
|
|
```tsx
|
|
import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui';
|
|
import { AlignLeft, AlignCenter, AlignRight } from '@signozhq/icons';
|
|
|
|
export default function MyComponent() {
|
|
return (
|
|
<ToggleGroup type="single" defaultValue="center">
|
|
<ToggleGroupItem value="left" aria-label="Align left">
|
|
<AlignLeft style={{ height: 12, width: 12 }} />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="center" aria-label="Align center">
|
|
<AlignCenter style={{ height: 12, width: 12 }} />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="right" aria-label="Align right">
|
|
<AlignRight style={{ height: 12, width: 12 }} />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
);
|
|
}
|
|
```
|
|
|
|
For multiple selection:
|
|
|
|
```tsx
|
|
<ToggleGroup type="multiple" defaultValue={['bold']}>
|
|
<ToggleGroupItem value="bold" aria-label="Bold">
|
|
<Bold style={{ height: 12, width: 12 }} />
|
|
</ToggleGroupItem>
|
|
<ToggleGroupItem value="italic" aria-label="Italic">
|
|
<Italic style={{ height: 12, width: 12 }} />
|
|
</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
```
|
|
|
|
<Story of={ToggleGroupStories.Default} />
|
|
|
|
## ToggleGroup Props
|
|
|
|
<Controls of={ToggleGroupStories.Default} />
|
|
|
|
## ToggleGroupItem Props
|
|
|
|
<Controls of={ToggleGroupItemStories.Default} />
|