@instructure/ui-tag 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-tag
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-tag

package/es/Tag/TagLocator.js

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import { locator } from '@instructure/ui-test-locator';
-import { Tag } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { Tag } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const TagLocator = locator(Tag.selector);

package/es/Tag/__examples__/Tag.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export default {
   sectionProp: 'variant',
   propValues: {

package/es/Tag/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -23,7 +22,6 @@ var _dec, _dec2, _class, _class2;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 /** @jsx jsx */
 import React, { Component } from 'react';
 import { IconXLine } from '@instructure/ui-icons';
@@ -35,28 +33,25 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Tag extends Component {
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.focus = () => {
       this.ref && this.ref.focus();
     };
-
     this.handleClick = e => {
       const _this$props = this.props,
-            disabled = _this$props.disabled,
-            readOnly = _this$props.readOnly,
-            onClick = _this$props.onClick;
-
+        disabled = _this$props.disabled,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
       if (disabled || readOnly) {
         e.preventDefault();
         e.stopPropagation();
@@ -64,43 +59,35 @@ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
         onClick(e);
       }
     };
-
     this.handleRef = element => {
       this.ref = element;
-
       if (typeof this.props.elementRef === 'function') {
         this.props.elementRef(element);
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
-
   get focused() {
     return isActiveElement(this.ref);
   }
-
   render() {
     const _this$props4 = this.props,
-          className = _this$props4.className,
-          dismissible = _this$props4.dismissible,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          text = _this$props4.text,
-          title = _this$props4.title,
-          onClick = _this$props4.onClick,
-          margin = _this$props4.margin,
-          styles = _this$props4.styles;
+      className = _this$props4.className,
+      dismissible = _this$props4.dismissible,
+      disabled = _this$props4.disabled,
+      readOnly = _this$props4.readOnly,
+      text = _this$props4.text,
+      title = _this$props4.title,
+      onClick = _this$props4.onClick,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles;
     const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
     return jsx(View, Object.assign({}, passthroughProps, {
       elementRef: this.handleRef,
@@ -119,7 +106,6 @@ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = test
       css: styles === null || styles === void 0 ? void 0 : styles.icon
     }) : null);
   }
-
 }, _class2.displayName = "Tag", _class2.componentId = 'Tag', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   size: 'medium',
   dismissible: false,

package/es/Tag/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {

package/es/Tag/styles.js

@@ -34,10 +34,10 @@
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        size = props.size,
-        dismissible = props.dismissible,
-        onClick = props.onClick,
-        disabled = props.disabled;
+    size = props.size,
+    dismissible = props.dismissible,
+    onClick = props.onClick,
+    disabled = props.disabled;
   const isButton = !!onClick;
   const sizeVariants = {
     small: {
@@ -127,7 +127,8 @@ const generateStyle = (componentTheme, props) => {
           }
         })
       },
-      tagBefore: { ...(isButton && {
+      tagBefore: {
+        ...(isButton && {
           borderRadius: componentTheme.defaultBorderRadius
         })
       }
@@ -146,21 +147,24 @@ const generateStyle = (componentTheme, props) => {
           }
         })
       },
-      tagBefore: { ...(isButton && {
+      tagBefore: {
+        ...(isButton && {
           borderRadius: `calc(${componentTheme.inlineBorderRadius} * 1.5)`
         })
       }
     }
   };
   const iconVariantVariants = {
-    default: { ...(dismissible && {
+    default: {
+      ...(dismissible && {
         color: componentTheme.defaultIconColor,
         '[class$="-tag"]:hover > &': {
           color: componentTheme.defaultIconHoverColor
         }
       })
     },
-    inline: { ...(dismissible && {
+    inline: {
+      ...(dismissible && {
         backgroundColor: componentTheme.inlineIconColor,
         borderRadius: '50%',
         color: componentTheme.inlineBackground,
@@ -193,7 +197,8 @@ const generateStyle = (componentTheme, props) => {
       ...sizeVariants[size].tag,
       ...buttonVariant.tag,
       ...tagVariantVariants[variant].tag,
-      '&::before': { ...buttonVariant.tagBefore,
+      '&::before': {
+        ...buttonVariant.tagBefore,
         ...tagVariantVariants[variant].tagBefore
       }
     },
@@ -216,5 +221,4 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 export default generateStyle;

package/es/Tag/theme.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { darken } from '@instructure/ui-color-utils';
 
+import { darken } from '@instructure/ui-color-utils';
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
@@ -30,11 +30,11 @@ import { darken } from '@instructure/ui-color-utils';
  */
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        forms = theme.forms,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        themeName = theme.key;
+    colors = theme.colors,
+    forms = theme.forms,
+    spacing = theme.spacing,
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     'canvas-high-contrast': {
       defaultBackground: colors.backgroundLightest,
@@ -47,17 +47,16 @@ const generateComponentTheme = theme => {
       defaultColor: theme['ic-brand-font-color-dark']
     }
   };
-
   const tagVariant = function (style, _ref) {
     let borderColor = _ref.borderColor,
-        borderRadius = _ref.borderRadius,
-        borderStyle = _ref.borderStyle,
-        borderWidth = _ref.borderWidth,
-        hoverColor = _ref.hoverColor,
-        iconColor = _ref.iconColor,
-        iconHoverColor = _ref.iconHoverColor,
-        mainColor = _ref.mainColor,
-        textColor = _ref.textColor;
+      borderRadius = _ref.borderRadius,
+      borderStyle = _ref.borderStyle,
+      borderWidth = _ref.borderWidth,
+      hoverColor = _ref.hoverColor,
+      iconColor = _ref.iconColor,
+      iconHoverColor = _ref.iconHoverColor,
+      mainColor = _ref.mainColor,
+      textColor = _ref.textColor;
     return {
       [`${style}BackgroundHover`]: hoverColor || darken(mainColor, 5),
       [`${style}Background`]: mainColor,
@@ -72,7 +71,6 @@ const generateComponentTheme = theme => {
       [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
     };
   };
-
   const componentVariables = {
     fontFamily: typography.fontFamily,
     heightSmall: '1.3125rem',
@@ -106,9 +104,9 @@ const generateComponentTheme = theme => {
       textColor: colors.textDarkest
     })
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/es/index.js

@@ -21,4 +21,5 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { Tag } from './Tag';

package/lib/Tag/TagLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TagLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TagLocator = (0, _locator.locator)(_index.Tag.selector);
 exports.TagLocator = TagLocator;

package/lib/Tag/__examples__/Tag.examples.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *

package/lib/Tag/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Tag = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _IconXLine = require("@instructure/ui-icons/lib/IconXLine.js");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -41,17 +27,14 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.focus = () => {
       this.ref && this.ref.focus();
     };
-
     this.handleClick = e => {
       const _this$props = this.props,
-            disabled = _this$props.disabled,
-            readOnly = _this$props.readOnly,
-            onClick = _this$props.onClick;
-
+        disabled = _this$props.disabled,
+        readOnly = _this$props.readOnly,
+        onClick = _this$props.onClick;
       if (disabled || readOnly) {
         e.preventDefault();
         e.stopPropagation();
@@ -59,46 +42,36 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
         onClick(e);
       }
     };
-
     this.handleRef = element => {
       this.ref = element;
-
       if (typeof this.props.elementRef === 'function') {
         this.props.elementRef(element);
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
-
   get focused() {
     return (0, _isActiveElement.isActiveElement)(this.ref);
   }
-
   render() {
     const _this$props4 = this.props,
-          className = _this$props4.className,
-          dismissible = _this$props4.dismissible,
-          disabled = _this$props4.disabled,
-          readOnly = _this$props4.readOnly,
-          text = _this$props4.text,
-          title = _this$props4.title,
-          onClick = _this$props4.onClick,
-          margin = _this$props4.margin,
-          styles = _this$props4.styles;
-
+      className = _this$props4.className,
+      dismissible = _this$props4.dismissible,
+      disabled = _this$props4.disabled,
+      readOnly = _this$props4.readOnly,
+      text = _this$props4.text,
+      title = _this$props4.title,
+      onClick = _this$props4.onClick,
+      margin = _this$props4.margin,
+      styles = _this$props4.styles;
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
-
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       elementRef: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.tag,
@@ -116,7 +89,6 @@ let Tag = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
       css: styles === null || styles === void 0 ? void 0 : styles.icon
     }) : null);
   }
-
 }, _class2.displayName = "Tag", _class2.componentId = 'Tag', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   size: 'medium',
   dismissible: false,

package/lib/Tag/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "TagLocator", {
   }
 });
 exports.default = void 0;
-
 var _TagLocator = require("./TagLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Tag/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   className: _propTypes.default.string,
   text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,

package/lib/Tag/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,10 +40,10 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        size = props.size,
-        dismissible = props.dismissible,
-        onClick = props.onClick,
-        disabled = props.disabled;
+    size = props.size,
+    dismissible = props.dismissible,
+    onClick = props.onClick,
+    disabled = props.disabled;
   const isButton = !!onClick;
   const sizeVariants = {
     small: {
@@ -134,7 +133,8 @@ const generateStyle = (componentTheme, props) => {
           }
         })
       },
-      tagBefore: { ...(isButton && {
+      tagBefore: {
+        ...(isButton && {
           borderRadius: componentTheme.defaultBorderRadius
         })
       }
@@ -153,21 +153,24 @@ const generateStyle = (componentTheme, props) => {
           }
         })
       },
-      tagBefore: { ...(isButton && {
+      tagBefore: {
+        ...(isButton && {
           borderRadius: `calc(${componentTheme.inlineBorderRadius} * 1.5)`
         })
       }
     }
   };
   const iconVariantVariants = {
-    default: { ...(dismissible && {
+    default: {
+      ...(dismissible && {
         color: componentTheme.defaultIconColor,
         '[class$="-tag"]:hover > &': {
           color: componentTheme.defaultIconHoverColor
         }
       })
     },
-    inline: { ...(dismissible && {
+    inline: {
+      ...(dismissible && {
         backgroundColor: componentTheme.inlineIconColor,
         borderRadius: '50%',
         color: componentTheme.inlineBackground,
@@ -200,7 +203,8 @@ const generateStyle = (componentTheme, props) => {
       ...sizeVariants[size].tag,
       ...buttonVariant.tag,
       ...tagVariantVariants[variant].tag,
-      '&::before': { ...buttonVariant.tagBefore,
+      '&::before': {
+        ...buttonVariant.tagBefore,
         ...tagVariantVariants[variant].tagBefore
       }
     },
@@ -223,6 +227,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Tag/theme.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _darken = require("@instructure/ui-color-utils/lib/darken.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -38,11 +36,11 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
  */
 const generateComponentTheme = theme => {
   const borders = theme.borders,
-        colors = theme.colors,
-        forms = theme.forms,
-        spacing = theme.spacing,
-        typography = theme.typography,
-        themeName = theme.key;
+    colors = theme.colors,
+    forms = theme.forms,
+    spacing = theme.spacing,
+    typography = theme.typography,
+    themeName = theme.key;
   const themeSpecificStyle = {
     'canvas-high-contrast': {
       defaultBackground: colors.backgroundLightest,
@@ -55,17 +53,16 @@ const generateComponentTheme = theme => {
       defaultColor: theme['ic-brand-font-color-dark']
     }
   };
-
   const tagVariant = function (style, _ref) {
     let borderColor = _ref.borderColor,
-        borderRadius = _ref.borderRadius,
-        borderStyle = _ref.borderStyle,
-        borderWidth = _ref.borderWidth,
-        hoverColor = _ref.hoverColor,
-        iconColor = _ref.iconColor,
-        iconHoverColor = _ref.iconHoverColor,
-        mainColor = _ref.mainColor,
-        textColor = _ref.textColor;
+      borderRadius = _ref.borderRadius,
+      borderStyle = _ref.borderStyle,
+      borderWidth = _ref.borderWidth,
+      hoverColor = _ref.hoverColor,
+      iconColor = _ref.iconColor,
+      iconHoverColor = _ref.iconHoverColor,
+      mainColor = _ref.mainColor,
+      textColor = _ref.textColor;
     return {
       [`${style}BackgroundHover`]: hoverColor || (0, _darken.darken)(mainColor, 5),
       [`${style}Background`]: mainColor,
@@ -80,7 +77,6 @@ const generateComponentTheme = theme => {
       [`${style}IconHoverColor`]: iconHoverColor || iconColor || textColor
     };
   };
-
   const componentVariables = {
     fontFamily: typography.fontFamily,
     heightSmall: '1.3125rem',
@@ -114,10 +110,10 @@ const generateComponentTheme = theme => {
       textColor: colors.textDarkest
     })
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Tag", {
     return _Tag.Tag;
   }
 });
-
 var _Tag = require("./Tag");