From f6ec2911ab0aee826b98fbabc5ea59e986e0d3ae Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Thu, 29 Jun 2023 23:40:53 +0200
Subject: [PATCH 1/7] vr

---
 apps/vr-tests-react-components/package.json   |   3 +-
 .../stories/Tag/InteractionTag.stories.tsx    | 151 ++++++++++++++++++
 .../src/stories/Tag/Tag.stories.tsx           | 151 ++++++++++++++++++
 .../src/stories/Tag/TagGroup.stories.tsx      |  47 ++++++
 .../src/stories/Tag/utils.ts                  |  11 ++
 5 files changed, 362 insertions(+), 1 deletion(-)
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/utils.ts

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index b33cb857a6afef..875c27dd3eb898 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -56,8 +56,9 @@
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-codesandbox": "*",
     "@fluentui/react-switch": "*",
-    "@fluentui/react-tabs": "*",
     "@fluentui/react-table": "*",
+    "@fluentui/react-tabs": "*",
+    "@fluentui/react-tags": "*",
     "@fluentui/react-text": "*",
     "@fluentui/react-textarea": "*",
     "@fluentui/react-theme": "*",
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
new file mode 100644
index 00000000000000..82e969951ff2af
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { tagId, steps } from './utils';
+import { Avatar } from '@fluentui/react-avatar';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Default = () => <InteractionTag id={tagId}>Primary Text</InteractionTag>;
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+// slots
+export const Icon = () => (
+  <InteractionTag id={tagId} icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const IconRTL = getStoryVariant(Icon, RTL);
+
+export const Media = () => (
+  <InteractionTag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const MediaRTL = getStoryVariant(Media, RTL);
+
+export const Dismissible = () => (
+  <InteractionTag id={tagId} dismissible>
+    Primary Text
+  </InteractionTag>
+);
+export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
+
+export const SecondaryText = () => (
+  <InteractionTag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+// shape
+export const Circular = () => (
+  <InteractionTag id={tagId} shape="circular">
+    Primary Text
+  </InteractionTag>
+);
+export const CircularWithMedia = () => (
+  <InteractionTag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const CircularDismissible = () => (
+  <InteractionTag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </InteractionTag>
+);
+
+// appearance
+export const Outline = () => (
+  <InteractionTag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <InteractionTag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
+
+// disabled
+export const Disabled = () => (
+  <InteractionTag id={tagId} disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const OutlineDisabled = () => (
+  <InteractionTag id={tagId} appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
+export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
+
+export const BrandDisabled = () => (
+  <InteractionTag id={tagId} appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
+export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
+
+// size
+export const SizeSmall = () => (
+  <InteractionTag id={tagId} size="small">
+    Primary Text
+  </InteractionTag>
+);
+export const SizeSmallDismissible = () => (
+  <InteractionTag id={tagId} size="small" dismissible>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeSmallWithIcon = () => (
+  <InteractionTag id={tagId} size="small" icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeSmallWithMedia = () => (
+  <InteractionTag id={tagId} size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+
+export const SizeExtraSmall = () => (
+  <InteractionTag id={tagId} size="extra-small">
+    Primary Text
+  </InteractionTag>
+);
+export const SizeExtraSmallDismissible = () => (
+  <InteractionTag id={tagId} size="extra-small" dismissible>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeExtraSmallWithIcon = () => (
+  <InteractionTag id={tagId} size="extra-small" icon={<CalendarMonth />}>
+    Primary Text
+  </InteractionTag>
+);
+export const SizeExtraSmallWithMedia = () => (
+  <InteractionTag id={tagId} size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
new file mode 100644
index 00000000000000..d7b17f7dfe4baa
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -0,0 +1,151 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+import { tagId, steps } from './utils';
+import { Avatar } from '@fluentui/react-avatar';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Default = () => <Tag id={tagId}>Primary Text</Tag>;
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
+
+// slots
+export const Icon = () => (
+  <Tag id={tagId} icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const IconRTL = getStoryVariant(Icon, RTL);
+
+export const Media = () => (
+  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const MediaRTL = getStoryVariant(Media, RTL);
+
+export const Dismissible = () => (
+  <Tag id={tagId} dismissible>
+    Primary Text
+  </Tag>
+);
+export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
+
+export const SecondaryText = () => (
+  <Tag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </Tag>
+);
+
+// shape
+export const Circular = () => (
+  <Tag id={tagId} shape="circular">
+    Primary Text
+  </Tag>
+);
+export const CircularWithMedia = () => (
+  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const CircularDismissible = () => (
+  <Tag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </Tag>
+);
+
+// appearance
+export const Outline = () => (
+  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
+
+// disabled
+export const Disabled = () => (
+  <Tag id={tagId} disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const OutlineDisabled = () => (
+  <Tag id={tagId} appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH_CONTRAST);
+export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
+
+export const BrandDisabled = () => (
+  <Tag id={tagId} appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CONTRAST);
+export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
+
+// size
+export const SizeSmall = () => (
+  <Tag id={tagId} size="small">
+    Primary Text
+  </Tag>
+);
+export const SizeSmallDismissible = () => (
+  <Tag id={tagId} size="small" dismissible>
+    Primary Text
+  </Tag>
+);
+export const SizeSmallWithIcon = () => (
+  <Tag id={tagId} size="small" icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const SizeSmallWithMedia = () => (
+  <Tag id={tagId} size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+
+export const SizeExtraSmall = () => (
+  <Tag id={tagId} size="extra-small">
+    Primary Text
+  </Tag>
+);
+export const SizeExtraSmallDismissible = () => (
+  <Tag id={tagId} size="extra-small" dismissible>
+    Primary Text
+  </Tag>
+);
+export const SizeExtraSmallWithIcon = () => (
+  <Tag id={tagId} size="extra-small" icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const SizeExtraSmallWithMedia = () => (
+  <Tag id={tagId} size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
new file mode 100644
index 00000000000000..83f38ccc19ad6e
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { TagGroup, Tag } from '@fluentui/react-tags';
+import { ComponentMeta } from '@storybook/react';
+import { Steps } from 'storywright';
+import { withStoryWrightSteps } from '../../utilities';
+
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
+
+export default {
+  title: 'TagGroup Converged',
+  Component: TagGroup,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof TagGroup>;
+
+export const Default = () => (
+  <TagGroup>
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+const onDismiss = () => ({});
+export const Dismissible = () => (
+  <TagGroup onDismiss={onDismiss}>
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+// size
+export const SizeSmall = () => (
+  <TagGroup size="small">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
+
+export const SizeExtraSmall = () => (
+  <TagGroup size="extra-small">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+  </TagGroup>
+);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/utils.ts b/apps/vr-tests-react-components/src/stories/Tag/utils.ts
new file mode 100644
index 00000000000000..687b8959cc6463
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/utils.ts
@@ -0,0 +1,11 @@
+import { Steps } from 'storywright';
+
+export const tagId = 'tag-id';
+
+export const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover('#tag-id')
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown('#tag-id')
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();

From 1fcb79e320d1518f13475cb047f8e6e62c560a29 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Thu, 29 Jun 2023 23:42:04 +0200
Subject: [PATCH 2/7] vr

---
 .../src/stories/Tag/TagGroup.stories.tsx               | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
index 83f38ccc19ad6e..67f4672f7cc14a 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagGroup, Tag } from '@fluentui/react-tags';
+import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags';
 import { ComponentMeta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';
@@ -29,6 +29,14 @@ export const Dismissible = () => (
   </TagGroup>
 );
 
+export const DismissibleWithInteractionTag = () => (
+  <TagGroup onDismiss={onDismiss}>
+    <InteractionTag>Tag 1</InteractionTag>
+    <InteractionTag>Tag 2</InteractionTag>
+    <InteractionTag>Tag 3</InteractionTag>
+  </TagGroup>
+);
+
 // size
 export const SizeSmall = () => (
   <TagGroup size="small">

From 31565390272c2dcdc55a66692a0338d405755a12 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 18 Jul 2023 17:35:06 +0200
Subject: [PATCH 3/7] pkg.json

---
 apps/vr-tests-react-components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 875c27dd3eb898..3eb6844f037ffa 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -58,7 +58,7 @@
     "@fluentui/react-switch": "*",
     "@fluentui/react-table": "*",
     "@fluentui/react-tabs": "*",
-    "@fluentui/react-tags": "*",
+    "@fluentui/react-tags-preview": "*",
     "@fluentui/react-text": "*",
     "@fluentui/react-textarea": "*",
     "@fluentui/react-theme": "*",

From 33ab5a719dabe4e045103c3917009da9e3d2fd79 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 18 Jul 2023 18:17:07 +0200
Subject: [PATCH 4/7] update import to preview

---
 .../src/stories/Tag/InteractionTag.stories.tsx                  | 2 +-
 apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx  | 2 +-
 .../src/stories/Tag/TagGroup.stories.tsx                        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index 82e969951ff2af..7369e2d4ce949e 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InteractionTag } from '@fluentui/react-tags';
+import { InteractionTag } from '@fluentui/react-tags-preview';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index d7b17f7dfe4baa..dc8d081c4e3404 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tag } from '@fluentui/react-tags';
+import { Tag } from '@fluentui/react-tags-preview';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
index 67f4672f7cc14a..8b7d5b562fc064 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagGroup.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags';
+import { TagGroup, Tag, InteractionTag } from '@fluentui/react-tags-preview';
 import { ComponentMeta } from '@storybook/react';
 import { Steps } from 'storywright';
 import { withStoryWrightSteps } from '../../utilities';

From dc165e0e2e3cb36ebfc914db945548c78836a37e Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 19 Jul 2023 16:12:00 +0200
Subject: [PATCH 5/7] hover for both content and dimiss

---
 .../stories/Tag/InteractionTag.stories.tsx    | 102 ++++++++++++++----
 .../src/stories/Tag/Tag.stories.tsx           |  11 +-
 .../src/stories/Tag/utils.ts                  |  11 --
 3 files changed, 90 insertions(+), 34 deletions(-)
 delete mode 100644 apps/vr-tests-react-components/src/stories/Tag/utils.ts

diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index 7369e2d4ce949e..ee7e412f044cff 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -3,18 +3,32 @@ import { InteractionTag } from '@fluentui/react-tags-preview';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
-import { tagId, steps } from './utils';
 import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${contentId}`)
+  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .mouseDown(`#${contentId}`)
+  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .hover(`#${dismissButtonId}`)
+  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .mouseDown(`#${dismissButtonId}`)
+  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .end();
+
 export default {
   title: 'InteractionTag Converged',
   Component: InteractionTag,
   decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof InteractionTag>;
 
-export const Default = () => <InteractionTag id={tagId}>Primary Text</InteractionTag>;
+export const Default = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
 
 export const DefaultRTL = getStoryVariant(Default, RTL);
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
@@ -22,52 +36,62 @@ export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
 // slots
 export const Icon = () => (
-  <InteractionTag id={tagId} icon={<CalendarMonth />}>
+  <InteractionTag content={{ id: contentId }} icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const IconRTL = getStoryVariant(Icon, RTL);
 
 export const Media = () => (
-  <InteractionTag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </InteractionTag>
 );
 export const MediaRTL = getStoryVariant(Media, RTL);
 
 export const Dismissible = () => (
-  <InteractionTag id={tagId} dismissible>
+  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
     Primary Text
   </InteractionTag>
 );
 export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
 
 export const SecondaryText = () => (
-  <InteractionTag id={tagId} secondaryText="Secondary Text">
+  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
     Primary Text
   </InteractionTag>
 );
 
 // shape
 export const Circular = () => (
-  <InteractionTag id={tagId} shape="circular">
+  <InteractionTag content={{ id: contentId }} shape="circular">
     Primary Text
   </InteractionTag>
 );
 export const CircularWithMedia = () => (
-  <InteractionTag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    shape="circular"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
     Primary Text
   </InteractionTag>
 );
 export const CircularDismissible = () => (
-  <InteractionTag id={tagId} shape="circular" dismissible>
+  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
     Primary Text
   </InteractionTag>
 );
 
 // appearance
 export const Outline = () => (
-  <InteractionTag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
     Primary Text
   </InteractionTag>
 );
@@ -75,7 +99,13 @@ export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
 export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
 
 export const Brand = () => (
-  <InteractionTag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
     Primary Text
   </InteractionTag>
 );
@@ -84,7 +114,13 @@ export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
 
 // disabled
 export const Disabled = () => (
-  <InteractionTag id={tagId} disabled dismissible icon={<CalendarMonth />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    disabled
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
     Primary Text
   </InteractionTag>
 );
@@ -92,7 +128,14 @@ export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
 
 export const OutlineDisabled = () => (
-  <InteractionTag id={tagId} appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    disabled
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
     Primary Text
   </InteractionTag>
 );
@@ -100,7 +143,14 @@ export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH
 export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
 
 export const BrandDisabled = () => (
-  <InteractionTag id={tagId} appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    disabled
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
     Primary Text
   </InteractionTag>
 );
@@ -109,43 +159,51 @@ export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
 
 // size
 export const SizeSmall = () => (
-  <InteractionTag id={tagId} size="small">
+  <InteractionTag content={{ id: contentId }} size="small">
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallDismissible = () => (
-  <InteractionTag id={tagId} size="small" dismissible>
+  <InteractionTag content={{ id: contentId }} size="small" dismissible dismissButton={{ id: dismissButtonId }}>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithIcon = () => (
-  <InteractionTag id={tagId} size="small" icon={<CalendarMonth />}>
+  <InteractionTag content={{ id: contentId }} size="small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithMedia = () => (
-  <InteractionTag id={tagId} size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    size="small"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
     Primary Text
   </InteractionTag>
 );
 
 export const SizeExtraSmall = () => (
-  <InteractionTag id={tagId} size="extra-small">
+  <InteractionTag content={{ id: contentId }} size="extra-small">
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallDismissible = () => (
-  <InteractionTag id={tagId} size="extra-small" dismissible>
+  <InteractionTag content={{ id: contentId }} size="extra-small" dismissible dismissButton={{ id: dismissButtonId }}>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithIcon = () => (
-  <InteractionTag id={tagId} size="extra-small" icon={<CalendarMonth />}>
+  <InteractionTag content={{ id: contentId }} size="extra-small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithMedia = () => (
-  <InteractionTag id={tagId} size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <InteractionTag
+    content={{ id: contentId }}
+    size="extra-small"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
     Primary Text
   </InteractionTag>
 );
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index dc8d081c4e3404..8be370c901dd54 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -3,11 +3,20 @@ import { Tag } from '@fluentui/react-tags-preview';
 import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
 import { ComponentMeta } from '@storybook/react';
 import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
-import { tagId, steps } from './utils';
 import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${tagId}}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${tagId}}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
 export default {
   title: 'Tag Converged',
   Component: Tag,
diff --git a/apps/vr-tests-react-components/src/stories/Tag/utils.ts b/apps/vr-tests-react-components/src/stories/Tag/utils.ts
deleted file mode 100644
index 687b8959cc6463..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Tag/utils.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Steps } from 'storywright';
-
-export const tagId = 'tag-id';
-
-export const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover('#tag-id')
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown('#tag-id')
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .end();

From 984f20095bb8f060cb92970d243957606a4fdd8a Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 19 Jul 2023 17:55:03 +0200
Subject: [PATCH 6/7] split

---
 .../stories/Tag/InteractionTag.stories.tsx    | 152 ++----------------
 .../Tag/InteractionTagAppearances.stories.tsx |  70 ++++++++
 .../Tag/InteractionTagShape.stories.tsx       |  74 +++++++++
 .../src/stories/Tag/Tag.stories.tsx           | 103 ++----------
 .../stories/Tag/TagAppearances.stories.tsx    |  49 ++++++
 .../src/stories/Tag/TagShape.stories.tsx      |  67 ++++++++
 6 files changed, 286 insertions(+), 229 deletions(-)
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
 create mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
index ee7e412f044cff..56fec05e8223b0 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTag.stories.tsx
@@ -8,19 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const contentId = 'content-id';
-const dismissButtonId = 'dismiss-button-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${contentId}`)
-  .snapshot('hover content', { cropTo: '.testWrapper' })
-  .mouseDown(`#${contentId}`)
-  .snapshot('pressed content', { cropTo: '.testWrapper' })
-  .hover(`#${dismissButtonId}`)
-  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
-  .mouseDown(`#${dismissButtonId}`)
-  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
-  .end();
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'InteractionTag Converged',
@@ -28,99 +16,15 @@ export default {
   decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof InteractionTag>;
 
-export const Default = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+export const Default = () => <InteractionTag>Primary Text</InteractionTag>;
 
 export const DefaultRTL = getStoryVariant(Default, RTL);
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
-// slots
-export const Icon = () => (
-  <InteractionTag content={{ id: contentId }} icon={<CalendarMonth />}>
-    Primary Text
-  </InteractionTag>
-);
-export const IconRTL = getStoryVariant(Icon, RTL);
-
-export const Media = () => (
-  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </InteractionTag>
-);
-export const MediaRTL = getStoryVariant(Media, RTL);
-
-export const Dismissible = () => (
-  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
-
-export const SecondaryText = () => (
-  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
-    Primary Text
-  </InteractionTag>
-);
-
-// shape
-export const Circular = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular">
-    Primary Text
-  </InteractionTag>
-);
-export const CircularWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    shape="circular"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const CircularDismissible = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-
-// appearance
-export const Outline = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="outline"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="brand"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
-
 // disabled
 export const Disabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -128,14 +32,7 @@ export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
 
 export const OutlineDisabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="outline"
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -143,14 +40,7 @@ export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH
 export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
 
 export const BrandDisabled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="brand"
-    disabled
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
+  <InteractionTag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
@@ -158,52 +48,36 @@ export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CON
 export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
 
 // size
-export const SizeSmall = () => (
-  <InteractionTag content={{ id: contentId }} size="small">
-    Primary Text
-  </InteractionTag>
-);
+export const SizeSmall = () => <InteractionTag size="small">Primary Text</InteractionTag>;
 export const SizeSmallDismissible = () => (
-  <InteractionTag content={{ id: contentId }} size="small" dismissible dismissButton={{ id: dismissButtonId }}>
+  <InteractionTag size="small" dismissible>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithIcon = () => (
-  <InteractionTag content={{ id: contentId }} size="small" icon={<CalendarMonth />}>
+  <InteractionTag size="small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeSmallWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    size="small"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
+  <InteractionTag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </InteractionTag>
 );
 
-export const SizeExtraSmall = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small">
-    Primary Text
-  </InteractionTag>
-);
+export const SizeExtraSmall = () => <InteractionTag size="extra-small">Primary Text</InteractionTag>;
 export const SizeExtraSmallDismissible = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small" dismissible dismissButton={{ id: dismissButtonId }}>
+  <InteractionTag size="extra-small" dismissible>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithIcon = () => (
-  <InteractionTag content={{ id: contentId }} size="extra-small" icon={<CalendarMonth />}>
+  <InteractionTag size="extra-small" icon={<CalendarMonth />}>
     Primary Text
   </InteractionTag>
 );
 export const SizeExtraSmallWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    size="extra-small"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
+  <InteractionTag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </InteractionTag>
 );
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
new file mode 100644
index 00000000000000..a3966eba20a4c3
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${contentId}`)
+  .snapshot('hover content', { cropTo: '.testWrapper' })
+  .mouseDown(`#${contentId}`)
+  .snapshot('pressed content', { cropTo: '.testWrapper' })
+  .hover(`#${dismissButtonId}`)
+  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
+  .mouseDown(`#${dismissButtonId}`)
+  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Filled = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="filled"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="outline"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    appearance="brand"
+    dismissible
+    dismissButton={{ id: dismissButtonId }}
+    icon={<CalendarMonth />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
new file mode 100644
index 00000000000000..4c5a96145b4c20
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { InteractionTag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const contentId = 'content-id';
+const dismissButtonId = 'dismiss-button-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .focus(`#${contentId}`)
+  .snapshot('focus content', { cropTo: '.testWrapper' })
+  .focus(`#${dismissButtonId}`)
+  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'InteractionTag Converged',
+  Component: InteractionTag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof InteractionTag>;
+
+export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
+
+export const RoundedWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const RoundedWithMedia = () => (
+  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
+    Primary Text
+  </InteractionTag>
+);
+
+export const CircularWithMedia = () => (
+  <InteractionTag
+    content={{ id: contentId }}
+    shape="circular"
+    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
+  >
+    Primary Text
+  </InteractionTag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
+    Primary Text
+  </InteractionTag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
index 8be370c901dd54..6e08f6a630475b 100644
--- a/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Tag/Tag.stories.tsx
@@ -8,14 +8,7 @@ import { Steps } from 'storywright';
 
 const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
-const tagId = 'tag-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${tagId}}`)
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown(`#${tagId}}`)
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .end();
+const steps = new Steps().snapshot('default', { cropTo: '.testWrapper' }).end();
 
 export default {
   title: 'Tag Converged',
@@ -23,77 +16,15 @@ export default {
   decorators: [story => withStoryWrightSteps({ story, steps })],
 } as ComponentMeta<typeof Tag>;
 
-export const Default = () => <Tag id={tagId}>Primary Text</Tag>;
+export const Default = () => <Tag>Primary Text</Tag>;
 
 export const DefaultRTL = getStoryVariant(Default, RTL);
 export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
 export const DefaultHighContrast = getStoryVariant(Default, HIGH_CONTRAST);
 
-// slots
-export const Icon = () => (
-  <Tag id={tagId} icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const IconRTL = getStoryVariant(Icon, RTL);
-
-export const Media = () => (
-  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const MediaRTL = getStoryVariant(Media, RTL);
-
-export const Dismissible = () => (
-  <Tag id={tagId} dismissible>
-    Primary Text
-  </Tag>
-);
-export const DismissibleRTL = getStoryVariant(Dismissible, RTL);
-
-export const SecondaryText = () => (
-  <Tag id={tagId} secondaryText="Secondary Text">
-    Primary Text
-  </Tag>
-);
-
-// shape
-export const Circular = () => (
-  <Tag id={tagId} shape="circular">
-    Primary Text
-  </Tag>
-);
-export const CircularWithMedia = () => (
-  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const CircularDismissible = () => (
-  <Tag id={tagId} shape="circular" dismissible>
-    Primary Text
-  </Tag>
-);
-
-// appearance
-export const Outline = () => (
-  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
-
 // disabled
 export const Disabled = () => (
-  <Tag id={tagId} disabled dismissible icon={<CalendarMonth />}>
+  <Tag disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -101,7 +32,7 @@ export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
 export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
 
 export const OutlineDisabled = () => (
-  <Tag id={tagId} appearance="outline" disabled dismissible icon={<CalendarMonth />}>
+  <Tag appearance="outline" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -109,7 +40,7 @@ export const OutlineDisabledHighContrast = getStoryVariant(OutlineDisabled, HIGH
 export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
 
 export const BrandDisabled = () => (
-  <Tag id={tagId} appearance="brand" disabled dismissible icon={<CalendarMonth />}>
+  <Tag appearance="brand" disabled dismissible icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
@@ -117,44 +48,36 @@ export const BrandDisabledHighContrast = getStoryVariant(BrandDisabled, HIGH_CON
 export const BrandDisabledDarkMode = getStoryVariant(BrandDisabled, DARK_MODE);
 
 // size
-export const SizeSmall = () => (
-  <Tag id={tagId} size="small">
-    Primary Text
-  </Tag>
-);
+export const SizeSmall = () => <Tag size="small">Primary Text</Tag>;
 export const SizeSmallDismissible = () => (
-  <Tag id={tagId} size="small" dismissible>
+  <Tag size="small" dismissible>
     Primary Text
   </Tag>
 );
 export const SizeSmallWithIcon = () => (
-  <Tag id={tagId} size="small" icon={<CalendarMonth />}>
+  <Tag size="small" icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
 export const SizeSmallWithMedia = () => (
-  <Tag id={tagId} size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <Tag size="small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </Tag>
 );
 
-export const SizeExtraSmall = () => (
-  <Tag id={tagId} size="extra-small">
-    Primary Text
-  </Tag>
-);
+export const SizeExtraSmall = () => <Tag size="extra-small">Primary Text</Tag>;
 export const SizeExtraSmallDismissible = () => (
-  <Tag id={tagId} size="extra-small" dismissible>
+  <Tag size="extra-small" dismissible>
     Primary Text
   </Tag>
 );
 export const SizeExtraSmallWithIcon = () => (
-  <Tag id={tagId} size="extra-small" icon={<CalendarMonth />}>
+  <Tag size="extra-small" icon={<CalendarMonth />}>
     Primary Text
   </Tag>
 );
 export const SizeExtraSmallWithMedia = () => (
-  <Tag id={tagId} size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+  <Tag size="extra-small" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
     Primary Text
   </Tag>
 );
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
new file mode 100644
index 00000000000000..66c2b110c1b63b
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
+import { Steps } from 'storywright';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover(`#${tagId}}`)
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown(`#${tagId}}`)
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Filled = () => (
+  <Tag id={tagId} appearance="filled" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
+export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
+
+export const Outline = () => (
+  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+
+export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+
+export const Brand = () => (
+  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
+    Primary Text
+  </Tag>
+);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
new file mode 100644
index 00000000000000..28ba174f5fff49
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Tag } from '@fluentui/react-tags-preview';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
+import { Avatar } from '@fluentui/react-avatar';
+import { Steps } from 'storywright';
+
+const tagId = 'tag-id';
+const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .focus(`#${tagId}}`)
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .end();
+
+export default {
+  title: 'Tag Converged',
+  Component: Tag,
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Tag>;
+
+export const Rounded = () => <Tag id={tagId}>Primary Text</Tag>;
+
+export const RoundedWithSecondaryText = () => (
+  <Tag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </Tag>
+);
+
+export const RoundedWithMedia = () => (
+  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
+
+export const RoundedDismissible = () => (
+  <Tag id={tagId} dismissible>
+    Primary Text
+  </Tag>
+);
+export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
+
+export const Circular = () => (
+  <Tag id={tagId} shape="circular">
+    Primary Text
+  </Tag>
+);
+
+export const CircularWithSecondaryText = () => (
+  <Tag id={tagId} secondaryText="Secondary Text">
+    Primary Text
+  </Tag>
+);
+
+export const CircularWithMedia = () => (
+  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
+    Primary Text
+  </Tag>
+);
+export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
+
+export const CircularDismissible = () => (
+  <Tag id={tagId} shape="circular" dismissible>
+    Primary Text
+  </Tag>
+);
+export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);

From 5ee61e25c95ed09ef2a2c2e98a0f9000fc8bf7b7 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Wed, 19 Jul 2023 17:55:37 +0200
Subject: [PATCH 7/7] remove some stories

---
 .../Tag/InteractionTagAppearances.stories.tsx | 70 ------------------
 .../Tag/InteractionTagShape.stories.tsx       | 74 -------------------
 .../stories/Tag/TagAppearances.stories.tsx    | 49 ------------
 .../src/stories/Tag/TagShape.stories.tsx      | 67 -----------------
 4 files changed, 260 deletions(-)
 delete mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
 delete mode 100644 apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
 delete mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
 delete mode 100644 apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx

diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
deleted file mode 100644
index a3966eba20a4c3..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagAppearances.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import * as React from 'react';
-import { InteractionTag } from '@fluentui/react-tags-preview';
-import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
-import { Steps } from 'storywright';
-
-const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
-
-const contentId = 'content-id';
-const dismissButtonId = 'dismiss-button-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${contentId}`)
-  .snapshot('hover content', { cropTo: '.testWrapper' })
-  .mouseDown(`#${contentId}`)
-  .snapshot('pressed content', { cropTo: '.testWrapper' })
-  .hover(`#${dismissButtonId}`)
-  .snapshot('hover dismiss', { cropTo: '.testWrapper' })
-  .mouseDown(`#${dismissButtonId}`)
-  .snapshot('pressed dismiss', { cropTo: '.testWrapper' })
-  .end();
-
-export default {
-  title: 'InteractionTag Converged',
-  Component: InteractionTag,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof InteractionTag>;
-
-export const Filled = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="filled"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
-export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
-
-export const Outline = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="outline"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    appearance="brand"
-    dismissible
-    dismissButton={{ id: dismissButtonId }}
-    icon={<CalendarMonth />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
deleted file mode 100644
index 4c5a96145b4c20..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Tag/InteractionTagShape.stories.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { InteractionTag } from '@fluentui/react-tags-preview';
-import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
-import { Avatar } from '@fluentui/react-avatar';
-import { Steps } from 'storywright';
-
-const contentId = 'content-id';
-const dismissButtonId = 'dismiss-button-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .focus(`#${contentId}`)
-  .snapshot('focus content', { cropTo: '.testWrapper' })
-  .focus(`#${dismissButtonId}`)
-  .snapshot('focus dismiss', { cropTo: '.testWrapper' })
-  .end();
-
-export default {
-  title: 'InteractionTag Converged',
-  Component: InteractionTag,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof InteractionTag>;
-
-export const Rounded = () => <InteractionTag content={{ id: contentId }}>Primary Text</InteractionTag>;
-
-export const RoundedWithSecondaryText = () => (
-  <InteractionTag content={{ id: contentId }} secondaryText="Secondary Text">
-    Primary Text
-  </InteractionTag>
-);
-
-export const RoundedWithMedia = () => (
-  <InteractionTag content={{ id: contentId }} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </InteractionTag>
-);
-export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
-
-export const RoundedDismissible = () => (
-  <InteractionTag content={{ id: contentId }} dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
-
-export const Circular = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular">
-    Primary Text
-  </InteractionTag>
-);
-
-export const CircularWithSecondaryText = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular" secondaryText="Secondary Text">
-    Primary Text
-  </InteractionTag>
-);
-
-export const CircularWithMedia = () => (
-  <InteractionTag
-    content={{ id: contentId }}
-    shape="circular"
-    media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}
-  >
-    Primary Text
-  </InteractionTag>
-);
-export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
-
-export const CircularDismissible = () => (
-  <InteractionTag content={{ id: contentId }} shape="circular" dismissible dismissButton={{ id: dismissButtonId }}>
-    Primary Text
-  </InteractionTag>
-);
-export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
deleted file mode 100644
index 66c2b110c1b63b..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Tag/TagAppearances.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { Tag } from '@fluentui/react-tags-preview';
-import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
-import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, DARK_MODE, HIGH_CONTRAST } from '../../utilities';
-import { Steps } from 'storywright';
-
-const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
-
-const tagId = 'tag-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .hover(`#${tagId}}`)
-  .snapshot('hover', { cropTo: '.testWrapper' })
-  .mouseDown(`#${tagId}}`)
-  .snapshot('pressed', { cropTo: '.testWrapper' })
-  .end();
-
-export default {
-  title: 'Tag Converged',
-  Component: Tag,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Tag>;
-
-export const Filled = () => (
-  <Tag id={tagId} appearance="filled" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-
-export const FilledHighContrast = getStoryVariant(Filled, HIGH_CONTRAST);
-export const FilledDarkMode = getStoryVariant(Filled, DARK_MODE);
-
-export const Outline = () => (
-  <Tag id={tagId} appearance="outline" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-
-export const OutlineHighContrast = getStoryVariant(Outline, HIGH_CONTRAST);
-export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
-
-export const Brand = () => (
-  <Tag id={tagId} appearance="brand" dismissible icon={<CalendarMonth />}>
-    Primary Text
-  </Tag>
-);
-export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
-export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
diff --git a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx b/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
deleted file mode 100644
index 28ba174f5fff49..00000000000000
--- a/apps/vr-tests-react-components/src/stories/Tag/TagShape.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { Tag } from '@fluentui/react-tags-preview';
-import { ComponentMeta } from '@storybook/react';
-import { getStoryVariant, withStoryWrightSteps, RTL } from '../../utilities';
-import { Avatar } from '@fluentui/react-avatar';
-import { Steps } from 'storywright';
-
-const tagId = 'tag-id';
-const steps = new Steps()
-  .snapshot('default', { cropTo: '.testWrapper' })
-  .focus(`#${tagId}}`)
-  .snapshot('focused', { cropTo: '.testWrapper' })
-  .end();
-
-export default {
-  title: 'Tag Converged',
-  Component: Tag,
-  decorators: [story => withStoryWrightSteps({ story, steps })],
-} as ComponentMeta<typeof Tag>;
-
-export const Rounded = () => <Tag id={tagId}>Primary Text</Tag>;
-
-export const RoundedWithSecondaryText = () => (
-  <Tag id={tagId} secondaryText="Secondary Text">
-    Primary Text
-  </Tag>
-);
-
-export const RoundedWithMedia = () => (
-  <Tag id={tagId} media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const RoundedWithMediaRTL = getStoryVariant(RoundedWithMedia, RTL);
-
-export const RoundedDismissible = () => (
-  <Tag id={tagId} dismissible>
-    Primary Text
-  </Tag>
-);
-export const RoundedDismissibleRTL = getStoryVariant(RoundedDismissible, RTL);
-
-export const Circular = () => (
-  <Tag id={tagId} shape="circular">
-    Primary Text
-  </Tag>
-);
-
-export const CircularWithSecondaryText = () => (
-  <Tag id={tagId} secondaryText="Secondary Text">
-    Primary Text
-  </Tag>
-);
-
-export const CircularWithMedia = () => (
-  <Tag id={tagId} shape="circular" media={<Avatar name="Lydia Bauer" badge={{ status: 'available' }} />}>
-    Primary Text
-  </Tag>
-);
-export const CircularWithMediaRTL = getStoryVariant(CircularWithMedia, RTL);
-
-export const CircularDismissible = () => (
-  <Tag id={tagId} shape="circular" dismissible>
-    Primary Text
-  </Tag>
-);
-export const CircularDismissibleRTL = getStoryVariant(CircularDismissible, RTL);