From cc8e75c20c3efe6d1bdf15699170a1fd201a7011 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:28:55 +0800
Subject: [PATCH 1/6] rename

---
 .../react-tags/etc/react-tags.api.md          |  4 +--
 .../src/components/Tag/Tag.test.tsx           |  2 +-
 .../src/components/Tag/Tag.types.ts           | 11 ++++----
 .../src/components/Tag/renderTag.tsx          |  2 +-
 .../react-tags/src/components/Tag/useTag.tsx  | 25 +++++++++----------
 .../src/components/Tag/useTagStyles.styles.ts |  4 +--
 .../components/TagButton/TagButton.test.tsx   |  2 +-
 .../components/TagButton/renderTagButton.tsx  |  2 +-
 .../TagButton/useTagButtonStyles.styles.ts    |  4 +--
 .../stories/Tag/TagDefault.stories.tsx        | 16 ++++++------
 .../stories/Tag/TagDismiss.stories.tsx        |  6 ++---
 .../stories/Tag/TagShape.stories.tsx          |  4 +--
 .../TagButton/TagButtonDefault.stories.tsx    | 16 ++++++------
 .../TagButton/TagButtonDismiss.stories.tsx    |  6 ++---
 .../TagButton/TagButtonShape.stories.tsx      |  4 +--
 15 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md
index c8e561dc6958cd..5e2ea23ff9c983 100644
--- a/packages/react-components/react-tags/etc/react-tags.api.md
+++ b/packages/react-components/react-tags/etc/react-tags.api.md
@@ -49,7 +49,7 @@ export type TagProps = ComponentProps<Partial<TagSlots>> & {
     appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
     disabled?: boolean;
     checked?: boolean;
-    dismissable?: boolean;
+    dismissible?: boolean;
 };
 
 // @public (undocumented)
@@ -64,7 +64,7 @@ export type TagSlots = {
 };
 
 // @public
-export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
     avatarSize: AvatarSize | undefined;
     avatarShape: AvatarShape | undefined;
 }>;
diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
index 480342e78bece2..cc3354d9246375 100644
--- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
@@ -6,7 +6,7 @@ const requiredProps = {
   icon: 'i',
   primaryText: 'Primary text',
   secondaryText: 'Secondary text',
-  dismissable: true,
+  dismissible: true,
 };
 
 describe('Tag', () => {
diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts
index 9d130328b633c0..4a63246869152f 100644
--- a/packages/react-components/react-tags/src/components/Tag/Tag.types.ts
+++ b/packages/react-components/react-tags/src/components/Tag/Tag.types.ts
@@ -40,12 +40,13 @@ export type TagSlots = {
  * Tag Props
  */
 export type TagProps = ComponentProps<Partial<TagSlots>> & {
-  size?: 'extra-small' | 'small' | 'medium';
-  shape?: 'rounded' | 'circular';
   appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
+  // TODO implement tag checked state
+  // checked?: boolean;
   disabled?: boolean;
-  checked?: boolean;
-  dismissable?: boolean;
+  dismissible?: boolean;
+  shape?: 'rounded' | 'circular';
+  size?: 'extra-small' | 'small' | 'medium';
 };
 
 /**
@@ -53,7 +54,7 @@ export type TagProps = ComponentProps<Partial<TagSlots>> & {
  */
 export type TagState = ComponentState<TagSlots> &
   Required<
-    Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissable' | 'shape' | 'size'> & {
+    Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
       avatarSize: AvatarSize | undefined;
       avatarShape: AvatarShape | undefined;
     }
diff --git a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx
index 6e382ca446cb48..92e79fd3afdee1 100644
--- a/packages/react-components/react-tags/src/components/Tag/renderTag.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/renderTag.tsx
@@ -29,7 +29,7 @@ export const renderTag_unstable = (state: TagState, contextValues: TagContextVal
           {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
         </slots.content>
       )}
-      {slots.dismissButton && state.dismissable && <slots.dismissButton {...slotProps.dismissButton} />}
+      {slots.dismissButton && state.dismissible && <slots.dismissButton {...slotProps.dismissButton} />}
     </slots.root>
   );
 };
diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
index 35f804d5c4c2a5..048876b1931aef 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
@@ -28,15 +28,22 @@ const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
  */
 export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): TagState => {
   const {
-    checked = false,
     disabled = false,
-    dismissable = false,
+    dismissible = false,
     shape = 'rounded',
     size = 'medium',
     appearance = 'filled-lighter',
   } = props;
 
   return {
+    appearance,
+    avatarShape: tagAvatarShapeMap[shape],
+    avatarSize: tagAvatarSizeMap[size],
+    disabled,
+    dismissible,
+    shape,
+    size,
+
     components: {
       root: 'div',
       content: 'div',
@@ -46,27 +53,19 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): T
       secondaryText: 'span',
       dismissButton: 'button',
     },
-    checked,
-    disabled,
-    dismissable,
-    shape,
-    size,
-    appearance,
+
     root: getNativeElementProps('div', {
       ref,
       ...props,
     }),
-    avatarSize: tagAvatarSizeMap[size],
-    avatarShape: tagAvatarShapeMap[shape],
-    media: resolveShorthand(props.media),
 
     content: resolveShorthand(props.content, { required: true }),
+    media: resolveShorthand(props.media),
     icon: resolveShorthand(props.icon),
     primaryText: resolveShorthand(props.primaryText, { required: true }),
     secondaryText: resolveShorthand(props.secondaryText),
-
     dismissButton: useARIAButtonShorthand(props.dismissButton, {
-      required: props.dismissable,
+      required: props.dismissible,
       defaultProps: {
         disabled,
         type: 'button',
diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
index 1edf60c2352c94..127333f259289e 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
@@ -113,7 +113,7 @@ export const useTagBaseStyles = makeStyles({
 });
 
 const useTagStyles = makeStyles({
-  dismissableContent: {
+  dismissibleContent: {
     paddingRight: '2px',
   },
   dismissButton: {
@@ -140,7 +140,7 @@ export const useTagStyles_unstable = (state: TagState): TagState => {
       baseStyles.content,
       !state.media && !state.icon && baseStyles.textOnlyContent,
 
-      state.dismissButton && styles.dismissableContent,
+      state.dismissButton && styles.dismissibleContent,
       state.content.className,
     );
   }
diff --git a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx
index 74dd557f5f6efd..003e20c001ac91 100644
--- a/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx
+++ b/packages/react-components/react-tags/src/components/TagButton/TagButton.test.tsx
@@ -6,7 +6,7 @@ const requiredProps = {
   icon: 'i',
   primaryText: 'Primary text',
   secondaryText: 'Secondary text',
-  dismissable: true,
+  dismissible: true,
 };
 
 describe('TagButton', () => {
diff --git a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx
index 1d358dcaa60b5d..d8ebda08cd235f 100644
--- a/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx
+++ b/packages/react-components/react-tags/src/components/TagButton/renderTagButton.tsx
@@ -29,7 +29,7 @@ export const renderTagButton_unstable = (state: TagButtonState, contextValues: T
           {slots.secondaryText && <slots.secondaryText {...slotProps.secondaryText} />}
         </slots.content>
       )}
-      {slots.dismissButton && state.dismissable && <slots.dismissButton {...slotProps.dismissButton} />}
+      {slots.dismissButton && state.dismissible && <slots.dismissButton {...slotProps.dismissButton} />}
     </slots.root>
   );
 };
diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
index fb28d8ef924084..ff5763f957e8dd 100644
--- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
@@ -33,7 +33,7 @@ const useStyles = makeStyles({
   circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular), {
     enableOutline: true,
   }),
-  dismissableContent: {
+  dismissibleContent: {
     ...createCustomFocusIndicatorStyle({
       borderTopRightRadius: tokens.borderRadiusNone,
       borderBottomRightRadius: tokens.borderRadiusNone,
@@ -79,7 +79,7 @@ export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonSta
 
       styles.content,
       state.shape === 'circular' && styles.circularContent,
-      state.dismissButton && styles.dismissableContent,
+      state.dismissButton && styles.dismissibleContent,
 
       state.content.className,
     );
diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
index 85917d78a12326..596d6bdbfb00b6 100644
--- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
@@ -20,7 +20,7 @@ export const Default = (props: Partial<TagProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -37,7 +37,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -58,10 +58,10 @@ export const Default = (props: Partial<TagProps>) => (
       >
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissable={true} {...props} {...props}>
+      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible={true} {...props} {...props}>
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
+      <Tag icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
         Primary text
       </Tag>
       <Tag icon={<Calendar3Day20Regular />} {...props}>
@@ -84,7 +84,7 @@ export const Default = (props: Partial<TagProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -102,7 +102,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -128,13 +128,13 @@ export const Default = (props: Partial<TagProps>) => (
         shape="circular"
         icon={<Calendar3Day20Regular />}
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
         {...props}
       >
         Primary text
       </Tag>
-      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
+      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
         Primary text
       </Tag>
       <Tag shape="circular" icon={<Calendar3Day20Regular />} {...props}>
diff --git a/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx
index c5b805116d96d4..52cddfec88a2db 100644
--- a/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/TagDismiss.stories.tsx
@@ -16,12 +16,12 @@ export const Dismiss = () => {
   const containerStyles = useContainerStyles();
   return (
     <div className={containerStyles.root}>
-      <Tag dismissable>Primary text</Tag>
-      <Tag dismissable icon={<Calendar3Day20Regular />}>
+      <Tag dismissible>Primary text</Tag>
+      <Tag dismissible icon={<Calendar3Day20Regular />}>
         Primary text
       </Tag>
       <Tag
-        dismissable
+        dismissible
         media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         secondaryText="Secondary text"
       >
diff --git a/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx
index 620b4001ce5e12..af3fd6c08a7ccd 100644
--- a/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/TagShape.stories.tsx
@@ -22,10 +22,10 @@ export const Shape = () => {
         Circular
       </Tag>
 
-      <Tag dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
+      <Tag dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
         Rounded
       </Tag>
-      <Tag shape="circular" dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
+      <Tag shape="circular" dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
         Circular
       </Tag>
     </div>
diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx
index a9ef63153070a5..067a7b2fb2be70 100644
--- a/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDefault.stories.tsx
@@ -20,7 +20,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -37,7 +37,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -61,13 +61,13 @@ export const Default = (props: Partial<TagButtonProps>) => (
       <TagButton
         icon={<Calendar3Day20Regular />}
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
         {...props}
       >
         Primary text
       </TagButton>
-      <TagButton icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
+      <TagButton icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
         Primary text
       </TagButton>
       <TagButton icon={<Calendar3Day20Regular />} {...props}>
@@ -90,7 +90,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -108,7 +108,7 @@ export const Default = (props: Partial<TagButtonProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible={true}
         {...props}
       >
         Primary text
@@ -134,13 +134,13 @@ export const Default = (props: Partial<TagButtonProps>) => (
         shape="circular"
         icon={<Calendar3Day20Regular />}
         secondaryText="Secondary text"
-        dismissable={true}
+        dismissible={true}
         {...props}
         {...props}
       >
         Primary text
       </TagButton>
-      <TagButton shape="circular" icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
+      <TagButton shape="circular" icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
         Primary text
       </TagButton>
       <TagButton shape="circular" icon={<Calendar3Day20Regular />} {...props}>
diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx
index f10a12d9b45e1e..b0656cc1fae249 100644
--- a/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx
+++ b/packages/react-components/react-tags/stories/TagButton/TagButtonDismiss.stories.tsx
@@ -16,12 +16,12 @@ export const Dismiss = () => {
   const containerStyles = useContainerStyles();
   return (
     <div className={containerStyles.root}>
-      <TagButton dismissable>Primary text</TagButton>
-      <TagButton dismissable icon={<Calendar3Day20Regular />}>
+      <TagButton dismissible>Primary text</TagButton>
+      <TagButton dismissible icon={<Calendar3Day20Regular />}>
         Primary text
       </TagButton>
       <TagButton
-        dismissable
+        dismissible
         media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}
         secondaryText="Secondary text"
       >
diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx
index 3f45196559c4b0..4133f1460fe00c 100644
--- a/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx
+++ b/packages/react-components/react-tags/stories/TagButton/TagButtonShape.stories.tsx
@@ -22,10 +22,10 @@ export const Shape = () => {
         Circular
       </TagButton>
 
-      <TagButton dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
+      <TagButton dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
         Rounded
       </TagButton>
-      <TagButton shape="circular" dismissable icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
+      <TagButton shape="circular" dismissible icon={<Calendar3Day20Regular />} secondaryText="Secondary text">
         Circular
       </TagButton>
     </div>

From 34237f80fbc5f8df6fc930c776c7542ca45328e5 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:29:17 +0800
Subject: [PATCH 2/6] fix

---
 .../react-tags/src/components/Tag/Tag.test.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
index cc3354d9246375..c061c63599909a 100644
--- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
@@ -2,11 +2,11 @@ import { Tag } from './Tag';
 import { isConformant } from '../../testing/isConformant';
 
 const requiredProps = {
-  media: 'media',
+  dismissible: true,
   icon: 'i',
+  media: 'media',
   primaryText: 'Primary text',
   secondaryText: 'Secondary text',
-  dismissible: true,
 };
 
 describe('Tag', () => {

From 813cf0b4f30b4289d6f04c39827dd12891a18b5d Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:31:41 +0800
Subject: [PATCH 3/6] api

---
 packages/react-components/react-tags/etc/react-tags.api.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/react-tags/etc/react-tags.api.md b/packages/react-components/react-tags/etc/react-tags.api.md
index 5e2ea23ff9c983..88eba16afc7998 100644
--- a/packages/react-components/react-tags/etc/react-tags.api.md
+++ b/packages/react-components/react-tags/etc/react-tags.api.md
@@ -44,12 +44,11 @@ export const tagClassNames: SlotClassNames<TagSlots>;
 
 // @public
 export type TagProps = ComponentProps<Partial<TagSlots>> & {
-    size?: 'extra-small' | 'small' | 'medium';
-    shape?: 'rounded' | 'circular';
     appearance?: 'filled-darker' | 'filled-lighter' | 'tint' | 'outline';
     disabled?: boolean;
-    checked?: boolean;
     dismissible?: boolean;
+    shape?: 'rounded' | 'circular';
+    size?: 'extra-small' | 'small' | 'medium';
 };
 
 // @public (undocumented)
@@ -64,7 +63,7 @@ export type TagSlots = {
 };
 
 // @public
-export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'checked' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
     avatarSize: AvatarSize | undefined;
     avatarShape: AvatarShape | undefined;
 }>;

From e2ab0730c24750612a7b50a10235f2ee736f21b8 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:39:44 +0800
Subject: [PATCH 4/6] change dismissible={true} to just dismiss

---
 .../react-tags/src/components/Tag/Tag.test.tsx   |  3 ++-
 .../stories/Tag/TagDefault.stories.tsx           | 16 ++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
index c061c63599909a..df2e9e30a5fdfa 100644
--- a/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/Tag.test.tsx
@@ -1,7 +1,8 @@
 import { Tag } from './Tag';
 import { isConformant } from '../../testing/isConformant';
+import { TagProps } from './Tag.types';
 
-const requiredProps = {
+const requiredProps: TagProps = {
   dismissible: true,
   icon: 'i',
   media: 'media',
diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
index 596d6bdbfb00b6..28aef463677683 100644
--- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
@@ -20,7 +20,7 @@ export const Default = (props: Partial<TagProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissible={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -37,7 +37,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissible={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -58,10 +58,10 @@ export const Default = (props: Partial<TagProps>) => (
       >
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible={true} {...props} {...props}>
+      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible {...props} {...props}>
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
+      <Tag icon={<Calendar3Day20Regular />} dismissible {...props}>
         Primary text
       </Tag>
       <Tag icon={<Calendar3Day20Regular />} {...props}>
@@ -84,7 +84,7 @@ export const Default = (props: Partial<TagProps>) => (
           />
         }
         secondaryText="Secondary text"
-        dismissible={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -102,7 +102,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissible={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -128,13 +128,13 @@ export const Default = (props: Partial<TagProps>) => (
         shape="circular"
         icon={<Calendar3Day20Regular />}
         secondaryText="Secondary text"
-        dismissible={true}
+        dismissible
         {...props}
         {...props}
       >
         Primary text
       </Tag>
-      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible={true} {...props}>
+      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible {...props}>
         Primary text
       </Tag>
       <Tag shape="circular" icon={<Calendar3Day20Regular />} {...props}>

From 8a7c618eaad1623d216c253936012a718dc4456e Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:46:06 +0800
Subject: [PATCH 5/6] alphabetic sort

---
 .../react-components/react-tags/src/components/Tag/useTag.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
index 048876b1931aef..92f9dcfb0613e2 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
@@ -28,11 +28,11 @@ const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
  */
 export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLElement>): TagState => {
   const {
+    appearance = 'filled-lighter',
     disabled = false,
     dismissible = false,
     shape = 'rounded',
     size = 'medium',
-    appearance = 'filled-lighter',
   } = props;
 
   return {

From 867c0c98884d3a661b91f0c4e7a82eac3e2fc638 Mon Sep 17 00:00:00 2001
From: YuanboXue-Amber <yuanboxue@microsoft.com>
Date: Tue, 9 May 2023 17:48:32 +0800
Subject: [PATCH 6/6] remove crud

---
 .../react-tags/stories/Tag/TagDefault.stories.tsx     | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
index 28aef463677683..cbdcd13e85740e 100644
--- a/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/TagDefault.stories.tsx
@@ -58,7 +58,7 @@ export const Default = (props: Partial<TagProps>) => (
       >
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible {...props} {...props}>
+      <Tag icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible {...props}>
         Primary text
       </Tag>
       <Tag icon={<Calendar3Day20Regular />} dismissible {...props}>
@@ -124,14 +124,7 @@ export const Default = (props: Partial<TagProps>) => (
       >
         Primary text
       </Tag>
-      <Tag
-        shape="circular"
-        icon={<Calendar3Day20Regular />}
-        secondaryText="Secondary text"
-        dismissible
-        {...props}
-        {...props}
-      >
+      <Tag shape="circular" icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible {...props}>
         Primary text
       </Tag>
       <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible {...props}>