Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Button from "./Button.svelte"; import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
const { Story } = defineMeta({ title: "UI/ButtonGroup", component: ButtonGroup, tags: ["autodocs"], argTypes: { spaced: { control: "boolean" } }, args: { spaced: false } });</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-4"> <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-4"> <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>