feat(ui-tag): remove the inline variant from Tag v2

BREAKING CHANGE: the inline variant and the variant prop have been removed from Tag v2.

Refs: INSTUI-5127

Author: ToMESSKa

docs/upgrading/upgrade-guide.md

@@ -1583,6 +1583,7 @@ type: embed
 ### Tag
 
 - Previously deprecated `title` prop has been removed.
+- The `inline` variant has been removed along with the `variant` prop.
 
 ```js
 ---

packages/ui-tag/src/Tag/v2/README.md

@@ -82,29 +82,6 @@ type: example
 />
 ```
 
-### Inline variant
-
-This variant is designed to look similar to the surrounding text.
-
-```js
----
-type: example
----
-<Text as="p">
-  This is an
-  <Tag
-    dismissible
-    onClick={() => alert('Tag dismissed')}
-    size="large"
-    text={<AccessibleContent alt="Remove 'inline'">
-      inline
-    </AccessibleContent>}
-    variant="inline"
-  />
-  tag.
-</Text>
-```
-
 ### Guidelines
 
 ```js

packages/ui-tag/src/Tag/v2/index.tsx

@@ -50,7 +50,6 @@ class Tag extends Component<TagProps> {
   static defaultProps = {
     size: 'medium',
     dismissible: false,
-    variant: 'default',
     disabled: false,
     readOnly: false
   }
@@ -105,11 +104,7 @@ class Tag extends Component<TagProps> {
   }
 
   getIconSize = () => {
-    const { size, variant } = this.props
-
-    if (variant === 'inline') {
-      return 'xs'
-    }
+    const { size } = this.props
 
     const sizeMap = {
       small: 'xs',
@@ -129,8 +124,7 @@ class Tag extends Component<TagProps> {
       text,
       onClick,
       margin,
-      styles,
-      variant
+      styles
     } = this.props
 
     const passthroughProps = View.omitViewProps(
@@ -142,9 +136,6 @@ class Tag extends Component<TagProps> {
       if (disabled) {
         return 'mutedColor'
       }
-      if (variant === 'inline') {
-        return 'inverseColor'
-      }
       return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor'
     }
 

packages/ui-tag/src/Tag/v2/props.ts

@@ -59,7 +59,6 @@ type TagOwnProps = {
    */
   elementRef?: (element: Element | null) => void
   size?: 'small' | 'medium' | 'large'
-  variant?: 'default' | 'inline'
 }
 
 type PropKeys = keyof TagOwnProps
@@ -80,8 +79,7 @@ const allowedProps: AllowedPropKeys = [
   'margin',
   'onClick',
   'elementRef',
-  'size',
-  'variant'
+  'size'
 ]
 
 export type { TagProps, TagStyle }

packages/ui-tag/src/Tag/v2/styles.ts

@@ -41,7 +41,7 @@ const generateStyle = (
   props: TagProps,
   sharedTokens: SharedTokens
 ): TagStyle => {
-  const { variant, size, dismissible, onClick, disabled } = props
+  const { size, dismissible, onClick, disabled } = props
 
   const isButton = !!onClick
 
@@ -118,66 +118,6 @@ const generateStyle = (
       }
     : {}
 
-  const tagVariantVariants = {
-    default: {
-      tag: {
-        backgroundColor: componentTheme.defaultBackground,
-        border: `${componentTheme.defaultBorderWidth} ${componentTheme.defaultBorderStyle} ${componentTheme.defaultBorderColor}`,
-        borderRadius: componentTheme.defaultBorderRadius,
-        color: componentTheme.defaultColor,
-        ...(isButton && {
-          '&:hover': { backgroundColor: componentTheme.defaultBackgroundHover }
-        })
-      },
-      tagBefore: {
-        ...(isButton && {
-          borderRadius: componentTheme.defaultBorderRadius
-        })
-      }
-    },
-    inline: {
-      tag: {
-        backgroundColor: componentTheme.inlineBackground,
-        border: `${componentTheme.inlineBorderWidth} ${componentTheme.inlineBorderStyle} ${componentTheme.inlineBorderColor}`,
-        borderRadius: componentTheme.inlineBorderRadius,
-        color: componentTheme.inlineColor,
-        cursor: 'text',
-        margin: '0 0.1875rem 0.1875rem',
-        ...(isButton && {
-          '&:hover': { backgroundColor: componentTheme.inlineBackgroundHover }
-        })
-      },
-      tagBefore: {
-        ...(isButton && {
-          borderRadius: `calc(${componentTheme.inlineBorderRadius} * 1.5)`
-        })
-      }
-    }
-  }
-
-  const inlineIconVariant =
-    variant === 'inline' && dismissible
-      ? {
-          backgroundColor: componentTheme.inlineIconColor,
-          borderRadius: '50%',
-          padding: '0.25rem',
-          position: 'absolute',
-          insetInlineEnd: 0,
-          insetInlineStart: 'auto',
-          top: 0,
-          transform: 'translate(40%, -40%)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-
-          '[class$="-tag"]:hover > &': {
-            backgroundColor: componentTheme.inlineIconHoverColor
-          },
-
-          '[dir="rtl"] &': { transform: 'translate(-40%, -40%)' }
-        }
-      : {}
-
   return {
     tag: {
       label: 'tag',
@@ -188,13 +128,21 @@ const generateStyle = (
       textAlign: 'center',
       verticalAlign: 'middle',
       userSelect: 'none',
+      backgroundColor: componentTheme.defaultBackground,
+      border: `${componentTheme.defaultBorderWidth} ${componentTheme.defaultBorderStyle} ${componentTheme.defaultBorderColor}`,
+      borderRadius: componentTheme.defaultBorderRadius,
+      color: componentTheme.defaultColor,
+      ...(isButton && {
+        '&:hover': { backgroundColor: componentTheme.defaultBackgroundHover }
+      }),
       ...sizeVariants[size!].tag,
       ...buttonVariant.tag,
-      ...tagVariantVariants[variant!].tag,
 
       '&::before': {
         ...buttonVariant.tagBefore,
-        ...tagVariantVariants[variant!].tagBefore
+        ...(isButton && {
+          borderRadius: componentTheme.defaultBorderRadius
+        })
       }
     },
     text: {
@@ -210,8 +158,7 @@ const generateStyle = (
       marginInlineStart: componentTheme.iconMargin,
       marginInlineEnd: 0,
       transition: `all ${componentTheme.transitionTiming}`,
-      cursor: 'pointer',
-      ...inlineIconVariant
+      cursor: 'pointer'
     }
   }
 }

regression-test/src/app/small-components/page.tsx

@@ -106,19 +106,6 @@ export default function SmallComponentsPage() {
           onClick={function () {}}
         />
       </div>
-      <p>
-        This is an
-        <Tag
-          dismissible
-          onClick={() => alert('Tag dismissed')}
-          size="large"
-          text={
-            <AccessibleContent alt="Remove 'inline'">inline</AccessibleContent>
-          }
-          variant="inline"
-        />
-        tag.
-      </p>
       <div>TimeSelect:</div>
       <TimeSelect
         renderLabel="Choose a time"