Skip to content

docs(react-switch): cleanup stories & docs #23217

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
layershifter merged 3 commits into from
May 26, 2022
Merged

docs(react-switch): cleanup stories & docs #23217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4638280
docs(react-switch): cleanup stories & docs
layershifter May 25, 2022
1493248
add changelog
layershifter May 25, 2022
c4a8e67
update API file
layershifter May 25, 2022
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
7 changes: 7 additions & 0 deletions change/@fluentui-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "cleanup stories & docs",
"packageName": "@fluentui/react-switch",
"email": "olfedias@microsoft.com",
"dependentChangeType": "none"
}
2 changes: 1 addition & 1 deletion packages/react-components/react-switch/etc/react-switch.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export type SwitchOnChangeData = {
};

// @public
export type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {
export type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'checked' | 'defaultChecked' | 'onChange'> & {
checked?: boolean;
defaultChecked?: boolean;
labelPosition?: 'above' | 'after' | 'before';
Expand Down
5 changes: 4 additions & 1 deletion packages/react-components/react-switch/src/components/Switch/Switch.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,10 @@ export type SwitchOnChangeData = {
/**
* Switch Props
*/
export type SwitchProps = Omit<ComponentProps<Partial<SwitchSlots>, 'input'>, 'onChange'> & {
export type SwitchProps = Omit<
ComponentProps<Partial<SwitchSlots>, 'input'>,
'checked' | 'defaultChecked' | 'onChange'
> & {
Comment on lines +40 to +43

@layershifter layershifter May 25, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we have own definition we need to exclude existing ones for checked & defaultChecked. It also solves problem with the description for props.

Before

image

After

image

/**
* Defines the controlled checked state of the Switch.
* If passed, Switch ignores the `defaultChecked` property.
Expand Down
1 change: 0 additions & 1 deletion packages/react-components/react-switch/src/stories/Switch.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export { Disabled } from './SwitchDisabled.stories';
export { Label } from './SwitchLabel.stories';
export { LabelWrapping } from './SwitchLabelWrapping.stories';
export { Required } from './SwitchRequired.stories';
export { Themed } from './SwitchThemed.stories';

@layershifter layershifter May 25, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This story is redundant and does not match patterns that we have for other components. I removed it to avoid confusion. To check how a component looks in different themes customers can use the theme selector and exists on every page:

image

@layershifter layershifter May 25, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same was done for react-card in #23082.


export default {
title: 'Components/Switch',
Expand Down
16 changes: 13 additions & 3 deletions packages/react-components/react-switch/src/stories/SwitchBestPractices.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
## Best practices
<details>
<summary>
Best Practices
</summary>

### Do
### Layout

### Don't
- When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click a "Submit", "Next", or "OK" button to apply changes, use a check box.

### Content

- Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".
- Keep descriptive text short and concise—two to four words; preferably nouns. For example, "Focused inbox" or "WiFi".

</details>

@layershifter layershifter May 25, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added best practices & component description, took it from existing docs (https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle). We will probably need to follow up on it to cleanup, but it's better than we have currently:

image

1 change: 1 addition & 0 deletions packages/react-components/react-switch/src/stories/SwitchDescription.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
A switch represents a physical switch that allows someone to choose between two mutually exclusive options. For example, "On/Off" and "Show/Hide". Choosing an option should produce an immediate result.
66 changes: 0 additions & 66 deletions packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx
View file
Open in desktop

This file was deleted.