Skip to content

react-radio: improve migration guide #22767

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
spmonahan merged 1 commit into from
May 3, 2022
Merged

react-radio: improve migration guide #22767

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
59 changes: 34 additions & 25 deletions ...public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,18 @@ import { Label, Radio, RadioGroup } from '@fluentui/react-components/unstable';
import { useId } from '@fluentui/react-utilities';

const RadioGroupBasicExample = () => {
const labelId = useId('label-');
const labelId = useId('label');

return (
<>
<Label id={labelId} required>
Pick One
</Label>
<RadioGroup aria-labelledby={labelId} defaultValue="B">
<Radio value="A" label="A" />
<Radio value="B" label="B" />
<Radio value="C" label="C" disabled />
<Radio value="D" label="D" />
<Radio value="A" label="Option A" required />
<Radio value="B" label="Option B" required />
<Radio value="C" label="Option C" disabled required />
<Radio value="D" label="Option D" required />
</RadioGroup>
</>
);
Expand Down Expand Up @@ -129,7 +129,7 @@ const useGreenBorderOptionStyles = makeStyles({
});

const RadioGroupCustomOptionExample = () => {
const labelId = useId('label-');
const labelId = useId('label');
const iconOptionStyles = useIconOptionStyles();
const labelStyles = useLabelStyles();
const greenBorderOptionStyles = useGreenBorderOptionStyles();
Expand All @@ -153,9 +153,9 @@ const RadioGroupCustomOptionExample = () => {
}}
/>
</div>
<Radio value="B" label="B" className={greenBorderOptionStyles.root} />
<Radio value="C" label="C" disabled />
<Radio value="D" label="D" />
<Radio value="B" label="Option B" className={greenBorderOptionStyles.root} />
<Radio value="C" label="Option C" disabled />
<Radio value="D" label="Option D" />
</RadioGroup>
</>
);
Expand All @@ -180,19 +180,28 @@ This table maps v8 `ChoiceGroup` props to the v9 `RadioGroup` equivalent.

This table maps v8 `IChoiceGroupOption` props to the v9 `Radio` equivalent.

| v8 | v9 | Notes |
| ------------------ | ------------ | ------------------------------------------------------------------------------------ |
| `key` | `key` | This is only necessary if you `.map()` an array to generate the list of `Radio`s. |
| `text` | `label` | In v9 this is a slot so this prop can be a string, a component or a shorthand object |
| `onRenderField` | n/a | Provide a custom child to `RadioGroup` |
| `onRenderLabel` | `label` | Provide a custom component to the `label` slot |
| `iconProps` | n/a | Use slots to customize `Radio` |
| `imageSRc` | n/a | Use slots to customize `Radio` |
| `imageAlt` | n/a | Use slots to customize `Radio` |
| `selectedImageSrc` | n/a | Use slots to customize `Radio` |
| `imageSize` | n/a | Use slots to customize `Radio` |
| `disabled` | `disabled` | |
| `id` | `id` | In v9 this is the intrinsic HTML prop |
| `labeldId` | n/a | Provide an id to the `label` slot via shorthand props or a custom component |
| `ariaLabel` | `aria-label` | In v9 this is the intrinsic HTML prop |
| `styles` | `className` | |
| v8 | v9 | Notes |
| ------------------ | ------------ | -------------------------------------------------------------------------------------------------------------- |
| `key` | `key` | This is only necessary if you `.map()` an array to generate the list of `Radio`s. |
| `text` | `label` | In v9 this is a slot so this prop can be a string, a component or a shorthand object |
| `onRenderField` | n/a | Provide a custom child to `RadioGroup` |
| `onRenderLabel` | `label` | Provide a custom component to the `label` slot |
| `iconProps` | n/a | Use slots to customize `Radio` |
| `imageSrc` | n/a | Use slots to customize `Radio` |
| `imageAlt` | n/a | Use slots to customize `Radio` |
| `selectedImageSrc` | n/a | Use slots to customize `Radio` |
| `imageSize` | n/a | Use slots to customize `Radio` |
| `disabled` | `disabled` | |
| `id` | `id` | In v9 this is the intrinsic HTML prop |
| `labeldId` | n/a | Provide an id to the `label` slot via shorthand props or a custom component |
| `ariaLabel` | `aria-label` | In v9 this is the intrinsic HTML prop |
| `styles` | `className` | |
| `itemKey` | n/a | |
| `checked` | `checked` | When used in a `RadioGroup` use the `value` prop on `RadioGroup` instead |
| `onChange` | `onChange` | Typescript types have changed |
| `onFocus` | `onFocus` | v9 uses native `onFocus` |
| `onBlur` | `onBlur` | v9 uses native `onBlur` |
| `focused` | n/a | |
| `theme` | n/a | Use `FluentProvider` to customize themes |
| `required` | `required` | |
| `name` | `name` | v9 uses native HTML prop. When used in a `RadioGroup` this prop is inherited from the `RadioGroup` by default. |