diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx
deleted file mode 100644
index 654ec88d0afaa3..00000000000000
--- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat';
-import { DateRangeType } from '@fluentui/react-calendar-compat';
-import { Field } from '@fluentui/react-field';
-import { storiesOf } from '@storybook/react';
-import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
-import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
-
-const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean }) => {
-  const today = new Date('3/15/2023');
-  const { renderRelativeElement, ...restProps } = props;
-  return (
-    <div style={{ width: '500px', height: '330px', padding: '10px' }}>
-      <DatePickerBase value={today} today={today} {...restProps} />
-      {renderRelativeElement && <input style={{ position: 'relative', display: 'block', width: '100%' }} />}
-    </div>
-  );
-};
-
-storiesOf('DatePicker Compat', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo: '.testWrapper' })
-        .click('.datepicker-input')
-        .snapshot('opened', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('default', () => <DatePicker input={{ className: 'datepicker-input' }} />, {
-    includeHighContrast: true,
-    includeDarkMode: true,
-  });
-
-storiesOf('DatePicker Compat', module)
-  .addDecorator(TestWrapperDecorator)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('DateRange: day', () => <DatePicker calendar={{ dateRangeType: DateRangeType.Day }} defaultOpen={true} />)
-  .addStory('DateRange: week', () => <DatePicker calendar={{ dateRangeType: DateRangeType.Week }} defaultOpen={true} />)
-  .addStory('DateRange: work week', () => (
-    <DatePicker calendar={{ dateRangeType: DateRangeType.WorkWeek }} defaultOpen={true} />
-  ))
-  .addStory(
-    'DateRange: month',
-    () => <DatePicker calendar={{ dateRangeType: DateRangeType.Month }} defaultOpen={true} />,
-    {
-      includeDarkMode: true,
-      includeHighContrast: true,
-    },
-  )
-  .addStory(
-    'marked dates',
-    () => (
-      <DatePicker
-        calendar={{
-          calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] },
-        }}
-        defaultOpen={true}
-      />
-    ),
-    {
-      includeDarkMode: true,
-      includeHighContrast: true,
-    },
-  )
-  .addStory('showWeekNumbers', () => <DatePicker showWeekNumbers defaultOpen={true} />, {
-    includeDarkMode: true,
-    includeHighContrast: true,
-  })
-  .addStory('allowTextInput', () => <DatePicker allowTextInput />)
-  .addStory('Required', () => (
-    <Field label="Select a date" required>
-      <DatePicker />
-    </Field>
-  ))
-  .addStory('Underlined', () => <DatePicker underlined />)
-  .addStory('Underlined and required', () => (
-    <Field required>
-      <DatePicker underlined />
-    </Field>
-  ))
-  .addStory('With label', () => (
-    <Field label="Select a date">
-      <DatePicker />
-    </Field>
-  ))
-  .addStory('when rendering inline, it should not render behind relatively positioned elements', () => (
-    <Field label="Select a date">
-      <DatePicker open inlinePopup renderRelativeElement />
-    </Field>
-  ));
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx
new file mode 100644
index 00000000000000..dcfa20b20d2df0
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompat.stories.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { DatePicker as DatePickerBase } from '@fluentui/react-datepicker-compat';
+import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
+import { DateRangeType } from '@fluentui/react-calendar-compat';
+import { Field } from '@fluentui/react-field';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
+
+const DatePicker = (props: DatePickerProps & { renderRelativeElement?: boolean }) => {
+  const today = new Date('3/15/2023');
+  const { renderRelativeElement, ...restProps } = props;
+  return (
+    <div style={{ width: '500px', height: '330px', padding: '10px' }}>
+      <DatePickerBase value={today} today={today} {...restProps} />
+      {renderRelativeElement && <input style={{ position: 'relative', display: 'block', width: '100%' }} />}
+    </div>
+  );
+};
+
+export default {
+  title: 'DatePicker Compat',
+  component: DatePicker,
+  decorators: [
+    TestWrapperDecorator,
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+type Story = StoryFn<typeof DatePicker>;
+
+export const DateRangeDay: Story = () => (
+  <DatePicker calendar={{ dateRangeType: DateRangeType.Day }} defaultOpen={true} />
+);
+
+DateRangeDay.storyName = 'DateRange: day';
+
+export const DateRangeWeek: Story = () => (
+  <DatePicker calendar={{ dateRangeType: DateRangeType.Week }} defaultOpen={true} />
+);
+
+DateRangeWeek.storyName = 'DateRange: week';
+
+export const DateRangeWorkWeek: Story = () => (
+  <DatePicker calendar={{ dateRangeType: DateRangeType.WorkWeek }} defaultOpen={true} />
+);
+
+DateRangeWorkWeek.storyName = 'DateRange: work week';
+
+export const DateRangeMonth: Story = () => (
+  <DatePicker calendar={{ dateRangeType: DateRangeType.Month }} defaultOpen={true} />
+);
+DateRangeMonth.storyName = 'DateRange: month';
+
+export const DateRangeDayDarkMode = getStoryVariant(DateRangeDay, DARK_MODE);
+
+export const DateRangeMonthHightContrast = getStoryVariant(DateRangeMonth, HIGH_CONTRAST);
+
+export const MarkedDates: Story = () => (
+  <DatePicker
+    calendar={{
+      calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] },
+    }}
+    defaultOpen={true}
+  />
+);
+MarkedDates.storyName = 'marked dates';
+
+export const MarkedDatesDarkMode = getStoryVariant(MarkedDates, DARK_MODE);
+
+export const MarkedDatesHightContrast = getStoryVariant(MarkedDates, HIGH_CONTRAST);
+
+export const ShowWeekNumbers: Story = () => <DatePicker showWeekNumbers defaultOpen={true} />;
+ShowWeekNumbers.storyName = 'showWeekNumbers';
+
+export const ShowWeekNumbersDarkMode = getStoryVariant(ShowWeekNumbers, DARK_MODE);
+
+export const ShowWeekNumbersHightContrast = getStoryVariant(ShowWeekNumbers, HIGH_CONTRAST);
+
+export const AllowTextInput: Story = () => <DatePicker allowTextInput />;
+
+AllowTextInput.storyName = 'allowTextInput';
+
+export const Required: Story = () => (
+  <Field label="Select a date" required>
+    <DatePicker />
+  </Field>
+);
+
+export const Underlined: Story = () => <DatePicker underlined />;
+
+export const UnderlinedAndRequired: Story = () => (
+  <Field required>
+    <DatePicker underlined />
+  </Field>
+);
+
+UnderlinedAndRequired.storyName = 'Underlined and required';
+
+export const WithLabel: Story = () => (
+  <Field label="Select a date">
+    <DatePicker />
+  </Field>
+);
+
+WithLabel.storyName = 'With label';
+
+export const WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements: Story = () => (
+  <Field label="Select a date">
+    <DatePicker open inlinePopup renderRelativeElement />
+  </Field>
+);
+
+WhenRenderingInlineItShouldNotRenderBehindRelativelyPositionedElements.storyName =
+  'when rendering inline, it should not render behind relatively positioned elements';
diff --git a/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx
new file mode 100644
index 00000000000000..4bcf4a77c867b5
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/DatepickerCompat/DatePickerCompatInputInteractions.stories.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Steps, StoryWright } from 'storywright';
+import { DatePicker } from '@fluentui/react-datepicker-compat';
+import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, TestWrapperDecorator } from '../../utilities';
+
+export default {
+  title: 'DatePicker Compat',
+  component: DatePicker,
+  decorators: [
+    TestWrapperDecorator,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('rest', { cropTo: '.testWrapper' })
+          .click('.datepicker-input')
+          .snapshot('opened', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof DatePicker>;
+
+type Story = StoryFn<typeof DatePicker>;
+
+export const Default: Story = () => <DatePicker input={{ className: 'datepicker-input' }} />;
+Default.storyName = 'default';
+
+export const DefaultHightContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);