diff --git a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx b/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx
deleted file mode 100644
index be6014897e6af5..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Combobox.stories.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Combobox Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
- {story()}
-
- ))
- .addStory('Appearance: outline (default)', () => (
-
- text
-
- ))
- .addStory('Appearance: underline', () => (
-
- text
-
- ))
- .addStory('Appearance: filled-darker', () => (
-
-
- text
-
-
- ))
- .addStory('Appearance: filled-lighter', () => (
-
-
- text
-
-
- ))
- .addStory('Disabled', () => (
-
- text
-
- ))
- .addStory('Disabled with value', () => (
-
- text
-
- ))
- .addStory('Invalid: outline', () => (
-
- text
-
- ))
- .addStory('Invalid: underline', () => (
-
- text
-
- ))
- .addStory('Invalid: filled-darker', () => (
-
-
- text
-
-
- ))
- .addStory('Invalid: filled-lighter', () => (
-
-
- text
-
-
- ))
- .addStory('With placeholder', () => (
-
- text
-
- ))
- .addStory('With value', () => (
-
- text
-
- ))
- .addStory('Size: small', () => (
-
- text
-
- ))
- .addStory('Size: large', () => (
-
- text
-
- ));
-
-// Option interaction stories
-storiesOf('Combobox Converged', module)
- .addDecorator(TestWrapperDecoratorFixedWidth)
- .addDecorator(story => (
-
- {story()}
-
- ))
- .addStory('Open', () => (
-
-
- Red
- Green
- Blue
-
-
- ))
- .addStory('Open with inlinePopup', () => (
-
-
- Red
- Green
- Blue
-
-
- ))
- .addStory('When rendering inline, it should render on top of relatively positioned elements', () => (
-
-
- Red
- Green
- Blue
-
- sample button
-
- ))
- .addStory('Option with long content', () => (
-
-
-
- Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
- periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
-
- Red
- Green
-
-
- ))
- .addStory('With selection', () => (
-
-
- Red
- Green
- Blue
-
-
- ))
- .addStory('With multiselect selection', () => (
-
-
- Red
- Green
- Blue
-
-
- ))
- .addStory('Disabled option', () => (
-
-
- Red
- Green
- Blue
-
-
- ))
- .addStory('Open with grouped options', () => (
-
-
-
- Red
- Green
- Blue
-
-
- Circle
- Square
- Oval
-
-
-
- ));
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
new file mode 100644
index 00000000000000..fc2e9e8c19314e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Combobox/Combobox.stories.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Combobox, Option } from '@fluentui/react-combobox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+ title: 'Combobox Converged',
+ component: Combobox,
+ decorators: [
+ TestWrapperDecoratorFixedWidth,
+ story => (
+
+ {story()}
+
+ ),
+ ],
+} satisfies Meta;
+
+type Story = StoryFn;
+
+export const AppearanceOutlineDefault: Story = () => (
+
+ text
+
+);
+
+AppearanceOutlineDefault.storyName = 'Appearance: outline (default)';
+
+export const AppearanceUnderline: Story = () => (
+
+ text
+
+);
+
+AppearanceUnderline.storyName = 'Appearance: underline';
+
+export const AppearanceFilledDarker: Story = () => (
+
+
+ text
+
+
+);
+
+AppearanceFilledDarker.storyName = 'Appearance: filled-darker';
+
+export const AppearanceFilledLighter: Story = () => (
+
+
+ text
+
+
+);
+
+AppearanceFilledLighter.storyName = 'Appearance: filled-lighter';
+
+export const Disabled: Story = () => (
+
+ text
+
+);
+
+export const DisabledWithValue: Story = () => (
+
+ text
+
+);
+
+DisabledWithValue.storyName = 'Disabled with value';
+
+export const InvalidOutline: Story = () => (
+
+ text
+
+);
+
+InvalidOutline.storyName = 'Invalid: outline';
+
+export const InvalidUnderline: Story = () => (
+
+ text
+
+);
+
+InvalidUnderline.storyName = 'Invalid: underline';
+
+export const InvalidFilledDarker: Story = () => (
+
+
+ text
+
+
+);
+
+InvalidFilledDarker.storyName = 'Invalid: filled-darker';
+
+export const InvalidFilledLighter: Story = () => (
+
+
+ text
+
+
+);
+
+InvalidFilledLighter.storyName = 'Invalid: filled-lighter';
+
+export const WithPlaceholder: Story = () => (
+
+ text
+
+);
+
+WithPlaceholder.storyName = 'With placeholder';
+
+export const WithValue: Story = () => (
+
+ text
+
+);
+
+WithValue.storyName = 'With value';
+
+export const SizeSmall: Story = () => (
+
+ text
+
+);
+
+SizeSmall.storyName = 'Size: small';
+
+export const SizeLarge: Story = () => (
+
+ text
+
+);
+
+SizeLarge.storyName = 'Size: large';
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
new file mode 100644
index 00000000000000..9bd7f05de3e606
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Combobox/ComboboxOptionInteractions.stories.tsx
@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Combobox, Option, OptionGroup } from '@fluentui/react-combobox';
+import { TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+ title: 'Combobox Converged',
+ component: Combobox,
+ decorators: [
+ TestWrapperDecoratorFixedWidth,
+ story => (
+
+ {story()}
+
+ ),
+ ],
+} satisfies Meta;
+
+type Story = StoryFn;
+
+export const Open: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+
+);
+
+export const OpenWithInlinePopup: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+
+);
+
+OpenWithInlinePopup.storyName = 'Open with inlinePopup';
+
+export const WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+ sample button
+
+);
+
+WhenRenderingInlineItShouldRenderOnTopOfRelativelyPositionedElements.storyName =
+ 'When rendering inline, it should render on top of relatively positioned elements';
+
+export const OptionWithLongContent: Story = () => (
+
+
+
+ Blue indigo periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt blue indigo
+ periwinkle azure sapphire ultramarine teal cerulean navy turquoise cyan cobalt
+
+ Red
+ Green
+
+
+);
+
+OptionWithLongContent.storyName = 'Option with long content';
+
+export const WithSelection: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+
+);
+
+WithSelection.storyName = 'With selection';
+
+export const WithMultiselectSelection: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+
+);
+
+WithMultiselectSelection.storyName = 'With multiselect selection';
+
+export const DisabledOption: Story = () => (
+
+
+ Red
+ Green
+ Blue
+
+
+);
+
+DisabledOption.storyName = 'Disabled option';
+
+export const OpenWithGroupedOptions: Story = () => (
+
+
+
+ Red
+ Green
+ Blue
+
+
+ Circle
+ Square
+ Oval
+
+
+
+);
+
+OpenWithGroupedOptions.storyName = 'Open with grouped options';