- {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/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 =>
- appearance: {appearance}
- {propValues.shape.map(shape => (
-
- ),
- )}
-
- 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()}
-
-
- {(['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 98ccf2836eb63..0000000000000
--- 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/Divider.stories.tsx b/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
deleted file mode 100644
index 3c07d6fd9b943..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Divider.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
-import { storiesOf } from '@storybook/react';
-import { Divider } from '@fluentui/react-divider';
-import { TestWrapperDecorator, TestWrapperDecoratorFixedWidth } from '../utilities/index';
-
-storiesOf('Divider Converged - Horizontal', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
- {story()}
-
- ))
- .addStory('Center Aligned', () =>
-
-
-
-
-
-
- );
-};
-
-storiesOf('Field Converged', module)
- .addDecorator(story => (
-
-
- ))
- .addStory('base', () =>
- {story()}
-
-
-
-
-
-
- ))
- .addStory('size:large', () => (
-
-
-
-
-
- ))
- .addStory('CheckboxField+fieldLabel', () => (
-
-
-
-
-
-
-
- ))
- .addStory('Image Variations Border', () => (
- <>
-
-
-
-
-
-
-
- ))
- .addStory('Image Variations Fallback', () => (
-
-
-
-
-
-
-
-
-
- ))
- .addStory('Image Fluid', () => (
- <>
-
-
-
-
-
- ))
- .addStory('Image Shadow', () => (
-
-
-
- ))
- .addStory('Disabled', () => )
- .addStory('With value', () => );
-
-// Non-interactive stories
-storiesOf('Input Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- // note: due to reused "Input Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
- .addDecorator(story => (
- - Some text with inline input -
- )) - .addStory( - 'contentBefore', - () => } placeholder="Placeholder" />, - { includeRtl: true }, - ) - .addStory( - 'contentAfter', - () => } placeholder="Placeholder" />, - { includeRtl: true }, - ); diff --git a/apps/vr-tests-react-components/src/stories/Label.stories.tsx b/apps/vr-tests-react-components/src/stories/Label.stories.tsx deleted file mode 100644 index 7129463cf183e..0000000000000 --- a/apps/vr-tests-react-components/src/stories/Label.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Screener from 'screener-storybook/src/screener'; -import { storiesOf } from '@storybook/react'; -import { Label } from '@fluentui/react-label'; - -storiesOf('Label Converged', module) - .addDecorator(story => - // prettier-ignore -
-
-
- ),
- { includeRtl: true },
- );
diff --git a/apps/vr-tests-react-components/src/stories/Link.stories.tsx b/apps/vr-tests-react-components/src/stories/Link.stories.tsx
deleted file mode 100644
index 9627393c11d62..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Link.stories.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
-import { storiesOf } from '@storybook/react';
-import { Link, LinkProps } from '@fluentui/react-link';
-
-const AnchorLink = (props: LinkProps & { as?: 'a' }) => ;
-const ButtonLink = (props: LinkProps) => ;
-
-storiesOf('Link Converged - Rendered as anchor', module)
- .addDecorator(story => (
-
- This is a link used alongside other text content.
-
- ),
- { includeRtl: true },
- )
- .addStory('Inline Disabled Focusable', () => (
-
- This is{' '}
-
- a disabled focusable link
- {' '}
- used alongside other text content.
-
- ));
-
-// We put the disabled stories separately so they do not error on the focused step.
-storiesOf('Link Converged - Rendered as anchor', module)
- .addDecorator(story => (
-
- This is{' '}
-
- a disabled link
- {' '}
- used alongside other text content.
-
- ));
-
-storiesOf('Link Converged - Rendered as button', module)
- .addDecorator(story => (
-
- This is a link used alongside other text content.
-
- ),
- { includeRtl: true },
- )
- .addStory('Inline Disabled Focusable', () => (
-
- This is{' '}
-
- a disabled focusable link
- {' '}
- used alongside other text content.
-
- ));
-
-// We put the disabled stories separately so they do not error on the focused step.
-storiesOf('Link Converged - Rendered as button', module)
- .addDecorator(story => (
-
- This is{' '}
-
- a disabled link
- {' '}
- used alongside other text content.
-
- ));
diff --git a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx b/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
deleted file mode 100644
index 04f5d24878ccf..0000000000000
--- a/apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
-import { FluentProvider } from '@fluentui/react-provider';
-import { tokens, webLightTheme } from '@fluentui/react-theme';
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
-
-const useStyles = makeStyles({
- box: {
- ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
- ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
-
- backgroundColor: tokens.colorNeutralBackground1,
- color: tokens.colorNeutralForeground1,
-
- ...shorthands.margin('5px'),
- ...shorthands.padding('5px'),
- paddingLeft: '50px',
- },
-
- container: {
- ...shorthands.border('5px', 'solid', tokens.colorNeutralStroke1),
- ...shorthands.borderLeft('20px', 'solid', tokens.colorPaletteBerryBorder2),
-
- ...shorthands.margin('5px'),
- ...shorthands.padding('5px'),
- },
- containerPrimary: {
- borderLeftColor: tokens.colorPaletteDarkOrangeBorder2,
- },
-
- provider: {
- marginLeft: '20px',
- },
-});
-
-const useFocusStylesA = makeStyles({
- root: {
- ...shorthands.border('3px', 'solid', 'blue'),
- ...shorthands.padding('10px'),
-
- ':focus': {
- color: 'red',
- },
- ':hover': {
- color: 'blue',
- },
- },
-});
-const useFocusStylesB = makeStyles({
- root: {
- ...shorthands.border('3px', 'solid', 'orange'),
- ...shorthands.padding('10px'),
-
- ':hover': {
- color: 'orange',
- },
- ':focus': {
- color: 'green',
- },
- },
-});
-
-const Box: React.FC = props => {
- const classes = useStyles();
-
- return {props.children}
;
-};
-
-const BoxWithPseudo: React.FC = () => {
- const classesA = useFocusStylesA();
- const classesB = useFocusStylesB();
-
- return (
-
-
- );
-};
-
-const Container: React.FC<{ className?: string; primary?: boolean }> = props => {
- const classes = useStyles();
-
- return (
- When element is focused & hovered - border color & text color should match
- -
- A focusable element
-
-
- A focusable element
-
-
- {props.children}
-
- );
-};
-
-const ClassNameProvider: React.FC<{
- children: (className: string) => React.ReactElement;
-}> = props => {
- const classes = useStyles();
-
- return props.children(classes.provider);
-};
-
-export const Nested = () => (
- <>
- This scenario shows that it's possible to have nested components (LTR inside RTL).
- -- This scenario shows classes propagation between boundaries with "mergeClasses()" function: classes generated in - LTR context will be applied properly in RTL. -
- -
- {story()}
-
-
- {story()}
-
-
-
-
- );
-});
-
-storiesOf('Menu nested within a MenuTrigger', module)
- .addDecorator(story => (
- // https://github.com/microsoft/fluentui/issues/19782
-
- {story()}
-
- ))
- .addDecorator(story => (
-
-
- ),
- { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
- )
- .addStory('single-double-lines', () => (
-
-
- ))
- .addStory('size-avatar', () => (
-
- {avatarSizes.map(size => (
-
- ))
- .addStory('size-presence', () => (
-
- {badgeSizes.map(size => (
-
- ))
- .addStory('scaling', () => (
-
-
- ));
diff --git a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx b/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
deleted file mode 100644
index 3b3c92092a1b0..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Popover.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import * as React from 'react';
-import Screener from 'screener-storybook/src/screener';
-import { Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-popover';
-import { tokens } from '@fluentui/react-theme';
-import { TestWrapperDecorator } from '../utilities/index';
-
-const PopoverPositioning: React.FC = () => {
- const positions = [
- ['above', 'start'],
- ['above', 'center'],
- ['above', 'end'],
- ['below', 'start'],
- ['below', 'center'],
- ['below', 'end'],
- ['before', 'top'],
- ['before', 'center'],
- ['before', 'bottom'],
- ['after', 'top'],
- ['after', 'center'],
- ['after', 'bottom'],
- ] as const;
-
- const [target, setTarget] = React.useState
-
- );
-};
-
-storiesOf('Popover Converged', module)
- .addDecorator(TestWrapperDecorator)
- .addDecorator(story => (
-
- {positions.map(([position, align]) => (
-
-
-
-
- ))}
-
-
-
- {position + ' ' + align}
-
-
-
-
-
- {props.children}
-
- );
-});
-
-const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ positionFixed }) => {
- const styles = useStyles();
- const positionedRefs = positions.reduce
- {positions.map(([position, align], i) => (
- {`${position}-${align}`}
- ))}
-
-
- );
-};
-
-const Offset = () => {
- const styles = useStyles();
- const positionedRefs = positions.reduce
- {positions.map(([position, align], i) => (
- {`${position}-${align}`}
- ))}
-
-
- );
-};
-
-const OffsetFunction = () => {
- const styles = useStyles();
- const positionedRefs = positions.reduce
- {positions.map(([position, align], i) => (
- {`${position}-${align}`}
- ))}
-
-
- );
-};
-
-const CoverTarget = () => {
- const styles = useStyles();
- const positionedRefs = positions.reduce
- {positions.map(([position, align], i) => (
-
- );
-};
-
-const VerticalFlip = () => {
- const styles = useStyles();
- const [boundary, setBoundary] = React.useState
-
- {`${position}-${align}`}
-
- ))}
-
-
- Flip
-
-
- Flip
-
- );
-};
-
-const HorizontalFlip = () => {
- const styles = useStyles();
- const [boundary, setBoundary] = React.useState
-
- Flip
-
-
- Flip
-
- );
-};
-
-const VerticalOverflow = () => {
- const styles = useStyles();
- const [boundary, setBoundary] = React.useState
-
- Shift
-
-
- Shift
-
- );
-};
-
-const HorizontalOverflow = () => {
- const styles = useStyles();
- const [boundary, setBoundary] = React.useState
-
-
- Shift
-
-
-
-
- Shift
-
-
- );
-};
-
-const Pinned = () => {
- const styles = useStyles();
- const [boundary, setBoundary] = React.useState
-
- Does not flip
-
- );
-};
-
-const Arrow: React.FC = () => {
- const styles = useStyles();
- const positionedRefs = positions.reduce
- {positions.map(([position, align], i) => (
-
-
- {`${position}-${align}`}
-
- ))}
-
-
- );
-};
-
-const AutoSize = () => {
- const styles = useStyles();
- const { containerRef, targetRef } = usePositioning({
- position: 'below',
- autoSize: true,
- });
-
- return (
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi cras fermentum odio eu feugiat
- pretium nibh ipsum consequat. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Porta
- nibh venenatis cras sed felis eget. Enim sed faucibus turpis in. Non blandit massa enim nec dui nunc mattis. Ut
- eu sem integer vitae justo. Lacus vestibulum sed arcu non. Vivamus arcu felis bibendum ut. Sagittis vitae et leo
- duis ut diam quam nulla porttitor. Amet est placerat in egestas erat imperdiet. Dapibus ultrices in iaculis nunc
- sed augue. Risus sed vulputate odio ut enim blandit volutpat maecenas. Orci dapibus ultrices in iaculis nunc sed
- augue lacus. Quam elementum pulvinar etiam non quam. Tempor commodo ullamcorper a lacus vestibulum sed arcu.
- Nunc non blandit massa enim nec. Venenatis a condimentum vitae sapien. Sodales ut eu sem integer vitae justo
- eget magna. In aliquam sem fringilla ut morbi tincidunt augue. Diam volutpat commodo sed egestas egestas
- fringilla phasellus faucibus scelerisque. Semper eget duis at tellus. Diam donec adipiscing tristique risus nec
- feugiat in fermentum posuere. Amet volutpat consequat mauris nunc congue nisi vitae. Hendrerit gravida rutrum
- quisque non tellus. Aliquet eget sit amet tellus. Libero id faucibus nisl tincidunt. Amet nulla facilisi morbi
- tempus iaculis urna id.
-
-
- );
-};
-
-const DisableTether = () => {
- const styles = useStyles();
- const { containerRef, targetRef } = usePositioning({
- position: 'above',
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
- // eslint-disable-next-line @typescript-eslint/naming-convention
- unstable_disableTether: 'all',
- });
-
- return (
- <>
-
-
- Untethered
-
- The target is outside of the boundary.
- - The positioned element is still fully visible. - - ); -}; - -const VirtualElement = () => { - const [target, setTarget] = React.useState
- This visual test asserts that visual styles are applied based on popper element's state: -
--
-
- - green when the popper element intersects boundaries - -
- - red when the reference is hidden - -
- - yellow when the popper escapes the reference element's boundary - -
- {Array(20)
- .fill(null)
- .map((_, i) => (
-
-
-
- ))}
- message: {i}
-
- {story()}
-
- ))
- .addStory('position and align props', () =>
- {statuses.map(status => (
-
- ),
- { includeRtl: true },
-);
-
-storiesOf('PresenceBadge Converged - OOF status', module).addStory(
- 'default',
- () => (
-
- {statuses.map(status => (
-
- ),
- { includeRtl: true },
-);
-
-storiesOf('PresenceBadge Converged - sizes', module).addStory(
- 'default',
- () => (
-
- {(['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as PresenceBadgeProps['size'][]).map(
- size => (
-
- ),
- { includeRtl: true },
-);
diff --git a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx b/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
deleted file mode 100644
index c64c4054c4444..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Radio.stories.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as React from 'react';
-import Screener, { Steps } from 'screener-storybook/src/screener';
-import { storiesOf } from '@storybook/react';
-import { Radio, RadioGroup } from '@fluentui/react-radio';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Radio Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
-
-
- ))
- .addStory('Appearance: filled-lighter', () => (
-
-
-
- ));
-
-// Non-interactive stories
-storiesOf('Select Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- // note: due to reused "Select Converged" story ID, TestWrapperDecoratorFixedWidth is also reused
- .addDecorator(story => (
-
-
- ),
- { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
- )
- .addStory('Display Value', () => {children}
;
-};
-
-storiesOf('Spinner converged', module)
- .addDecorator(TestWrapperDecoratorNoAnimation)
- .addStory('Primary', () =>
- {story()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ))
- .addStory('Disabled', () => )
- .addStory('With value', () => );
-
-// Non interactive
-storiesOf('Textarea Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
-
-
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true },
- )
- .addStory(
- 'inverted',
- () => (
-
-
-
-
-
- ),
- { includeDarkMode: true },
- )
- .addStory(
- 'withArrow',
- () => (
-
-
-
-
-
- ),
- { includeDarkMode: true, includeHighContrast: true },
- )
- .addStory(
- 'inverted withArrow',
- () => (
-
-
-
-
-
- ),
- { includeDarkMode: true },
- )
- .addStory('text-wrapping', () => (
-
-
-
-
-
- ));
-
-const TooltipPositioning: React.FC = () => {
- const positions = [
- ['above', 'start'],
- ['above', 'center'],
- ['above', 'end'],
- ['below', 'start'],
- ['below', 'center'],
- ['below', 'end'],
- ['before', 'top'],
- ['before', 'center'],
- ['before', 'bottom'],
- ['after', 'top'],
- ['after', 'center'],
- ['after', 'bottom'],
- ] as const;
-
- const [target, setTarget] = React.useState
-
- );
-};
-
-storiesOf('Tooltip Converged', module)
- .addDecorator(TestWrapperDecorator)
- .addDecorator(story => (
-
- {positions.map(([position, align]) => (
-
-