Skip to content

Commit

Permalink
chore: switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Omikorin
Omikorin committed Mar 22, 2024
1 parent 034d485 commit f5249b2
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 29 deletions.
2 changes: 1 addition & 1 deletion website/content/docs/components/switch/props.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ scope: props

## Props

<PropsTable of='Switch' />
<PropsTable of='SwitchRoot' />
6 changes: 3 additions & 3 deletions website/content/docs/components/switch/theming.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export const theme = extendTheme({
Then, we can use the custom color scale as the color scheme for the button:

```jsx live=false
<Switch colorScheme='brand' />
<Switch.Root colorScheme='brand' />
```

Every time you're adding anything new to the theme, you'd need to run the CLI
Expand Down Expand Up @@ -224,7 +224,7 @@ const boxy = definePartsStyle({
export const switchTheme = defineMultiStyleConfig({ variants: { boxy }})

// Now we can use the new `boxy` variant
<Switch variant="boxy"/>
<Switch.Root variant="boxy"/>
```

## Changing the default properties
Expand All @@ -248,7 +248,7 @@ export const switchTheme = defineMultiStyleConfig({
})

// This saves you time, instead of manually setting the size and variant every time you use an input:
<Switch size="xl" colorScheme="brand" ... />
<Switch.Root size="xl" colorScheme="brand" ... />
```

## Showcase
Expand Down
98 changes: 73 additions & 25 deletions website/content/docs/components/switch/usage.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@ import { Switch } from '@chakra-ui/react'
<Field.Label htmlFor='email-alerts' mb='0'>
Enable email alerts?
</Field.Label>
<Switch id='email-alerts' />
<Switch.Root id='email-alerts'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
</Field.Root>
```
Expand All @@ -39,9 +43,21 @@ Pass the `size` prop to change the size of the `Switch`.
```jsx
<Stack align='center' direction='row'>
<Switch size='sm' />
<Switch size='md' />
<Switch size='lg' />
<Switch.Root size='sm'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
<Switch.Root size='md'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
<Switch.Root size='lg'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
</Stack>
```
Expand All @@ -52,34 +68,66 @@ You can change the checked background color of the `Switch` by passing the
```jsx
<Stack direction='row'>
<Switch colorScheme='red' />
<Switch colorScheme='teal' size='lg' />
<Switch.Root colorScheme='red'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
<Switch.Root colorScheme='teal' size='lg'>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
</Stack>
```
## State depending behavior
States like `isDisabled` have an impact on the usability of a `Switch` and on
the styles, except for the `isInvalid` and the `isRequired` prop.
States like `disabled` have an impact on the usability of a `Switch` and on the
styles, except for the `invalid` and the `required` prop.
```jsx
<Field.Root as={SimpleGrid} columns={{ base: 2, lg: 4 }}>
<Field.Label htmlFor='isChecked'>isChecked:</Field.Label>
<Switch id='isChecked' isChecked />

<Field.Label htmlFor='isDisabled'>isDisabled:</Field.Label>
<Switch id='isDisabled' isDisabled defaultChecked />

<Field.Label htmlFor='isFocusable'>isFocusable:</Field.Label>
<Switch id='isFocusable' isFocusable isDisabled />

<Field.Label htmlFor='isInvalid'>isInvalid:</Field.Label>
<Switch id='isInvalid' isInvalid />

<Field.Label htmlFor='isReadOnly'>isReadOnly:</Field.Label>
<Switch id='isReadOnly' isReadOnly />

<Field.Label htmlFor='isRequired'>isRequired:</Field.Label>
<Switch id='isRequired' isRequired />
<Field.Label htmlFor='checked'>checked:</Field.Label>
<Switch.Root id='checked' checked>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>

<Field.Label htmlFor='disabled'>disabled:</Field.Label>
<Switch.Root id='disabled' disabled defaultChecked>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>

<Field.Label htmlFor='focusable'>focusable:</Field.Label>
<Switch.Root id='focusable' focusable disabled>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>

<Field.Label htmlFor='invalid'>invalid:</Field.Label>
<Switch.Root id='invalid' invalid>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>

<Field.Label htmlFor='readOnly'>readOnly:</Field.Label>
<Switch.Root id='readOnly' readOnly>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>

<Field.Label htmlFor='required'>required:</Field.Label>
<Switch.Root id='required' required>
<Switch.Track>
<Switch.Thumb />
</Switch.Track>
</Switch.Root>
</Field.Root>
```

0 comments on commit f5249b2

Please sign in to comment.