Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Button from "$lib/components/ui/Button.svelte"; import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
const { Story } = defineMeta({ title: "UI/ButtonGroup", component: ButtonGroup, tags: ["autodocs"], argTypes: { spaced: { control: "boolean" } }, args: { spaced: false, direction: "horizontal" } });</script>
<!-- ButtonGroup content comes through its `children` snippet, provided here as Story slot content. --><Story name="Joined"> <ButtonGroup> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup></Story>
<Story name="Spaced" args={{ spaced: true }}> <ButtonGroup spaced> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup></Story>
<Story name="Comparison"> <div class="flex flex-col gap-md"> <ButtonGroup spaced> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> <ButtonGroup> <Button>Button</Button> <Button>Button</Button> <Button>Button</Button> </ButtonGroup> </div></Story>
<!-- The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs): the selected segment gets the `default` variant + insetShadow, unselected segments are `ghost`. Never plain `default` for unselected — that reads as the hovered state.--><Story name="Tab Switcher"> <div class="flex flex-col items-start gap-md"> <ButtonGroup> <Button {...segmentProps(true)}>Open</Button> <Button {...segmentProps(false)}>Closed</Button> </ButtonGroup> <!-- selected in the middle: hovering either neighbour used to rub out the border on the edge they share, so this is the case to check when touching the group's layering --> <ButtonGroup> <Button {...segmentProps(false)}>All</Button> <Button {...segmentProps(true)}>Push</Button> <Button {...segmentProps(false)}>Pull request</Button> </ButtonGroup> </div></Story>
<Story name="Vertical"> {#snippet template()} <div class=""> <ButtonGroup direction="vertical"> <Button {...segmentProps(true)}>Open</Button> <Button {...segmentProps(true)}>Closed</Button> </ButtonGroup> </div> {/snippet}</Story>