[v12] feat(ui-tag): rework Tag

docs/guides/upgrade-guide.md

@@ -146,6 +146,18 @@ type: example
 
 - theme variable `topMargin` is now removed
 
+### Tag
+
+- theme variable `defaultIconColor` is now removed
+- theme variable `defaultIconHoverColor` is now removed
+- theme variable `inlineIconColor` is now removed
+- theme variable `inlineIconHoverColor` is now removed
+- theme variable `focusOutlineColor` is now removed
+- theme variable `focusOutlineStyle` is now removed
+- theme variable `focusOutlineWidth` is now removed
+- theme variable `padding` is now removed, `paddingHorizontal` can be used to set horizonal padding
+- theme variable `paddingSmall` is now removed, `paddingHorizontalSmall` can be used to set horizonal padding
+
 ### TextArea
 
 - theme variable `smallFontSize` is now renamed to `fontSizeSm`

packages/ui-tag/package.json

@@ -30,6 +30,7 @@
     "@instructure/ui-color-utils": "workspace:*",
     "@instructure/ui-dom-utils": "workspace:*",
     "@instructure/ui-icons": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-view": "workspace:*"
   },

packages/ui-tag/src/Tag/__tests__/Tag.test.tsx

@@ -83,7 +83,7 @@ describe('<Tag />', async () => {
     )
     const icon = container.querySelector('svg')
 
-    expect(icon).toHaveAttribute('name', 'IconX')
+    expect(icon).toHaveAttribute('name', 'X')
   })
 
   it('should meet a11y standards', async () => {

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

@@ -24,15 +24,14 @@
 
 import { Component } from 'react'
 
-import { IconXLine } from '@instructure/ui-icons'
+import { XInstUIIcon } from '@instructure/ui-icons-lucide'
 import { View } from '@instructure/ui-view'
 import type { ViewProps } from '@instructure/ui-view'
 import { omitProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 import type { TagProps } from './props'
 import { allowedProps } from './props'
 
@@ -42,7 +41,7 @@ category: components
 ---
 **/
 
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Tag extends Component<TagProps> {
   static readonly componentId = 'Tag'
 
@@ -55,6 +54,10 @@ class Tag extends Component<TagProps> {
     readOnly: false
   }
 
+  state = {
+    iconHovered: false
+  }
+
   ref: Element | null = null
 
   componentDidMount() {
@@ -73,6 +76,14 @@ class Tag extends Component<TagProps> {
     this.ref && (this.ref as HTMLElement).focus()
   }
 
+  handleIconMouseEnter = () => {
+    this.setState({ iconHovered: true })
+  }
+
+  handleIconMouseLeave = () => {
+    this.setState({ iconHovered: false })
+  }
+
   handleClick = (e: React.MouseEvent<ViewProps & Element>) => {
     const { disabled, readOnly, onClick } = this.props
 
@@ -102,14 +113,27 @@ class Tag extends Component<TagProps> {
       title,
       onClick,
       margin,
-      styles
+      styles,
+      variant
     } = this.props
 
     const passthroughProps = View.omitViewProps(
       omitProps(this.props, Tag.allowedProps),
       Tag
     )
 
+    const getIconColor = () => {
+      if (disabled) {
+        return 'mutedColor'
+      }
+      if (variant === 'inline') {
+        return this.state.iconHovered
+          ? 'actionSecondaryHoverColor'
+          : 'actionSecondaryBaseColor'
+      }
+      return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor'
+    }
+
     return (
       <View
         {...passthroughProps}
@@ -124,9 +148,17 @@ class Tag extends Component<TagProps> {
         display={undefined}
         title={title || (typeof text === 'string' ? text : undefined)}
         data-cid="Tag"
+        onMouseEnter={this.handleIconMouseEnter}
+        onMouseLeave={this.handleIconMouseLeave}
       >
         <span css={styles?.text}>{text}</span>
-        {onClick && dismissible ? <IconXLine css={styles?.icon} /> : null}
+        {onClick && dismissible ? (
+          <XInstUIIcon
+            css={styles?.icon}
+            size={variant === 'inline' ? 14 : 'sm'}
+            color={getIconColor()}
+          />
+        ) : null}
       </View>
     )
   }

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

@@ -22,8 +22,9 @@
  * SOFTWARE.
  */
 
-import type { TagTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { TagProps, TagStyle } from './props'
+import { calcFocusOutlineStyles } from '@instructure/emotion'
 
 /**
  * ---
@@ -32,18 +33,23 @@ import type { TagProps, TagStyle } from './props'
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
  * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} sharedTokens the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: TagTheme, props: TagProps): TagStyle => {
+const generateStyle = (
+  componentTheme: NewComponentTypes['Tag'],
+  props: TagProps,
+  sharedTokens: SharedTokens
+): TagStyle => {
   const { variant, size, dismissible, onClick, disabled } = props
 
   const isButton = !!onClick
 
   const sizeVariants = {
     small: {
       tag: {
-        padding: componentTheme.paddingSmall,
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontalSmall,
         fontSize: componentTheme.fontSizeSmall
       },
       text: {
@@ -53,7 +59,8 @@ const generateStyle = (componentTheme: TagTheme, props: TagProps): TagStyle => {
     },
     medium: {
       tag: {
-        padding: componentTheme.padding,
+        paddingLeft: componentTheme.paddingHorizontal,
+        paddingRight: componentTheme.paddingHorizontal,
         fontSize: `calc(${componentTheme.fontSizeMedium} - 0.0625rem)`
       },
       text: {
@@ -63,7 +70,8 @@ const generateStyle = (componentTheme: TagTheme, props: TagProps): TagStyle => {
     },
     large: {
       tag: {
-        padding: componentTheme.padding,
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontal,
         fontSize: `calc(${componentTheme.fontSizeLarge} - 0.0625rem)`
       },
       text: {
@@ -99,7 +107,7 @@ const generateStyle = (componentTheme: TagTheme, props: TagProps): TagStyle => {
         tagBefore: {
           content: '""',
           boxSizing: 'border-box',
-          border: `${componentTheme.focusOutlineWidth} ${componentTheme.focusOutlineStyle} ${componentTheme.focusOutlineColor}`,
+          border: calcFocusOutlineStyles(sharedTokens.focusOutline),
           position: 'absolute',
           top: '-0.3125rem',
           bottom: '-0.3125rem',
@@ -151,15 +159,7 @@ const generateStyle = (componentTheme: TagTheme, props: TagProps): TagStyle => {
   }
 
   const iconVariantVariants = {
-    default: {
-      ...(dismissible && {
-        color: componentTheme.defaultIconColor,
-
-        '[class$="-tag"]:hover > &': {
-          color: componentTheme.defaultIconHoverColor
-        }
-      })
-    },
+    default: {},
     inline: {
       ...(dismissible && {
         backgroundColor: componentTheme.inlineIconColor,

packages/ui-tag/tsconfig.build.json

@@ -28,6 +28,9 @@
     {
       "path": "../ui-icons/tsconfig.build.json"
     },
+    {
+      "path": "../ui-icons-lucide/tsconfig.build.json"
+    },
     {
       "path": "../ui-react-utils/tsconfig.build.json"
     },