From d61f64fd7ccd6d811e3a88d767c4c2616738c7e9 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Mon, 15 Jul 2024 23:59:25 +0200 Subject: [PATCH 1/7] Convert stories to CSF --- .../.storybook/preview.js | 68 -- .../stories/Accordion/Accordion.stories.tsx | 4 +- .../AccordionFocusInteractions.stories.tsx | 4 +- .../src/stories/Avatar.stories.tsx | 36 +- .../AvatarGroup/AvatarGroup.stories.tsx | 23 +- .../AvatarGroupInteractive.stories.tsx | 11 +- .../src/stories/AvatarGroup/utils.tsx | 2 +- .../stories/Badge/BadgeAppearance.stories.tsx | 4 +- .../src/stories/Badge/BadgeSize.stories.tsx | 4 +- .../stories/Breadcrumb/Breadcrumb.stories.tsx | 4 +- .../src/stories/Button/Button.stories.tsx | 4 +- .../stories/Button/CompoundButton.stories.tsx | 4 +- .../Button/CompoundButtonDefault.stories.tsx | 4 +- .../src/stories/Button/MenuButton.stories.tsx | 4 +- .../stories/Button/ToggleButton.stories.tsx | 4 +- .../src/stories/CalendarCompat.stories.tsx | 8 +- .../src/stories/Card/Card.stories.tsx | 4 +- .../stories/Card/CardInteractive.stories.tsx | 4 +- .../stories/Card/CardSelectable.stories.tsx | 4 +- .../src/stories/Checkbox/Checkbox.stories.tsx | 38 +- .../Checkbox/CheckboxInteractions.stories.tsx | 12 +- .../src/stories/Combobox/Combobox.stories.tsx | 32 +- .../ComboboxOptionInteractions.stories.tsx | 20 +- .../CounterBadge/CounterBadge.stories.tsx | 4 +- .../src/stories/CustomStyleHooks.stories.tsx | 9 +- .../DatePickerCompat.stories.tsx | 43 +- ...ePickerCompatInputInteractions.stories.tsx | 11 +- .../src/stories/Dialog/Dialog.stories.tsx | 4 +- .../src/stories/Divider.stories.tsx | 58 -- .../src/stories/Divider/Divider.stories.tsx | 61 ++ .../Divider/DividerVertical.stories.tsx | 40 + .../src/stories/Drawer/Drawer.stories.tsx | 4 +- .../src/stories/Dropdown.stories.tsx | 195 ----- .../src/stories/Dropdown/Dropdown.stories.tsx | 143 ++++ .../DropdownOptionInteractions.stories.tsx | 113 +++ .../src/stories/Field.stories.tsx | 721 ++++++++++-------- .../src/stories/Image/Image.stories.tsx | 4 +- .../src/stories/InfoLabel.stories.tsx | 136 ++-- .../src/stories/Input.stories.tsx | 89 --- .../src/stories/Input/Input.stories.tsx | 52 ++ .../Input/InputInteractions.stories.tsx | 82 ++ .../src/stories/Label.stories.tsx | 90 ++- .../src/stories/Link.stories.tsx | 317 -------- .../src/stories/Link/AnchorLink.stories.tsx | 89 +++ .../src/stories/Link/ButtonLink.stories.tsx | 82 ++ .../src/stories/Link/SpanLink.stories.tsx | 74 ++ .../src/stories/Link/utils.tsx | 45 ++ .../src/stories/MakeStyles.stories.tsx | 214 ------ .../stories/MakeStyles/MakeStyles.stories.tsx | 99 +++ .../MakeStyles/MakeStylesPseudo.stories.tsx | 79 ++ .../src/stories/Menu/Menu.stories.tsx | 518 +------------ .../src/stories/Menu/MenuGroups.stories.tsx | 55 ++ .../Menu/MenuIconSlottedContent.stories.tsx | 40 + .../stories/Menu/MenuItemLinks.stories.tsx | 42 + .../stories/Menu/MenuLongContent.stories.tsx | 36 + .../Menu/MenuSecondaryContent.stories.tsx | 39 + .../stories/Menu/MenuSelection.stories.tsx | 71 ++ .../Menu/MenuSelectionGroups.stories.tsx | 67 ++ .../stories/Menu/MenuSplitItem.stories.tsx | 49 ++ .../src/stories/Menu/NestedMenu.stories.tsx | 78 ++ ...NestedMenuSmallViewportFlipped.stories.tsx | 25 +- ...NestedMenuSmallViewportStacked.stories.tsx | 95 +-- .../stories/Menu/NestedSubmenus.stories.tsx | 47 ++ .../ScrollableMenuSmallViewport.stories.tsx | 40 +- ...SubmenuIndicatorSlottedContent.stories.tsx | 63 ++ .../src/stories/Menu/index.stories.tsx | 11 - .../stories/MessageBar/MessageBar.stories.tsx | 4 +- .../src/stories/Persona.stories.tsx | 220 +++--- .../src/stories/Popover.stories.tsx | 121 --- .../src/stories/Popover/Popover.stories.tsx | 78 ++ .../Popover/PopoverPositioning.stories.tsx | 68 ++ .../src/stories/Portal.stories.tsx | 4 +- .../{ => Positioning}/Positioning.stories.tsx | 697 +++++------------ .../PositioningScrollJumps.stories.tsx | 319 ++++++++ .../src/stories/Positioning/utils.tsx | 99 +++ .../src/stories/PresenceBadge.stories.tsx | 78 -- .../PresenceBadgeInverted.stories.tsx | 46 ++ .../PresenceBadgeOOF.stories.tsx | 21 + .../PresenceBadgeSizes.stories.tsx | 21 + .../PresenceBadgeStatus.stories.tsx | 21 + .../src/stories/ProgressBar.stories.tsx | 92 ++- .../src/stories/Radio.stories.tsx | 111 --- .../src/stories/Radio/Radio.stories.tsx | 111 +++ .../Radio/RadioInteractions.stories.tsx | 56 ++ .../src/stories/Rating.stories.tsx | 58 -- .../src/stories/Rating/Rating.stories.tsx | 37 + .../Rating/RatingInteractions.stories.tsx | 49 ++ .../src/stories/RatingDisplay.stories.tsx | 98 ++- .../src/stories/SearchBox.stories.tsx | 162 ++-- .../src/stories/Select.stories.tsx | 118 --- .../src/stories/Select/Select.stories.tsx | 64 ++ .../Select/SelectInteractions.stories.tsx | 89 +++ .../ShadowDOM/ShadowDOMDefault.stories.tsx | 4 + .../ShadowDOM/ShadowDOMPortal.stories.tsx | 4 + .../src/stories/ShadowDOM/index.stories.tsx | 8 - .../src/stories/ShadowDOM/utils.tsx | 1 - .../src/stories/Skeleton.stories.tsx | 178 +++-- .../src/stories/Slider.stories.tsx | 45 -- .../src/stories/Slider/Slider.stories.tsx | 33 + .../Slider/SliderInteractions.stories.tsx | 51 ++ .../src/stories/SpinButton.stories.tsx | 200 ----- .../stories/SpinButton/SpinButton.stories.tsx | 62 ++ .../SpinButtonInteractions.stories.tsx | 141 ++++ .../src/stories/Spinner.stories.tsx | 167 ++-- .../SwatchPicker/SwatchPicker.stories.tsx | 15 +- .../src/stories/Switch.stories.tsx | 162 ++-- .../src/stories/Table/Table.stories.tsx | 128 ++++ .../Table/TableCellActions.stories.tsx | 35 + .../src/stories/Table/TableFlex.stories.tsx | 128 ++++ .../Table/TableFlexCellActions.stories.tsx | 35 + .../Table/TableFlexHeaders.stories.tsx | 29 + .../TableFlexResizableColumns.stories.tsx | 14 + .../TableFlexSubtleSelection.stories.tsx | 17 + .../Table/TableFlexTruncate.stories.tsx | 17 + .../stories/Table/TableHeaders.stories.tsx | 29 + .../Table/TableResizableColumns.stories.tsx | 14 + .../Table/TableSubtleSelection.stories.tsx | 17 + .../stories/Table/TableTruncate.stories.tsx | 17 + .../{Table.stories.tsx => Table/utils.tsx} | 166 +--- .../src/stories/Tabs.stories.tsx | 424 +++++----- .../stories/Tag/InteractionTag.stories.tsx | 4 +- .../Tag/InteractionTagAppearances.stories.tsx | 4 +- .../Tag/InteractionTagShape.stories.tsx | 4 +- .../src/stories/Tag/Tag.stories.tsx | 4 +- .../stories/Tag/TagAppearances.stories.tsx | 4 +- .../src/stories/Tag/TagGroup.stories.tsx | 4 +- .../src/stories/Tag/TagShape.stories.tsx | 4 +- .../src/stories/TagPicker.stories.tsx | 31 +- .../src/stories/Text.stories.tsx | 301 ++++---- .../src/stories/Textarea.stories.tsx | 63 -- .../src/stories/Textarea/Textarea.stories.tsx | 44 ++ .../Textarea/TextareaInteractions.stories.tsx | 54 ++ .../src/stories/TimePicker.stories.tsx | 19 +- .../src/stories/Toast/Toast.stories.tsx | 4 +- .../src/stories/Toolbar/Toolbar.stories.tsx | 4 +- .../src/stories/Tooltip.stories.tsx | 148 ---- .../src/stories/Tooltip/Tooltip.stories.tsx | 92 +++ .../Tooltip/TooltipPositioning.stories.tsx | 68 ++ .../src/stories/Tooltip/utils.ts | 17 + .../src/stories/Tree.stories.tsx | 50 +- .../src/utilities/TestWrapperDecorator.tsx | 13 +- .../src/utilities/getStoryVariant.ts | 50 -- .../src/utilities/getStoryVariant.tsx | 56 ++ .../src/utilities/index.ts | 9 - .../src/utilities/types.ts | 23 - .../src/utilities/utilities.test.tsx | 25 +- .../src/utilities/withStoryWrightSteps.tsx | 4 +- 147 files changed, 5789 insertions(+), 4733 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Divider.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Divider/Divider.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Divider/DividerVertical.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Dropdown.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Dropdown/Dropdown.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Dropdown/DropdownOptionInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Input.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Input/Input.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Input/InputInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Link.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Link/utils.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/MakeStyles.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/MakeStyles/MakeStyles.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/MakeStyles/MakeStylesPseudo.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuGroups.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuIconSlottedContent.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuItemLinks.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuLongContent.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuSecondaryContent.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuSelection.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuSelectionGroups.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/MenuSplitItem.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/NestedMenu.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/NestedSubmenus.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Menu/SubmenuIndicatorSlottedContent.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Menu/index.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Popover.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Popover/Popover.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Popover/PopoverPositioning.stories.tsx rename apps/vr-tests-react-components/src/stories/{ => Positioning}/Positioning.stories.tsx (63%) create mode 100644 apps/vr-tests-react-components/src/stories/Positioning/PositioningScrollJumps.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Positioning/utils.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeInverted.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeOOF.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeSizes.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/PresenseBadge/PresenceBadgeStatus.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Radio.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Radio/Radio.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Radio/RadioInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Rating.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Rating/Rating.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Rating/RatingInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Select.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Select/Select.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Select/SelectInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/ShadowDOM/index.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Slider.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Slider/Slider.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Slider/SliderInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/SpinButton.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/SpinButton/SpinButton.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/SpinButton/SpinButtonInteractions.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/Table.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableCellActions.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlex.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlexCellActions.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlexHeaders.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlexResizableColumns.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlexSubtleSelection.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableFlexTruncate.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableHeaders.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableResizableColumns.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableSubtleSelection.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Table/TableTruncate.stories.tsx rename apps/vr-tests-react-components/src/stories/{Table.stories.tsx => Table/utils.tsx} (78%) delete mode 100644 apps/vr-tests-react-components/src/stories/Textarea.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Textarea/Textarea.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Textarea/TextareaInteractions.stories.tsx delete mode 100644 apps/vr-tests-react-components/src/stories/Tooltip.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Tooltip/Tooltip.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Tooltip/TooltipPositioning.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/Tooltip/utils.ts delete mode 100644 apps/vr-tests-react-components/src/utilities/getStoryVariant.ts create mode 100644 apps/vr-tests-react-components/src/utilities/getStoryVariant.tsx delete mode 100644 apps/vr-tests-react-components/src/utilities/types.ts diff --git a/apps/vr-tests-react-components/.storybook/preview.js b/apps/vr-tests-react-components/.storybook/preview.js index 4d58f82e03742..7031b4e36c28d 100644 --- a/apps/vr-tests-react-components/.storybook/preview.js +++ b/apps/vr-tests-react-components/.storybook/preview.js @@ -1,72 +1,4 @@ // @ts-check -import * as React from 'react'; -import { setAddon } from '@storybook/react'; -import { webLightTheme, teamsHighContrastTheme, webDarkTheme } from '@fluentui/react-theme'; -import { FluentProvider } from '@fluentui/react-provider'; - -/** - * @deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-setaddon - * - * TODO: rework this to be conformant with Component Story Format - * - * Via this addon, we INVENT a new API that automatically adds several - * stories for you when you call addStory() that adds variants (like RTL) - * - * addStory() is not an official Storybook API - * - * Adds a story with different configuration options. - * By default, only adds a story in LTR. - * The config parameter can be used to add the story RTL in addition to LTR. - * In future, this can add a story with additional configurations such as theming. - */ -setAddon({ - /** - * @type {import('../src/utilities/types').ExtendedStoryApi['addStory']} - * @this {import('../src/utilities/types').ExtendedStoryApi} - */ - addStory(storyName, storyFn, config = {}) { - this.add(storyName, (/** @type {import('../src/utilities/types').StoryContext} */ context) => { - return ( - - {storyFn(context)} - - ); - }); - if (config.includeRtl) { - this.add(storyName + ' - RTL', (/** @type {import('../src/utilities/types').StoryContext} */ context) => { - return ( - - {storyFn(context)} - - ); - }); - } - if (config.includeDarkMode) { - this.add(storyName + ' - Dark Mode', (/** @type {import('../src/utilities/types').StoryContext} */ context) => { - return ( - - {storyFn(context)} - - ); - }); - } - if (config.includeHighContrast) { - this.add( - storyName + ' - High Contrast', - (/** @type {import('../src/utilities/types').StoryContext} */ context) => { - return ( - - {storyFn(context)} - - ); - }, - ); - } - - return this; - }, -}); - /** @type {import("@fluentui/react-storybook-addon").FluentParameters} */ export const parameters = { layout: 'none', mode: 'vr-test' }; diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx index 08c1e884d4430..e57fbab72f068 100644 --- a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; import { CircleRegular } from '@fluentui/react-icons'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; export default { @@ -17,7 +17,7 @@ export default { ), ], -} as ComponentMeta; +} satisfies Meta; export const Size = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx index 450dcd268df27..cda9c38c8478c 100644 --- a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; export default { @@ -24,7 +24,7 @@ export default { ), ], -} as ComponentMeta; +} satisfies Meta; export const VisibilityFocus = () => ( 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 81ad178a35a16..f626e35b0a348 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Avatar, AvatarProps } from '@fluentui/react-avatar'; @@ -203,9 +203,7 @@ export default { ], } satisfies Meta; -type Story = StoryFn; - -export const Basic: Story = () => ( +export const Basic = () => (
@@ -224,21 +222,21 @@ export const BasicRTL = getStoryVariant(Basic, RTL); export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const SizeName: Story = () => ; +export const SizeName = () => ; SizeName.storyName = 'size+name'; -export const SizeIconBadgeSquare: Story = () => ; +export const SizeIconBadgeSquare = () => ; SizeIconBadgeSquare.storyName = 'size+icon+badge+square'; -export const SizeImageBadge: Story = () => ; +export const SizeImageBadge = () => ; SizeImageBadge.storyName = 'size+image+badge'; -export const SizeInactiveBadge: Story = () => ( +export const SizeInactiveBadge = () => ( ); SizeInactiveBadge.storyName = 'size+inactive+badge'; -export const BadgeMask: Story = () => ( +export const BadgeMask = () => (
; +export const CustomSizeImage = () => ; CustomSizeImage.storyName = 'customSize+image'; -export const CustomSizeNameBadge: Story = () => ( - -); +export const CustomSizeNameBadge = () => ; CustomSizeNameBadge.storyName = 'customSize+name+badge'; -export const CustomSizeIconActive: Story = () => ( - -); +export const CustomSizeIconActive = () => ; CustomSizeIconActive.storyName = 'customSize+icon+active'; -export const Color: Story = () => ; +export const Color = () => ; Color.storyName = 'color'; export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST); export const ColorDarkMode = getStoryVariant(Color, DARK_MODE); -export const ColorActive: Story = () => ; +export const ColorActive = () => ; ColorActive.storyName = 'color+active'; export const ColorActiveHighContrast = getStoryVariant(ColorActive, HIGH_CONTRAST); export const ColorActiveDarkMode = getStoryVariant(ColorActive, DARK_MODE); -export const ImageBadUrl: Story = () => ( - -); +export const ImageBadUrl = () => ; ImageBadUrl.storyName = 'image-bad-url'; -export const ImageBadUrlIcon: Story = () => ; +export const ImageBadUrlIcon = () => ; ImageBadUrlIcon.storyName = 'image-bad-url+icon'; diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx index 5187a6208910d..bffa984c33357 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroup.stories.tsx @@ -1,38 +1,37 @@ import * as React from 'react'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Steps, StoryWright } from 'storywright'; import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover } from '@fluentui/react-avatar'; -import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant, TestWrapperDecorator } from '../../utilities'; +import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../../utilities'; import { names, AvatarGroupList } from './utils'; export default { title: 'AvatarGroup Converged', component: AvatarGroup, decorators: [ - TestWrapperDecorator, story => ( - {story()} + +
{story()}
+ ), ], } satisfies Meta; -type Story = StoryFn; - -export const Basic: Story = () => ; +export const Basic = () => ; Basic.storyName = 'basic'; export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE); export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST); -export const LayoutStack: Story = () => ; +export const LayoutStack = () => ; export const LayoutStackDarkMode = getStoryVariant(LayoutStack, DARK_MODE); export const LayoutStackHighContrast = getStoryVariant(LayoutStack, HIGH_CONTRAST); -export const LayoutPie1: Story = () => ( +export const LayoutPie1 = () => (
@@ -50,7 +49,7 @@ export const LayoutPie1HighContrast = getStoryVariant(LayoutPie1, HIGH_CONTRAST) export const LayoutPie1RTL = getStoryVariant(LayoutPie1, RTL); -export const LayoutPie2: Story = () => ( +export const LayoutPie2 = () => (
@@ -70,7 +69,7 @@ export const LayoutPie2HighContrast = getStoryVariant(LayoutPie2, HIGH_CONTRAST) export const LayoutPie2RTL = getStoryVariant(LayoutPie2, RTL); -export const LayoutPie: Story = () => ; +export const LayoutPie = () => ; LayoutPie.storyName = 'layoutPie'; export const LayoutPieDarkMode = getStoryVariant(LayoutPie, DARK_MODE); @@ -79,7 +78,7 @@ export const LayoutPieHighContrast = getStoryVariant(LayoutPie, HIGH_CONTRAST); export const LayoutPieRTL = getStoryVariant(LayoutPie, RTL); -export const OverflowIndicator: Story = () => ; +export const OverflowIndicator = () => ; OverflowIndicator.storyName = 'overflowIndicator'; export const OverflowIndicatorDarkMode = getStoryVariant(OverflowIndicator, DARK_MODE); diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx index c9fd6ed843791..fd4c760097ba6 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/AvatarGroupInteractive.stories.tsx @@ -1,27 +1,24 @@ import * as React from 'react'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Steps, StoryWright } from 'storywright'; import { AvatarGroup, AvatarGroupItem, AvatarGroupPopover, partitionAvatarGroupItems } from '@fluentui/react-avatar'; import { names } from './utils'; -import { DARK_MODE, HIGH_CONTRAST, getStoryVariant, TestWrapperDecorator } from '../../utilities'; +import { DARK_MODE, HIGH_CONTRAST, getStoryVariant } from '../../utilities'; export default { title: 'AvatarGroup Converged', component: AvatarGroup, decorators: [ - TestWrapperDecorator, story => ( - {story()} +
{story()}
 ), ], } satisfies Meta; -type Story = StoryFn; - -export const OverflowContent: Story = () => { +export const OverflowContent = () => { const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names }); return ( diff --git a/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx b/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx index 3c4ca42f4257c..a7dd4139c0e4b 100644 --- a/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/AvatarGroup/utils.tsx @@ -48,7 +48,7 @@ export const AvatarGroupList: React.FC< const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names, layout: props.layout }); return ( -
+
{sizes.map(size => ( {inlineItems.map(name => ( 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 e782b07cce547..a73fc2d7e6936 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 @@ -3,7 +3,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appearance'] }> = ({ appearance }) => { @@ -77,7 +77,7 @@ const BadgeAppearanceTemplate: React.FC<{ appearance: Required['appe export default { title: 'Badge Converged', -} as ComponentMeta; +} satisfies Meta; export const Filled = () => ; 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 2d674953cb923..0b58908733e51 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 @@ -2,7 +2,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, RTL } from '../../utilities'; const BadgeSampleRow: React.FC = props => { @@ -35,7 +35,7 @@ const BadgeSampleRow: React.FC = props => { export default { title: 'Badge Converged', -} as ComponentMeta; +} satisfies Meta; export const SizeTiny = () => { const styles = useStyles(); diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx index b137455623965..59d669cd67271 100644 --- a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { Breadcrumb } from '@fluentui/react-breadcrumb'; import { SampleBreadcrumbButtons, steps } from './utils'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; export default { title: 'Breadcrumb Converged', decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; export const Appearance = () => ( <> 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 53bb727299c9a..42a34b9e68ac7 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,7 +1,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; @@ -11,7 +11,7 @@ export default { title: 'Button Converged', Component: Button, decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; 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 01daae64e160a..b5b4fc6fa80ce 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,7 +1,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; @@ -11,7 +11,7 @@ export default { title: 'CompoundButton Converged', component: CompoundButton, decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; 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 cce9b57adaa9c..148461bd60345 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 @@ -2,7 +2,7 @@ import * as React from 'react'; import { Steps } from 'storywright'; import { CompoundButton } from '@fluentui/react-button'; import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId } from './utils'; @@ -21,7 +21,7 @@ export default { title: 'CompoundButton Converged', component: CompoundButton, decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; 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 811a358b2c386..c05ca7a52b879 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,7 +1,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; @@ -11,7 +11,7 @@ export default { title: 'MenuButton Converged', component: MenuButton, decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; 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 bbf967d53bb44..54cdb6c6d7240 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,7 +1,7 @@ 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 { Meta } from '@storybook/react'; import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; import { buttonId, steps, useStyles } from './utils'; @@ -11,7 +11,7 @@ export default { title: 'ToggleButton Converged', component: ToggleButton, decorators: [story => withStoryWrightSteps({ story, steps })], -} as ComponentMeta; +} satisfies Meta; export const Default = () => Hello, world; diff --git a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx index 3c0fd36d2a758..c1cce76fcf639 100644 --- a/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/CalendarCompat.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Steps, StoryWright } from 'storywright'; import { Calendar as CalendarBase } from '@fluentui/react-calendar-compat'; import { ArrowLeftRegular, ArrowRightRegular, DismissCircleRegular } from '@fluentui/react-icons'; @@ -23,11 +23,9 @@ export default { ], } satisfies Meta; -type Story = StoryFn; +export const Default = () => ; -export const Default: Story = () => ; - -export const CustomIcons: Story = () => ( +export const CustomIcons = () => ( ), ], -} as ComponentMeta; +} satisfies Meta; export const CardTemplates = () => (
diff --git a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx index 953270ef12da4..fa63d250f4782 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardInteractive.stories.tsx @@ -3,7 +3,7 @@ import { Steps, StoryWright } from 'storywright'; import { Card } from '@fluentui/react-card'; import { action } from '@storybook/addon-actions'; import { SampleCardContent } from './utils'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST } from '../../utilities'; export default { @@ -26,7 +26,7 @@ export default { ), ], -} as ComponentMeta; +} satisfies Meta; export const AppearanceInteractiveFilled = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx index c05755f3317c9..c0989607884cc 100644 --- a/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Card/CardSelectable.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { Card } from '@fluentui/react-card'; import { SampleCardContent } from './utils'; -import { ComponentMeta } from '@storybook/react'; +import { Meta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities'; export default { @@ -27,7 +27,7 @@ export default { ), ], -} as ComponentMeta; +} satisfies Meta; export const AppearanceSelectableFilled = () => ( 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 index c634620275734..1c20a1b0fb867 100644 --- a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Checkbox } from '@fluentui/react-checkbox'; import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -15,23 +15,21 @@ export default { ], } satisfies Meta; -type Story = StoryFn; - -export const DisabledChecked: Story = () => ; +export const DisabledChecked = () => ; DisabledChecked.storyName = 'disabled+checked'; -export const DisabledMixed: Story = () => ; +export const DisabledMixed = () => ; DisabledMixed.storyName = 'disabled+mixed'; -export const NoLabel: Story = () => ; +export const NoLabel = () => ; NoLabel.storyName = 'no-label'; -export const LabelBefore: Story = () => ; +export const LabelBefore = () => ; LabelBefore.storyName = 'label-before'; export const LabelBeforeRTL = getStoryVariant(LabelBefore, RTL); -export const LabelWrapping: Story = () => ( +export const LabelWrapping = () => ( @@ -45,51 +43,51 @@ LabelWrapping.storyName = 'label-wrapping'; export const LabelWrappingRTL = getStoryVariant(LabelWrapping, RTL); -export const Required: Story = () => ; +export const Required = () => ; Required.storyName = 'required'; -export const RequiredLabelBefore: Story = () => ( +export const RequiredLabelBefore = () => ( ); RequiredLabelBefore.storyName = 'required+label-before'; -export const Circular: Story = () => ; +export const Circular = () => ; Circular.storyName = 'circular'; -export const CircularChecked: Story = () => ; +export const CircularChecked = () => ; CircularChecked.storyName = 'circular+checked'; -export const CircularMixed: Story = () => ; +export const CircularMixed = () => ; CircularMixed.storyName = 'circular+mixed'; // // large variants // -export const Large: Story = () => ; +export const Large = () => ; Large.storyName = 'large'; export const LargeRTL = getStoryVariant(Large, RTL); -export const LargeChecked: Story = () => ; +export const LargeChecked = () => ; LargeChecked.storyName = 'large+checked'; -export const LargeMixed: Story = () => ; +export const LargeMixed = () => ; LargeMixed.storyName = 'large+mixed'; -export const LargeCircular: Story = () => ; +export const LargeCircular = () => ; LargeCircular.storyName = 'large+circular'; -export const LargeCircularChecked: Story = () => ( +export const LargeCircularChecked = () => ( ); LargeCircularChecked.storyName = 'large+circular+checked'; -export const LargeCircularMixed: Story = () => ( +export const LargeCircularMixed = () => ( ); LargeCircularMixed.storyName = 'large+circular+mixed'; -export const LargeLabelWrapping: Story = () => ( +export const LargeLabelWrapping = () => ( ; -type Story = StoryFn; - -export const Unchecked: Story = () => ; +export const Unchecked = () => ; Unchecked.storyName = 'unchecked'; export const UncheckedRTL = getStoryVariant(Unchecked, RTL); -export const Checked: Story = () => ; +export const Checked = () => ; Checked.storyName = 'checked'; -export const Mixed: Story = () => ; +export const Mixed = () => ; Mixed.storyName = 'mixed'; -export const Disabled: Story = () => ; +export const Disabled = () => ; Disabled.storyName = 'disabled'; diff --git a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx index fc2e9e8c19314..1bedebf4a8493 100644 --- a/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Combobox, Option } from '@fluentui/react-combobox'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -26,9 +26,7 @@ export default { ], } satisfies Meta; -type Story = StoryFn; - -export const AppearanceOutlineDefault: Story = () => ( +export const AppearanceOutlineDefault = () => ( @@ -36,7 +34,7 @@ export const AppearanceOutlineDefault: Story = () => ( AppearanceOutlineDefault.storyName = 'Appearance: outline (default)'; -export const AppearanceUnderline: Story = () => ( +export const AppearanceUnderline = () => ( @@ -44,7 +42,7 @@ export const AppearanceUnderline: Story = () => ( AppearanceUnderline.storyName = 'Appearance: underline'; -export const AppearanceFilledDarker: Story = () => ( +export const AppearanceFilledDarker = () => (
@@ -54,7 +52,7 @@ export const AppearanceFilledDarker: Story = () => ( AppearanceFilledDarker.storyName = 'Appearance: filled-darker'; -export const AppearanceFilledLighter: Story = () => ( +export const AppearanceFilledLighter = () => (
@@ -64,13 +62,13 @@ export const AppearanceFilledLighter: Story = () => ( AppearanceFilledLighter.storyName = 'Appearance: filled-lighter'; -export const Disabled: Story = () => ( +export const Disabled = () => ( ); -export const DisabledWithValue: Story = () => ( +export const DisabledWithValue = () => ( @@ -78,7 +76,7 @@ export const DisabledWithValue: Story = () => ( DisabledWithValue.storyName = 'Disabled with value'; -export const InvalidOutline: Story = () => ( +export const InvalidOutline = () => ( @@ -86,7 +84,7 @@ export const InvalidOutline: Story = () => ( InvalidOutline.storyName = 'Invalid: outline'; -export const InvalidUnderline: Story = () => ( +export const InvalidUnderline = () => ( @@ -94,7 +92,7 @@ export const InvalidUnderline: Story = () => ( InvalidUnderline.storyName = 'Invalid: underline'; -export const InvalidFilledDarker: Story = () => ( +export const InvalidFilledDarker = () => (
@@ -104,7 +102,7 @@ export const InvalidFilledDarker: Story = () => ( InvalidFilledDarker.storyName = 'Invalid: filled-darker'; -export const InvalidFilledLighter: Story = () => ( +export const InvalidFilledLighter = () => (
@@ -114,7 +112,7 @@ export const InvalidFilledLighter: Story = () => ( InvalidFilledLighter.storyName = 'Invalid: filled-lighter'; -export const WithPlaceholder: Story = () => ( +export const WithPlaceholder = () => ( @@ -122,7 +120,7 @@ export const WithPlaceholder: Story = () => ( WithPlaceholder.storyName = 'With placeholder'; -export const WithValue: Story = () => ( +export const WithValue = () => ( @@ -130,7 +128,7 @@ export const WithValue: Story = () => ( WithValue.storyName = 'With value'; -export const SizeSmall: Story = () => ( +export const SizeSmall = () => ( @@ -138,7 +136,7 @@ export const SizeSmall: Story = () => ( SizeSmall.storyName = 'Size: small'; -export const SizeLarge: Story = () => ( +export const SizeLarge = () => ( diff --git a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx index 9bd7f05de3e60..af4e328b47e3e 100644 --- a/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; -import type { Meta, StoryFn } from '@storybook/react'; +import type { Meta } from '@storybook/react'; import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox'; import { TestWrapperDecoratorFixedWidth } from '../../utilities'; @@ -25,9 +25,7 @@ export default { ], } satisfies Meta; -type Story = StoryFn; - -export const Open: Story = () => ( +export const Open = () => (
@@ -37,7 +35,7 @@ export const Open: Story = () => (
); -export const OpenWithInlinePopup: Story = () => ( +export const OpenWithInlinePopup = () => (
@@ -49,7 +47,7 @@ export const OpenWithInlinePopup: Story = () => ( OpenWithInlinePopup.storyName = 'Open with inlinePopup'; -export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements: Story = () => ( +export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements = () => (
@@ -63,7 +61,7 @@ export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElement WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements.storyName = 'When rendering inline, it should render on top of relatively positioned elements'; -export const OptionWithLongContent: Story = () => ( +export const OptionWithLongContent = () => (