From aa7fb10eea8717cf4501af4f79de7cfb62485c02 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 20:20:33 -0700 Subject: [PATCH 01/73] Add utility functions to create RTL, HC, and DM component variants --- .../src/utilities/StoryDecorators.tsx | 21 ++++++++++++ .../src/utilities/getStoryVariant.ts | 33 +++++++++++++++++++ .../src/utilities/index.ts | 2 ++ 3 files changed, 56 insertions(+) create mode 100644 apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx create mode 100644 apps/vr-tests-react-components/src/utilities/getStoryVariant.ts diff --git a/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx b/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx new file mode 100644 index 0000000000000..374f9e47e3f26 --- /dev/null +++ b/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { DecoratorFunction } from '@storybook/addons'; +import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme'; +import { FluentProvider } from '@fluentui/react-provider'; +import { ExtendedStoryFnReturnType } from './types'; + +export const DarkModeDecorator: DecoratorFunction = story => { + return {story()}; +}; + +export const HighContrastDecorator: DecoratorFunction = story => { + return {story()}; +}; + +export const RTLDecorator: DecoratorFunction = story => { + return ( + + {story()} + + ); +}; diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts new file mode 100644 index 0000000000000..c4f5ae1d5fcb5 --- /dev/null +++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts @@ -0,0 +1,33 @@ +import { ComponentStory } from '@storybook/react'; +import { DarkModeDecorator, HighContrastDecorator, RTLDecorator } from './StoryDecorators'; + +export const DARK_MODE = 'Dark Mode'; +export const HIGH_CONTRAST = 'High Contrast'; +export const RTL = 'RTL'; + +/** + * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story. + */ + +export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Dark Mode' | 'High Contrast') => { + let decorator; + + if (variant === RTL) { + decorator = RTLDecorator; + } + + if (variant === DARK_MODE) { + decorator = DarkModeDecorator; + } + + if (variant === HIGH_CONTRAST) { + decorator = HighContrastDecorator; + } + + return { + ...story, + render: story, + storyName: `${story.storyName} - ${variant}`, + decorators: [decorator], + }; +}; diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index 12fc4954c5d70..d071a94751e8b 100644 --- a/apps/vr-tests-react-components/src/utilities/index.ts +++ b/apps/vr-tests-react-components/src/utilities/index.ts @@ -8,3 +8,5 @@ declare module '@storybook/addons' { } export * from './TestWrapperDecorator'; +export * from './StoryDecorators'; +export * from './getStoryVariant'; From 07da72aea970f0248bec98cab4dd8585ee9bd3c3 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 20:22:45 -0700 Subject: [PATCH 02/73] chore: convert Avatar to CSF --- .../src/stories/Avatar.stories.tsx | 176 ++++++++++-------- 1 file changed, 102 insertions(+), 74 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index f19cc9bb55fae..a6cca2ce84330 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -1,8 +1,9 @@ -import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Screener from 'screener-storybook/src/screener'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../utilities/index'; const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; @@ -161,78 +162,105 @@ const AvatarCustomSizeList: React.FC< ); }; -storiesOf('Avatar Converged', module) - .addDecorator(story => ( -
-
- {story()} -
-
- )) - .addDecorator(story => ( - {story()} - )) - .addStory( - 'basic', - () => ( -
- - - - - } /> - } shape="square" /> - } shape="square" /> - - +export default { + title: 'Avatar Converged', + Component: Avatar, + decorators: [ + story => ( +
+
+ {story()} +
), - { includeRtl: true, includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('size+name', () => ) - .addStory('size+icon+badge+square', () => ) - .addStory('size+image+badge', () => ) - .addStory('size+inactive+badge', () => ( - - )) - .addStory('size+active+badge', () => ( - - )) - .addStory('size+active+shadow', () => ( - - )) - .addStory('size+active+ring-shadow', () => ( - - )) - .addStory('customSize+image', () => ) - .addStory('customSize+name+badge', () => ( - - )) - .addStory('customSize+icon+active', () => ) - .addStory( - 'color', - () => { - const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' }; - - return ( -
-
- - -
-
- {examples.name.map(name => ( - - ))} -
-
- {examples.namedColors.map(color => ( - - ))} -
-
- ); - }, - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('image-bad-url', () => ); + story => ( + {story()} + ), + ], +} as ComponentMeta; + +export const Basic = () => ( +
+ + + + + } /> + } shape="square" /> + } shape="square" /> + + +
+); +Basic.storyName = 'basic'; + +export const BasicRTL = getStoryVariant(Basic, RTL); +export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); + +export const SizeName = () => ; +SizeName.storyName = 'size+name'; + +export const SizeIconBadgeSquare = () => ; +SizeIconBadgeSquare.storyName = 'size+icon+badge+square'; + +export const SizeImageBadge = () => ; +SizeImageBadge.storyName = 'size+image+badge'; + +export const SizeInactiveBadge = () => ( + +); +SizeInactiveBadge.storyName = 'size+inactive+badge'; + +export const SizeActiveBadge = () => ( + +); +SizeActiveBadge.storyName = 'size+active+badge'; + +export const SizeActiveShadow = () => ; +SizeActiveShadow.storyName = 'size+active+shadow'; + +export const SizeActiveRingShadow = () => ( + +); +SizeActiveRingShadow.storyName = 'size+active+ring-shadow'; + +export const CustomSizeImage = () => ; +CustomSizeImage.storyName = 'customSize+image'; + +export const CustomSizeNameBadge = () => ; +CustomSizeNameBadge.storyName = 'customSize+name+badge'; + +export const CustomSizeIconActive = () => ; +CustomSizeIconActive.storyName = 'customSize+icon+active'; + +export const Color = () => { + const rowStyles: React.CSSProperties = { display: 'flex', flexWrap: 'wrap', gap: '8px' }; + + return ( +
+
+ + +
+
+ {examples.name.map(name => ( + + ))} +
+
+ {examples.namedColors.map(color => ( + + ))} +
+
+ ); +}; +Color.storyName = 'color'; + +export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST); +export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); + +export const ImageBadUrl = () => ; + +ImageBadUrl.storyName = 'image-bad-url'; From eb0bb9d0e95a93bc183cacc40984129adfbb71a3 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 21:24:25 -0700 Subject: [PATCH 03/73] fix: add default state decorator to preview.js and update getStoryVariant to include passed in decorators --- .../.storybook/preview.js | 6 +++ .../src/stories/Avatar.stories.tsx | 37 ++++++++++--------- .../src/utilities/getStoryVariant.ts | 10 +++-- 3 files changed, 33 insertions(+), 20 deletions(-) diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js index 760cf508fdf2c..37400bcc98fc1 100644 --- a/apps/vr-tests-react-components/.storybook/preview.js +++ b/apps/vr-tests-react-components/.storybook/preview.js @@ -59,3 +59,9 @@ export const parameters = { layout: 'none' }; if (typeof window === 'object') { /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook; } + +export const decorators = [ + /** @type {import("@storybook/csf").DecoratorFunction} */ story => ( + {story()} + ), +]; diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index a6cca2ce84330..1b0e9fa6da2ab 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -3,6 +3,7 @@ import Screener from 'screener-storybook/src/screener'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; +import { DecoratorFunction } from '@storybook/csf'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../utilities/index'; const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; @@ -162,21 +163,23 @@ const AvatarCustomSizeList: React.FC< ); }; +const decorators: DecoratorFunction[] = [ + story => ( +
+
+ {story()} +
+
+ ), + story => ( + {story()} + ), +]; + export default { title: 'Avatar Converged', Component: Avatar, - decorators: [ - story => ( -
-
- {story()} -
-
- ), - story => ( - {story()} - ), - ], + decorators, } as ComponentMeta; export const Basic = () => ( @@ -194,9 +197,9 @@ export const Basic = () => ( ); Basic.storyName = 'basic'; -export const BasicRTL = getStoryVariant(Basic, RTL); -export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); +export const BasicRTL = getStoryVariant(Basic, RTL, decorators); +export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST, decorators); +export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE, decorators); export const SizeName = () => ; SizeName.storyName = 'size+name'; @@ -258,8 +261,8 @@ export const Color = () => { }; Color.storyName = 'color'; -export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST); -export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); +export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST, decorators); +export const ColorDarkMode = getStoryVariant(Color, DARK_MODE, decorators); export const ImageBadUrl = () => ; diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts index c4f5ae1d5fcb5..4dacf132bb35b 100644 --- a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts +++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts @@ -1,4 +1,5 @@ import { ComponentStory } from '@storybook/react'; +import { DecoratorFunction } from '@storybook/csf'; import { DarkModeDecorator, HighContrastDecorator, RTLDecorator } from './StoryDecorators'; export const DARK_MODE = 'Dark Mode'; @@ -8,8 +9,11 @@ export const RTL = 'RTL'; /** * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story. */ - -export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Dark Mode' | 'High Contrast') => { +export const getStoryVariant = ( + story: ComponentStory, + variant: 'RTL' | 'Dark Mode' | 'High Contrast', + decorators: DecoratorFunction[], +) => { let decorator; if (variant === RTL) { @@ -28,6 +32,6 @@ export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Da ...story, render: story, storyName: `${story.storyName} - ${variant}`, - decorators: [decorator], + decorators: [...decorators, decorator], }; }; From fe1d98fee3caa5c5387e51801a0de97c62b52e38 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 21:47:53 -0700 Subject: [PATCH 04/73] fix: remove unnecessary decorators parameter --- .../src/stories/Avatar.stories.tsx | 37 +++++++++---------- .../src/utilities/getStoryVariant.ts | 9 +---- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index 1b0e9fa6da2ab..a6cca2ce84330 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -3,7 +3,6 @@ import Screener from 'screener-storybook/src/screener'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { DecoratorFunction } from '@storybook/csf'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../utilities/index'; const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar'; @@ -163,23 +162,21 @@ const AvatarCustomSizeList: React.FC< ); }; -const decorators: DecoratorFunction[] = [ - story => ( -
-
- {story()} -
-
- ), - story => ( - {story()} - ), -]; - export default { title: 'Avatar Converged', Component: Avatar, - decorators, + decorators: [ + story => ( +
+
+ {story()} +
+
+ ), + story => ( + {story()} + ), + ], } as ComponentMeta; export const Basic = () => ( @@ -197,9 +194,9 @@ export const Basic = () => ( ); Basic.storyName = 'basic'; -export const BasicRTL = getStoryVariant(Basic, RTL, decorators); -export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST, decorators); -export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE, decorators); +export const BasicRTL = getStoryVariant(Basic, RTL); +export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); export const SizeName = () => ; SizeName.storyName = 'size+name'; @@ -261,8 +258,8 @@ export const Color = () => { }; Color.storyName = 'color'; -export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST, decorators); -export const ColorDarkMode = getStoryVariant(Color, DARK_MODE, decorators); +export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST); +export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); export const ImageBadUrl = () => ; diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts index 4dacf132bb35b..28412bc34b574 100644 --- a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts +++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts @@ -1,5 +1,4 @@ import { ComponentStory } from '@storybook/react'; -import { DecoratorFunction } from '@storybook/csf'; import { DarkModeDecorator, HighContrastDecorator, RTLDecorator } from './StoryDecorators'; export const DARK_MODE = 'Dark Mode'; @@ -9,11 +8,7 @@ export const RTL = 'RTL'; /** * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story. */ -export const getStoryVariant = ( - story: ComponentStory, - variant: 'RTL' | 'Dark Mode' | 'High Contrast', - decorators: DecoratorFunction[], -) => { +export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Dark Mode' | 'High Contrast') => { let decorator; if (variant === RTL) { @@ -32,6 +27,6 @@ export const getStoryVariant = ( ...story, render: story, storyName: `${story.storyName} - ${variant}`, - decorators: [...decorators, decorator], + decorators: [decorator], }; }; From adfa17bcb09e545893fde0963d3863003a3864d6 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 5 Oct 2022 16:31:37 -0700 Subject: [PATCH 05/73] Update Progress.types.ts --- .../src/components/Progress/Progress.types.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-progress/src/components/Progress/Progress.types.ts b/packages/react-components/react-progress/src/components/Progress/Progress.types.ts index 0c976d03ec16e..c35c7e2d109f9 100644 --- a/packages/react-components/react-progress/src/components/Progress/Progress.types.ts +++ b/packages/react-components/react-progress/src/components/Progress/Progress.types.ts @@ -17,7 +17,7 @@ export type ProgressSlots = { export type ProgressProps = Omit, 'size'> & { /** * A decimal number between `0` and `1` (or between `0` and `max` if given), - * which specifies how much of the task has been completed. + * which specifies how much of the task has been completed. * * If `undefined` (default), the Progress will display an **indeterminate** state. */ @@ -38,6 +38,4 @@ export type ProgressProps = Omit, 'size'> & { /** * State used in rendering Progress */ -export type ProgressState = ComponentState & - Required> & - Pick; +export type ProgressState = ComponentState & Required> & Pick; From e7374689898e4df851d6bec7f8880d1cd548559a Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 22:48:43 -0700 Subject: [PATCH 06/73] chore: convert AvatarGroup to CSF --- .../src/stories/AvatarGroup.stories.tsx | 158 ++++++++---------- .../stories/AvatarGroupOverflow.stories.tsx | 74 ++++++++ 2 files changed, 141 insertions(+), 91 deletions(-) create mode 100644 apps/vr-tests-react-components/src/stories/AvatarGroupOverflow.stories.tsx diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 2689c7457168e..68326f841f979 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { storiesOf } from '@storybook/react'; import Screener from 'screener-storybook/src/screener'; import { AvatarGroup, @@ -10,6 +9,8 @@ import { partitionAvatarGroupItems, } from '@fluentui/react-avatar'; import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../utilities/index'; const names = [ 'Katri Athokas', @@ -68,94 +69,69 @@ const AvatarGroupList: React.FC< ); }; -// Non-interactive stories -storiesOf('AvatarGroup Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - {story()} - )) - .addStory('basic', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('layoutStack', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory( - 'layoutPie-1', - () => ( -
- - - - - - -
- ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'layoutPie-2', - () => ( -
- - - - - - - - -
+export default { + title: 'AvatarGroup Converged', + component: AvatarGroup, + decorators: [ + TestWrapperDecorator, + story => ( + {story()} ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('layoutPie', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('overflowIndicator', () => , { - includeHighContrast: true, - includeDarkMode: true, - }); - -// Interactive stories -storiesOf('AvatarGroup Converged', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => ( - - {story()} - - )) - .addStory( - 'overflowContent', - () => { - const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names }); - return ( -
- - {inlineItems.map(name => ( - - ))} - - {overflowItems.map(name => ( - - ))} - - -
- ); - }, - { - includeHighContrast: true, - includeDarkMode: true, - }, - ); + ], +} as ComponentMeta; + +export const Basic = () => ; +Basic.storyName = 'basic'; + +export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); + +export const LayoutStack = () => ; +LayoutStack.storyName = 'layoutStack'; + +export const LayoutStackHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const LayoutStackDarkMode = getStoryVariant(Basic, DARK_MODE); + +export const LayoutPie1 = () => ( +
+ + + + + + +
+); +LayoutPie1.storyName = 'layoutPie-1'; + +export const LayoutPie1HighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const LayoutPie1DarkMode = getStoryVariant(Basic, DARK_MODE); + +export const LayoutPie2 = () => ( +
+ + + + + + + + +
+); +LayoutPie2.storyName = 'layoutPie-2'; + +export const LayoutPie2HighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const LayoutPie2DarkMode = getStoryVariant(Basic, DARK_MODE); + +export const LayoutPie = () => ; +LayoutPie.storyName = 'layoutPie'; + +export const LayoutPieHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const LayoutPieDarkMode = getStoryVariant(Basic, DARK_MODE); + +export const OverflowIndicator = () => ; +OverflowIndicator.storyName = 'overflowIndicator'; + +export const OverflowIndicatorHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); +export const OverflowIndicatorDarkMode = getStoryVariant(Basic, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroupOverflow.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroupOverflow.stories.tsx new file mode 100644 index 0000000000000..234648c8c3d48 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/AvatarGroupOverflow.stories.tsx @@ -0,0 +1,74 @@ +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; +import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../utilities/index'; + +const names = [ + 'Katri Athokas', + 'Elvia Atkins', + 'Mauricio August', + 'Colin Ballinger', + 'Lydia Bauer', + 'Amanda Brady', + 'Henry Brill', + 'Celeste Burton', + 'Robin Counts', + 'Tim Deboer', + 'Cameron Evans', + 'Isaac Fielder', + 'Cecil Folk', + 'Miguel Garcia', + 'Wanda Howard', + 'Mona Kane', + 'Kat Larsson', + 'Ashley McCarthy', + 'Johnie McConnell', + 'Allan Munger', + 'Erik Nason', + 'Kristin Patterson', + 'Daisy Phillips', + 'Carole Poland', + 'Carlos Slattery', + 'Robert Tolbert', + 'Kevin Sturgis', + 'Charlotte Waltson', + 'Elliot Woodward', +]; + +export default { + title: 'AvatarGroup Converged', + component: AvatarGroup, + decorators: [ + TestWrapperDecorator, + story => ( + + {story()} + + ), + ], +} as ComponentMeta; + +export const OverflowContent = () => { + const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names }); + return ( +
+ + {inlineItems.map(name => ( + + ))} + + {overflowItems.map(name => ( + + ))} + + +
+ ); +}; + +OverflowContent.storyName = 'overflowContent'; + +export const OverflowContentHighContrast = getStoryVariant(OverflowContent, HIGH_CONTRAST); +export const OverflowContentDarkMode = getStoryVariant(OverflowContent, DARK_MODE); From c9480f8928bb04b24a9928dfa0d924ba23b74bf7 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 1 Oct 2022 23:07:50 -0700 Subject: [PATCH 07/73] fix: AvatarGroup stories --- .../src/stories/AvatarGroup.stories.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx index 68326f841f979..5342fa519ec31 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx @@ -89,8 +89,8 @@ export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); export const LayoutStack = () => ; LayoutStack.storyName = 'layoutStack'; -export const LayoutStackHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const LayoutStackDarkMode = getStoryVariant(Basic, DARK_MODE); +export const LayoutStackHighContrast = getStoryVariant(LayoutStack, HIGH_CONTRAST); +export const LayoutStackDarkMode = getStoryVariant(LayoutStack, DARK_MODE); export const LayoutPie1 = () => (
@@ -104,8 +104,8 @@ export const LayoutPie1 = () => ( ); LayoutPie1.storyName = 'layoutPie-1'; -export const LayoutPie1HighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const LayoutPie1DarkMode = getStoryVariant(Basic, DARK_MODE); +export const LayoutPie1HighContrast = getStoryVariant(LayoutPie1, HIGH_CONTRAST); +export const LayoutPie1DarkMode = getStoryVariant(LayoutPie1, DARK_MODE); export const LayoutPie2 = () => (
@@ -121,17 +121,17 @@ export const LayoutPie2 = () => ( ); LayoutPie2.storyName = 'layoutPie-2'; -export const LayoutPie2HighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const LayoutPie2DarkMode = getStoryVariant(Basic, DARK_MODE); +export const LayoutPie2HighContrast = getStoryVariant(LayoutPie2, HIGH_CONTRAST); +export const LayoutPie2DarkMode = getStoryVariant(LayoutPie2, DARK_MODE); export const LayoutPie = () => ; LayoutPie.storyName = 'layoutPie'; -export const LayoutPieHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const LayoutPieDarkMode = getStoryVariant(Basic, DARK_MODE); +export const LayoutPieHighContrast = getStoryVariant(LayoutPie, HIGH_CONTRAST); +export const LayoutPieDarkMode = getStoryVariant(LayoutPie, DARK_MODE); export const OverflowIndicator = () => ; OverflowIndicator.storyName = 'overflowIndicator'; -export const OverflowIndicatorHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const OverflowIndicatorDarkMode = getStoryVariant(Basic, DARK_MODE); +export const OverflowIndicatorHighContrast = getStoryVariant(OverflowIndicator, HIGH_CONTRAST); +export const OverflowIndicatorDarkMode = getStoryVariant(OverflowIndicator, DARK_MODE); From fd8c49537ac768c4937f4ef6325ec28bd522bc8f Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 2 Oct 2022 01:39:28 -0700 Subject: [PATCH 08/73] add utility functions for CSF test creation --- .../src/utilities/StoryDecorators.tsx | 21 ++++++++++++ .../src/utilities/getStoryVariant.ts | 32 +++++++++++++++++++ .../src/utilities/index.ts | 2 ++ 3 files changed, 55 insertions(+) create mode 100644 apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx create mode 100644 apps/vr-tests-react-components/src/utilities/getStoryVariant.ts diff --git a/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx b/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx new file mode 100644 index 0000000000000..374f9e47e3f26 --- /dev/null +++ b/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { DecoratorFunction } from '@storybook/addons'; +import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme'; +import { FluentProvider } from '@fluentui/react-provider'; +import { ExtendedStoryFnReturnType } from './types'; + +export const DarkModeDecorator: DecoratorFunction = story => { + return {story()}; +}; + +export const HighContrastDecorator: DecoratorFunction = story => { + return {story()}; +}; + +export const RTLDecorator: DecoratorFunction = story => { + return ( + + {story()} + + ); +}; diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts new file mode 100644 index 0000000000000..28412bc34b574 --- /dev/null +++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts @@ -0,0 +1,32 @@ +import { ComponentStory } from '@storybook/react'; +import { DarkModeDecorator, HighContrastDecorator, RTLDecorator } from './StoryDecorators'; + +export const DARK_MODE = 'Dark Mode'; +export const HIGH_CONTRAST = 'High Contrast'; +export const RTL = 'RTL'; + +/** + * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story. + */ +export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Dark Mode' | 'High Contrast') => { + let decorator; + + if (variant === RTL) { + decorator = RTLDecorator; + } + + if (variant === DARK_MODE) { + decorator = DarkModeDecorator; + } + + if (variant === HIGH_CONTRAST) { + decorator = HighContrastDecorator; + } + + return { + ...story, + render: story, + storyName: `${story.storyName} - ${variant}`, + decorators: [decorator], + }; +}; diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index 12fc4954c5d70..d071a94751e8b 100644 --- a/apps/vr-tests-react-components/src/utilities/index.ts +++ b/apps/vr-tests-react-components/src/utilities/index.ts @@ -8,3 +8,5 @@ declare module '@storybook/addons' { } export * from './TestWrapperDecorator'; +export * from './StoryDecorators'; +export * from './getStoryVariant'; From 68f2c3c43f552ae8e7fc814c370f20c362edc66c Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 2 Oct 2022 02:10:33 -0700 Subject: [PATCH 09/73] chore: convert Button stories to CSF --- .../src/stories/Button.stories.tsx | 569 ------------------ .../src/stories/Button/Button.stories.tsx | 200 ++++++ 2 files changed, 200 insertions(+), 569 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Button.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx deleted file mode 100644 index 23c3f2e7077f1..0000000000000 --- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx +++ /dev/null @@ -1,569 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; -import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button'; -import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; - -const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); - -const steps = new Screener.Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - -storiesOf('Button Converged', module) - .addDecorator(story => {story()}) - .addStory('Default', () => , { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }) - .addStory('Circular', () => ( - - )) - .addStory('Outline', () => ( - - )) - .addStory( - 'Primary', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Subtle', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Transparent', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Disabled', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Outline Disabled', - () => ( - - ), - { - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'Primary Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Subtle Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory( - 'Transparent Disabled', - () => ( - - ), - { includeHighContrast: true, includeDarkMode: true }, - ) - .addStory('Size small', () => ( - - )) - .addStory('Size large', () => ( - - )) - .addStory('Size small - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory('Size medium - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory('Size large - with long text wrapping', () => { - const styles = useStyles(); - return ( - - ); - }) - .addStory( - 'With icon before content', - () => ( - - ), - { - includeRtl: true, - }, - ) - .addStory( - 'With icon after content', - () => ( - - ), - { includeRtl: true }, - ) - .addStory('Icon only', () => ; + +export const DefaultRTL = getStoryVariant(Default, RTL); +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); + +export const Circular = () => ( + +); + +export const Outline = () => ( + +); + +export const Primary = () => ( + +); + +export const PrimaryHighContrast = getStoryVariant(Primary, HIGH_CONTRAST); +export const PrimaryDarkMode = getStoryVariant(Primary, DARK_MODE); + +export const Subtle = () => ( + +); + +export const SubtleHighContrast = getStoryVariant(Subtle, HIGH_CONTRAST); +export const SubtleDarkMode = getStoryVariant(Subtle, DARK_MODE); + +export const Transparent = () => ( + +); + +export const TransparentHighContrast = getStoryVariant(Transparent, HIGH_CONTRAST); +export const TransparentDarkMode = getStoryVariant(Transparent, DARK_MODE); + +export const Disabled = () => ( + +); + +export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST); +export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE); + +export const OutlineDisabled = () => ( + +); + +export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST); +export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE); + +export const PrimaryDisabled = () => ( + +); + +export const PrimaryDisabledHighContrast = getStoryVariant(PrimaryDisabled, HIGH_CONTRAST); +export const PrimaryDisabledDarkMode = getStoryVariant(PrimaryDisabled, DARK_MODE); + +export const SubtleDisabled = () => ( + +); + +export const SubtleDisabledHighContrast = getStoryVariant(SubtleDisabled, HIGH_CONTRAST); +export const SubtleDisabledDarkMode = getStoryVariant(SubtleDisabled, DARK_MODE); + +export const TransparentDisabled = () => ( + +); + +export const TransparentDisabledHighContrast = getStoryVariant(TransparentDisabled, HIGH_CONTRAST); +export const TransparentDisabledDarkMode = getStoryVariant(TransparentDisabled, DARK_MODE); + +export const SizeSmall = () => ( + +); + +SizeSmall.storyName = 'Size small'; + +export const SizeLarge = () => ( + +); + +SizeLarge.storyName = 'Size large'; + +export const SizeSmallWithLongTextWrapping = () => { + const styles = useStyles(); + return ( + + ); +}; + +SizeSmallWithLongTextWrapping.storyName = 'Size small - with long text wrapping'; + +export const SizeMediumWithLongTextWrapping = () => { + const styles = useStyles(); + return ( + + ); +}; + +SizeMediumWithLongTextWrapping.storyName = 'Size medium - with long text wrapping'; + +export const SizeLargeWithLongTextWrapping = () => { + const styles = useStyles(); + return ( + + ); +}; + +SizeLargeWithLongTextWrapping.storyName = 'Size large - with long text wrapping'; + +export const WithIconBeforeContent = () => ( + +); + +WithIconBeforeContent.storyName = 'With icon before content'; + +export const WithIconBeforeContentRTL = getStoryVariant(WithIconBeforeContent, RTL); + +export const WithIconAfterContent = () => ( + +); + +WithIconAfterContent.storyName = 'With icon after content'; + +export const WithIconAfterContentRTL = getStoryVariant(WithIconAfterContent, RTL); + +export const IconOnly = () => ; export const DefaultRTL = getStoryVariant(Default, RTL); -export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); export const Circular = () => ( ; + +export const ButtonDarkMode = { + render: Button, + parameters: { variant: DARK_MODE }, // story renders in Dark mode. +}; + +export const ButtonHighContrast = { + render: Button, + parameters: { variant: HIGH_CONTRAST }; // story renders in High Contrast mode. +} + +export const ButtonRTL = { + render: Button, + parameters: { variant: RTL }, // story renders in RTL. +}; + ``` From 794bd7f6fbc9c96db7818b54d2fe356356e018b0 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 10 Oct 2022 15:11:35 -0700 Subject: [PATCH 23/73] remove unneed peerDep --- packages/react-components/react-storybook/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-components/react-storybook/package.json b/packages/react-components/react-storybook/package.json index 290b65ba83ad4..434ee71641d77 100644 --- a/packages/react-components/react-storybook/package.json +++ b/packages/react-components/react-storybook/package.json @@ -36,8 +36,7 @@ "@types/react": ">=16.8.0 <18.0.0", "react": ">=16.8.0 <18.0.0", "@storybook/addon-knobs": "^6.0.28", - "@storybook/addons": "^6.0.28", - "@storybook/react": "^6.5.5" + "@storybook/addons": "^6.0.28" }, "beachball": { "disallowedChangeTypes": [ From f3068462f8eb3c66df12f4c82b09971b403e6f3c Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 10 Oct 2022 16:03:03 -0700 Subject: [PATCH 24/73] fix: typing --- .../src/decorators/withFluentVrTestVariants.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx b/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx index ec430031650f4..bced594168eb3 100644 --- a/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx +++ b/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { FluentProvider } from '@fluentui/react-provider'; import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-theme'; -import { makeDecorator, DecoratorFunction } from '@storybook/addons'; -import type { StoryContext } from '@storybook/react'; +import { makeDecorator } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; export const DARK_MODE = 'DarkMode'; export const HIGH_CONTRAST = 'HighContrast'; @@ -27,7 +27,7 @@ type AssertedMakeDecorator = ({ parameterName, skipIfNoParametersOrOptions, wrapper, -}: AssertedMakeDecoratorOptions) => DecoratorFunction; +}: AssertedMakeDecoratorOptions) => () => React.ReactNode; export const withFluentVrTestVariants = ((makeDecorator as unknown) as AssertedMakeDecorator)({ name: 'withFluentVrTestVariants.', From fb87708ab46c08f137d00166a5293b5af2e62204 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 10 Oct 2022 16:03:22 -0700 Subject: [PATCH 25/73] Update API --- .../react-storybook/etc/react-storybook.api.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-components/react-storybook/etc/react-storybook.api.md b/packages/react-components/react-storybook/etc/react-storybook.api.md index 1290f16b5b06a..a78d1619f159d 100644 --- a/packages/react-components/react-storybook/etc/react-storybook.api.md +++ b/packages/react-components/react-storybook/etc/react-storybook.api.md @@ -4,7 +4,6 @@ ```ts -import { DecoratorFunction } from '@storybook/addons'; import * as React_2 from 'react'; // @public (undocumented) @@ -20,7 +19,7 @@ export const RTL = "Rtl"; export const withFluentProvider: (...args: any) => any; // @public (undocumented) -export const withFluentVrTestVariants: DecoratorFunction; +export const withFluentVrTestVariants: () => React_2.ReactNode; // @public (undocumented) export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element; From 7bf18738bc1378b1e1bfa5e800dd3248879d5ede Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 12 Oct 2022 11:42:11 -0700 Subject: [PATCH 26/73] revert additions to react-storybook package --- .../decorators/withFluentVrTestVariants.tsx | 80 +++++++++++++++++++ .../react-storybook/src/decorators/index.ts | 1 - .../react-storybook/src/index.test.ts | 4 +- .../react-storybook/src/index.ts | 9 +-- 4 files changed, 83 insertions(+), 11 deletions(-) create mode 100644 packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx new file mode 100644 index 0000000000000..5efc1159b6df1 --- /dev/null +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx @@ -0,0 +1,80 @@ +import * as React from 'react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-theme'; +import { makeDecorator } from '@storybook/addons'; +import type { StoryContext } from '@storybook/addons'; +import { useParameter } from '@storybook/api'; + +export const DARK_MODE = 'DarkMode'; +export const HIGH_CONTRAST = 'HighContrast'; +export const RTL = 'Rtl'; + +// MakeDecoratorOptions is not an exported interface by storybook so had to include necessary options +interface AssertedMakeDecoratorOptions { + name: string; + parameterName: string; + skipIfNoParametersOrOptions?: boolean; + wrapper: ( + storyFn: (context: StoryContext) => React.ReactNode, + context: StoryContext, + settings: { + parameters: typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL; + }, + ) => React.ReactNode; +} + +type AssertedMakeDecorator = ({ + name, + parameterName, + skipIfNoParametersOrOptions, + wrapper, +}: AssertedMakeDecoratorOptions) => () => React.ReactNode; + +// export const withFluentVrTestVariants = ((makeDecorator as unknown) as AssertedMakeDecorator)({ +// name: 'withFluentVrTestVariants.', +// parameterName: 'vrTestVariant', +// skipIfNoParametersOrOptions: true, +// wrapper: (storyFn, context, { parameters }) => { +// console.log('parameter ', parameters); +// if (parameters === RTL) { +// return ( +// +// {storyFn(context)} +// +// ); +// } + +// if (parameters === DARK_MODE) { +// return {storyFn(context)}; +// } + +// if (parameters === HIGH_CONTRAST) { +// return {storyFn(context)}; +// } + +// return storyFn(context); +// }, +// }); + +export const withFluentVrTestVariants = (storyFn: () => JSX.Element, context: StoryContext) => { + const { variant } = context.parameters; + + // console.log('context', context); + if (variant === RTL) { + return ( + + {storyFn()} + + ); + } + + if (variant === DARK_MODE) { + return {storyFn()}; + } + + if (variant === HIGH_CONTRAST) { + return {storyFn()}; + } + + return storyFn(); +}; diff --git a/packages/react-components/react-storybook/src/decorators/index.ts b/packages/react-components/react-storybook/src/decorators/index.ts index fc01a36add316..ff044dce8afc1 100644 --- a/packages/react-components/react-storybook/src/decorators/index.ts +++ b/packages/react-components/react-storybook/src/decorators/index.ts @@ -1,3 +1,2 @@ export * from './withFluentProvider'; export * from './withStrictMode'; -export * from './withFluentVrTestVariants'; diff --git a/packages/react-components/react-storybook/src/index.test.ts b/packages/react-components/react-storybook/src/index.test.ts index b43c19d8229ea..3f2fe8451a862 100644 --- a/packages/react-components/react-storybook/src/index.test.ts +++ b/packages/react-components/react-storybook/src/index.test.ts @@ -1,9 +1,9 @@ -import { withFluentProvider, withFluentVrTestVariants, withStrictMode } from './index'; +import { withFluentProvider, withStrictMode } from './index'; describe(`public api`, () => { describe(`decorators`, () => { it(`should work`, () => { - const decorators = [withFluentProvider, withStrictMode, withFluentVrTestVariants]; + const decorators = [withFluentProvider, withStrictMode]; // @TODO - added proper tests expect(decorators).toBeDefined(); diff --git a/packages/react-components/react-storybook/src/index.ts b/packages/react-components/react-storybook/src/index.ts index a24f21148fefc..0a74f9e478521 100644 --- a/packages/react-components/react-storybook/src/index.ts +++ b/packages/react-components/react-storybook/src/index.ts @@ -1,8 +1 @@ -export { - withFluentProvider, - withStrictMode, - withFluentVrTestVariants, - DARK_MODE, - HIGH_CONTRAST, - RTL, -} from './decorators/index'; +export { withFluentProvider, withStrictMode } from './decorators/index'; From ed168ee6ee2f8b54993be9f0a5ac6262464cb761 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 12 Oct 2022 11:48:45 -0700 Subject: [PATCH 27/73] delete withFluentVrTestVariants --- .../src/decorators/withFluentProvider.tsx | 22 ++++++-- .../decorators/withFluentVrTestVariants.tsx | 55 ------------------- 2 files changed, 16 insertions(+), 61 deletions(-) delete mode 100644 packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index 7132f18de9f27..2a0b3419f6950 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -2,23 +2,33 @@ import * as React from 'react'; import { FluentProvider } from '@fluentui/react-provider'; import { Theme } from '@fluentui/react-theme'; - -import { themes, defaultTheme } from '../theme'; +import { themes, defaultTheme, ThemeIds } from '../theme'; import { THEME_ID } from '../constants'; import { FluentGlobals, FluentStoryContext } from '../hooks'; +const findTheme = (themeId?: ThemeIds) => { + if (!themeId) { + return; + } + return themes.find(value => value.id === themeId); +}; + const getActiveFluentTheme = (globals: FluentGlobals) => { const selectedThemeId = globals[THEME_ID]; - const { theme } = themes.find(value => value.id === selectedThemeId) ?? defaultTheme; + const { theme } = findTheme(selectedThemeId) ?? defaultTheme; return { theme }; }; export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentStoryContext) => { - const { theme } = getActiveFluentTheme(context.globals); + const { globals, parameters } = context; + + const globalTheme = getActiveFluentTheme(globals); + const paramTheme = findTheme(parameters.fluentTheme) ?? undefined; + const { theme } = paramTheme ?? globalTheme; return ( - + {StoryFn()} ); @@ -28,5 +38,5 @@ const FluentExampleContainer: React.FC<{ theme: Theme }> = props => { const { theme } = props; const backgroundColor = theme.colorNeutralBackground2; - return
{props.children}
; + return
{props.children}
; }; diff --git a/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx b/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx deleted file mode 100644 index bced594168eb3..0000000000000 --- a/packages/react-components/react-storybook/src/decorators/withFluentVrTestVariants.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import { FluentProvider } from '@fluentui/react-provider'; -import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-theme'; -import { makeDecorator } from '@storybook/addons'; -import type { StoryContext } from '@storybook/addons'; - -export const DARK_MODE = 'DarkMode'; -export const HIGH_CONTRAST = 'HighContrast'; -export const RTL = 'Rtl'; - -// MakeDecoratorOptions is not an exported interface by storybook so had to include necessary options -interface AssertedMakeDecoratorOptions { - name: string; - parameterName: string; - skipIfNoParametersOrOptions?: boolean; - wrapper: ( - storyFn: (context: StoryContext) => React.ReactNode, - context: StoryContext, - settings: { - parameters: typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL; - }, - ) => React.ReactNode; -} - -type AssertedMakeDecorator = ({ - name, - parameterName, - skipIfNoParametersOrOptions, - wrapper, -}: AssertedMakeDecoratorOptions) => () => React.ReactNode; - -export const withFluentVrTestVariants = ((makeDecorator as unknown) as AssertedMakeDecorator)({ - name: 'withFluentVrTestVariants.', - parameterName: 'vrTestVariant', - skipIfNoParametersOrOptions: true, - wrapper: (storyFn, context, { parameters }) => { - if (parameters === RTL) { - return ( - - {storyFn(context)} - - ); - } - - if (parameters === DARK_MODE) { - return {storyFn(context)}; - } - - if (parameters === HIGH_CONTRAST) { - return {storyFn(context)}; - } - - return storyFn(context); - }, -}); From d3765acfd699ac7a6e47d041ba9fdfa6137b97a5 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 12 Oct 2022 11:52:59 -0700 Subject: [PATCH 28/73] remove withFluentVrTestVariant --- .../decorators/withFluentVrTestVariants.tsx | 80 ------------------- 1 file changed, 80 deletions(-) delete mode 100644 packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx deleted file mode 100644 index 5efc1159b6df1..0000000000000 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentVrTestVariants.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import { FluentProvider } from '@fluentui/react-provider'; -import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-theme'; -import { makeDecorator } from '@storybook/addons'; -import type { StoryContext } from '@storybook/addons'; -import { useParameter } from '@storybook/api'; - -export const DARK_MODE = 'DarkMode'; -export const HIGH_CONTRAST = 'HighContrast'; -export const RTL = 'Rtl'; - -// MakeDecoratorOptions is not an exported interface by storybook so had to include necessary options -interface AssertedMakeDecoratorOptions { - name: string; - parameterName: string; - skipIfNoParametersOrOptions?: boolean; - wrapper: ( - storyFn: (context: StoryContext) => React.ReactNode, - context: StoryContext, - settings: { - parameters: typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL; - }, - ) => React.ReactNode; -} - -type AssertedMakeDecorator = ({ - name, - parameterName, - skipIfNoParametersOrOptions, - wrapper, -}: AssertedMakeDecoratorOptions) => () => React.ReactNode; - -// export const withFluentVrTestVariants = ((makeDecorator as unknown) as AssertedMakeDecorator)({ -// name: 'withFluentVrTestVariants.', -// parameterName: 'vrTestVariant', -// skipIfNoParametersOrOptions: true, -// wrapper: (storyFn, context, { parameters }) => { -// console.log('parameter ', parameters); -// if (parameters === RTL) { -// return ( -// -// {storyFn(context)} -// -// ); -// } - -// if (parameters === DARK_MODE) { -// return {storyFn(context)}; -// } - -// if (parameters === HIGH_CONTRAST) { -// return {storyFn(context)}; -// } - -// return storyFn(context); -// }, -// }); - -export const withFluentVrTestVariants = (storyFn: () => JSX.Element, context: StoryContext) => { - const { variant } = context.parameters; - - // console.log('context', context); - if (variant === RTL) { - return ( - - {storyFn()} - - ); - } - - if (variant === DARK_MODE) { - return {storyFn()}; - } - - if (variant === HIGH_CONTRAST) { - return {storyFn()}; - } - - return storyFn(); -}; From 1f26987d978f866c1c5b259b06d02e3d07fb6673 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 12 Oct 2022 12:18:24 -0700 Subject: [PATCH 29/73] feat: withFluentProvider now accepts fluentTheme and dir --- .../react-storybook-addon/src/components/ThemePicker.tsx | 7 +++++-- .../react-components/react-storybook-addon/src/hooks.ts | 8 +++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx index 8d06603b3e645..d48dbf24dac82 100644 --- a/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx +++ b/packages/react-components/react-storybook-addon/src/components/ThemePicker.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components'; +import { useParameter } from '@storybook/api'; import { ThemeIds, themes, defaultTheme } from '../theme'; import { THEME_ID } from '../constants'; -import { useGlobals } from '../hooks'; +import { useGlobals, FluentParameters } from '../hooks'; export interface ThemeSelectorItem { id: string; @@ -33,7 +34,9 @@ function createThemeItems( export const ThemePicker = () => { const [globals, updateGlobals] = useGlobals(); - const selectedThemeId = globals[THEME_ID] ?? defaultTheme.id; + const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme'); + + const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id; const selectedTheme = themes.find(entry => entry.id === selectedThemeId); const isActive = selectedThemeId !== defaultTheme.id; diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts index 649100df48ae8..0254f22f609f3 100644 --- a/packages/react-components/react-storybook-addon/src/hooks.ts +++ b/packages/react-components/react-storybook-addon/src/hooks.ts @@ -1,4 +1,4 @@ -import { useGlobals as useStorybookGlobals, Args as StorybookArgs } from '@storybook/api'; +import { useGlobals as useStorybookGlobals, Args as StorybookArgs, Parameters } from '@storybook/api'; import { StoryContext as StorybookContext } from '@storybook/addons'; import { THEME_ID } from './constants'; @@ -6,6 +6,7 @@ import { ThemeIds } from './theme'; export interface FluentStoryContext extends StorybookContext { globals: FluentGlobals; + parameters: FluentParameters; } /** @@ -18,3 +19,8 @@ export interface FluentGlobals extends StorybookArgs { export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] { return useStorybookGlobals(); } + +export interface FluentParameters extends Parameters { + fluentTheme: ThemeIds; + dir: 'ltr' | 'rtl'; +} From 66c95ef92034ce3c4de6a02c7d00d4da143121ca Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 12 Oct 2022 12:35:30 -0700 Subject: [PATCH 30/73] Add exported theme constants --- .../react-storybook-addon/src/theme.ts | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts index 52484c9306368..447342ad141ee 100644 --- a/packages/react-components/react-storybook-addon/src/theme.ts +++ b/packages/react-components/react-storybook-addon/src/theme.ts @@ -8,12 +8,18 @@ import { import type { Theme } from '@fluentui/react-theme'; +export const WEB_LIGHT = 'web-light'; +export const WEB_DARK = 'web-dark'; +export const TEAMS_LIGHT = 'teams-light'; +export const TEAMS_DARK = 'teams-dark'; +export const TEAMS_HIGH_CONTRAST = 'teams-high-contrast'; + export const themes = [ - { id: 'web-light', label: 'Web Light', theme: webLightTheme }, - { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme }, - { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme }, - { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme }, - { id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme }, + { id: WEB_LIGHT, label: 'Web Light', theme: webLightTheme }, + { id: WEB_DARK, label: 'Web Dark', theme: webDarkTheme }, + { id: TEAMS_LIGHT, label: 'Teams Light', theme: teamsLightTheme }, + { id: TEAMS_DARK, label: 'Teams Dark', theme: teamsDarkTheme }, + { id: TEAMS_HIGH_CONTRAST, label: 'Teams High Contrast', theme: teamsHighContrastTheme }, ] as const; export const defaultTheme = themes[0]; From ab22cd51fa4c424b464b18065f721b6415247feb Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:33:20 -0700 Subject: [PATCH 31/73] feat: add isVrTest parameter --- .../src/decorators/withFluentProvider.tsx | 6 +++--- .../react-storybook-addon/src/hooks.ts | 16 ++++++++++------ 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index 2a0b3419f6950..f79427b6fab7f 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -22,14 +22,14 @@ const getActiveFluentTheme = (globals: FluentGlobals) => { export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentStoryContext) => { const { globals, parameters } = context; - + const { isVrTest } = parameters; const globalTheme = getActiveFluentTheme(globals); - const paramTheme = findTheme(parameters.fluentTheme) ?? undefined; + const paramTheme = findTheme(parameters.fluentTheme); const { theme } = paramTheme ?? globalTheme; return ( - {StoryFn()} + {isVrTest ? StoryFn() : {StoryFn()}} ); }; diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts index 0254f22f609f3..26c19856de549 100644 --- a/packages/react-components/react-storybook-addon/src/hooks.ts +++ b/packages/react-components/react-storybook-addon/src/hooks.ts @@ -10,17 +10,21 @@ export interface FluentStoryContext extends StorybookContext { } /** - * Extends the storybook globals object to include fluent specific propoerties + * Extends the storybook globals object to include fluent specific properties */ export interface FluentGlobals extends StorybookArgs { [THEME_ID]?: ThemeIds; } -export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] { - return useStorybookGlobals(); +/** + * Extends the storybook parameters object to include fluent specific properties + */ +export interface FluentParameters extends Parameters { + dir?: 'ltr' | 'rtl'; + fluentTheme?: ThemeIds; + isVrTest?: boolean; } -export interface FluentParameters extends Parameters { - fluentTheme: ThemeIds; - dir: 'ltr' | 'rtl'; +export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] { + return useStorybookGlobals(); } From 060d69623e580aeb8ed280e5370a6bb8300ce906 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:34:07 -0700 Subject: [PATCH 32/73] Revert "Add usage of decorator to README" This reverts commit dcfcde39f3c7dfac22ecb96bc133c511e61a6adf. --- .../react-storybook/README.md | 29 ++----------------- 1 file changed, 2 insertions(+), 27 deletions(-) diff --git a/packages/react-components/react-storybook/README.md b/packages/react-components/react-storybook/README.md index 64607466e8d42..bdc825fa64b22 100644 --- a/packages/react-components/react-storybook/README.md +++ b/packages/react-components/react-storybook/README.md @@ -22,33 +22,8 @@ You need to register fluentui decorators on your particular level (global/story/ // @filename: .storybook/preview.js import { withKnobs } from '@storybook/addon-knobs'; -import { withStrictMode, withFluentVrTestVariants } from '@fluentui/react-storybook'; +import { withStrictMode } from '@fluentui/react-storybook'; // Register decorators on global level -export const decorators = [withKnobs, withStrictMode, withFluentVrTestVariants]; -``` - -## withFluentVrTestVariants: - -```js -import { withFluentVrTestVariants, DARK_MODE, HIGH_CONTRAST, RTL } from '@fluentui/react-storybook'; -import { Button } from '@fluentui/react-components'; - -export const Button = () => ; - -export const ButtonDarkMode = { - render: Button, - parameters: { variant: DARK_MODE }, // story renders in Dark mode. -}; - -export const ButtonHighContrast = { - render: Button, - parameters: { variant: HIGH_CONTRAST }; // story renders in High Contrast mode. -} - -export const ButtonRTL = { - render: Button, - parameters: { variant: RTL }, // story renders in RTL. -}; - +export const decorators = [withKnobs, withStrictMode]; ``` From 18c3e6d2551e137a3f64b183b96420f027e2d67e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:48:09 -0700 Subject: [PATCH 33/73] update ReadMe --- .../react-storybook-addon/README.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/react-components/react-storybook-addon/README.md b/packages/react-components/react-storybook-addon/README.md index 452ce80d947b8..1e95d5ecc715f 100644 --- a/packages/react-components/react-storybook-addon/README.md +++ b/packages/react-components/react-storybook-addon/README.md @@ -68,3 +68,34 @@ module.exports = { - > 💡 this will run `prestorybook` script that compiles addon implementation with all of its direct dependencies that live within monorepo, so it can be consumed by local storybook 2. Every time you do any change to implementation, after you ran your local storybook you'll need to manually run `yarn workspace @fluentui/react-storybook-addon build` to reflect those changes + +## Parameter Configuration + +- Three custom optional parameters can be set to alter behavior of the addon + 1. `dir` - determines whether to render story in `ltr` or `rtl` mode. Default is `undefined`. + 2. `fluentTheme` - determines whether to render story theme in `web-light`, `web-dark`, `teams-high-contrast`, `teams-dark`, or `teams-light`. Setting this + parameter will disable ability to dynamically change the theme within story canvas or doc. + 3. `isVrTest` - when set to `true`, this removes injected padding and background theme that's automatically applied from rendered story. + +```js +import { TEAMS_HIGH_CONTRAST, WEB_DARK, WEB_LIGHT } from '@fluentui/react-storybook-addon'; +import { Button } from '@fluentui/react-components'; + +export const Button = () => ; + +export const ButtonDarkMode = { + render: Button, + parameters: { fluentTheme: WEB_DARK }, // story renders in Dark mode. +}; + +export const ButtonHighContrast = { + render: Button, + parameters: { fluentTheme: TEAMS_HIGH_CONTRAST, isVrTest: true }; // story renders in High Contrast mode without injected padding and background style. +} + +export const ButtonRTL = { + render: Button, + parameters: { fluentTheme: WEB_LIGHT, dir: 'rtl', isVrTest: true}, // story renders in RTL, Web light mode and without injected padding and background style. +}; + +``` From 14847d92f4bd6910a7d0c5f3f65918f6b5878d23 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:54:10 -0700 Subject: [PATCH 34/73] Add constants and FluentParameters to exports --- packages/react-components/react-storybook-addon/src/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts index ecb1744ced790..4a5bdd736135a 100644 --- a/packages/react-components/react-storybook-addon/src/index.ts +++ b/packages/react-components/react-storybook-addon/src/index.ts @@ -1,4 +1,4 @@ -export type { FluentGlobals, FluentStoryContext } from './hooks'; +export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks'; export type { ThemeIds } from './theme'; -export { themes } from './theme'; +export { themes, TEAMS_DARK, TEAMS_HIGH_CONTRAST, TEAMS_LIGHT, WEB_DARK, WEB_LIGHT } from './theme'; export { THEME_ID } from './constants'; From 20091d7bb91074ebfe0742b1946ab5391ecd95bf Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:55:38 -0700 Subject: [PATCH 35/73] Update API --- .../etc/react-storybook-addon.api.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index c9d140b21ddb9..a60d1b5abd541 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -5,6 +5,7 @@ ```ts import { Args } from '@storybook/api'; +import { Parameters as Parameters_2 } from '@storybook/api'; import { StoryContext } from '@storybook/addons'; import type { Theme } from '@fluentui/react-theme'; @@ -14,12 +15,33 @@ export interface FluentGlobals extends Args { [THEME_ID]?: ThemeIds; } +// @public +export interface FluentParameters extends Parameters_2 { + // (undocumented) + dir?: 'ltr' | 'rtl'; + // (undocumented) + fluentTheme?: ThemeIds; + // (undocumented) + isVrTest?: boolean; +} + // @public (undocumented) export interface FluentStoryContext extends StoryContext { // (undocumented) globals: FluentGlobals; + // (undocumented) + parameters: FluentParameters; } +// @public (undocumented) +export const TEAMS_DARK = "teams-dark"; + +// @public (undocumented) +export const TEAMS_HIGH_CONTRAST = "teams-high-contrast"; + +// @public (undocumented) +export const TEAMS_LIGHT = "teams-light"; + // @public (undocumented) export const THEME_ID: "storybook/fluentui-react-addon/theme"; @@ -49,6 +71,12 @@ export const themes: readonly [{ readonly theme: Theme; }]; +// @public (undocumented) +export const WEB_DARK = "web-dark"; + +// @public (undocumented) +export const WEB_LIGHT = "web-light"; + // (No @packageDocumentation comment for this package) ``` From e840ba7141db7df3b5db18eae095275e84306200 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:56:50 -0700 Subject: [PATCH 36/73] Revert "Update API" This reverts commit fb87708ab46c08f137d00166a5293b5af2e62204. --- .../react-storybook/etc/react-storybook.api.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-storybook/etc/react-storybook.api.md b/packages/react-components/react-storybook/etc/react-storybook.api.md index a78d1619f159d..1290f16b5b06a 100644 --- a/packages/react-components/react-storybook/etc/react-storybook.api.md +++ b/packages/react-components/react-storybook/etc/react-storybook.api.md @@ -4,6 +4,7 @@ ```ts +import { DecoratorFunction } from '@storybook/addons'; import * as React_2 from 'react'; // @public (undocumented) @@ -19,7 +20,7 @@ export const RTL = "Rtl"; export const withFluentProvider: (...args: any) => any; // @public (undocumented) -export const withFluentVrTestVariants: () => React_2.ReactNode; +export const withFluentVrTestVariants: DecoratorFunction; // @public (undocumented) export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element; From 21eba2e5a72be790593be98154a38dc3251a9ece Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 13 Oct 2022 03:57:27 -0700 Subject: [PATCH 37/73] Revert "fix: typing and update API" This reverts commit bda9ea40291e1e694a3ff7b968b8490269a38ec9. --- .../react-storybook/etc/react-storybook.api.md | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/react-components/react-storybook/etc/react-storybook.api.md b/packages/react-components/react-storybook/etc/react-storybook.api.md index 1290f16b5b06a..3b8bfcc94de54 100644 --- a/packages/react-components/react-storybook/etc/react-storybook.api.md +++ b/packages/react-components/react-storybook/etc/react-storybook.api.md @@ -3,28 +3,13 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts - -import { DecoratorFunction } from '@storybook/addons'; import * as React_2 from 'react'; -// @public (undocumented) -export const DARK_MODE = "DarkMode"; - -// @public (undocumented) -export const HIGH_CONTRAST = "HighContrast"; - -// @public (undocumented) -export const RTL = "Rtl"; - // @public (undocumented) export const withFluentProvider: (...args: any) => any; -// @public (undocumented) -export const withFluentVrTestVariants: DecoratorFunction; - // @public (undocumented) export const withStrictMode: (storyFn: () => React_2.ReactNode) => JSX.Element; // (No @packageDocumentation comment for this package) - ``` From 81de5233d94b8fa35eb180143530d4392370a572 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 04:49:58 -0700 Subject: [PATCH 38/73] feedback: don't export constants, export FluentParameter type --- .../etc/react-storybook-addon.api.md | 15 --------------- .../react-storybook-addon/src/index.ts | 2 +- .../react-storybook-addon/src/theme.ts | 16 +++++----------- 3 files changed, 6 insertions(+), 27 deletions(-) diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index a60d1b5abd541..7260db227a34f 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -33,15 +33,6 @@ export interface FluentStoryContext extends StoryContext { parameters: FluentParameters; } -// @public (undocumented) -export const TEAMS_DARK = "teams-dark"; - -// @public (undocumented) -export const TEAMS_HIGH_CONTRAST = "teams-high-contrast"; - -// @public (undocumented) -export const TEAMS_LIGHT = "teams-light"; - // @public (undocumented) export const THEME_ID: "storybook/fluentui-react-addon/theme"; @@ -71,12 +62,6 @@ export const themes: readonly [{ readonly theme: Theme; }]; -// @public (undocumented) -export const WEB_DARK = "web-dark"; - -// @public (undocumented) -export const WEB_LIGHT = "web-light"; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts index 4a5bdd736135a..d0b55796b9660 100644 --- a/packages/react-components/react-storybook-addon/src/index.ts +++ b/packages/react-components/react-storybook-addon/src/index.ts @@ -1,4 +1,4 @@ export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks'; export type { ThemeIds } from './theme'; -export { themes, TEAMS_DARK, TEAMS_HIGH_CONTRAST, TEAMS_LIGHT, WEB_DARK, WEB_LIGHT } from './theme'; +export { themes } from './theme'; export { THEME_ID } from './constants'; diff --git a/packages/react-components/react-storybook-addon/src/theme.ts b/packages/react-components/react-storybook-addon/src/theme.ts index 447342ad141ee..52484c9306368 100644 --- a/packages/react-components/react-storybook-addon/src/theme.ts +++ b/packages/react-components/react-storybook-addon/src/theme.ts @@ -8,18 +8,12 @@ import { import type { Theme } from '@fluentui/react-theme'; -export const WEB_LIGHT = 'web-light'; -export const WEB_DARK = 'web-dark'; -export const TEAMS_LIGHT = 'teams-light'; -export const TEAMS_DARK = 'teams-dark'; -export const TEAMS_HIGH_CONTRAST = 'teams-high-contrast'; - export const themes = [ - { id: WEB_LIGHT, label: 'Web Light', theme: webLightTheme }, - { id: WEB_DARK, label: 'Web Dark', theme: webDarkTheme }, - { id: TEAMS_LIGHT, label: 'Teams Light', theme: teamsLightTheme }, - { id: TEAMS_DARK, label: 'Teams Dark', theme: teamsDarkTheme }, - { id: TEAMS_HIGH_CONTRAST, label: 'Teams High Contrast', theme: teamsHighContrastTheme }, + { id: 'web-light', label: 'Web Light', theme: webLightTheme }, + { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme }, + { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme }, + { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme }, + { id: 'teams-high-contrast', label: 'Teams High Contrast', theme: teamsHighContrastTheme }, ] as const; export const defaultTheme = themes[0]; From b5f378816a1794245bd352c8c4612a222481fac1 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 05:01:16 -0700 Subject: [PATCH 39/73] feedback: replace isVrTest param with more dynamic mode param --- .../src/decorators/withFluentProvider.tsx | 4 +++- packages/react-components/react-storybook-addon/src/hooks.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx index f79427b6fab7f..8d513eb8961f6 100644 --- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx +++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx @@ -22,7 +22,9 @@ const getActiveFluentTheme = (globals: FluentGlobals) => { export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentStoryContext) => { const { globals, parameters } = context; - const { isVrTest } = parameters; + const { mode } = parameters; + const isVrTest = mode === 'vr-test'; + const globalTheme = getActiveFluentTheme(globals); const paramTheme = findTheme(parameters.fluentTheme); const { theme } = paramTheme ?? globalTheme; diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts index 26c19856de549..7a2d27ccc9952 100644 --- a/packages/react-components/react-storybook-addon/src/hooks.ts +++ b/packages/react-components/react-storybook-addon/src/hooks.ts @@ -22,7 +22,7 @@ export interface FluentGlobals extends StorybookArgs { export interface FluentParameters extends Parameters { dir?: 'ltr' | 'rtl'; fluentTheme?: ThemeIds; - isVrTest?: boolean; + mode?: 'default' | 'vr-test'; } export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] { From 4842eb93b92f604ee2f7bb7ad95186520588427f Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 05:17:28 -0700 Subject: [PATCH 40/73] feedback: add parameters identity function and export --- packages/react-components/react-storybook-addon/src/hooks.ts | 4 ++++ packages/react-components/react-storybook-addon/src/index.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts index 7a2d27ccc9952..ac9a7055cef9f 100644 --- a/packages/react-components/react-storybook-addon/src/hooks.ts +++ b/packages/react-components/react-storybook-addon/src/hooks.ts @@ -28,3 +28,7 @@ export interface FluentParameters extends Parameters { export function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] { return useStorybookGlobals(); } + +export function parameters(options?: FluentParameters) { + return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options }; +} diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts index d0b55796b9660..7e02b8967b3ea 100644 --- a/packages/react-components/react-storybook-addon/src/index.ts +++ b/packages/react-components/react-storybook-addon/src/index.ts @@ -2,3 +2,4 @@ export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hook export type { ThemeIds } from './theme'; export { themes } from './theme'; export { THEME_ID } from './constants'; +export { parameters } from './hooks'; From 83173292245f6d44df971414a0f43547b3ce469c Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 05:17:39 -0700 Subject: [PATCH 41/73] Update API --- .../etc/react-storybook-addon.api.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md index 7260db227a34f..02800552969e2 100644 --- a/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md +++ b/packages/react-components/react-storybook-addon/etc/react-storybook-addon.api.md @@ -22,7 +22,7 @@ export interface FluentParameters extends Parameters_2 { // (undocumented) fluentTheme?: ThemeIds; // (undocumented) - isVrTest?: boolean; + mode?: 'default' | 'vr-test'; } // @public (undocumented) @@ -33,6 +33,13 @@ export interface FluentStoryContext extends StoryContext { parameters: FluentParameters; } +// @public (undocumented) +export function parameters(options?: FluentParameters): { + dir: string; + fluentTheme: string; + mode: string; +}; + // @public (undocumented) export const THEME_ID: "storybook/fluentui-react-addon/theme"; From 55836b63c0e4ba1b4fda5b16be399a696e073286 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 05:23:30 -0700 Subject: [PATCH 42/73] Update README --- .../react-components/react-storybook-addon/README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-storybook-addon/README.md b/packages/react-components/react-storybook-addon/README.md index 1e95d5ecc715f..a11182fce4201 100644 --- a/packages/react-components/react-storybook-addon/README.md +++ b/packages/react-components/react-storybook-addon/README.md @@ -75,27 +75,28 @@ module.exports = { 1. `dir` - determines whether to render story in `ltr` or `rtl` mode. Default is `undefined`. 2. `fluentTheme` - determines whether to render story theme in `web-light`, `web-dark`, `teams-high-contrast`, `teams-dark`, or `teams-light`. Setting this parameter will disable ability to dynamically change the theme within story canvas or doc. - 3. `isVrTest` - when set to `true`, this removes injected padding and background theme that's automatically applied from rendered story. + 3. `mode` - when set to `vr-test`, this removes injected padding and background theme that's automatically applied from rendered story. Default is `default`. ```js -import { TEAMS_HIGH_CONTRAST, WEB_DARK, WEB_LIGHT } from '@fluentui/react-storybook-addon'; +import { FluentParameters, parameters } from '@fluentui/react-storybook-addon'; import { Button } from '@fluentui/react-components'; export const Button = () => ; export const ButtonDarkMode = { render: Button, - parameters: { fluentTheme: WEB_DARK }, // story renders in Dark mode. + parameters: { fluentTheme: 'web-dark' } as FluentParameters, // story renders in Dark mode. }; export const ButtonHighContrast = { render: Button, - parameters: { fluentTheme: TEAMS_HIGH_CONTRAST, isVrTest: true }; // story renders in High Contrast mode without injected padding and background style. + parameters: { fluentTheme: 'teams-high-contrast', mode: 'vr-test' } as FluentParameters; // story renders in High Contrast mode without injected padding and background style. } export const ButtonRTL = { render: Button, - parameters: { fluentTheme: WEB_LIGHT, dir: 'rtl', isVrTest: true}, // story renders in RTL, Web light mode and without injected padding and background style. + // parameters identity function will have all TS type annotations built in for intellisense. + parameters: parameters({ fluentTheme: 'web-light', dir: 'rtl', mode: 'vr-test'}), // story renders in RTL, Web light mode and without injected padding and background style. }; ``` From d1b213d0879e58065edf099dc5cc662a38cd16e2 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 11:11:49 -0700 Subject: [PATCH 43/73] refactor: use withFluentProvider addon instead and configure parameters for VR stories --- .../.storybook/main.js | 2 ++ .../.storybook/preview.js | 9 ++----- apps/vr-tests-react-components/package.json | 1 + .../src/utilities/StoryDecorators.tsx | 21 ---------------- .../src/utilities/getStoryVariant.ts | 25 +++++++------------ .../src/utilities/index.ts | 1 - 6 files changed, 14 insertions(+), 45 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js index 66d036830a218..f5d8408fdc612 100644 --- a/apps/vr-tests-react-components/.storybook/main.js +++ b/apps/vr-tests-react-components/.storybook/main.js @@ -1,7 +1,9 @@ const path = require('path'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); +const { loadWorkspaceAddon } = require('@fluentui/scripts/storybook'); module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({ + addons: [loadWorkspaceAddon('@fluentui/react-storybook-addon')], stories: ['../src/**/*.stories.tsx'], core: { builder: 'webpack5', diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js index 191e2c99aa41b..da9d74b607622 100644 --- a/apps/vr-tests-react-components/.storybook/preview.js +++ b/apps/vr-tests-react-components/.storybook/preview.js @@ -53,13 +53,8 @@ setAddon({ }, }); -export const parameters = { layout: 'none' }; - -export const decorators = [ - /** @type {import("@storybook/csf").DecoratorFunction} */ story => ( - {story()} - ), -]; +/** @type {import("@fluentui/react-storybook-addon").FluentParameters} */ +export const parameters = { layout: 'none', mode: 'vr-test' }; // For static storybook per https://github.com/screener-io/screener-storybook#testing-with-static-storybook-app if (typeof window === 'object') { diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index d6c2208498a5f..f830fda47e453 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -43,6 +43,7 @@ "@fluentui/react-slider": "^9.0.8", "@fluentui/react-spinner": "^9.0.8", "@fluentui/react-spinbutton": "^9.0.5", + "@fluentui/react-storybook-addon": "^9.0.0-rc.1", "@fluentui/react-switch": "^9.0.9", "@fluentui/react-tabs": "^9.0.9", "@fluentui/react-table": "9.0.0-alpha.7", diff --git a/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx b/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx deleted file mode 100644 index 374f9e47e3f26..0000000000000 --- a/apps/vr-tests-react-components/src/utilities/StoryDecorators.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import { DecoratorFunction } from '@storybook/addons'; -import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme'; -import { FluentProvider } from '@fluentui/react-provider'; -import { ExtendedStoryFnReturnType } from './types'; - -export const DarkModeDecorator: DecoratorFunction = story => { - return {story()}; -}; - -export const HighContrastDecorator: DecoratorFunction = story => { - return {story()}; -}; - -export const RTLDecorator: DecoratorFunction = story => { - return ( - - {story()} - - ); -}; diff --git a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts index 7550a60a30c3e..48fd8229cbb88 100644 --- a/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts +++ b/apps/vr-tests-react-components/src/utilities/getStoryVariant.ts @@ -1,5 +1,5 @@ import { ComponentStory } from '@storybook/react'; -import { DarkModeDecorator, HighContrastDecorator, RTLDecorator } from './StoryDecorators'; +import { parameters } from '@fluentui/react-storybook-addon'; export const DARK_MODE = 'Dark Mode'; export const HIGH_CONTRAST = 'High Contrast'; @@ -8,26 +8,19 @@ export const RTL = 'RTL'; /** * Helper function that returns a RTL, Dark Mode or High Contrast variant of an existing story. */ -export const getStoryVariant = (story: ComponentStory, variant: 'RTL' | 'Dark Mode' | 'High Contrast') => { - let decorator; +export const getStoryVariant = ( + story: ComponentStory, + variant: typeof DARK_MODE | typeof HIGH_CONTRAST | typeof RTL, +) => { const name = story.name.replace(/([a-z])([A-Z])/g, '$1 $2'); - - if (variant === RTL) { - decorator = RTLDecorator; - } - - if (variant === DARK_MODE) { - decorator = DarkModeDecorator; - } - - if (variant === HIGH_CONTRAST) { - decorator = HighContrastDecorator; - } + const fluentTheme = + variant === DARK_MODE ? 'web-dark' : variant === HIGH_CONTRAST ? 'teams-high-contrast' : 'web-light'; + const dir = variant === RTL ? 'rtl' : 'ltr'; return { ...story, render: story, storyName: `${story.storyName ?? name} - ${variant}`, - decorators: [decorator], + parameters: parameters({ fluentTheme, dir, mode: 'vr-test' }), }; }; diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index d071a94751e8b..e2de063e017a0 100644 --- a/apps/vr-tests-react-components/src/utilities/index.ts +++ b/apps/vr-tests-react-components/src/utilities/index.ts @@ -8,5 +8,4 @@ declare module '@storybook/addons' { } export * from './TestWrapperDecorator'; -export * from './StoryDecorators'; export * from './getStoryVariant'; From d888f928b85731ab96921ff6ff9ae6704e1e9dd8 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Thu, 20 Oct 2022 10:30:39 -0700 Subject: [PATCH 44/73] remove unintended prettier changes --- packages/react-components/react-persona/MIGRATION.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-persona/MIGRATION.md b/packages/react-components/react-persona/MIGRATION.md index 57e145ba51c7a..697c575bbd736 100644 --- a/packages/react-components/react-persona/MIGRATION.md +++ b/packages/react-components/react-persona/MIGRATION.md @@ -13,7 +13,6 @@ Here's how the API of v8's `Persona` compares to the one from v9's `Persona` com - ``` ``` - - `imageShouldFadeIn` => NOT SUPPORTED - `isOutOfOffice` => Use the `outOfOffice` prop of the `presence` slot. E.g.: `presence={{ outOfOffice: true }}` - `presence` => Use the `status` prop of the `presence` slot. E.g.: `presence={{ status: 'away' }}` From 6c6550a7d868f5595c7f4fb93114a902c229043b Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 11:56:24 -0700 Subject: [PATCH 45/73] add react-storybook-addon and update github workflow --- .github/workflows/screener-build.yml | 4 ++++ apps/vr-tests-react-components/.storybook/main.js | 1 + 2 files changed, 5 insertions(+) diff --git a/.github/workflows/screener-build.yml b/.github/workflows/screener-build.yml index f4ddf2e6633f1..098a8a6a9b82b 100644 --- a/.github/workflows/screener-build.yml +++ b/.github/workflows/screener-build.yml @@ -272,6 +272,10 @@ jobs: printenv | sort ;\ echo "SHELLOPTS $SHELLOPTS" ;\ + - name: build @fluentui/react-storybook-addon + run: yarn workspace @fluentui/react-storybook-addon build + if: ${{env.SKIP_SCREENER_BUILD == 'false'}} + - name: build vr-tests-react-components storybook run: yarn workspace @fluentui/vr-tests-react-components screener:build if: ${{env.SKIP_SCREENER_BUILD == 'false'}} diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js index f5d8408fdc612..7d8c374a4e61f 100644 --- a/apps/vr-tests-react-components/.storybook/main.js +++ b/apps/vr-tests-react-components/.storybook/main.js @@ -4,6 +4,7 @@ const { loadWorkspaceAddon } = require('@fluentui/scripts/storybook'); module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({ addons: [loadWorkspaceAddon('@fluentui/react-storybook-addon')], + stories: ['../src/**/*.stories.tsx'], core: { builder: 'webpack5', From 139aed9f61a3f80a8b07fd735c2fee92cd093fd0 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 12:04:59 -0700 Subject: [PATCH 46/73] fix: build react-storybook-addon in screener CI --- .github/workflows/screener-build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/screener-build.yml b/.github/workflows/screener-build.yml index 098a8a6a9b82b..a968727e1a1f3 100644 --- a/.github/workflows/screener-build.yml +++ b/.github/workflows/screener-build.yml @@ -273,7 +273,7 @@ jobs: echo "SHELLOPTS $SHELLOPTS" ;\ - name: build @fluentui/react-storybook-addon - run: yarn workspace @fluentui/react-storybook-addon build + run: yarn build --to @fluentui/react-storybook-addon if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - name: build vr-tests-react-components storybook From 6cf51af21ec787b18903b5f1122d7ef70be290dc Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 12:23:49 -0700 Subject: [PATCH 47/73] test: remove loadworkspaceaddon --- apps/vr-tests-react-components/.storybook/main.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js index 7d8c374a4e61f..c87c619441da7 100644 --- a/apps/vr-tests-react-components/.storybook/main.js +++ b/apps/vr-tests-react-components/.storybook/main.js @@ -1,9 +1,8 @@ const path = require('path'); const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); -const { loadWorkspaceAddon } = require('@fluentui/scripts/storybook'); module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConfig} */ ({ - addons: [loadWorkspaceAddon('@fluentui/react-storybook-addon')], + addons: ['@fluentui/react-storybook-addon'], stories: ['../src/**/*.stories.tsx'], core: { From c0616d0d63fad1ee087c61db779d94eb5aab5c9d Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 13:53:52 -0700 Subject: [PATCH 48/73] feat: add utils file to host reused stuff in various Button stories --- .../src/stories/Button/Button.stories.tsx | 23 +++-------------- .../stories/Button/CompoundButton.stories.tsx | 23 +++-------------- .../Button/CompoundButtonDefault.stories.tsx | 5 ++-- .../src/stories/Button/MenuButton.stories.tsx | 23 +++-------------- .../stories/Button/ToggleButton.stories.tsx | 23 +++-------------- .../src/stories/Button/utils.tsx | 25 +++++++++++++++++++ 6 files changed, 39 insertions(+), 83 deletions(-) create mode 100644 apps/vr-tests-react-components/src/stories/Button/utils.tsx diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx index a146157cda10b..ca21b59d4ca52 100644 --- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx @@ -1,33 +1,16 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; import { Button } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities/index'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { buttonId, useStyles, ButtonDecorator } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const steps = new Screener.Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - export default { title: 'Button Converged', Component: Button, - decorators: [story => {story()}], + decorators: [ButtonDecorator], } as ComponentMeta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx index fe45ea529b103..c5ff7b2306f7b 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx @@ -1,33 +1,16 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities/index'; +import { getStoryVariant, RTL } from '../../utilities'; +import { buttonId, useStyles, ButtonDecorator } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const steps = new Screener.Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - export default { title: 'CompoundButton Converged', component: CompoundButton, - decorators: [story => {story()}], + decorators: [ButtonDecorator], } as ComponentMeta; export const Outline = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx index e0d1dad5a54f7..d1ee4973d32c0 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx @@ -3,12 +3,11 @@ import Screener from 'screener-storybook/src/screener'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities/index'; +import { getStoryVariant, RTL } from '../../utilities'; +import { buttonId } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const buttonId = 'button-id'; - export default { title: 'CompoundButton Converged', component: CompoundButton, diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx index a9e92209f9117..a227773fa8210 100644 --- a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx @@ -1,33 +1,16 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; import { MenuButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities/index'; +import { getStoryVariant, RTL } from '../../utilities'; +import { buttonId, useStyles, ButtonDecorator } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const steps = new Screener.Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - export default { title: 'MenuButton Converged', component: MenuButton, - decorators: [story => {story()}], + decorators: [ButtonDecorator], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx index 597c073843f68..61e3579dc4aa7 100644 --- a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx @@ -1,33 +1,16 @@ import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; import { ToggleButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { makeStyles } from '@griffel/react'; import { ComponentMeta } from '@storybook/react'; -import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities/index'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { buttonId, useStyles, ButtonDecorator } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); -const steps = new Screener.Steps() - .snapshot('default', { cropTo: '.testWrapper' }) - .hover('#button-id') - .snapshot('hover', { cropTo: '.testWrapper' }) - .mouseDown('#button-id') - .snapshot('pressed', { cropTo: '.testWrapper' }) - .end(); - -const buttonId = 'button-id'; - -const useStyles = makeStyles({ - longText: { - width: '280px', - }, -}); - export default { title: 'ToggleButton Converged', component: ToggleButton, - decorators: [story => {story()}], + decorators: [ButtonDecorator], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/utils.tsx b/apps/vr-tests-react-components/src/stories/Button/utils.tsx new file mode 100644 index 0000000000000..9753488161708 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Button/utils.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { DecoratorFunction } from '@storybook/addons'; +import { ExtendedStoryFnReturnType } from '../../utilities/types'; +import { makeStyles } from '@griffel/react'; + +export const buttonId = 'button-id'; + +export const useStyles = makeStyles({ + longText: { + width: '280px', + }, +}); + +const steps = new Screener.Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + .hover('#button-id') + .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('#button-id') + .snapshot('pressed', { cropTo: '.testWrapper' }) + .end(); + +export const ButtonDecorator: DecoratorFunction = story => { + return {story()} ; +}; From cd7b01dd99dc45e2e14ba54dd36067133dec4169 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 14:33:09 -0700 Subject: [PATCH 49/73] refactor: add generalized withScreenerSteps decorator --- .../src/stories/Button/Button.stories.tsx | 6 ++-- .../stories/Button/CompoundButton.stories.tsx | 6 ++-- .../Button/CompoundButtonDefault.stories.tsx | 28 ++++++++----------- .../src/stories/Button/MenuButton.stories.tsx | 6 ++-- .../stories/Button/ToggleButton.stories.tsx | 6 ++-- .../stories/Button/{utils.tsx => utils.ts} | 9 +----- .../src/utilities/index.ts | 1 + .../src/utilities/withScreenerSteps.tsx | 15 ++++++++++ 8 files changed, 40 insertions(+), 37 deletions(-) rename apps/vr-tests-react-components/src/stories/Button/{utils.tsx => utils.ts} (56%) create mode 100644 apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx index ca21b59d4ca52..09f8c3b1f6328 100644 --- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import { Button } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; -import { buttonId, useStyles, ButtonDecorator } from './utils'; +import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'Button Converged', Component: Button, - decorators: [ButtonDecorator], + decorators: [story => withScreenerSteps({ story, steps })], } as ComponentMeta; export const Default = () => ; diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx index c5ff7b2306f7b..4c067d60f8704 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButton.stories.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities'; -import { buttonId, useStyles, ButtonDecorator } from './utils'; +import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; +import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'CompoundButton Converged', component: CompoundButton, - decorators: [ButtonDecorator], + decorators: [story => withScreenerSteps({ story, steps })], } as ComponentMeta; export const Outline = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx index d1ee4973d32c0..3d73daf5f7d91 100644 --- a/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/CompoundButtonDefault.stories.tsx @@ -3,30 +3,24 @@ import Screener from 'screener-storybook/src/screener'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities'; +import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; import { buttonId } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); +const steps = new Screener.Steps() + .snapshot('default', { cropTo: '.testWrapper' }) + // https://github.com/microsoft/fluentui/issues/21998 + // .hover('#button-id') + // .snapshot('hover', { cropTo: '.testWrapper' }) + .mouseDown('#button-id') + .snapshot('pressed', { cropTo: '.testWrapper' }) + .end(); + export default { title: 'CompoundButton Converged', component: CompoundButton, - decorators: [ - story => ( - - {story()} - - ), - ], + decorators: [story => withScreenerSteps({ story, steps })], } as ComponentMeta; export const Default = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx index a227773fa8210..492115ce9318c 100644 --- a/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/MenuButton.stories.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import { MenuButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, RTL } from '../../utilities'; -import { buttonId, useStyles, ButtonDecorator } from './utils'; +import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities'; +import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'MenuButton Converged', component: MenuButton, - decorators: [ButtonDecorator], + decorators: [story => withScreenerSteps({ story, steps })], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx index 61e3579dc4aa7..4e8e4bff57ea6 100644 --- a/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/ToggleButton.stories.tsx @@ -2,15 +2,15 @@ import * as React from 'react'; import { ToggleButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; import { ComponentMeta } from '@storybook/react'; -import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; -import { buttonId, useStyles, ButtonDecorator } from './utils'; +import { getStoryVariant, withScreenerSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; +import { buttonId, steps, useStyles } from './utils'; const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular); export default { title: 'ToggleButton Converged', component: ToggleButton, - decorators: [ButtonDecorator], + decorators: [story => withScreenerSteps({ story, steps })], } as ComponentMeta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/Button/utils.tsx b/apps/vr-tests-react-components/src/stories/Button/utils.ts similarity index 56% rename from apps/vr-tests-react-components/src/stories/Button/utils.tsx rename to apps/vr-tests-react-components/src/stories/Button/utils.ts index 9753488161708..41cf2954cabb2 100644 --- a/apps/vr-tests-react-components/src/stories/Button/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/utils.ts @@ -1,7 +1,4 @@ -import * as React from 'react'; import Screener from 'screener-storybook/src/screener'; -import { DecoratorFunction } from '@storybook/addons'; -import { ExtendedStoryFnReturnType } from '../../utilities/types'; import { makeStyles } from '@griffel/react'; export const buttonId = 'button-id'; @@ -12,14 +9,10 @@ export const useStyles = makeStyles({ }, }); -const steps = new Screener.Steps() +export const steps = new Screener.Steps() .snapshot('default', { cropTo: '.testWrapper' }) .hover('#button-id') .snapshot('hover', { cropTo: '.testWrapper' }) .mouseDown('#button-id') .snapshot('pressed', { cropTo: '.testWrapper' }) .end(); - -export const ButtonDecorator: DecoratorFunction = story => { - return {story()} ; -}; diff --git a/apps/vr-tests-react-components/src/utilities/index.ts b/apps/vr-tests-react-components/src/utilities/index.ts index e2de063e017a0..9b57e0061e559 100644 --- a/apps/vr-tests-react-components/src/utilities/index.ts +++ b/apps/vr-tests-react-components/src/utilities/index.ts @@ -9,3 +9,4 @@ declare module '@storybook/addons' { export * from './TestWrapperDecorator'; export * from './getStoryVariant'; +export * from './withScreenerSteps'; diff --git a/apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx b/apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx new file mode 100644 index 0000000000000..f38886fbe9562 --- /dev/null +++ b/apps/vr-tests-react-components/src/utilities/withScreenerSteps.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Screener, { Step } from 'screener-storybook/src/screener'; +import { StoryContext } from './types'; + +export const withScreenerSteps = ({ + story, + context, + steps, +}: { + story: () => React.ReactNode; + steps: Step[]; + context?: StoryContext; +}) => { + return {story()} ; +}; From 4488610ed7bcd43f6a4b64bdc3d5baae3428a6e7 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sun, 16 Oct 2022 15:04:15 -0700 Subject: [PATCH 50/73] uncomment out flaky test --- .../src/stories/Button/Button.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx index 09f8c3b1f6328..c50d505dd8ae3 100644 --- a/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx @@ -170,7 +170,7 @@ export const WithIconAfterContent = () => ( WithIconAfterContent.storyName = 'With icon after content'; -// export const WithIconAfterContentRTL = getStoryVariant(WithIconAfterContent, RTL); +export const WithIconAfterContentRTL = getStoryVariant(WithIconAfterContent, RTL); export const IconOnly = () => +); + +AsAnAnchor.storyName = 'As an anchor'; + export const Circular = () => (
From e1861fc9fb330ec5ba58050657e017f6ab1968de Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 21 Oct 2022 18:12:22 -0700 Subject: [PATCH 59/73] fix: remove unneeded decorator --- apps/vr-tests-react-components/.storybook/preview.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js index a2d7cb8470f5a..da9d74b607622 100644 --- a/apps/vr-tests-react-components/.storybook/preview.js +++ b/apps/vr-tests-react-components/.storybook/preview.js @@ -60,9 +60,3 @@ export const parameters = { layout: 'none', mode: 'vr-test' }; if (typeof window === 'object') { /** @type {*} */ (window).__screener_storybook__ = require('@storybook/react').getStorybook; } - -export const decorators = [ - /** @type {import("@storybook/csf").DecoratorFunction} */ story => ( - {story()} - ), -]; From a8c0706f1535282f50b903114236eaa6825cdbad Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 21 Oct 2022 18:13:04 -0700 Subject: [PATCH 60/73] fix (Avatar): fix type check error for story --- .../src/stories/Avatar/AvatarGroupOverflow.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/src/stories/Avatar/AvatarGroupOverflow.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar/AvatarGroupOverflow.stories.tsx index 5de745566a4a3..c90dceca2a71a 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar/AvatarGroupOverflow.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar/AvatarGroupOverflow.stories.tsx @@ -28,7 +28,7 @@ export const OverflowContent = () => { ))} - {overflowItems.map(name => ( + {overflowItems?.map(name => ( ))} From 25ca50e8527b99af09d83574753080d4086d7bc2 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 22 Oct 2022 18:29:55 -0700 Subject: [PATCH 61/73] chore(Badge): split up Badge stories to different files --- .../src/stories/Badge.stories.tsx | 196 ------------------ .../stories/Badge/BadgeAppearance.stories.tsx | 94 +++++++++ .../src/stories/Badge/BadgeSize.stories.tsx | 155 ++++++++++++++ .../src/stories/Badge/utils.ts | 60 ++++++ 4 files changed, 309 insertions(+), 196 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Badge.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Badge/utils.ts diff --git a/apps/vr-tests-react-components/src/stories/Badge.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge.stories.tsx deleted file mode 100644 index ead15d05920ad..0000000000000 --- a/apps/vr-tests-react-components/src/stories/Badge.stories.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import { storiesOf } from '@storybook/react'; -import * as React from 'react'; -import { Badge, BadgeProps } from '@fluentui/react-badge'; -import { CircleRegular } from '@fluentui/react-icons'; -import { mergeClasses, makeStyles, shorthands } from '@griffel/react'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; - -type ValueArrays = { - [K in keyof T]: T[K][]; -}; - -const propValues: ValueArrays, 'size' | 'color' | 'appearance' | 'shape'>> = { - size: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'], - color: ['brand', 'danger', 'severe', 'warning', 'success', 'important', 'informative', 'subtle'], - appearance: ['filled', 'outline', 'tint', 'ghost'], - shape: ['circular', 'rounded', 'square'], -}; - -const useStyles = makeStyles({ - container: { - display: 'flex', - alignItems: 'center', - }, - - badgeContainer: { - display: 'flex', - alignItems: 'center', - ...shorthands.gap('5px'), - ...shorthands.padding('5px'), - }, - - label: { - marginLeft: '10px', - }, - - brandContainer: { - backgroundColor: tokens.colorBrandBackgroundStatic, - }, - - groupSet: { - display: 'inline-flex', - flexDirection: 'column', - ...shorthands.padding(0, tokens.spacingHorizontalL), - rowGap: tokens.spacingVerticalL, - }, - - group: { - display: 'inline-flex', - flexDirection: 'column', - alignItems: 'start', - rowGap: tokens.spacingVerticalS, - }, - - groupLabel: { - ...typographyStyles.subtitle2Stronger, - }, - - row: { - display: 'inline-flex', - alignItems: 'center', - columnGap: tokens.spacingHorizontalS, - }, -}); - -const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appearance'] }> = ({ appearance }) => { - const styles = useStyles(); - - const badges = new Map(); - badges.set('brand', []); - badges.set('danger', []); - badges.set('severe', []); - badges.set('warning', []); - badges.set('success', []); - badges.set('important', []); - badges.set('informative', []); - badges.set('subtle', []); - - propValues.color.forEach(color => { - const circularWithText = ( - - 1 - - ); - const circularWithIcon = } />; - const roundedWithIcon = } />; - const roundedWithText = ( - - {appearance.toUpperCase()} - - ); - const roundedWithTextAndIconBefore = ( - } iconPosition="before"> - {appearance.toUpperCase()} - - ); - const roundedWithTextAndIconAfter = ( - } iconPosition="after"> - {appearance.toUpperCase()} - - ); - - badges - .get(color)! - .push( - circularWithText, - circularWithIcon, - roundedWithIcon, - roundedWithText, - roundedWithTextAndIconAfter, - roundedWithTextAndIconBefore, - ); - }); - - return ( -
- {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => ( -
-
- {badges.get(color)} -
-
{color}
-
- ))} -
- ); -}; - -const BadgeSampleRow: React.FC = props => { - const styles = useStyles(); - - // Text content is not supported for tiny and extra-small - if (props.size === 'tiny' || props.size === 'extra-small') { - return ( -
- } /> -
- ); - } - - return ( -
- 1 - } /> - BADGE - }> - BADGE - - } iconPosition="after"> - BADGE - - {props.children} -
- ); -}; - -const badgeStories = storiesOf('Badge Converged', module); - -// appearance stories -propValues.appearance.forEach(appearance => { - badgeStories.addStory(appearance, () => , { - includeHighContrast: true, - includeDarkMode: true, - }); -}); - -// size stories -propValues.size.forEach(size => - badgeStories.addStory( - `size: ${size}`, - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => - // tiny + ghost is not supported - size === 'tiny' && appearance === 'ghost' ? null : ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ), - )} -
- ); - }, - { includeRtl: true }, - ), -); diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx new file mode 100644 index 0000000000000..15291ead7d1e6 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx @@ -0,0 +1,94 @@ +import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import { Badge, BadgeProps } from '@fluentui/react-badge'; +import { CircleRegular } from '@fluentui/react-icons'; +import { mergeClasses } from '@griffel/react'; +import { propValues, useStyles } from './utils'; + +const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appearance'] }> = ({ appearance }) => { + const styles = useStyles(); + + const badges = new Map(); + badges.set('brand', []); + badges.set('danger', []); + badges.set('severe', []); + badges.set('warning', []); + badges.set('success', []); + badges.set('important', []); + badges.set('informative', []); + badges.set('subtle', []); + + propValues.color.forEach(color => { + const circularWithText = ( + + 1 + + ); + const circularWithIcon = } />; + const roundedWithIcon = } />; + const roundedWithText = ( + + {appearance.toUpperCase()} + + ); + const roundedWithTextAndIconBefore = ( + } iconPosition="before"> + {appearance.toUpperCase()} + + ); + const roundedWithTextAndIconAfter = ( + } iconPosition="after"> + {appearance.toUpperCase()} + + ); + + badges + .get(color)! + .push( + circularWithText, + circularWithIcon, + roundedWithIcon, + roundedWithText, + roundedWithTextAndIconAfter, + roundedWithTextAndIconBefore, + ); + }); + + return ( +
+ {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => ( +
+
+ {badges.get(color)} +
+
{color}
+
+ ))} +
+ ); +}; + +// appearance stories +storiesOf('Badge Converged', module) + .add('filled', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .add('outline', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .add('tint', () => , { + includeHighContrast: true, + includeDarkMode: true, + }) + .add('ghost', () => , { + includeHighContrast: true, + includeDarkMode: true, + }); diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx new file mode 100644 index 0000000000000..639af68af5a65 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx @@ -0,0 +1,155 @@ +import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import { Badge, BadgeProps } from '@fluentui/react-badge'; +import { CircleRegular } from '@fluentui/react-icons'; +import { propValues, useStyles } from './utils'; + +const BadgeSampleRow: React.FC = props => { + const styles = useStyles(); + + // Text content is not supported for tiny and extra-small + if (props.size === 'tiny' || props.size === 'extra-small') { + return ( +
+ } /> +
+ ); + } + + return ( +
+ 1 + } /> + BADGE + }> + BADGE + + } iconPosition="after"> + BADGE + + {props.children} +
+ ); +}; + +// size stories +propValues.size.forEach(size => + storiesOf('Badge Converged', module) + .add( + 'size: tiny', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => + // tiny + ghost is not supported + appearance === 'ghost' ? null : ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ), + )} +
+ ); + }, + { includeRtl: true }, + ) + .add( + 'size: extra-small', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); + }, + { includeRtl: true }, + ) + .add( + 'size: small', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); + }, + { includeRtl: true }, + ) + .add( + 'size: medium', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); + }, + { includeRtl: true }, + ) + .add( + 'size: large', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); + }, + { includeRtl: true }, + ) + .add( + 'size: extra-large', + () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); + }, + { includeRtl: true }, + ), +); diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.ts b/apps/vr-tests-react-components/src/stories/Badge/utils.ts new file mode 100644 index 0000000000000..a5423654ead19 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Badge/utils.ts @@ -0,0 +1,60 @@ +import { BadgeProps } from '@fluentui/react-badge'; +import { makeStyles, shorthands } from '@griffel/react'; +import { tokens, typographyStyles } from '@fluentui/react-theme'; + +type ValueArrays = { + [K in keyof T]: T[K][]; +}; + +export const propValues: ValueArrays, 'size' | 'color' | 'appearance' | 'shape'>> = { + size: ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'], + color: ['brand', 'danger', 'severe', 'warning', 'success', 'important', 'informative', 'subtle'], + appearance: ['filled', 'outline', 'tint', 'ghost'], + shape: ['circular', 'rounded', 'square'], +}; + +export const useStyles = makeStyles({ + container: { + display: 'flex', + alignItems: 'center', + }, + + badgeContainer: { + display: 'flex', + alignItems: 'center', + ...shorthands.gap('5px'), + ...shorthands.padding('5px'), + }, + + label: { + marginLeft: '10px', + }, + + brandContainer: { + backgroundColor: tokens.colorBrandBackgroundStatic, + }, + + groupSet: { + display: 'inline-flex', + flexDirection: 'column', + ...shorthands.padding(0, tokens.spacingHorizontalL), + rowGap: tokens.spacingVerticalL, + }, + + group: { + display: 'inline-flex', + flexDirection: 'column', + alignItems: 'start', + rowGap: tokens.spacingVerticalS, + }, + + groupLabel: { + ...typographyStyles.subtitle2Stronger, + }, + + row: { + display: 'inline-flex', + alignItems: 'center', + columnGap: tokens.spacingHorizontalS, + }, +}); From 3b6249e5aab42b9b0e3ad3a9073a7eda20e257af Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 22 Oct 2022 18:43:35 -0700 Subject: [PATCH 62/73] chore(Badge): convert Badge stories to CSF --- .../stories/Badge/BadgeAppearance.stories.tsx | 52 ++-- .../src/stories/Badge/BadgeSize.stories.tsx | 246 +++++++++--------- 2 files changed, 159 insertions(+), 139 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx index 15291ead7d1e6..e782b07cce547 100644 --- a/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx @@ -1,9 +1,10 @@ -import { storiesOf } from '@storybook/react'; import * as React from 'react'; import { Badge, BadgeProps } from '@fluentui/react-badge'; import { CircleRegular } from '@fluentui/react-icons'; import { mergeClasses } from '@griffel/react'; import { propValues, useStyles } from './utils'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appearance'] }> = ({ appearance }) => { const styles = useStyles(); @@ -74,21 +75,34 @@ const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appe ); }; -// appearance stories -storiesOf('Badge Converged', module) - .add('filled', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .add('outline', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .add('tint', () => , { - includeHighContrast: true, - includeDarkMode: true, - }) - .add('ghost', () => , { - includeHighContrast: true, - includeDarkMode: true, - }); +export default { + title: 'Badge Converged', +} as ComponentMeta; + +export const Filled = () => ; + +Filled.storyName = 'filled'; + +export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE); +export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST); + +export const Outline = () => ; + +Outline.storyName = 'outline'; + +export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE); +export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST); + +export const Tint = () => ; + +Tint.storyName = 'tint'; + +export const TintDarkMode = getStoryVariant(Tint, DARK_MODE); +export const TintHighContrast = getStoryVariant(Tint, HIGH_CONTRAST); + +export const Ghost = () => ; + +Ghost.storyName = 'ghost'; + +export const GhostDarkMode = getStoryVariant(Ghost, DARK_MODE); +export const GhostHighContrast = getStoryVariant(Ghost, HIGH_CONTRAST); diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx index 639af68af5a65..4f6d988b68831 100644 --- a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx @@ -1,8 +1,9 @@ -import { storiesOf } from '@storybook/react'; import * as React from 'react'; import { Badge, BadgeProps } from '@fluentui/react-badge'; import { CircleRegular } from '@fluentui/react-icons'; import { propValues, useStyles } from './utils'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; const BadgeSampleRow: React.FC = props => { const styles = useStyles(); @@ -32,124 +33,129 @@ const BadgeSampleRow: React.FC = props => { ); }; -// size stories -propValues.size.forEach(size => - storiesOf('Badge Converged', module) - .add( - 'size: tiny', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => - // tiny + ghost is not supported - appearance === 'ghost' ? null : ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ), - )} -
- ); - }, - { includeRtl: true }, - ) - .add( - 'size: extra-small', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ))} -
- ); - }, - { includeRtl: true }, - ) - .add( - 'size: small', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ))} -
- ); - }, - { includeRtl: true }, - ) - .add( - 'size: medium', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ))} -
- ); - }, - { includeRtl: true }, - ) - .add( - 'size: large', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
- ))} -
- ); - }, - { includeRtl: true }, - ) - .add( - 'size: extra-large', - () => { - const styles = useStyles(); - return ( -
- {propValues.appearance.map(appearance => ( -
- appearance: {appearance} - {propValues.shape.map(shape => ( - - ))} -
+export default { + title: 'Badge Converged', +} as ComponentMeta; + +export const SizeTiny = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => + // tiny + ghost is not supported + appearance === 'ghost' ? null : ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + ))}
- ); - }, - { includeRtl: true }, - ), -); + ), + )} +
+ ); +}; + +SizeTiny.storyName = 'size: tiny'; + +export const SizeTinyRTL = getStoryVariant(SizeTiny, RTL); + +export const SizeExtraSmall = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); +}; + +SizeExtraSmall.storyName = 'size: extra-small'; + +export const SizeExtraSmallRTL = getStoryVariant(SizeExtraSmall, RTL); + +export const SizeSmall = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); +}; + +SizeSmall.storyName = 'size: small'; + +export const SizeSmallRTL = getStoryVariant(SizeSmall, RTL); + +export const SizeMedium = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); +}; + +SizeMedium.storyName = 'size: medium'; + +export const SizeMediumRTL = getStoryVariant(SizeMedium, RTL); + +export const SizeLarge = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); +}; + +SizeLarge.storyName = 'size: large'; + +export const SizeLargeRTL = getStoryVariant(SizeLarge, RTL); + +export const SizeExtraLarge = () => { + const styles = useStyles(); + return ( +
+ {propValues.appearance.map(appearance => ( +
+ appearance: {appearance} + {propValues.shape.map(shape => ( + + ))} +
+ ))} +
+ ); +}; + +SizeExtraLarge.storyName = 'size: extra-large'; + +export const SizeExtraLargeRTL = getStoryVariant(SizeExtraLarge, RTL); From 164f8931f3e369299421995a9644cf8667c3809e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 22 Oct 2022 18:52:17 -0700 Subject: [PATCH 63/73] chore(Card): split up Card into multiple files --- .../src/stories/{ => Card}/Card.stories.tsx | 103 +----------------- .../stories/Card/CardInteractions.stories.tsx | 75 +++++++++++++ .../src/stories/Card/utils.tsx | 33 ++++++ 3 files changed, 111 insertions(+), 100 deletions(-) rename apps/vr-tests-react-components/src/stories/{ => Card}/Card.stories.tsx (61%) create mode 100644 apps/vr-tests-react-components/src/stories/Card/CardInteractions.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Card/utils.tsx diff --git a/apps/vr-tests-react-components/src/stories/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx similarity index 61% rename from apps/vr-tests-react-components/src/stories/Card.stories.tsx rename to apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx index 5d521cbba06c8..79f845f5c2758 100644 --- a/apps/vr-tests-react-components/src/stories/Card.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx @@ -1,39 +1,11 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Screener from 'screener-storybook/src/screener'; -import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card'; -import { MoreHorizontal24Filled, Open16Regular, Share16Regular } from '@fluentui/react-icons'; +import { Card, CardHeader, CardPreview } from '@fluentui/react-card'; +import { MoreHorizontal24Filled } from '@fluentui/react-icons'; import { Body1, Caption1 } from '@fluentui/react-text'; import { Button } from '@fluentui/react-button'; -import { action } from '@storybook/addon-actions'; - -const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card'; - -const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg'; -const salesPresentationTemplateURL = ASSET_URL + '/assets/sales_template.png'; - -const SampleCardContent = () => ( - <> - - App Name - - } - description={Developer} - /> -
- Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum. -
- - - - - -); +import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils'; storiesOf('Card Converged', module) .addDecorator(story => ( @@ -190,72 +162,3 @@ storiesOf('Card Converged', module) /> )); - -storiesOf('Card Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - .addStory( - 'appearance interactive - Filled', - () => ( - - - - ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'appearance interactive - Filled Alternative', - () => ( - - - - ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'appearance interactive - Outline', - () => ( - - - - ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory( - 'appearance interactive - Subtle', - () => ( - - - - ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ); diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractions.stories.tsx new file mode 100644 index 0000000000000..807817ac77544 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractions.stories.tsx @@ -0,0 +1,75 @@ +import { storiesOf } from '@storybook/react'; +import * as React from 'react'; +import Screener from 'screener-storybook/src/screener'; +import { Card } from '@fluentui/react-card'; +import { action } from '@storybook/addon-actions'; +import { SampleCardContent } from './utils'; + +storiesOf('Card Converged', module) + .addDecorator(story => ( + +
+ {story()} +
+ + )) + .addStory( + 'appearance interactive - Filled', + () => ( + + + + ), + { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'appearance interactive - Filled Alternative', + () => ( + + + + ), + { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'appearance interactive - Outline', + () => ( + + + + ), + { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'appearance interactive - Subtle', + () => ( + + + + ), + { + includeRtl: true, + includeHighContrast: true, + includeDarkMode: true, + }, + ); diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx new file mode 100644 index 0000000000000..c5443528c9f13 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { CardHeader, CardFooter } from '@fluentui/react-card'; +import { Body1, Caption1 } from '@fluentui/react-text'; +import { Button } from '@fluentui/react-button'; +import { Open16Regular, Share16Regular } from '@fluentui/react-icons'; + +const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card'; + +export const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg'; +export const salesPresentationTemplateURL = ASSET_URL + '/assets/sales_template.png'; + +export const SampleCardContent = () => ( + <> + + App Name + + } + description={Developer} + /> +
+ Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum. +
+ + + + + +); From 574a39d790cdfd038386f2e2b6f2955f665f6ee7 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Sat, 22 Oct 2022 19:01:11 -0700 Subject: [PATCH 64/73] chore(Card): convert Card stories to CSF --- .../src/stories/Card/Card.stories.tsx | 307 +++++++++--------- .../stories/Card/CardInteractions.stories.tsx | 176 ++++++---- 2 files changed, 270 insertions(+), 213 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx index 79f845f5c2758..48dabd4dde2e4 100644 --- a/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/react'; import * as React from 'react'; import Screener from 'screener-storybook/src/screener'; import { Card, CardHeader, CardPreview } from '@fluentui/react-card'; @@ -6,159 +5,177 @@ import { MoreHorizontal24Filled } from '@fluentui/react-icons'; import { Body1, Caption1 } from '@fluentui/react-text'; import { Button } from '@fluentui/react-button'; import { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; -storiesOf('Card Converged', module) - .addDecorator(story => ( - -
- {story()} -
- - )) - .addStory('card templates', () => ( -
- - - sales presentation preview - - - Sales analysis 2019 presentation - - } - description={Folder > Presentations} - /> - -
- )) - .addStory( - 'appearance', - () => ( -
-
-

Filled

- - - -
-
-

Filled alternative

- - - -
-
-

Outline

- - - -
-
-

Subtle

- - - +export default { + title: 'Card Converged', + + decorators: [ + story => ( + +
+ {story()}
-
+ ), - { - includeRtl: true, - includeHighContrast: true, - includeDarkMode: true, - }, - ) - .addStory('size', () => ( -
- - - - - - - - - -
- )) - .addStory('orientation', () => ( -
-
-

Vertical

- - - -
-
-

Horizontal

- - - -
-
- )) - .addStory('CardHeader', () => ( + ], +} as ComponentMeta; + +export const CardTemplates = () => ( +
+ + sales presentation preview + - App Name - - } - description={Developer} - action={
+); + +CardTemplates.storyName = 'card templates'; + +export const Appearance = () => ( +
+
+

Filled

+ + + +
+
+

Filled alternative

+ + + +
+
+

Outline

+ + + +
+
+

Subtle

+ + + +
+
+); + +Appearance.storyName = 'appearance'; + +export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE); +export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST); +export const AppearanceRTL = getStoryVariant(Appearance, RTL); + +export const Size = () => ( +
+ + + + + + + + + +
+); + +Size.storyName = 'size'; + +export const Orientation = () => ( +
+
+

Vertical

+ + + +
+
+

Horizontal

+ + + +
+
+); + +Orientation.storyName = 'orientation'; + +export const _CardHeader = () => ( + + + App Name + + } + description={Developer} + action={ - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'non-modal', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'alert', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'actions position start', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'actions position start & position end', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no actions', - () => ( - - - - - - - Dialog title - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no title', - () => ( - - - - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'no title & no actions', - () => ( - - - - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque - est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure - cumque eaque? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'title custom action', - () => ( - - - - - - - } />}> - Dialog title - - - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo repudiandae impedit doloribus - laborum quidem maxime dolores perspiciatis non ipsam, nostrum commodi quis autem sequi, incidunt cum? - Consequuntur, repellendus nostrum? - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'nested', - () => ( - - - - - - - Dialog title - - - - - - - - Inner dialog title - - ⛔️ just because you can doesn't mean you should have nested dialogs ⛔️ - - - - - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ) - .addStory( - 'scroll long content', - () => ( - - - - - - - Dialog title - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est - lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit - gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet - bibendum. Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. - Nunc id cursus metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin - nibh nisl condimentum id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac - auctor augue mauris augue neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur - ridiculus mus mauris vitae ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo - in vitae turpis massa sed elementum tempus egestas sed. -

-

- Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. - Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam - adipiscing vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet - mattis vulputate enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus - cras adipiscing enim eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque - gravida in fermentum et sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis - nunc. Ultrices eros in cursus turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra - justo. Odio pellentesque diam volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec - ullamcorper. Ipsum nunc aliquet bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien - nec sagittis aliquam malesuada bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis - imperdiet. -

-

- Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. - Eget aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra - massa massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero - volutpat sed. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut - aliquam. Volutpat diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a - erat. Venenatis lectus magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel - elit. Neque laoreet suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. - Bibendum ut tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec - ultrices dui. Elit duis tristique sollicitudin nibh sit amet. -

-

- At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. - Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. - Turpis egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu - tincidunt tortor aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus - venenatis lectus magna fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas - maecenas pharetra convallis posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus - sit amet est placerat. -

-

- Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna - condimentum mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat - in ante metus dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales - neque sodales ut etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis - molestie a iaculis at erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit - amet commodo nulla. Fringilla urna porttitor rhoncus dolor purus. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est - lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit - gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet - bibendum. Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. - Nunc id cursus metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin - nibh nisl condimentum id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac - auctor augue mauris augue neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur - ridiculus mus mauris vitae ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo - in vitae turpis massa sed elementum tempus egestas sed. -

-

- Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. - Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam - adipiscing vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet - mattis vulputate enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus - cras adipiscing enim eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque - gravida in fermentum et sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis - nunc. Ultrices eros in cursus turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra - justo. Odio pellentesque diam volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec - ullamcorper. Ipsum nunc aliquet bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien - nec sagittis aliquam malesuada bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis - imperdiet. -

-

- Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. - Eget aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra - massa massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero - volutpat sed. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut - aliquam. Volutpat diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a - erat. Venenatis lectus magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel - elit. Neque laoreet suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. - Bibendum ut tristique et egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec - ultrices dui. Elit duis tristique sollicitudin nibh sit amet. -

-

- At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. - Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. - Turpis egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu - tincidunt tortor aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus - venenatis lectus magna fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas - maecenas pharetra convallis posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus - sit amet est placerat. -

-

- Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna - condimentum mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat - in ante metus dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales - neque sodales ut etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis - molestie a iaculis at erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit - amet commodo nulla. Fringilla urna porttitor rhoncus dolor purus. -

- - - - - - - - - - - ), - { includeDarkMode: true, includeHighContrast: true, includeRtl: true }, - ); diff --git a/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx new file mode 100644 index 0000000000000..5061f52be2d9c --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Dialog/Dialog.stories.tsx @@ -0,0 +1,444 @@ +import * as React from 'react'; +import { + Dialog, + DialogActions, + DialogBody, + DialogContent, + DialogSurface, + DialogTitle, + DialogTrigger, +} from '@fluentui/react-dialog'; +import { Button } from '@fluentui/react-button'; +import { Rocket24Regular } from '@fluentui/react-icons'; +import { ComponentMeta } from '@storybook/react'; +import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; + +export default { + title: 'Dialog', +} as ComponentMeta; + +export const Default = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +Default.storyName = 'default'; + +export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE); +export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST); +export const DefaultRTL = getStoryVariant(Default, RTL); + +export const NonModal = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +NonModal.storyName = 'non-modal'; + +export const NonModalDarkMode = getStoryVariant(NonModal, DARK_MODE); +export const NonModalHighContrast = getStoryVariant(NonModal, HIGH_CONTRAST); +export const NonModalRTL = getStoryVariant(NonModal, RTL); + +export const Alert = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +Alert.storyName = 'alert'; + +export const AlertDarkMode = getStoryVariant(Alert, DARK_MODE); +export const AlertHighContrast = getStoryVariant(Alert, HIGH_CONTRAST); +export const AlertRTL = getStoryVariant(Alert, RTL); + +export const ActionsPositionStart = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +ActionsPositionStart.storyName = 'actions position start'; + +export const ActionsPositionStartDarkMode = getStoryVariant(ActionsPositionStart, DARK_MODE); +export const ActionsPositionStartHighContrast = getStoryVariant(ActionsPositionStart, HIGH_CONTRAST); +export const ActionsPositionStartRTL = getStoryVariant(ActionsPositionStart, RTL); + +export const ActionsPositionStartPositionEnd = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + + + + + + +); + +ActionsPositionStartPositionEnd.storyName = 'actions position start & position end'; + +export const ActionsPositionStartPositionEndDarkMode = getStoryVariant(ActionsPositionStartPositionEnd, DARK_MODE); +export const ActionsPositionStartPositionEndHighContrast = getStoryVariant( + ActionsPositionStartPositionEnd, + HIGH_CONTRAST, +); +export const ActionsPositionStartPositionEndRTL = getStoryVariant(ActionsPositionStartPositionEnd, RTL); + +export const NoActions = () => ( + + + + + + + Dialog title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + +); + +NoActions.storyName = 'no actions'; + +export const NoActionsDarkMode = getStoryVariant(NoActions, DARK_MODE); +export const NoActionsHighContrast = getStoryVariant(NoActions, HIGH_CONTRAST); +export const NoActionsRTL = getStoryVariant(NoActions, RTL); + +export const NoTitle = () => ( + + + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + + + + + + + +); + +NoTitle.storyName = 'no title'; + +export const NoTitleDarkMode = getStoryVariant(NoTitle, DARK_MODE); +export const NoTitleHighContrast = getStoryVariant(NoTitle, HIGH_CONTRAST); +export const NoTitleRTL = getStoryVariant(NoTitle, RTL); + +export const NoTitleNoActions = () => ( + + + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est + dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque + eaque? + + + + +); + +NoTitleNoActions.storyName = 'no title & no actions'; + +export const NoTitleNoActionsDarkMode = getStoryVariant(NoTitleNoActions, DARK_MODE); +export const NoTitleNoActionsHighContrast = getStoryVariant(NoTitleNoActions, HIGH_CONTRAST); +export const NoTitleNoActionsRTL = getStoryVariant(NoTitleNoActions, RTL); + +export const TitleCustomAction = () => ( + + + + + + + } />}> + Dialog title + + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, explicabo repudiandae impedit doloribus + laborum quidem maxime dolores perspiciatis non ipsam, nostrum commodi quis autem sequi, incidunt cum? + Consequuntur, repellendus nostrum? + + + + +); + +TitleCustomAction.storyName = 'title custom action'; + +export const TitleCustomActionDarkMode = getStoryVariant(TitleCustomAction, DARK_MODE); +export const TitleCustomActionHighContrast = getStoryVariant(TitleCustomAction, HIGH_CONTRAST); +export const TitleCustomActionRTL = getStoryVariant(TitleCustomAction, RTL); + +export const Nested = () => ( + + + + + + + Dialog title + + + + + + + + Inner dialog title + ⛔️ just because you can doesn't mean you should have nested dialogs ⛔️ + + + + + + + + + + + + +); + +Nested.storyName = 'nested'; + +export const NestedDarkMode = getStoryVariant(Nested, DARK_MODE); +export const NestedHighContrast = getStoryVariant(Nested, HIGH_CONTRAST); +export const NestedRTL = getStoryVariant(Nested, RTL); + +export const ScrollLongContent = () => ( + + + + + + + Dialog title + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est + lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit + gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet bibendum. + Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. Nunc id cursus + metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin nibh nisl condimentum + id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac auctor augue mauris augue + neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur ridiculus mus mauris vitae + ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo in vitae turpis massa sed + elementum tempus egestas sed. +

+

+ Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. + Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam adipiscing + vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet mattis vulputate + enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus cras adipiscing enim + eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque gravida in fermentum et + sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Ultrices eros in cursus + turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio pellentesque diam + volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Ipsum nunc aliquet + bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien nec sagittis aliquam malesuada + bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis imperdiet. +

+

+ Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. Eget + aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra massa + massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero volutpat sed. + Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut aliquam. Volutpat + diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a erat. Venenatis lectus + magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel elit. Neque laoreet + suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. Bibendum ut tristique et + egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec ultrices dui. Elit duis + tristique sollicitudin nibh sit amet. +

+

+ At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. + Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. Turpis + egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor + aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus venenatis lectus magna + fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas maecenas pharetra convallis + posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus sit amet est placerat. +

+

+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna condimentum + mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat in ante metus + dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales neque sodales ut + etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis molestie a iaculis at + erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. + Fringilla urna porttitor rhoncus dolor purus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. Nisl pretium fusce id velit ut tortor. Leo vel fringilla est ullamcorper. Eget est + lorem ipsum dolor sit amet consectetur adipiscing elit. In mollis nunc sed id semper risus in hendrerit + gravida. Ullamcorper sit amet risus nullam eget felis eget. Dolor sed viverra ipsum nunc aliquet bibendum. + Facilisi morbi tempus iaculis urna id volutpat. Porta non pulvinar neque laoreet suspendisse. Nunc id cursus + metus aliquam eleifend mi in. A iaculis at erat pellentesque adipiscing commodo. Proin nibh nisl condimentum + id. In hac habitasse platea dictumst vestibulum rhoncus est. Non tellus orci ac auctor augue mauris augue + neque. Enim nulla aliquet porttitor lacus luctus accumsan tortor. Nascetur ridiculus mus mauris vitae + ultricies leo integer. Ullamcorper eget nulla facilisi etiam dignissim. Leo in vitae turpis massa sed + elementum tempus egestas sed. +

+

+ Ut enim blandit volutpat maecenas volutpat. Venenatis urna cursus eget nunc scelerisque viverra mauris. + Neque aliquam vestibulum morbi blandit. Porttitor eget dolor morbi non. Nisi quis eleifend quam adipiscing + vitae. Aliquam ultrices sagittis orci a scelerisque purus semper. Interdum varius sit amet mattis vulputate + enim nulla aliquet. Ut sem viverra aliquet eget sit amet tellus cras. Sit amet tellus cras adipiscing enim + eu turpis egestas. Amet cursus sit amet dictum sit amet justo donec enim. Neque gravida in fermentum et + sollicitudin ac. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Ultrices eros in cursus + turpis massa tincidunt dui. Nisl rhoncus mattis rhoncus urna neque viverra justo. Odio pellentesque diam + volutpat commodo sed egestas. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Ipsum nunc aliquet + bibendum enim. Faucibus ornare suspendisse sed nisi lacus sed. Sapien nec sagittis aliquam malesuada + bibendum arcu vitae elementum. Metus vulputate eu scelerisque felis imperdiet. +

+

+ Consequat interdum varius sit amet mattis vulputate enim. Amet cursus sit amet dictum sit amet justo. Eget + aliquet nibh praesent tristique magna sit. Ut consequat semper viverra nam libero justo. Pharetra massa + massa ultricies mi. Sem viverra aliquet eget sit amet. Pulvinar mattis nunc sed blandit libero volutpat sed. + Pharetra diam sit amet nisl suscipit adipiscing bibendum. Consectetur adipiscing elit ut aliquam. Volutpat + diam ut venenatis tellus in metus vulputate. Scelerisque in dictum non consectetur a erat. Venenatis lectus + magna fringilla urna porttitor rhoncus. Vitae congue mauris rhoncus aenean vel elit. Neque laoreet + suspendisse interdum consectetur. Ultrices gravida dictum fusce ut placerat orci. Bibendum ut tristique et + egestas quis ipsum suspendisse. Mattis rhoncus urna neque viverra justo nec ultrices dui. Elit duis + tristique sollicitudin nibh sit amet. +

+

+ At risus viverra adipiscing at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. + Nunc vel risus commodo viverra maecenas. Sit amet est placerat in egestas erat imperdiet sed euismod. Turpis + egestas maecenas pharetra convallis posuere. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor + aliquam. Dolor sit amet consectetur adipiscing elit. Aliquam purus sit amet luctus venenatis lectus magna + fringilla. Scelerisque fermentum dui faucibus in ornare quam viverra. Egestas maecenas pharetra convallis + posuere morbi leo urna. A diam sollicitudin tempor id eu nisl nunc. Lectus sit amet est placerat. +

+

+ Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. At tellus at urna condimentum + mattis pellentesque id nibh. Dui faucibus in ornare quam. Tincidunt id aliquet risus feugiat in ante metus + dictum. Adipiscing commodo elit at imperdiet dui. Dolor sed viverra ipsum nunc. Sodales neque sodales ut + etiam sit amet nisl. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Mattis molestie a iaculis at + erat pellentesque adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. + Fringilla urna porttitor rhoncus dolor purus. +

+ + + + + + + + + + +); + +ScrollLongContent.storyName = 'scroll long content'; + +export const ScrollLongContentDarkMode = getStoryVariant(ScrollLongContent, DARK_MODE); +export const ScrollLongContentHighContrast = getStoryVariant(ScrollLongContent, HIGH_CONTRAST); +export const ScrollLongContentRTL = getStoryVariant(ScrollLongContent, RTL); From 9eab64863d46910bb2df55b93029dbe8e30e951d Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Tue, 1 Nov 2022 22:27:18 -0700 Subject: [PATCH 72/73] remove redundant change to screener-build workflow --- .github/workflows/screener-build.yml | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.github/workflows/screener-build.yml b/.github/workflows/screener-build.yml index 40878ad06aa88..ad95963a40f80 100644 --- a/.github/workflows/screener-build.yml +++ b/.github/workflows/screener-build.yml @@ -272,10 +272,6 @@ jobs: printenv | sort ;\ echo "SHELLOPTS $SHELLOPTS" ;\ - - name: build @fluentui/react-storybook-addon - run: yarn build --to @fluentui/react-storybook-addon - if: ${{env.SKIP_SCREENER_BUILD == 'false'}} - - name: build vr-tests-react-components storybook run: yarn lage build --to @fluentui/vr-tests-react-components if: ${{env.SKIP_SCREENER_BUILD == 'false'}} From 2b1bb9a0262f83c9671eab3035cedf735c9bd893 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 2 Nov 2022 11:28:12 -0700 Subject: [PATCH 73/73] fix: update Card asset URL --- apps/vr-tests-react-components/src/stories/Card/utils.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/Card/utils.tsx b/apps/vr-tests-react-components/src/stories/Card/utils.tsx index c5443528c9f13..6515a3132d02e 100644 --- a/apps/vr-tests-react-components/src/stories/Card/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx @@ -4,10 +4,11 @@ import { Body1, Caption1 } from '@fluentui/react-text'; import { Button } from '@fluentui/react-button'; import { Open16Regular, Share16Regular } from '@fluentui/react-icons'; -const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card'; +const ASSET_URL = + 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/assets/'; -export const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg'; -export const salesPresentationTemplateURL = ASSET_URL + '/assets/sales_template.png'; +export const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg'; +export const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png'; export const SampleCardContent = () => ( <>