From 7621e679f1da0035d4d76af18d325f9009000d48 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 17:04:03 +0100 Subject: [PATCH 1/4] docs: Minor improvements - Be more explicity about sizing - Make popover examples a bit cleaner (removed Example buttons) - Add link to overflow documentation --- .../stories/Toolbar/ToolbarLarge.stories.tsx | 8 ++++++++ .../stories/Toolbar/ToolbarMedium.stories.tsx | 8 ++++++++ .../stories/Toolbar/ToolbarOverflow.stories.tsx | 12 ++++++++++++ .../stories/Toolbar/ToolbarSmall.stories.tsx | 8 ++++++++ .../stories/Toolbar/ToolbarWithPopover.stories.tsx | 4 ---- 5 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx index db4b0ab703c25..68017153db70b 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarLarge.stories.tsx @@ -18,3 +18,11 @@ export const Large = (props: Partial) => ( } /> ); + +Large.parameters = { + docs: { + description: { + story: ['Height of the container is 48px'].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarMedium.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarMedium.stories.tsx index 37b644032a588..05663e7e910b4 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarMedium.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarMedium.stories.tsx @@ -18,3 +18,11 @@ export const Medium = (props: Partial) => ( } /> ); + +Medium.parameters = { + docs: { + description: { + story: ['Height of the container is 40px'].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx index 9c4e1e98ce4a7..ffb9ba3b07954 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarOverflow.stories.tsx @@ -221,3 +221,15 @@ export const OverflowItems = (props: Partial) => ( ); + +OverflowItems.parameters = { + docs: { + description: { + story: [ + 'This example uses the', + 'Overflow component and utilities,', + 'Please refer to the documentation for achieve more complex scenarios.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx index 50979685cc52d..0532d0bc1569a 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSmall.stories.tsx @@ -18,3 +18,11 @@ export const Small = (props: Partial) => ( } /> ); + +Small.parameters = { + docs: { + description: { + story: ['Height of the container is 32px'].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx index 3c3bee8d62330..e4948bde9cb5f 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarWithPopover.stories.tsx @@ -21,7 +21,6 @@ export const WithPopover = (props: Partial) => {

Insert Image

-
@@ -38,7 +37,6 @@ export const WithPopover = (props: Partial) => {

Insert Table

-
@@ -55,7 +53,6 @@ export const WithPopover = (props: Partial) => {

Insert Formula

-
@@ -73,7 +70,6 @@ export const WithPopover = (props: Partial) => {

Quick Actions

-
From 5e29350cded189b6256b627f19d80728ecd5e5e4 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 20:51:22 +0100 Subject: [PATCH 2/4] Add subcomponents --- .../stories/Toolbar/index.stories.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx index dc34fd96f4a51..6cadfcabc25b3 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx @@ -1,4 +1,12 @@ -import { Toolbar } from '@fluentui/react-components/unstable'; +import { + Toolbar, + ToolbarButton, + ToolbarDivider, + ToolbarGroup, + ToolbarRadioButton, + ToolbarRadioGroup, + ToolbarToggleButton, +} from '@fluentui/react-components/unstable'; import descriptionMd from './ToolbarDescription.md'; import bestPracticesMd from './ToolbarBestPractices.md'; @@ -21,6 +29,14 @@ export { FarGroup } from './ToolbarFarGroup.stories'; export default { title: 'Preview Components/Toolbar', component: Toolbar, + subcomponents: { + ToolbarButton, + ToolbarDivider, + ToolbarGroup, + ToolbarRadioButton, + ToolbarRadioGroup, + ToolbarToggleButton, + }, parameters: { docs: { description: { From 02a197f9d9cfa446f14a1d4a2f90dcc9d232aa78 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 20:51:55 +0100 Subject: [PATCH 3/4] remove from preview section --- .../react-toolbar/stories/Toolbar/index.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx index 6cadfcabc25b3..f75a383a81676 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx @@ -27,7 +27,7 @@ export { VerticalButton } from './ToolbarVerticalButton.stories'; export { FarGroup } from './ToolbarFarGroup.stories'; export default { - title: 'Preview Components/Toolbar', + title: 'Components/Toolbar', component: Toolbar, subcomponents: { ToolbarButton, From 9277b8442e52332848b8e77c6315ff06f44a4df7 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 17 Jan 2023 20:55:18 +0100 Subject: [PATCH 4/4] fix subtle example --- .../stories/Toolbar/ToolbarSubtle.stories.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSubtle.stories.tsx index 4c3264bfcc94a..c9dedc9674806 100644 --- a/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSubtle.stories.tsx +++ b/packages/react-components/react-toolbar/stories/Toolbar/ToolbarSubtle.stories.tsx @@ -5,9 +5,22 @@ import type { ToolbarProps } from '@fluentui/react-components/unstable'; export const Subtle = (props: Partial) => ( - } name="textOptions" value="bold" /> - } name="textOptions" value="italic" /> } + name="textOptions" + value="bold" + /> + } + name="textOptions" + value="italic" + /> + } name="textOptions"