+ {story()}
+
+
-
- ))
- .addDecorator(story => (
-
- {story()}
-
-
- {story()}
+ ),
+ ],
+} as ComponentMeta;
+
+export const Basic = () => (
+ {story()}
+ ),
+ ],
+} as ComponentMeta;
+
+export const Basic = () =>
+ {story()}
+
+ ),
+ ],
+} as ComponentMeta;
+
+export const OverflowContent = () => {
+ const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
+ return (
+ {story()}
- ))
- .addStory('basic', () =>
- {story()}
-
- ))
- .addStory(
- 'overflowContent',
- () => {
- const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
- return (
- = {
- [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 =
- {appearance.toUpperCase()}
-
- );
- const roundedWithTextAndIconBefore = (
- = props => {
- const styles = useStyles();
-
- // Text content is not supported for tiny and extra-small
- if (props.size === 'tiny' || props.size === 'extra-small') {
- return (
- ['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 =
+ {appearance.toUpperCase()}
+
+ );
+ const roundedWithTextAndIconBefore = (
+ ;
+
+export const Filled = () => = props => {
+ const styles = useStyles();
+
+ // Text content is not supported for tiny and extra-small
+ if (props.size === 'tiny' || props.size === 'extra-small') {
+ return (
+ ;
+
+export const SizeTiny = () => {
+ const styles = useStyles();
+ return (
+ ;
+
+export const Default = () => (
+ = {
+ [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,
+ },
+});
diff --git a/apps/vr-tests-react-components/src/stories/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card.stories.tsx
deleted file mode 100644
index bc4a4db56f324f..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Card.stories.tsx
+++ /dev/null
@@ -1,334 +0,0 @@
-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 { 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/stories/assets/';
-
-const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg';
-const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png';
-
-const SampleCardContent = () => (
- <>
-
- App Name
-
- }
- description={Developer }
- />
-
- }>
- Open
-
- }>Share
-
-
-);
-
-storiesOf('Card Converged', module)
- .addDecorator(story => (
-
-
- ))
- .addStory('card templates', () => (
-
-
- App Name
-
- }
- description={Developer }
- action={} />}
- />
-
- App Name
-
- }
- description={Developer }
- action={} />}
- />
-
- App Name
-
- }
- action={} />}
- />
-
- App Name
-
- }
- description={Developer }
- />
-
- App Name
-
- }
- action={} />}
- />
-
- App Name
-
- }
- />
-
- App Name
-
- }
- />
-
- ));
-
-storiesOf('Card Converged - Interactive', module)
- .addDecorator(story => (
-
-
- ))
- .addStory(
- 'appearance interactive - Filled',
- () => (
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance interactive - Filled Alternative',
- () => (
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance interactive - Outline',
- () => (
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance interactive - Subtle',
- () => (
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- );
-
-storiesOf('Card Converged - Selectable', module)
- .addDecorator(story => (
-
-
- ))
- .addStory(
- 'appearance selectable - Filled',
- () => (
-
-
- ),
- {
- includeRtl: true,
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance selectable - Filled Alternative',
- () => (
-
-
- ),
- {
- includeRtl: true,
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance selectable - Outline',
- () => (
-
-
- ),
- {
- includeRtl: true,
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'appearance selectable - Subtle',
- () => (
-
-
- ),
- {
- includeRtl: true,
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory('appearance focusable + selectable', () => (
-
-
- ));
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
new file mode 100644
index 00000000000000..48dabd4dde2e4b
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/Card.stories.tsx
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+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 { powerpointLogoURL, salesPresentationTemplateURL, SampleCardContent } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+ title: 'Card Converged',
+
+ decorators: [
+ story => (
+
+
+ ),
+ ],
+} as ComponentMeta;
+
+export const CardTemplates = () => (
+
+
+ App Name
+
+ }
+ description={Developer }
+ action={} />}
+ />
+
+ App Name
+
+ }
+ description={Developer }
+ action={} />}
+ />
+
+ App Name
+
+ }
+ action={} />}
+ />
+
+ App Name
+
+ }
+ description={Developer }
+ />
+
+ App Name
+
+ }
+ action={} />}
+ />
+
+ App Name
+
+ }
+ />
+
+ App Name
+
+ }
+ />
+
+);
+
+_CardHeader.storyName = 'CardHeader';
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 00000000000000..76c463988a5436
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractions.stories.tsx
@@ -0,0 +1,83 @@
+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';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+ title: 'Card Converged',
+
+ decorators: [
+ story => (
+
+
+ ),
+ ],
+} as ComponentMeta;
+
+export const AppearanceInteractiveFilled = () => (
+
+
+);
+
+AppearanceInteractiveFilled.storyName = 'appearance interactive - Filled';
+
+export const AppearanceInteractiveFilledDarkMode = getStoryVariant(AppearanceInteractiveFilled, DARK_MODE);
+export const AppearanceInteractiveFilledHighContrast = getStoryVariant(AppearanceInteractiveFilled, HIGH_CONTRAST);
+export const AppearanceInteractiveFilledRTL = getStoryVariant(AppearanceInteractiveFilled, RTL);
+
+export const AppearanceInteractiveFilledAlternative = () => (
+
+
+);
+
+AppearanceInteractiveFilledAlternative.storyName = 'appearance interactive - Filled Alternative';
+
+export const AppearanceInteractiveFilledAlternativeDarkMode = getStoryVariant(
+ AppearanceInteractiveFilledAlternative,
+ DARK_MODE,
+);
+export const AppearanceInteractiveFilledAlternativeHighContrast = getStoryVariant(
+ AppearanceInteractiveFilledAlternative,
+ HIGH_CONTRAST,
+);
+export const AppearanceInteractiveFilledAlternativeRTL = getStoryVariant(AppearanceInteractiveFilledAlternative, RTL);
+
+export const AppearanceInteractiveOutline = () => (
+
+
+);
+
+AppearanceInteractiveOutline.storyName = 'appearance interactive - Outline';
+
+export const AppearanceInteractiveOutlineDarkMode = getStoryVariant(AppearanceInteractiveOutline, DARK_MODE);
+export const AppearanceInteractiveOutlineHighContrast = getStoryVariant(AppearanceInteractiveOutline, HIGH_CONTRAST);
+export const AppearanceInteractiveOutlineRTL = getStoryVariant(AppearanceInteractiveOutline, RTL);
+
+export const AppearanceInteractiveSubtle = () => (
+
+
+);
+
+AppearanceInteractiveSubtle.storyName = 'appearance interactive - Subtle';
+
+export const AppearanceInteractiveSubtleDarkMode = getStoryVariant(AppearanceInteractiveSubtle, DARK_MODE);
+export const AppearanceInteractiveSubtleHighContrast = getStoryVariant(AppearanceInteractiveSubtle, HIGH_CONTRAST);
+export const AppearanceInteractiveSubtleRTL = getStoryVariant(AppearanceInteractiveSubtle, RTL);
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 00000000000000..6515a3132d02e7
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Card/utils.tsx
@@ -0,0 +1,34 @@
+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/stories/assets/';
+
+export const powerpointLogoURL = ASSET_URL + 'powerpoint_logo.svg';
+export const salesPresentationTemplateURL = ASSET_URL + 'sales_template.png';
+
+export const SampleCardContent = () => (
+ <>
+
+ App Name
+
+ }
+ description={Developer }
+ />
+
+ }>
+ Open
+
+ }>Share
+
+
+);
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
deleted file mode 100644
index ec456a60d55a09..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
-import { storiesOf } from '@storybook/react';
-import { Checkbox } from '@fluentui/react-checkbox';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Checkbox Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
- {story()}
-
- ))
- .addStory('unchecked', () => {story()}
- ))
- .addStory('disabled+checked', () =>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua
-
- }
- />
- ),
- { includeRtl: true },
- )
- .addStory('required', () =>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua
-
- }
- />
- ),
- { includeRtl: true },
- );
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 00000000000000..e9246ff51e2f8e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities/TestWrapperDecorator';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, RTL } from '../../utilities';
+
+export default {
+ title: 'Checkbox Converged',
+
+ decorators: [
+ TestWrapperDecoratorFixedWidth,
+ story => {story()} ,
+ ],
+} as ComponentMeta;
+
+export const DisabledChecked = () =>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua
+
+ }
+ />
+);
+
+LabelWrapping.storyName = 'label-wrapping';
+
+export const LabelWrappingRTL = getStoryVariant(LabelWrapping, RTL);
+
+export const Required = () =>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua
+
+ }
+ />
+);
+
+LargeLabelWrapping.storyName = 'large+label-wrapping';
+
+export const LargeLabelWrappingRTL = getStoryVariant(LargeLabelWrapping, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
new file mode 100644
index 00000000000000..25e9993c14c866
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Steps } from 'screener-storybook/src/screener';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities/TestWrapperDecorator';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withScreenerSteps, RTL } from '../../utilities';
+
+const steps = new Steps()
+ .snapshot('rest', { cropTo: '.testWrapper' })
+ .hover('input')
+ .snapshot('hover', { cropTo: '.testWrapper' })
+ .mouseDown('input')
+ .snapshot('active', { cropTo: '.testWrapper' })
+ .end();
+
+export default {
+ title: 'Checkbox Converged',
+
+ decorators: [TestWrapperDecoratorFixedWidth, story => withScreenerSteps({ steps, story })],
+} as ComponentMeta;
+
+export const Unchecked = () => ;
+
+export const Default = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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 = () => (
+
+);
+
+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);
diff --git a/apps/vr-tests-react-components/src/stories/Image.stories.tsx b/apps/vr-tests-react-components/src/stories/Image.stories.tsx
deleted file mode 100644
index cf06075f882bfb..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Image.stories.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import Screener from 'screener-storybook/src/screener';
-import { Image } from '@fluentui/react-image';
-
-const imageUrl = 'https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg';
-
-storiesOf('Image Converged', module)
- .addDecorator((story: () => React.ReactNode) => (
- {story()}
- ))
- .addStory('Default', () => (
- {story()}
+ ),
+ ],
+} as ComponentMeta;
+
+export const Default = () => (
+
+
),
- { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
- )
- .addStory('size+name', () =>
+ {story()}
+
-
- );
- },
- { includeHighContrast: true, includeDarkMode: true },
- )
- .addStory('image-bad-url', () =>
-
-
- {examples.name.map(name => (
-
-
- {examples.namedColors.map(color => (
-
-
+
+);
+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 = () =>
+
+ );
+};
+Color.storyName = 'color';
+
+export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST);
+export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
+
+export const ImageBadUrl = () =>
+
+
+ {examples.name.map(name => (
+
+
+ {examples.namedColors.map(color => (
+
+
+ {sizes.map(size => (
+
+ {inlineItems.map(name => (
+
+ {overflowItems.map(name => (
+
+ )}
+
+ ))}
+
+ );
+};
+
+export default {
+ title: 'AvatarGroup Converged',
+ component: AvatarGroup,
+ decorators: [
+ TestWrapperDecorator,
+ story => (
+
+
+
+
+
+
+);
+LayoutPie1.storyName = 'layoutPie-1';
+
+export const LayoutPie1HighContrast = getStoryVariant(LayoutPie1, HIGH_CONTRAST);
+export const LayoutPie1DarkMode = getStoryVariant(LayoutPie1, DARK_MODE);
+
+export const LayoutPie2 = () => (
+
+
+
+
+
+
+);
+LayoutPie2.storyName = 'layoutPie-2';
+
+export const LayoutPie2HighContrast = getStoryVariant(LayoutPie2, HIGH_CONTRAST);
+export const LayoutPie2DarkMode = getStoryVariant(LayoutPie2, DARK_MODE);
+
+export const LayoutPie = () =>
+
+ {inlineItems.map(name => (
+
+ {overflowItems?.map(name => (
+
+
+
+ );
+};
+
+OverflowContent.storyName = 'overflowContent';
+
+export const OverflowContentHighContrast = getStoryVariant(OverflowContent, HIGH_CONTRAST);
+export const OverflowContentDarkMode = getStoryVariant(OverflowContent, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Avatar/utils.ts b/apps/vr-tests-react-components/src/stories/Avatar/utils.ts
new file mode 100644
index 00000000000000..0f4f5d04804d93
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Avatar/utils.ts
@@ -0,0 +1,31 @@
+export 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',
+];
diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
deleted file mode 100644
index 940e110f441951..00000000000000
--- a/apps/vr-tests-react-components/src/stories/AvatarGroup.stories.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import Screener from 'screener-storybook/src/screener';
-import {
- AvatarGroup,
- AvatarGroupItem,
- AvatarGroupPopover,
- AvatarGroupPopoverProps,
- AvatarGroupProps,
- partitionAvatarGroupItems,
-} from '@fluentui/react-avatar';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-
-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',
-];
-
-const sizes = [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128];
-
-const AvatarGroupList: React.FC<
- AvatarGroupProps & { overflowIndicator?: AvatarGroupPopoverProps['indicator'] }
-> = props => {
- const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout });
-
- return (
-
- {sizes.map(size => (
-
- {inlineItems.map(name => (
-
- {overflowItems.map(name => (
-
- )}
-
- ))}
-
- );
-};
-
-// Non-interactive stories
-storiesOf('AvatarGroup Converged', module)
- .addDecorator(TestWrapperDecorator)
- .addDecorator(story => (
-
-
-
-
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory(
- 'layoutPie-2',
- () => (
-
-
-
-
-
-
- ),
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory('layoutPie', () =>
-
- {inlineItems.map(name => (
-
- {overflowItems.map(name => (
-
- )}
-
-
- );
- },
- {
- includeHighContrast: true,
- includeDarkMode: true,
- },
- );
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 ead15d05920ad4..00000000000000
--- 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
- {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => (
-
- );
-};
-
-const BadgeSampleRow: React.FC
-
- ))}
-
- {badges.get(color)}
-
- {color}
-
-
- );
- }
-
- return (
-
- 1
- BADGE
-
- );
-};
-
-const badgeStories = storiesOf('Badge Converged', module);
-
-// appearance stories
-propValues.appearance.forEach(appearance => {
- badgeStories.addStory(appearance, () =>
- {propValues.appearance.map(appearance =>
- // tiny + ghost is not supported
- size === 'tiny' && appearance === 'ghost' ? null : (
-
- );
- },
- { 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 00000000000000..e782b07cce5478
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Badge/BadgeAppearance.stories.tsx
@@ -0,0 +1,108 @@
+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}
- {propValues.shape.map(shape => (
-
- ),
- )}
-
+ {Array.from(badges.keys()).map((color: BadgeProps['color'], i) => (
+
+ );
+};
+
+export default {
+ title: 'Badge Converged',
+} as ComponentMeta
+
+ ))}
+
+ {badges.get(color)}
+
+ {color}
+
+
+ );
+ }
+
+ return (
+
+ 1
+ BADGE
+
+ );
+};
+
+export default {
+ title: 'Badge Converged',
+} as ComponentMeta
+ {propValues.appearance.map(appearance =>
+ // tiny + ghost is not supported
+ appearance === 'ghost' ? null : (
+
+ );
+};
+
+SizeTiny.storyName = 'size: tiny';
+
+export const SizeTinyRTL = getStoryVariant(SizeTiny, RTL);
+
+export const SizeExtraSmall = () => {
+ const styles = useStyles();
+ return (
+
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ),
+ )}
+
+ {propValues.appearance.map(appearance => (
+
+ );
+};
+
+SizeExtraSmall.storyName = 'size: extra-small';
+
+export const SizeExtraSmallRTL = getStoryVariant(SizeExtraSmall, RTL);
+
+export const SizeSmall = () => {
+ const styles = useStyles();
+ return (
+
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ))}
+
+ {propValues.appearance.map(appearance => (
+
+ );
+};
+
+SizeSmall.storyName = 'size: small';
+
+export const SizeSmallRTL = getStoryVariant(SizeSmall, RTL);
+
+export const SizeMedium = () => {
+ const styles = useStyles();
+ return (
+
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ))}
+
+ {propValues.appearance.map(appearance => (
+
+ );
+};
+
+SizeMedium.storyName = 'size: medium';
+
+export const SizeMediumRTL = getStoryVariant(SizeMedium, RTL);
+
+export const SizeLarge = () => {
+ const styles = useStyles();
+ return (
+
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ))}
+
+ {propValues.appearance.map(appearance => (
+
+ );
+};
+
+SizeLarge.storyName = 'size: large';
+
+export const SizeLargeRTL = getStoryVariant(SizeLarge, RTL);
+
+export const SizeExtraLarge = () => {
+ const styles = useStyles();
+ return (
+
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ))}
+
+ {propValues.appearance.map(appearance => (
+
+ );
+};
+
+SizeExtraLarge.storyName = 'size: extra-large';
+
+export const SizeExtraLargeRTL = getStoryVariant(SizeExtraLarge, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Badge/CounterBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/CounterBadge.stories.tsx
new file mode 100644
index 00000000000000..9af7b16afc2538
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Badge/CounterBadge.stories.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CounterBadge } from '@fluentui/react-badge';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, RTL } from '../../utilities';
+
+export default {
+ title: 'CounterBadge Converged - colors',
+} as ComponentMeta
+ appearance: {appearance}
+ {propValues.shape.map(shape => (
+
+ ))}
+
+ {(['brand', 'danger', 'important', 'informative'] as const).map(color => (
+
+);
+
+Default.storyName = 'default';
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
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 00000000000000..a5423654ead193
--- /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
- Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
-
-
- {story()}
-
-
-
-
- 
-
-
- Sales analysis 2019 presentation
-
- }
- description={Folder > Presentations }
- />
-
-
- ))
- .addStory(
- 'appearance',
- () => (
-
-
- ),
- {
- includeRtl: true,
- includeHighContrast: true,
- includeDarkMode: true,
- },
- )
- .addStory('size', () => (
-
-
-
-
- Filled
-
-
-
-
- Filled alternative
-
-
-
-
- Outline
-
-
-
-
- Subtle
-
-
-
-
-
-
-
-
- ))
- .addStory('orientation', () => (
-
-
- ))
- .addStory('CardHeader', () => (
-
-
-
-
- Vertical
-
-
-
-
- Horizontal
-
- {story()}
-
-
- {story()}
-
-
+ {story()}
+
+
+
+
+
+
+
+ Sales analysis 2019 presentation
+
+ }
+ description={Folder > Presentations }
+ />
+
+
+);
+
+CardTemplates.storyName = 'card templates';
+
+export const Appearance = () => (
+
+
+);
+
+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 = () => (
+
+
+
+
+ Filled
+
+
+
+
+ Filled alternative
+
+
+
+
+ Outline
+
+
+
+
+ Subtle
+
+
+
+
+
+
+
+
+);
+
+Size.storyName = 'size';
+
+export const Orientation = () => (
+
+
+);
+
+Orientation.storyName = 'orientation';
+
+export const _CardHeader = () => (
+
+
+
+
+ Vertical
+
+
+
+
+ Horizontal
+
+ {story()}
+
+
+ Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
+
+
- {(['brand', 'danger', 'important', 'informative'] as const).map(color => (
-
- ),
- { includeRtl: true },
-);
diff --git a/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx b/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx
deleted file mode 100644
index 98ccf2836eb637..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Dialog.stories.tsx
+++ /dev/null
@@ -1,411 +0,0 @@
-import * as React from 'react';
-import { storiesOf } from '@storybook/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';
-
-storiesOf('Dialog', module)
- .addStory(
- 'default',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'non-modal',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'alert',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'actions position start',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'actions position start & position end',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'no actions',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'no title',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'no title & no actions',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'title custom action',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'nested',
- () => (
-
- ),
- { includeDarkMode: true, includeHighContrast: true, includeRtl: true },
- )
- .addStory(
- 'scroll long content',
- () => (
-
- ),
- { 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 00000000000000..5061f52be2d9c5
--- /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
-
-
-
-
-
-
- ))
- .addStory('Image Variations Border', () => (
- <>
-
-
-
-
-
-
-
- ))
- .addStory('Image Variations Fallback', () => (
-
-
-
-
-
-
-
-
-
- ))
- .addStory('Image Fluid', () => (
- <>
-
-
-
-
-
- ))
- .addStory('Image Shadow', () => (
-
+
+
+
+
+
+
+);
+
+export const ImageVariationsBorder = () => (
+ <>
+
+
+
+
+
+
+
+);
+
+export const ImageVariationsFallback = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export const ImageFluid = () => (
+ <>
+
+
+
+
+
+);
+
+export const ImageShadow = () => (
+