Skip to content

Commit 6384a93

Browse files
behowellbehowell
authored
chore: Refactor RadioGroup stories to use Field, and remove individual storybook page for Radio (#29268)
Refactor RadioGroup stories: * Remove stories for the Radio component, and instead mark it as a subcomponent of RadioGroup. * Use Field to label the RadioGroup instead of a standalone Label. * Remove "Label" story, since Field makes that case simple.
1 parent 9bb4bef commit 6384a93

15 files changed

+147
-312
lines changed

‎packages/react-components/react-radio/stories/Radio/RadioDefault.stories.tsx

-27
This file was deleted.

‎packages/react-components/react-radio/stories/Radio/RadioDescription.md

-3
This file was deleted.

‎packages/react-components/react-radio/stories/Radio/index.stories.tsx

-16
This file was deleted.

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx

+15-19
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,26 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup, Button } from '@fluentui/react-components';
104

115
export const ControlledValue = () => {
126
const [value, setValue] = React.useState('banana');
13-
const styles = useStyles();
14-
const labelId = useId('label');
157
return (
16-
<div className={styles.field}>
17-
<Label id={labelId}>Favorite Fruit</Label>
18-
<RadioGroup value={value} onChange={(_, data) => setValue(data.value)} aria-labelledby={labelId}>
19-
<Radio value="apple" label="Apple" />
20-
<Radio value="pear" label="Pear" />
21-
<Radio value="banana" label="Banana" />
22-
<Radio value="orange" label="Orange" />
23-
</RadioGroup>
24-
<div>Current value: {value}</div>
25-
</div>
8+
<>
9+
<Field label="Favorite Fruit">
10+
<RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
11+
<Radio value="apple" label="Apple" />
12+
<Radio value="pear" label="Pear" />
13+
<Radio value="banana" label="Banana" />
14+
<Radio value="orange" label="Orange" />
15+
</RadioGroup>
16+
</Field>
17+
<Button disabled={!value} onClick={() => setValue('')}>
18+
Clear selection
19+
</Button>
20+
</>
2621
);
2722
};
23+
2824
ControlledValue.parameters = {
2925
docs: {
3026
description: {

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx

+12-23
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
11
import * as React from 'react';
2-
import type { RadioGroupProps } from '@fluentui/react-components';
3-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
42

5-
const useStyles = makeStyles({
6-
field: {
7-
display: 'grid',
8-
gridRowGap: tokens.spacingVerticalS,
9-
},
10-
});
3+
import type { RadioGroupProps } from '@fluentui/react-components';
4+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
115

12-
export const Default = (props: Partial<RadioGroupProps>) => {
13-
const styles = useStyles();
14-
const labelId = useId('label');
15-
return (
16-
<div className={styles.field}>
17-
<Label id={labelId}>Favorite Fruit</Label>
18-
<RadioGroup {...props} aria-labelledby={labelId}>
19-
<Radio value="apple" label="Apple" />
20-
<Radio value="pear" label="Pear" />
21-
<Radio value="banana" label="Banana" />
22-
<Radio value="orange" label="Orange" />
23-
</RadioGroup>
24-
</div>
25-
);
26-
};
6+
export const Default = (props: Partial<RadioGroupProps>) => (
7+
<Field label="Favorite Fruit">
8+
<RadioGroup {...props}>
9+
<Radio value="apple" label="Apple" />
10+
<Radio value="pear" label="Pear" />
11+
<Radio value="banana" label="Banana" />
12+
<Radio value="orange" label="Orange" />
13+
</RadioGroup>
14+
</Field>
15+
);

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefaultValue.stories.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as React from 'react';
2+
3+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
4+
5+
export const DefaultValue = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup defaultValue="pear">
8+
<Radio value="apple" label="Apple" />
9+
<Radio value="pear" label="Pear" />
10+
<Radio value="banana" label="Banana" />
11+
<Radio value="orange" label="Orange" />
12+
</RadioGroup>
13+
</Field>
14+
);
15+
16+
DefaultValue.parameters = {
17+
docs: {
18+
description: {
19+
story:
20+
'The initially selected item can be set by setting the `defaultValue` of RadioGroup. ' +
21+
'Alternatively, one Radio item can have `defaultChecked` set. ' +
22+
'Both methods have the same effect, but only one should be used in a given RadioGroup.',
23+
},
24+
},
25+
};

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx

+12-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
4+
5+
export const Disabled = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup defaultValue="apple" disabled>
8+
<Radio value="apple" label="Apple" />
9+
<Radio value="pear" label="Pear" />
10+
<Radio value="banana" label="Banana" />
11+
<Radio value="orange" label="Orange" />
12+
</RadioGroup>
13+
</Field>
14+
);
1015

11-
export const Disabled = () => {
12-
const styles = useStyles();
13-
const labelId = useId('label');
14-
return (
15-
<div className={styles.field}>
16-
<Label id={labelId}>Favorite Fruit</Label>
17-
<RadioGroup defaultValue="apple" disabled aria-labelledby={labelId}>
18-
<Radio value="apple" label="Apple" />
19-
<Radio value="pear" label="Pear" />
20-
<Radio value="banana" label="Banana" />
21-
<Radio value="orange" label="Orange" />
22-
</RadioGroup>
23-
</div>
24-
);
25-
};
2616
Disabled.parameters = {
2717
docs: {
2818
description: {

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx

+12-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
4+
5+
export const DisabledItem = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup defaultValue="apple">
8+
<Radio value="apple" label="Apple" />
9+
<Radio value="pear" label="Pear" />
10+
<Radio value="banana" label="Banana" disabled />
11+
<Radio value="orange" label="Orange" />
12+
</RadioGroup>
13+
</Field>
14+
);
1015

11-
export const DisabledItem = () => {
12-
const styles = useStyles();
13-
const labelId = useId('label');
14-
return (
15-
<div className={styles.field}>
16-
<Label id={labelId}>Favorite Fruit</Label>
17-
<RadioGroup defaultValue="apple" aria-labelledby={labelId}>
18-
<Radio value="apple" label="Apple" />
19-
<Radio value="pear" label="Pear" />
20-
<Radio value="banana" label="Banana" disabled />
21-
<Radio value="orange" label="Orange" />
22-
</RadioGroup>
23-
</div>
24-
);
25-
};
2616
DisabledItem.parameters = {
2717
docs: {
2818
description: {

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx

+12-22
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,18 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
4+
5+
export const Horizontal = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup layout="horizontal">
8+
<Radio value="apple" label="Apple" />
9+
<Radio value="pear" label="Pear" />
10+
<Radio value="banana" label="Banana" />
11+
<Radio value="orange" label="Orange" />
12+
</RadioGroup>
13+
</Field>
14+
);
1015

11-
export const Horizontal = () => {
12-
const styles = useStyles();
13-
const labelId = useId('label');
14-
return (
15-
<div className={styles.field}>
16-
<Label id={labelId}>Favorite Fruit</Label>
17-
<RadioGroup layout="horizontal" aria-labelledby={labelId}>
18-
<Radio value="apple" label="Apple" />
19-
<Radio value="pear" label="Pear" />
20-
<Radio value="banana" label="Banana" />
21-
<Radio value="orange" label="Orange" />
22-
</RadioGroup>
23-
</div>
24-
);
25-
};
2616
Horizontal.storyName = 'Layout: horizontal';
2717
Horizontal.parameters = {
2818
docs: {

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx

+11-22
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,18 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup } from '@fluentui/react-components';
104

11-
export const HorizontalStacked = () => {
12-
const styles = useStyles();
13-
const labelId = useId('label');
5+
export const HorizontalStacked = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup layout="horizontal-stacked">
8+
<Radio value="apple" label="Apple" />
9+
<Radio value="pear" label="Pear" />
10+
<Radio value="banana" label="Banana" />
11+
<Radio value="orange" label="Orange" />
12+
</RadioGroup>
13+
</Field>
14+
);
1415

15-
return (
16-
<div className={styles.field}>
17-
<Label id={labelId}>Favorite Fruit</Label>
18-
<RadioGroup layout="horizontal-stacked" aria-labelledby={labelId}>
19-
<Radio value="apple" label="Apple" />
20-
<Radio value="pear" label="Pear" />
21-
<Radio value="banana" label="Banana" />
22-
<Radio value="orange" label="Orange" />
23-
</RadioGroup>
24-
</div>
25-
);
26-
};
2716
HorizontalStacked.storyName = 'Layout: horizontal-stacked';
2817
HorizontalStacked.parameters = {
2918
docs: {

‎packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx

+28-38
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,34 @@
11
import * as React from 'react';
2-
import { Label, makeStyles, Radio, RadioGroup, Text, tokens, useId } from '@fluentui/react-components';
32

4-
const useStyles = makeStyles({
5-
field: {
6-
display: 'grid',
7-
gridRowGap: tokens.spacingVerticalS,
8-
},
9-
});
3+
import { Field, Radio, RadioGroup, Text } from '@fluentui/react-components';
4+
5+
export const LabelSubtext = () => (
6+
<Field label="Favorite Fruit">
7+
<RadioGroup>
8+
<Radio
9+
value="A"
10+
label={
11+
<>
12+
Banana
13+
<br />
14+
<Text size={200}>This is an example subtext of the first option</Text>
15+
</>
16+
}
17+
/>
18+
<Radio
19+
value="B"
20+
label={
21+
<>
22+
Pear
23+
<br />
24+
<Text size={200}>This is some more example subtext</Text>
25+
</>
26+
}
27+
/>
28+
</RadioGroup>
29+
</Field>
30+
);
1031

11-
export const LabelSubtext = () => {
12-
const styles = useStyles();
13-
const labelId = useId('label');
14-
return (
15-
<div className={styles.field}>
16-
<Label id={labelId}>Favorite Fruit</Label>
17-
<RadioGroup aria-labelledby={labelId}>
18-
<Radio
19-
value="A"
20-
label={
21-
<>
22-
Banana
23-
<br />
24-
<Text size={200}>This is an example subtext of the first option</Text>
25-
</>
26-
}
27-
/>
28-
<Radio
29-
value="B"
30-
label={
31-
<>
32-
Pear
33-
<br />
34-
<Text size={200}>This is some more example subtext</Text>
35-
</>
36-
}
37-
/>
38-
</RadioGroup>
39-
</div>
40-
);
41-
};
4232
LabelSubtext.parameters = {
4333
docs: {
4434
description: {

0 commit comments

Comments
 (0)