@instructure/ui-tag 11.7.4-snapshot-144 → 11.7.4

package/CHANGELOG.md

@@ -3,17 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-144](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-144) (2026-07-24)
+## [11.7.4](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4) (2026-07-24)
 
 
 ### Features
 
 * **many:** remove deprecated v2 items ([eaf8876](https://github.com/instructure/instructure-ui/commit/eaf88767c9beb95c4e09ee5705c387dfd79e4cb7))
 * **many:** support current spacing tokens in the margin prop for v2 components ([1b47c5f](https://github.com/instructure/instructure-ui/commit/1b47c5f23eaa60b532cdfd53c39bd71f0cf51aaa))
+* **ui-tag:** remove the inline variant from Tag v2 ([255d84f](https://github.com/instructure/instructure-ui/commit/255d84f93a1b9200ea90a31092554cbc1b386a78))
 
 
 ### BREAKING CHANGES
 
+* **ui-tag:** the inline variant and the variant prop have been removed from Tag v2.
+
+Refs: INSTUI-5127
 * **many:** Removed FormFieldLabel component
 
 Removed _content prop from DrawerLayout.Tray and DrawerLayout.Content

package/es/Tag/v2/index.js

@@ -45,7 +45,6 @@ let Tag = (_dec = withStyleNew(generateStyle), _dec(_class = class Tag extends C
   static defaultProps = {
     size: 'medium',
     dismissible: false,
-    variant: 'default',
     disabled: false,
     readOnly: false
   };
@@ -96,12 +95,8 @@ let Tag = (_dec = withStyleNew(generateStyle), _dec(_class = class Tag extends C
   };
   getIconSize = () => {
     const {
-      size,
-      variant
+      size
     } = this.props;
-    if (variant === 'inline') {
-      return 'xs';
-    }
     const sizeMap = {
       small: 'xs',
       medium: 'sm',
@@ -118,17 +113,13 @@ let Tag = (_dec = withStyleNew(generateStyle), _dec(_class = class Tag extends C
       text,
       onClick,
       margin,
-      styles,
-      variant
+      styles
     } = this.props;
     const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
     const getIconColor = () => {
       if (disabled) {
         return 'mutedColor';
       }
-      if (variant === 'inline') {
-        return 'inverseColor';
-      }
       return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor';
     };
     return _jsxs(View, {

package/es/Tag/v2/props.js

@@ -22,5 +22,5 @@
  * SOFTWARE.
  */
 
-const allowedProps = ['className', 'text', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size', 'variant'];
+const allowedProps = ['className', 'text', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size'];
 export { allowedProps };

package/es/Tag/v2/styles.js

@@ -36,7 +36,6 @@ import { calcFocusOutlineStyles } from '@instructure/emotion';
  */
 const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
-    variant,
     size,
     dismissible,
     onClick,
@@ -112,65 +111,6 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       pointerEvents: 'none'
     }
   } : {};
-  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',
@@ -181,12 +121,22 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       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: {
@@ -202,8 +152,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       marginInlineStart: componentTheme.iconMargin,
       marginInlineEnd: 0,
       transition: `all ${componentTheme.transitionTiming}`,
-      cursor: 'pointer',
-      ...inlineIconVariant
+      cursor: 'pointer'
     }
   };
 };

package/lib/Tag/v2/index.js

@@ -50,7 +50,6 @@ let Tag = exports.Tag = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
   static defaultProps = {
     size: 'medium',
     dismissible: false,
-    variant: 'default',
     disabled: false,
     readOnly: false
   };
@@ -101,12 +100,8 @@ let Tag = exports.Tag = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
   };
   getIconSize = () => {
     const {
-      size,
-      variant
+      size
     } = this.props;
-    if (variant === 'inline') {
-      return 'xs';
-    }
     const sizeMap = {
       small: 'xs',
       medium: 'sm',
@@ -123,17 +118,13 @@ let Tag = exports.Tag = (_dec = (0, _emotion.withStyleNew)(_styles.default), _de
       text,
       onClick,
       margin,
-      styles,
-      variant
+      styles
     } = this.props;
     const passthroughProps = _latest.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
     const getIconColor = () => {
       if (disabled) {
         return 'mutedColor';
       }
-      if (variant === 'inline') {
-        return 'inverseColor';
-      }
       return this.state.iconHovered ? 'actionSecondaryHoverColor' : 'baseColor';
     };
     return (0, _jsxRuntime.jsxs)(_latest.View, {

package/lib/Tag/v2/props.js

@@ -28,4 +28,4 @@ exports.allowedProps = void 0;
  * SOFTWARE.
  */
 
-const allowedProps = exports.allowedProps = ['className', 'text', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size', 'variant'];
+const allowedProps = exports.allowedProps = ['className', 'text', 'disabled', 'readOnly', 'dismissible', 'margin', 'onClick', 'elementRef', 'size'];

package/lib/Tag/v2/styles.js

@@ -41,7 +41,6 @@ var _emotion = require("@instructure/emotion");
  */
 const generateStyle = (componentTheme, props, sharedTokens) => {
   const {
-    variant,
     size,
     dismissible,
     onClick,
@@ -117,65 +116,6 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       pointerEvents: 'none'
     }
   } : {};
-  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',
@@ -186,12 +126,22 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       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: {
@@ -207,8 +157,7 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       marginInlineStart: componentTheme.iconMargin,
       marginInlineEnd: 0,
       transition: `all ${componentTheme.transitionTiming}`,
-      cursor: 'pointer',
-      ...inlineIconVariant
+      cursor: 'pointer'
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tag",
-  "version": "11.7.4-snapshot-144",
+  "version": "11.7.4",
   "description": "A tag component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,23 +15,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/console": "11.7.4-snapshot-144",
-    "@instructure/emotion": "11.7.4-snapshot-144",
-    "@instructure/shared-types": "11.7.4-snapshot-144",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-144",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-144",
-    "@instructure/ui-icons": "11.7.4-snapshot-144",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-144",
-    "@instructure/ui-themes": "11.7.4-snapshot-144",
-    "@instructure/ui-view": "11.7.4-snapshot-144"
+    "@instructure/console": "11.7.4",
+    "@instructure/emotion": "11.7.4",
+    "@instructure/shared-types": "11.7.4",
+    "@instructure/ui-dom-utils": "11.7.4",
+    "@instructure/ui-color-utils": "11.7.4",
+    "@instructure/ui-icons": "11.7.4",
+    "@instructure/ui-react-utils": "11.7.4",
+    "@instructure/ui-themes": "11.7.4",
+    "@instructure/ui-view": "11.7.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-144",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-144"
+    "@instructure/ui-axe-check": "11.7.4",
+    "@instructure/ui-babel-preset": "11.7.4"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/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

package/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'
     }
 

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

package/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'
     }
   }
 }