Skip to content

Commit

Permalink
feat(button): toggle button example
Browse files Browse the repository at this point in the history
Powerplex committed Oct 6, 2023
1 parent 8004dfc commit eb96a7a
Showing 5 changed files with 47 additions and 0 deletions.
1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions packages/components/button/src/Button.doc.mdx
Original file line number Diff line number Diff line change
@@ -104,6 +104,12 @@ This polymorphic behaviour can be used with any type of HTML element.

<Canvas of={ButtonStories.Link} />

### Toggle

Use `aria-pressed` to transform the button into a toggle button.

<Canvas of={ButtonStories.Toggle} />

## Accessibility

This component adheres to the [`button` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/button).
16 changes: 16 additions & 0 deletions packages/components/button/src/Button.stories.tsx
Original file line number Diff line number Diff line change
@@ -162,3 +162,19 @@ export const Link: StoryFn = _args => (
</Button>
</div>
)

export const Toggle: StoryFn = () => {
const [pressed, setPressed] = useState(false)
const toggle = () => setPressed(!pressed)

return (
<Button aria-pressed={pressed} onClick={toggle} design={pressed ? 'filled' : 'outlined'}>
Toggle button
{pressed && (
<Icon>
<Check />
</Icon>
)}
</Button>
)
}
6 changes: 6 additions & 0 deletions packages/components/icon-button/src/IconButton.doc.mdx
Original file line number Diff line number Diff line change
@@ -89,6 +89,12 @@ This polymorphic behaviour can be used with any type of HTML element.

<Canvas of={stories.Link} />

### Toggle

Use `aria-pressed` to transform the button into a toggle button.

<Canvas of={stories.Toggle} />

## Accessibility

This component adheres to the [`button` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/button). In this specific usecase it is strongly recommended to define an accessible name through `aria-label` or `aria-labelledby` attributes.
18 changes: 18 additions & 0 deletions packages/components/icon-button/src/IconButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { StoryLabel } from '@docs/helpers/StoryLabel'
import { Checkbox } from '@spark-ui/checkbox'
import { Icon } from '@spark-ui/icon'
import { LikeFill } from '@spark-ui/icons/dist/icons/LikeFill'
import { LikeOutline } from '@spark-ui/icons/dist/icons/LikeOutline'
import { Meta, StoryFn } from '@storybook/react'
import { useState } from 'react'

@@ -128,3 +130,19 @@ export const Link: StoryFn = _args => (
</IconButton>
</div>
)

export const Toggle: StoryFn = () => {
const [pressed, setPressed] = useState(false)
const toggle = () => setPressed(!pressed)

return (
<IconButton
aria-label="Add to favorites"
aria-pressed={pressed}
onClick={toggle}
design={pressed ? 'filled' : 'outlined'}
>
<Icon>{pressed ? <LikeFill /> : <LikeOutline />}</Icon>
</IconButton>
)
}

0 comments on commit eb96a7a

Please sign in to comment.