Skip to content

Commit f83f5cc

Browse files
joshuaellisjoshuaellis
committed
refactor: ToggleInput should not render two labels (#1183)
1 parent 66fcca7 commit f83f5cc

File tree

7 files changed

+310
-270
lines changed

7 files changed

+310
-270
lines changed

‎docs/stories/ToggleCheckbox.stories.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,16 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
33

44
import { Grid, GridItem, ToggleCheckbox } from '@strapi/design-system';
55

6+
import { DeprecationNotice } from '../components/DeprecationNotice';
7+
68
<Meta title="Design System/Components/ToggleCheckbox" component={ToggleCheckbox} />
79

810
# ToggleCheckbox
911

12+
<DeprecationNotice href="/?path=/story/design-system-components-toggleinput--base">
13+
the ToggleInput instead
14+
</DeprecationNotice>
15+
1016
Toggles are used to switch between two different states. They are mostly used to switch between "On" and "Off" states.
1117
It is a binary choice.
1218

‎docs/stories/ToggleInput.stories.mdx

Lines changed: 44 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,72 @@
11
import { useState } from 'react';
22
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
33
import { Information } from '@strapi/icons';
4-
import { ToggleInput, Tooltip } from '@strapi/design-system';
4+
import { ToggleInput, Tooltip, Flex, Button } from '@strapi/design-system';
55

66
<Meta title="Design System/Components/ToggleInput" component={ToggleInput} />
77

88
# ToggleInput
99

10-
This is the doc of the `ToggleInput` component
11-
1210
[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/ToggleInput)
1311

14-
## Imports
12+
## Usage
1513

1614
```js
1715
import { ToggleInput } from '@strapi/design-system';
1816
```
1917

20-
## Usage
18+
### Basic
19+
20+
By default, the checked state is `false` and uncontrolled.
2121

2222
<Canvas>
2323
<Story name="base">
2424
{() => {
25-
const [checked, setChecked] = useState(true);
25+
const [error, toggleError] = useState();
26+
const [disabled, toggleDisabled] = useState();
2627
return (
27-
<ToggleInput
28-
hint="Enable provider"
29-
label="Enabled"
30-
name="enable-provider"
31-
labelAction={
32-
<Tooltip description="Content of the tooltip">
33-
<button
34-
aria-label="Information about the email"
35-
style={{ border: 'none', padding: 0, background: 'transparent' }}
36-
>
37-
<Information aria-hidden />
38-
</button>
39-
</Tooltip>
40-
}
41-
onLabel="True"
42-
offLabel="False"
43-
checked={checked}
44-
onChange={(e) => setChecked(e.target.checked)}
45-
/>
28+
<Flex direction="column" alignItems="stretch" gap={11}>
29+
<ToggleInput
30+
label="Enabled"
31+
onLabel="True"
32+
offLabel="False"
33+
hint="Enable your SSO provider for users"
34+
disabled={disabled}
35+
error={error}
36+
/>
37+
<Flex gap={2} justifyContent="center">
38+
<Button
39+
variant="danger-light"
40+
onClick={() => toggleError((s) => (s ? undefined : "That's not a boolean option!"))}
41+
>
42+
{`${error ? 'Hide' : 'Show'} the error state`}
43+
</Button>
44+
<Button variant="tertiary" onClick={() => toggleDisabled((s) => !s)}>
45+
{`${disabled ? 'Hide' : 'Show'} the disabled state`}
46+
</Button>
47+
</Flex>
48+
</Flex>
4649
);
4750
}}
4851
</Story>
4952
</Canvas>
5053

51-
### Error state
52-
53-
<Canvas>
54-
<Story name="error">
55-
{() => {
56-
const [checked, setChecked] = useState(false);
57-
return (
58-
<ToggleInput
59-
hint="Enable provider"
60-
error="this field is required"
61-
label="Label"
62-
name="enable-provider"
63-
onLabel="True"
64-
offLabel="False"
65-
checked={checked}
66-
onChange={(e) => setChecked(e.target.checked)}
67-
/>
68-
);
69-
}}
70-
</Story>
71-
</Canvas>
54+
### Controlled
7255

73-
### Required state
56+
By passing an `onChange` handler and a `checked` value, the component becomes controlled.
57+
Instead of returning the value, the `onChange` handler recieves the `ChangeEvent<HTMLInputElement>`.
7458

7559
<Canvas>
76-
<Story name="required">
60+
<Story name="controlled">
7761
{() => {
7862
const [checked, setChecked] = useState(false);
7963
return (
8064
<ToggleInput
81-
hint="Enable provider"
82-
label="Label"
83-
name="enable-provider"
65+
label="Enabled"
8466
onLabel="True"
8567
offLabel="False"
8668
checked={checked}
8769
onChange={(e) => setChecked(e.target.checked)}
88-
required
8970
/>
9071
);
9172
}}
@@ -94,84 +75,31 @@ import { ToggleInput } from '@strapi/design-system';
9475

9576
### Size S
9677

97-
<Canvas>
98-
<Story name="size S">
99-
{() => {
100-
const [checked, setChecked] = useState(false);
101-
return (
102-
<ToggleInput
103-
size="S"
104-
hint="Enable provider"
105-
label="Label"
106-
name="enable-provider"
107-
onLabel="True"
108-
offLabel="False"
109-
checked={checked}
110-
onChange={(e) => setChecked(e.target.checked)}
111-
/>
112-
);
113-
}}
114-
</Story>
115-
</Canvas>
116-
117-
### Null value
78+
Similar to other inputs, we support a `small` size.
11879

11980
<Canvas>
120-
<Story name="null-value">
81+
<Story name="size S">
12182
{() => {
122-
const [checked, setChecked] = useState(null);
123-
return (
124-
<ToggleInput
125-
hint="Enable provider"
126-
label="Label"
127-
name="enable-provider"
128-
onLabel="True"
129-
offLabel="False"
130-
checked={checked}
131-
onChange={(e) => setChecked(e.target.checked)}
132-
clearLabel="clear"
133-
onClear={() => setChecked(null)}
134-
/>
135-
);
83+
return <ToggleInput size="S" label="Enabled" onLabel="True" offLabel="False" />;
13684
}}
13785
</Story>
13886
</Canvas>
13987

140-
### Clear value
88+
### Using `null` values
14189

142-
<Canvas>
143-
<Story name="clear-value">
144-
{() => {
145-
const [checked, setChecked] = useState(true);
146-
return (
147-
<ToggleInput
148-
hint="Enable provider"
149-
label="Label"
150-
name="enable-provider"
151-
onLabel="True"
152-
offLabel="False"
153-
checked={checked}
154-
onChange={(e) => setChecked(e.target.checked)}
155-
clearLabel="clear"
156-
onClear={() => setChecked(null)}
157-
/>
158-
);
159-
}}
160-
</Story>
161-
</Canvas>
90+
Where desirable you can supply a `null` value to the component. This may be helpful in
91+
circumstances such whether or not a restaurant is open – `true` / `false` / not yet specified (`null`).
16292

163-
### Disabled
93+
It's additionally possible to "clear" the value by passing an `onClear` handler and a `clearLabel`.
94+
This label _will not show_ if the value is `null`.
16495

16596
<Canvas>
166-
<Story name="disabled">
97+
<Story name="nullish">
16798
{() => {
168-
const [checked, setChecked] = useState(true);
99+
const [checked, setChecked] = useState(null);
169100
return (
170101
<ToggleInput
171-
disabled
172-
hint="Enable provider"
173-
label="Label"
174-
name="enable-provider"
102+
label="Enabled"
175103
onLabel="True"
176104
offLabel="False"
177105
checked={checked}

0 commit comments

Comments
 (0)