@instructure/ui-buttons 8.33.1 → 8.33.2-snapshot-5

package/lib/BaseButton/index.js

@@ -1,50 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BaseButton = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _console = require("@instructure/console");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
-
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
-
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["type", "size", "elementRef", "as", "href", "color", "focusColor", "textAlign", "shape", "display", "withBackground", "withBorder", "isCondensed", "margin", "cursor", "onClick", "renderIcon", "tabIndex", "styles", "makeStyles"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components/utilities
@@ -55,168 +34,138 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleElementRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleClick = event => {
       const onClick = this.props.onClick;
       const interaction = this.interaction;
-
       if (interaction !== 'enabled') {
         event.preventDefault();
         event.stopPropagation();
         return;
       }
-
       if (typeof onClick === 'function') {
         onClick(event);
       }
     };
-
     this.handleKeyDown = event => {
       const _this$props = this.props,
-            onClick = _this$props.onClick,
-            onKeyDown = _this$props.onKeyDown,
-            href = _this$props.href;
+        onClick = _this$props.onClick,
+        onKeyDown = _this$props.onKeyDown,
+        href = _this$props.href;
       const interaction = this.interaction;
-
       if (typeof onKeyDown === 'function') {
         onKeyDown(event);
-      } // behave like a button when space key is pressed
-
+      }
 
+      // behave like a button when space key is pressed
       const _keycode$codes = _keycode.default.codes,
-            space = _keycode$codes.space,
-            enter = _keycode$codes.enter;
-
+        space = _keycode$codes.space,
+        enter = _keycode$codes.enter;
       if (this.elementType !== 'button' && [space, enter].includes(event.keyCode)) {
         event.preventDefault();
         event.stopPropagation();
-
         if (typeof onClick === 'function' && interaction === 'enabled') {
           onClick(event);
         }
-
         if (href) {
           this.ref && this.ref.click();
         }
       }
     };
   }
-
   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, this.makeStylesVariables);
   }
-
   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, this.makeStylesVariables);
   }
-
   get _rootElement() {
     return this.ref;
   }
-
   get makeStylesVariables() {
     return {
       isDisabled: this.isDisabled,
       hasOnlyIconVisible: this.hasOnlyIconVisible
     };
   }
-
   get hasOnlyIconVisible() {
     const _this$props4 = this.props,
-          children = _this$props4.children,
-          renderIcon = _this$props4.renderIcon;
+      children = _this$props4.children,
+      renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
   }
-
   get elementType() {
     return (0, _getElementType.getElementType)(BaseButton, this.props);
   }
-
   get interaction() {
     return (0, _getInteraction.getInteraction)({
       props: this.props
     });
   }
-
   get isDisabled() {
     return this.interaction === 'disabled';
   }
-
   get isReadOnly() {
     return this.interaction === 'readonly';
   }
-
   get isEnabled() {
     return this.interaction === 'enabled';
-  } // TODO: delete once the type of tabIndex is changed to number only
-
+  }
 
+  // TODO: delete once the type of tabIndex is changed to number only
   get tabIndex() {
     const tabIndex = this.props.tabIndex;
-
     if (typeof tabIndex === 'string') {
       (0, _console.warn)(false, 'The `string` value for `tabIndex` is deprecated. Only `number` type will be accepted from V9.0.0.');
       return parseInt(tabIndex);
     }
-
     return tabIndex;
   }
-
   get focusColor() {
     const _this$props5 = this.props,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          withBackground = _this$props5.withBackground; // Give user specified focusColor preference
+      color = _this$props5.color,
+      focusColor = _this$props5.focusColor,
+      withBackground = _this$props5.withBackground;
 
+    // Give user specified focusColor preference
     if (focusColor) {
       return focusColor;
-    } // The `primary-inverse` background has an info focus outline
+    }
+
+    // The `primary-inverse` background has an info focus outline
     // by default since it is replacing the `light` button variant.
     // Override the focus color with info even though it is
     // an inverse color
-
-
     if (color === 'primary-inverse' && withBackground) {
       return 'info';
     }
-
     return color.includes('inverse') ? 'inverse' : 'info';
   }
-
   get focused() {
     return (0, _isActiveElement.isActiveElement)(this.ref);
   }
-
   focus() {
     this.ref && this.ref.focus();
   }
-
   renderChildren() {
     const _this$props6 = this.props,
-          renderIcon = _this$props6.renderIcon,
-          children = _this$props6.children,
-          styles = _this$props6.styles;
+      renderIcon = _this$props6.renderIcon,
+      children = _this$props6.children,
+      styles = _this$props6.styles;
     const wrappedChildren = (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
-
     if (!renderIcon) {
       return wrappedChildren;
     }
-
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
     const wrappedIcon = (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
@@ -234,33 +183,32 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
     }, flexChildren);
   }
-
   render() {
     const _this$props7 = this.props,
-          type = _this$props7.type,
-          size = _this$props7.size,
-          elementRef = _this$props7.elementRef,
-          as = _this$props7.as,
-          href = _this$props7.href,
-          color = _this$props7.color,
-          focusColor = _this$props7.focusColor,
-          textAlign = _this$props7.textAlign,
-          shape = _this$props7.shape,
-          display = _this$props7.display,
-          withBackground = _this$props7.withBackground,
-          withBorder = _this$props7.withBorder,
-          isCondensed = _this$props7.isCondensed,
-          margin = _this$props7.margin,
-          cursor = _this$props7.cursor,
-          onClick = _this$props7.onClick,
-          renderIcon = _this$props7.renderIcon,
-          tabIndex = _this$props7.tabIndex,
-          styles = _this$props7.styles,
-          makeStyles = _this$props7.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
+      type = _this$props7.type,
+      size = _this$props7.size,
+      elementRef = _this$props7.elementRef,
+      as = _this$props7.as,
+      href = _this$props7.href,
+      color = _this$props7.color,
+      focusColor = _this$props7.focusColor,
+      textAlign = _this$props7.textAlign,
+      shape = _this$props7.shape,
+      display = _this$props7.display,
+      withBackground = _this$props7.withBackground,
+      withBorder = _this$props7.withBorder,
+      isCondensed = _this$props7.isCondensed,
+      margin = _this$props7.margin,
+      cursor = _this$props7.cursor,
+      onClick = _this$props7.onClick,
+      renderIcon = _this$props7.renderIcon,
+      tabIndex = _this$props7.tabIndex,
+      styles = _this$props7.styles,
+      makeStyles = _this$props7.makeStyles,
+      props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
-          isEnabled = this.isEnabled,
-          isReadOnly = this.isReadOnly;
+      isEnabled = this.isEnabled,
+      isReadOnly = this.isReadOnly;
     const tabIndexNumber = this.tabIndex;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: this.elementType,
@@ -287,7 +235,6 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.renderChildren()));
   }
-
 }, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   type: 'button',
   size: 'medium',

package/lib/BaseButton/locator.js

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

package/lib/BaseButton/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 = {
   children: _propTypes.default.node,
   type: _propTypes.default.oneOf(['button', 'submit', 'reset']),

package/lib/BaseButton/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -41,14 +40,14 @@ exports.default = void 0;
  */
 const generateStyle = (componentTheme, props, state) => {
   const size = props.size,
-        color = props.color,
-        textAlign = props.textAlign,
-        shape = props.shape,
-        withBackground = props.withBackground,
-        withBorder = props.withBorder,
-        isCondensed = props.isCondensed;
+    color = props.color,
+    textAlign = props.textAlign,
+    shape = props.shape,
+    withBackground = props.withBackground,
+    withBorder = props.withBorder,
+    isCondensed = props.isCondensed;
   const isDisabled = state.isDisabled,
-        hasOnlyIconVisible = state.hasOnlyIconVisible;
+    hasOnlyIconVisible = state.hasOnlyIconVisible;
   const shapeVariants = {
     circle: {
       borderRadius: '50%'
@@ -258,20 +257,16 @@ const generateStyle = (componentTheme, props, state) => {
     baseButton: {
       label: 'baseButton',
       appearance: 'none',
-      textDecoration: 'none'
-      /* for links styled as buttons */
-      ,
+      textDecoration: 'none' /* for links styled as buttons */,
       touchAction: 'manipulation',
       '&::-moz-focus-inner': {
-        border: '0'
-        /* removes default dotted focus outline in Firefox */
-
+        border: '0' /* removes default dotted focus outline in Firefox */
       },
-      '*': {
-        pointerEvents: 'none'
-        /* Ensures that button or link is always the event target */
 
+      '*': {
+        pointerEvents: 'none' /* Ensures that button or link is always the event target */
       },
+
       '&:active > [class$=-baseButton__content]': colorVariants[color].active,
       '&:hover > [class$=-baseButton__content]': colorVariants[color].hover
     },
@@ -375,6 +370,5 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/BaseButton/theme.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _alpha = require("@instructure/ui-color-utils/lib/alpha.js");
-
 var _darken = require("@instructure/ui-color-utils/lib/darken.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,16 +29,16 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
 
+const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
 const generateButtonThemeVars = _ref => {
   let style = _ref.style,
-      textColor = _ref.textColor,
-      ghostTextColor = _ref.ghostTextColor,
-      backgroundColor = _ref.backgroundColor,
-      borderColor = _ref.borderColor,
-      _ref$ghostBorderColor = _ref.ghostBorderColor,
-      ghostBorderColor = _ref$ghostBorderColor === void 0 ? borderColor : _ref$ghostBorderColor;
+    textColor = _ref.textColor,
+    ghostTextColor = _ref.ghostTextColor,
+    backgroundColor = _ref.backgroundColor,
+    borderColor = _ref.borderColor,
+    _ref$ghostBorderColor = _ref.ghostBorderColor,
+    ghostBorderColor = _ref$ghostBorderColor === void 0 ? borderColor : _ref$ghostBorderColor;
   return {
     [`${style}Color`]: textColor,
     [`${style}BorderColor`]: (0, _darken.darken)(borderColor, 10),
@@ -57,22 +54,22 @@ const generateButtonThemeVars = _ref => {
     [`${style}GhostActiveBoxShadow`]: `${activeShadow} ${(0, _alpha.alpha)(ghostBorderColor, 28)}`
   };
 };
+
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
-
 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: { ...generateButtonThemeVars({
+    canvas: {
+      ...generateButtonThemeVars({
         style: 'primary',
         backgroundColor: theme['ic-brand-button--primary-bgd'],
         borderColor: theme['ic-brand-button--primary-bgd'],
@@ -171,10 +168,10 @@ const generateComponentTheme = theme => {
     // Overrides for ghost hover states to ensure correct color contrast for a11y
     successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Button/ButtonLocator.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ButtonLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _uiTestQueries = require("@instructure/ui-test-queries");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,13 +30,13 @@ 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 ButtonLocator = (0, _locator.locator)(_index.Button.selector, {
   click: async function (element) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return (await (0, _uiTestQueries.find)(element, 'a,button,[role="button"]')).click(...args);
   }
 });

package/lib/Button/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Button = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _BaseButton = require("../BaseButton");
-
 var _props = require("./props");
-
 const _excluded = ["children", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -43,50 +29,45 @@ let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
     super(...arguments);
     this._buttonComponent = null;
     this.ref = null;
-
     this.handleElementRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleButtonRef = component => {
       this._buttonComponent = component;
     };
   }
-
   get focused() {
     return this._buttonComponent && this._buttonComponent.focused;
   }
-
   focus() {
     this._buttonComponent && this._buttonComponent.focus();
   }
-
   render() {
     const _this$props = this.props,
-          children = _this$props.children,
-          type = _this$props.type,
-          size = _this$props.size,
-          as = _this$props.as,
-          color = _this$props.color,
-          focusColor = _this$props.focusColor,
-          display = _this$props.display,
-          textAlign = _this$props.textAlign,
-          withBackground = _this$props.withBackground,
-          margin = _this$props.margin,
-          cursor = _this$props.cursor,
-          href = _this$props.href,
-          renderIcon = _this$props.renderIcon,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      children = _this$props.children,
+      type = _this$props.type,
+      size = _this$props.size,
+      as = _this$props.as,
+      color = _this$props.color,
+      focusColor = _this$props.focusColor,
+      display = _this$props.display,
+      textAlign = _this$props.textAlign,
+      withBackground = _this$props.withBackground,
+      margin = _this$props.margin,
+      cursor = _this$props.cursor,
+      href = _this$props.href,
+      renderIcon = _this$props.renderIcon,
+      props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
     const interaction = (0, _getInteraction.getInteraction)({
       props
     });
     const themeOverride = this.props.themeOverride;
-    const buttonProps = { ...(0, _passthroughProps.passthroughProps)(props),
+    const buttonProps = {
+      ...(0, _passthroughProps.passthroughProps)(props),
       type,
       size,
       elementRef: this.handleElementRef,
@@ -106,7 +87,6 @@ let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
     };
     return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, buttonProps, children);
   }
-
 }, _class2.displayName = "Button", _class2.componentId = 'Button', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   type: 'button',
   size: 'medium',

package/lib/Button/locator.js

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

package/lib/Button/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 = {
   children: _propTypes.default.node,
   type: _propTypes.default.oneOf(['button', 'submit', 'reset']),

package/lib/Button/theme.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _theme.default;
   }
 });
-
 var _theme = _interopRequireDefault(require("../BaseButton/theme"));