Skip to content

chore: Refactor RadioGroup stories to use Field, and remove individual Radio page #29268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
behowell merged 2 commits into from
Oct 25, 2023
Merged

chore: Refactor RadioGroup stories to use Field, and remove individual Radio page #29268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78e2c11
chore: Refactor RadioGroup stories to use Field, and remove individua…
behowell Sep 23, 2023
062c0cb
Merge branch 'master' into radio/refactor-stories
behowell Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 0 additions & 27 deletions packages/react-components/react-radio/stories/Radio/RadioDefault.stories.tsx
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/react-components/react-radio/stories/Radio/RadioDescription.md
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions packages/react-components/react-radio/stories/Radio/index.stories.tsx
View file
Open in desktop

This file was deleted.

34 changes: 15 additions & 19 deletions ...ges/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,26 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup, Button } from '@fluentui/react-components';

export const ControlledValue = () => {
const [value, setValue] = React.useState('banana');
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup value={value} onChange={(_, data) => setValue(data.value)} aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
<div>Current value: {value}</div>
</div>
<>
<Field label="Favorite Fruit">
<RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
<Button disabled={!value} onClick={() => setValue('')}>
Clear selection
</Button>
</>
);
};

ControlledValue.parameters = {
docs: {
description: {
Expand Down
35 changes: 12 additions & 23 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,15 @@
import * as React from 'react';
import type { RadioGroupProps } from '@fluentui/react-components';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import type { RadioGroupProps } from '@fluentui/react-components';
import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const Default = (props: Partial<RadioGroupProps>) => {
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup {...props} aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</div>
);
};
export const Default = (props: Partial<RadioGroupProps>) => (
<Field label="Favorite Fruit">
<RadioGroup {...props}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);
25 changes: 25 additions & 0 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefaultValue.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import * as React from 'react';

import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const DefaultValue = () => (
<Field label="Favorite Fruit">
<RadioGroup defaultValue="pear">
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);

DefaultValue.parameters = {
docs: {
description: {
story:
'The initially selected item can be set by setting the `defaultValue` of RadioGroup. ' +
'Alternatively, one Radio item can have `defaultChecked` set. ' +
'Both methods have the same effect, but only one should be used in a given RadioGroup.',
},
},
};
34 changes: 12 additions & 22 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const Disabled = () => (
<Field label="Favorite Fruit">
<RadioGroup defaultValue="apple" disabled>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);

export const Disabled = () => {
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup defaultValue="apple" disabled aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</div>
);
};
Disabled.parameters = {
docs: {
description: {
Expand Down
34 changes: 12 additions & 22 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const DisabledItem = () => (
<Field label="Favorite Fruit">
<RadioGroup defaultValue="apple">
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" disabled />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);

export const DisabledItem = () => {
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup defaultValue="apple" aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" disabled />
<Radio value="orange" label="Orange" />
</RadioGroup>
</div>
);
};
DisabledItem.parameters = {
docs: {
description: {
Expand Down
34 changes: 12 additions & 22 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,18 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const Horizontal = () => (
<Field label="Favorite Fruit">
<RadioGroup layout="horizontal">
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);

export const Horizontal = () => {
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup layout="horizontal" aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</div>
);
};
Horizontal.storyName = 'Layout: horizontal';
Horizontal.parameters = {
docs: {
Expand Down
33 changes: 11 additions & 22 deletions ...s/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup } from '@fluentui/react-components';

export const HorizontalStacked = () => {
const styles = useStyles();
const labelId = useId('label');
export const HorizontalStacked = () => (
<Field label="Favorite Fruit">
<RadioGroup layout="horizontal-stacked">
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</Field>
);

return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup layout="horizontal-stacked" aria-labelledby={labelId}>
<Radio value="apple" label="Apple" />
<Radio value="pear" label="Pear" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />
</RadioGroup>
</div>
);
};
HorizontalStacked.storyName = 'Layout: horizontal-stacked';
HorizontalStacked.parameters = {
docs: {
Expand Down
66 changes: 28 additions & 38 deletions packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,34 @@
import * as React from 'react';
import { Label, makeStyles, Radio, RadioGroup, Text, tokens, useId } from '@fluentui/react-components';

const useStyles = makeStyles({
field: {
display: 'grid',
gridRowGap: tokens.spacingVerticalS,
},
});
import { Field, Radio, RadioGroup, Text } from '@fluentui/react-components';

export const LabelSubtext = () => (
<Field label="Favorite Fruit">
<RadioGroup>
<Radio
value="A"
label={
<>
Banana
<br />
<Text size={200}>This is an example subtext of the first option</Text>
</>
}
/>
<Radio
value="B"
label={
<>
Pear
<br />
<Text size={200}>This is some more example subtext</Text>
</>
}
/>
</RadioGroup>
</Field>
);

export const LabelSubtext = () => {
const styles = useStyles();
const labelId = useId('label');
return (
<div className={styles.field}>
<Label id={labelId}>Favorite Fruit</Label>
<RadioGroup aria-labelledby={labelId}>
<Radio
value="A"
label={
<>
Banana
<br />
<Text size={200}>This is an example subtext of the first option</Text>
</>
}
/>
<Radio
value="B"
label={
<>
Pear
<br />
<Text size={200}>This is some more example subtext</Text>
</>
}
/>
</RadioGroup>
</div>
);
};
LabelSubtext.parameters = {
docs: {
description: {
Expand Down
Loading