@instructure/ui-tag 11.6.0 → 11.6.1-snapshot-129

package/lib/Tag/v2/styles.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("@instructure/emotion");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * 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} 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, props, sharedTokens) => {
+  const variant = props.variant,
+    size = props.size,
+    dismissible = props.dismissible,
+    onClick = props.onClick,
+    disabled = props.disabled;
+  const isButton = !!onClick;
+  const sizeVariants = {
+    small: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontalSmall,
+        fontSize: componentTheme.fontSizeSmall
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightSmall} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    medium: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontal,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeMedium} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightMedium} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    },
+    large: {
+      tag: {
+        paddingLeft: componentTheme.paddingHorizontalSmall,
+        paddingRight: componentTheme.paddingHorizontal,
+        fontSize: `calc(${componentTheme.fontSizeLarge} - 0.0625rem)`
+      },
+      text: {
+        lineHeight: `calc(${componentTheme.heightLarge} - (${componentTheme.defaultBorderWidth} * 2))`
+      }
+    }
+  };
+  const buttonVariant = isButton ? {
+    tag: {
+      touchAction: 'manipulation',
+      outline: 'none',
+      position: 'relative',
+      overflow: 'visible',
+      transition: `background-color ${componentTheme.transitionTiming}`,
+      ...(!dismissible && {
+        cursor: 'pointer'
+      }),
+      '&:focus': {
+        '&::before': {
+          opacity: 1,
+          transform: 'scale(1)'
+        }
+      },
+      ...(disabled && {
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+        opacity: 0.5
+      })
+    },
+    tagBefore: {
+      content: '""',
+      boxSizing: 'border-box',
+      border: (0, _emotion.calcFocusOutlineStyles)(sharedTokens.focusOutline),
+      position: 'absolute',
+      top: '-0.3125rem',
+      bottom: '-0.3125rem',
+      left: '-0.3125rem',
+      right: '-0.3125rem',
+      opacity: 0,
+      transform: 'scale(0.9)',
+      transition: `all ${componentTheme.transitionTiming}`,
+      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',
+      boxSizing: 'border-box',
+      fontFamily: componentTheme.fontFamily,
+      display: 'inline-flex',
+      alignItems: 'center',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      userSelect: 'none',
+      ...sizeVariants[size].tag,
+      ...buttonVariant.tag,
+      ...tagVariantVariants[variant].tag,
+      '&::before': {
+        ...buttonVariant.tagBefore,
+        ...tagVariantVariants[variant].tagBefore
+      }
+    },
+    text: {
+      label: 'tag__text',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: componentTheme.maxWidth,
+      ...sizeVariants[size].text
+    },
+    icon: {
+      label: 'tag__icon',
+      marginInlineStart: componentTheme.iconMargin,
+      marginInlineEnd: 0,
+      transition: `all ${componentTheme.transitionTiming}`,
+      cursor: 'pointer',
+      ...inlineIconVariant
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/{index.js → exports/a.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Tag", {
   enumerable: true,
   get: function () {
-    return _Tag.Tag;
+    return _v.Tag;
   }
 });
-var _Tag = require("./Tag");
+var _v = require("../Tag/v1");

package/lib/exports/b.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function () {
+    return _v.Tag;
+  }
+});
+var _v = require("../Tag/v2");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tag",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "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.27.6",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/console": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-dom-utils": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-dom-utils": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -41,17 +41,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Tag/{index.tsx → v1/index.tsx}

@@ -25,11 +25,11 @@
 import { Component } from 'react'
 
 import { IconXLine } from '@instructure/ui-icons'
-import { View } from '@instructure/ui-view'
-import type { ViewProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 import { omitProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Tag/{props.ts → v1/props.ts}

@@ -23,7 +23,7 @@
  */
 
 import React from 'react'
-import type { ViewProps } from '@instructure/ui-view'
+import type { ViewProps } from '@instructure/ui-view/v11_6'
 import type {
   Spacing,
   WithStyleProps,

package/src/Tag/v2/README.md

@@ -0,0 +1,119 @@
+---
+describes: Tag
+---
+
+Use `<Tag />` to represent a category or group in a form.
+
+```js
+---
+type: example
+---
+<Tag text="Static" margin="0 xx-small 0 0" />
+```
+
+### Dismissible
+
+When the `dismissible` prop is added to a clickable Tag, the button
+renders an X/close icon (the Tag should be dismissed via the `onClick`
+prop). When implementing dismissable tags, be sure to add [AccessibleContent](AccessibleContent) to clarify that the tag is dismissible to screen readers.
+
+```js
+---
+type: example
+---
+<Tag
+  text={
+    <AccessibleContent alt="Remove dismissible tag">
+      Dismissible tag
+    </AccessibleContent>
+  }
+  dismissible
+  margin="0 xx-small 0 0"
+  onClick={function () {
+    alert("This Tag was dismissed")
+  }}
+/>
+```
+
+### Disabled
+
+A `disabled` Tag.
+
+```js
+---
+type: example
+---
+<Tag
+  text="Dismissible Disabled"
+  dismissible
+  disabled
+  margin="0 xx-small 0 0"
+  onClick={function () {
+    alert("This Tag was dismissed. This shouldn't happen")
+  }}
+/>
+```
+
+### Sizes
+
+`medium` is the default Tag size.
+
+```js
+---
+type: example
+---
+<div>
+  <Tag text="Small" size="small" margin="0 xx-small 0 0" />
+  <Tag text="Medium" margin="0 xx-small 0 0" />
+  <Tag text="Large" size="large" margin="0 xx-small 0 0" />
+</div>
+```
+
+### Max-width
+
+> **DEPRECATED** Please do not make Tags that have overflowing text, it's an a11y anti-pattern. The issue is if text overflows it cannot be read by keyboard-only users. We could make the Tag focusable, but that would be an anti-pattern too because only elements that are interactive should be focusable (and just displaying a tooltip is not a real interaction)
+
+```js
+---
+type: example
+---
+<Tag
+  text="Long string of text designed to trigger overflow"
+/>
+```
+
+### 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
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>When implementing dismissable tags, be sure to add AccessibleContent to clarify that the tag is dismissible to screen readers</Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/Tag/v2/index.tsx

@@ -0,0 +1,180 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react'
+
+import { XInstUIIcon } from '@instructure/ui-icons'
+import { View } from '@instructure/ui-view/latest'
+import type { ViewProps } from '@instructure/ui-view/latest'
+import { omitProps } from '@instructure/ui-react-utils'
+import { isActiveElement } from '@instructure/ui-dom-utils'
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import type { TagProps } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withStyle(generateStyle)
+class Tag extends Component<TagProps> {
+  static readonly componentId = 'Tag'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    size: 'medium',
+    dismissible: false,
+    variant: 'default',
+    disabled: false,
+    readOnly: false
+  }
+
+  state = {
+    iconHovered: false
+  }
+
+  ref: Element | null = null
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  get focused() {
+    return isActiveElement(this.ref)
+  }
+
+  focus = () => {
+    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
+
+    if (disabled || readOnly) {
+      e.preventDefault()
+      e.stopPropagation()
+    } else if (typeof onClick === 'function') {
+      onClick(e)
+    }
+  }
+
+  handleRef = (element: Element | null) => {
+    this.ref = element
+
+    if (typeof this.props.elementRef === 'function') {
+      this.props.elementRef(element)
+    }
+  }
+
+  getIconSize = () => {
+    const { size, variant } = this.props
+
+    if (variant === 'inline') {
+      return 'xs'
+    }
+
+    const sizeMap = {
+      small: 'xs',
+      medium: 'sm',
+      large: 'md'
+    } as const
+
+    return sizeMap[size!]
+  }
+
+  render() {
+    const {
+      className,
+      dismissible,
+      disabled,
+      readOnly,
+      text,
+      title,
+      onClick,
+      margin,
+      styles,
+      variant
+    } = 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 (
+      <View
+        {...passthroughProps}
+        elementRef={this.handleRef}
+        css={styles?.tag}
+        className={className}
+        as={onClick ? 'button' : 'span'}
+        margin={margin}
+        type={onClick ? 'button' : undefined}
+        {...(onClick && { onClick: this.handleClick })}
+        disabled={disabled || readOnly}
+        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 ? (
+          <span css={styles?.icon}>
+            <XInstUIIcon size={this.getIconSize()} color={getIconColor()} />
+          </span>
+        ) : null}
+      </View>
+    )
+  }
+}
+
+export default Tag
+export { Tag }