From 4638280b894c3ad571b94f7c662b8fc74f27fbfd Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 25 May 2022 11:33:00 +0200 Subject: [PATCH 1/3] docs(react-switch): cleanup stories & docs --- .../src/components/Switch/Switch.types.ts | 5 +- .../src/stories/Switch.stories.tsx | 1 - .../src/stories/SwitchBestPractices.md | 16 ++++- .../src/stories/SwitchDescription.md | 1 + .../src/stories/SwitchThemed.stories.tsx | 66 ------------------- 5 files changed, 18 insertions(+), 71 deletions(-) delete mode 100644 packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx diff --git a/packages/react-components/react-switch/src/components/Switch/Switch.types.ts b/packages/react-components/react-switch/src/components/Switch/Switch.types.ts index 6090d7534c1f0b..14eaba29dd9b30 100644 --- a/packages/react-components/react-switch/src/components/Switch/Switch.types.ts +++ b/packages/react-components/react-switch/src/components/Switch/Switch.types.ts @@ -37,7 +37,10 @@ export type SwitchOnChangeData = { /** * Switch Props */ -export type SwitchProps = Omit, 'input'>, 'onChange'> & { +export type SwitchProps = Omit< + ComponentProps, 'input'>, + 'checked' | 'defaultChecked' | 'onChange' +> & { /** * Defines the controlled checked state of the Switch. * If passed, Switch ignores the `defaultChecked` property. diff --git a/packages/react-components/react-switch/src/stories/Switch.stories.tsx b/packages/react-components/react-switch/src/stories/Switch.stories.tsx index d32759f831a8a6..933484d6c4da85 100644 --- a/packages/react-components/react-switch/src/stories/Switch.stories.tsx +++ b/packages/react-components/react-switch/src/stories/Switch.stories.tsx @@ -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'; export default { title: 'Components/Switch', diff --git a/packages/react-components/react-switch/src/stories/SwitchBestPractices.md b/packages/react-components/react-switch/src/stories/SwitchBestPractices.md index 08ff8ddeeb5f86..146f58e6a3a490 100644 --- a/packages/react-components/react-switch/src/stories/SwitchBestPractices.md +++ b/packages/react-components/react-switch/src/stories/SwitchBestPractices.md @@ -1,5 +1,15 @@ -## Best practices +
+ + Best Practices + -### 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". + +
diff --git a/packages/react-components/react-switch/src/stories/SwitchDescription.md b/packages/react-components/react-switch/src/stories/SwitchDescription.md index e69de29bb2d1d6..cdc3eae966f8d3 100644 --- a/packages/react-components/react-switch/src/stories/SwitchDescription.md +++ b/packages/react-components/react-switch/src/stories/SwitchDescription.md @@ -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. diff --git a/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx b/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx deleted file mode 100644 index dda58fe7752bf6..00000000000000 --- a/packages/react-components/react-switch/src/stories/SwitchThemed.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import { FluentProvider } from '@fluentui/react-provider'; -import { webDarkTheme, teamsHighContrastTheme, webLightTheme } from '@fluentui/react-theme'; -import { Switch } from '../index'; - -const outerWrapperStyle: React.CSSProperties = { - display: 'flex', - flexDirection: 'column', - gap: '15px', -}; -const innerWrapperStyle: React.CSSProperties = { - boxSizing: 'border-box', - display: 'flex', - flexDirection: 'row', -}; -const leftSectionStyle: React.CSSProperties = { - borderBottomLeftRadius: '15px', - borderTopLeftRadius: '15px', -}; -const rightSectionStyle: React.CSSProperties = { - borderBottomRightRadius: '15px', - borderTopRightRadius: '15px', -}; - -export const Themed = () => ( -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
-); - -Themed.parameters = { - docs: { - description: { - story: - 'The Switch presents itself correctly in different themes (web light, dark and high contrast shown in this ' + - 'example).', - }, - }, -}; From 1493248e798658dd3c523836cffe3b0f622ba3b0 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 25 May 2022 11:34:14 +0200 Subject: [PATCH 2/3] add changelog --- ...-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json diff --git a/change/@fluentui-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json b/change/@fluentui-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json new file mode 100644 index 00000000000000..912950772254e1 --- /dev/null +++ b/change/@fluentui-react-switch-5dd373cc-cffa-4102-a6c4-31ec1c8ccdbc.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "cleanup stories & docs", + "packageName": "@fluentui/react-switch", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} From c4a8e672e1ad313da04ee61eab0b4b51a6490f38 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 25 May 2022 11:41:51 +0200 Subject: [PATCH 3/3] update API file --- packages/react-components/react-switch/etc/react-switch.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-switch/etc/react-switch.api.md b/packages/react-components/react-switch/etc/react-switch.api.md index 668e0c287862b9..54b79ea94f3a5b 100644 --- a/packages/react-components/react-switch/etc/react-switch.api.md +++ b/packages/react-components/react-switch/etc/react-switch.api.md @@ -30,7 +30,7 @@ export type SwitchOnChangeData = { }; // @public -export type SwitchProps = Omit, 'input'>, 'onChange'> & { +export type SwitchProps = Omit, 'input'>, 'checked' | 'defaultChecked' | 'onChange'> & { checked?: boolean; defaultChecked?: boolean; labelPosition?: 'above' | 'after' | 'before';