react-tags: rename dismissable to dismissible (#27798)

* rename

* fix

* api

Author: YuanboXue-Amber

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;
-    dismissable?: 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' | 'dismissable' | 'shape' | 'size'> & {
+export type TagState = ComponentState<TagSlots> & Required<Pick<TagProps, 'appearance' | 'disabled' | 'dismissible' | 'shape' | 'size'> & {
     avatarSize: AvatarSize | undefined;
     avatarShape: AvatarShape | undefined;
 }>;

packages/react-components/react-tags/src/components/Tag/Tag.test.tsx

@@ -1,12 +1,13 @@
 import { Tag } from './Tag';
 import { isConformant } from '../../testing/isConformant';
+import { TagProps } from './Tag.types';
 
-const requiredProps = {
-  media: 'media',
+const requiredProps: TagProps = {
+  dismissible: true,
   icon: 'i',
+  media: 'media',
   primaryText: 'Primary text',
   secondaryText: 'Secondary text',
-  dismissable: true,
 };
 
 describe('Tag', () => {

packages/react-components/react-tags/src/components/Tag/Tag.types.ts

@@ -40,20 +40,21 @@ 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';
 };
 
 /**
  * State used in rendering Tag
  */
 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;
     }

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>
   );
 };

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,
+    appearance = 'filled-lighter',
     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',

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,
     );
   }

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', () => {

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>
   );
 };

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,
     );

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
         {...props}
       >
         Primary text
@@ -37,7 +37,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible
         {...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 {...props}>
         Primary text
       </Tag>
-      <Tag icon={<Calendar3Day20Regular />} dismissable={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"
-        dismissable={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -102,7 +102,7 @@ export const Default = (props: Partial<TagProps>) => (
             }}
           />
         }
-        dismissable={true}
+        dismissible
         {...props}
       >
         Primary text
@@ -124,17 +124,10 @@ export const Default = (props: Partial<TagProps>) => (
       >
         Primary text
       </Tag>
-      <Tag
-        shape="circular"
-        icon={<Calendar3Day20Regular />}
-        secondaryText="Secondary text"
-        dismissable={true}
-        {...props}
-        {...props}
-      >
+      <Tag shape="circular" icon={<Calendar3Day20Regular />} secondaryText="Secondary text" dismissible {...props}>
         Primary text
       </Tag>
-      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissable={true} {...props}>
+      <Tag shape="circular" icon={<Calendar3Day20Regular />} dismissible {...props}>
         Primary text
       </Tag>
       <Tag shape="circular" icon={<Calendar3Day20Regular />} {...props}>

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"
       >

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>

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}>

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"
       >

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>