1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 06:43:35 +00:00

[CL-820] Switch component (#16216)

* Add switch component

* fix focus state

* updating stories

* add switch role

* updated story docs code examples

* Add max length and long label story

* Add disabled reason text

* fix hint spacing

* support rtl thumb transform

* use correct input syntax. assign value to template variable

* remove pointer when disabled

* Show disabled text as title if it exists

* add basic switch component tests

* keep switch top aligned

* move switch back to right side of label

* add max width to label and hint

* updated switch story docs

* fix story html formatting

* better comment about which are ControlValueAccessor functions

* add JSDoc comment about model signals

* update methods to mirror search input format

* fix notify function type

* fix typo

* throw error if label is not provided

* add hover and focus states

* add label to failing spec

* import bit-label
This commit is contained in:
Bryan Cunningham
2025-09-08 15:14:03 -04:00
committed by GitHub
parent 6129ca5366
commit 0aaab9fe52
6 changed files with 474 additions and 0 deletions

View File

@@ -0,0 +1,36 @@
import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
import * as stories from "./switch.stories";
<Meta of={stories} />
```ts
import { SwitchModule } from "@bitwarden/components";
```
<Title />
<Description />
NOTE: The switch component will span 100% of the width of its container. These stories have a
container with a `max-width` of 600px
<Primary />
<Controls />
## Stories
### Default
<Canvas of={stories.Default} />
### Used with a from
<Canvas of={stories.WithForm} />
### With Long Label
<Canvas of={stories.WithLongLabel} />
### Disabled
<Canvas of={stories.Disabled} />