@instructure/ui-buttons 8.25.1-snapshot-10 → 8.25.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-buttons
 

package/es/BaseButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 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;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -47,39 +47,76 @@ category: components/utilities
 ---
 @tsProps
 **/
-let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class BaseButton extends Component {
-  static displayName = "BaseButton";
-  static componentId = 'BaseButton';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    shape: 'rectangle',
-    display: 'inline-block',
-    textAlign: 'start',
-    withBackground: true,
-    withBorder: true,
-    isCondensed: false,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  ref = null;
+let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class BaseButton extends Component {
+  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;
+      const interaction = this.interaction;
+
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+      } // behave like a button when space key is pressed
+
+
+      const _keycode$codes = keycode.codes,
+            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$props;
+    var _this$props$makeStyle, _this$props2;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+    (_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$props2;
+    var _this$props$makeStyle2, _this$props3;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+    (_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() {
@@ -94,9 +131,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get hasOnlyIconVisible() {
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          renderIcon = _this$props3.renderIcon;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
 
@@ -135,10 +172,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get focusColor() {
-    const _this$props4 = this.props,
-          color = _this$props4.color,
-          focusColor = _this$props4.focusColor,
-          withBackground = _this$props4.withBackground; // Give user specified focusColor preference
+    const _this$props5 = this.props,
+          color = _this$props5.color,
+          focusColor = _this$props5.focusColor,
+          withBackground = _this$props5.withBackground; // Give user specified focusColor preference
 
     if (focusColor) {
       return focusColor;
@@ -163,58 +200,6 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     this.ref && this.ref.focus();
   }
 
-  handleElementRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  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);
-    }
-  };
-  handleKeyDown = event => {
-    const _this$props5 = this.props,
-          onClick = _this$props5.onClick,
-          onKeyDown = _this$props5.onKeyDown,
-          href = _this$props5.href;
-    const interaction = this.interaction;
-
-    if (typeof onKeyDown === 'function') {
-      onKeyDown(event);
-    } // behave like a button when space key is pressed
-
-
-    const _keycode$codes = keycode.codes,
-          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();
-      }
-    }
-  };
-
   renderChildren() {
     const _this$props6 = this.props,
           renderIcon = _this$props6.renderIcon,
@@ -300,6 +285,21 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
     }, this.renderChildren()));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  shape: 'rectangle',
+  display: 'inline-block',
+  textAlign: 'start',
+  withBackground: true,
+  withBorder: true,
+  isCondensed: false,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 export { BaseButton };
 export default BaseButton;

package/es/Button/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -41,26 +41,25 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class Button extends Component {
-  static displayName = "Button";
-  static componentId = 'Button';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    display: 'inline-block',
-    textAlign: 'center',
-    withBackground: true,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _buttonComponent = null;
-  ref = null;
+let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Button extends Component {
+  constructor() {
+    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;
@@ -70,18 +69,6 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
     this._buttonComponent && this._buttonComponent.focus();
   }
 
-  handleElementRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  handleButtonRef = component => {
-    this._buttonComponent = component;
-  };
-
   render() {
     const _this$props = this.props,
           children = _this$props.children,
@@ -124,6 +111,18 @@ let Button = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable()
     return /*#__PURE__*/React.createElement(BaseButton, buttonProps, children);
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Button", _class2.componentId = 'Button', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  display: 'inline-block',
+  textAlign: 'center',
+  withBackground: true,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 export default Button;
 export { Button };

package/es/CloseButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -45,30 +45,19 @@ category: components
 ---
 @tsProps
 **/
-let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class CloseButton extends Component {
-  static displayName = "CloseButton";
-  static componentId = 'CloseButton';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    type: 'button',
-    placement: 'static',
-    offset: 'x-small',
-    size: 'small',
-    margin: '0',
-    as: 'button',
-    cursor: 'pointer'
-  };
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
+let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CloseButton extends Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
 
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -131,6 +120,16 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     }, jsx(ScreenReaderContent, null, screenReaderLabel)));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  type: 'button',
+  placement: 'static',
+  offset: 'x-small',
+  size: 'small',
+  margin: '0',
+  as: 'button',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 export default CloseButton;
 export { CloseButton };

package/es/CondensedButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -41,31 +41,21 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class CondensedButton extends Component {
-  static displayName = "CondensedButton";
-  static componentId = 'CondensedButton';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'primary',
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _baseButton = null;
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
+let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class CondensedButton extends Component {
+  constructor() {
+    super(...arguments);
+    this._baseButton = null;
+    this.ref = null;
 
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -112,6 +102,15 @@ let CondensedButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = t
     }), children);
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CondensedButton", _class2.componentId = 'CondensedButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'primary',
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 export default CondensedButton;
 export { CondensedButton };

package/es/IconButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -42,34 +42,21 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = class IconButton extends Component {
-  static displayName = "IconButton";
-  static componentId = 'IconButton';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    shape: 'rectangle',
-    withBackground: true,
-    withBorder: true,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _baseButton = null;
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
+let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class IconButton extends Component {
+  constructor() {
+    super(...arguments);
+    this._baseButton = null;
+    this.ref = null;
 
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -122,6 +109,18 @@ let IconButton = (_dec = withStyle(null, generateComponentTheme), _dec2 = testab
     }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, screenReaderLabel));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  shape: 'rectangle',
+  withBackground: true,
+  withBorder: true,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 export default IconButton;
 export { IconButton };

package/es/ToggleButton/index.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
 
-var _dec, _class;
+var _dec, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -39,38 +39,24 @@ category: components
 ---
 @tsProps
 **/
-let ToggleButton = (_dec = testable(), _dec(_class = class ToggleButton extends Component {
-  static displayName = "ToggleButton";
-  static componentId = 'ToggleButton';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    mountNode: null,
-    color: 'secondary',
-    placement: 'top center',
-    constrain: 'window'
-  };
-
+let ToggleButton = (_dec = testable(), _dec(_class = (_class2 = class ToggleButton extends Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
     this.state = {
       isShowingTooltip: props.isShowingTooltip || false
     };
   }
 
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   get isShowingTooltip() {
     return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
   }
@@ -123,6 +109,15 @@ let ToggleButton = (_dec = testable(), _dec(_class = class ToggleButton extends
     }), callRenderProp(renderIcon)));
   }
 
-}) || _class);
+}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  mountNode: null,
+  color: 'secondary',
+  placement: 'top center',
+  constrain: 'window'
+}, _class2)) || _class);
 export { ToggleButton };
 export default ToggleButton;

package/lib/BaseButton/index.js

@@ -43,7 +43,7 @@ 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;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -51,39 +51,76 @@ category: components/utilities
 ---
 @tsProps
 **/
-let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class BaseButton extends _react.Component {
-  static displayName = "BaseButton";
-  static componentId = 'BaseButton';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    shape: 'rectangle',
-    display: 'inline-block',
-    textAlign: 'start',
-    withBackground: true,
-    withBorder: true,
-    isCondensed: false,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  ref = null;
+let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class BaseButton extends _react.Component {
+  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;
+      const interaction = this.interaction;
+
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+      } // behave like a button when space key is pressed
+
+
+      const _keycode$codes = _keycode.default.codes,
+            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$props;
+    var _this$props$makeStyle, _this$props2;
 
-    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
+    (_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$props2;
+    var _this$props$makeStyle2, _this$props3;
 
-    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
+    (_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() {
@@ -98,9 +135,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get hasOnlyIconVisible() {
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          renderIcon = _this$props3.renderIcon;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
   }
 
@@ -139,10 +176,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get focusColor() {
-    const _this$props4 = this.props,
-          color = _this$props4.color,
-          focusColor = _this$props4.focusColor,
-          withBackground = _this$props4.withBackground; // Give user specified focusColor preference
+    const _this$props5 = this.props,
+          color = _this$props5.color,
+          focusColor = _this$props5.focusColor,
+          withBackground = _this$props5.withBackground; // Give user specified focusColor preference
 
     if (focusColor) {
       return focusColor;
@@ -167,58 +204,6 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     this.ref && this.ref.focus();
   }
 
-  handleElementRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  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);
-    }
-  };
-  handleKeyDown = event => {
-    const _this$props5 = this.props,
-          onClick = _this$props5.onClick,
-          onKeyDown = _this$props5.onKeyDown,
-          href = _this$props5.href;
-    const interaction = this.interaction;
-
-    if (typeof onKeyDown === 'function') {
-      onKeyDown(event);
-    } // behave like a button when space key is pressed
-
-
-    const _keycode$codes = _keycode.default.codes,
-          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();
-      }
-    }
-  };
-
   renderChildren() {
     const _this$props6 = this.props,
           renderIcon = _this$props6.renderIcon,
@@ -303,7 +288,22 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     }, this.renderChildren()));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "BaseButton", _class2.componentId = 'BaseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  shape: 'rectangle',
+  display: 'inline-block',
+  textAlign: 'start',
+  withBackground: true,
+  withBorder: true,
+  isCondensed: false,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 exports.BaseButton = BaseButton;
 var _default = BaseButton;
 exports.default = _default;

package/lib/Button/index.js

@@ -29,7 +29,7 @@ var _props = require("./props");
 
 const _excluded = ["children", "type", "size", "as", "color", "focusColor", "display", "textAlign", "withBackground", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -38,26 +38,25 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class Button extends _react.Component {
-  static displayName = "Button";
-  static componentId = 'Button';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    display: 'inline-block',
-    textAlign: 'center',
-    withBackground: true,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _buttonComponent = null;
-  ref = null;
+let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class Button extends _react.Component {
+  constructor() {
+    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;
@@ -67,18 +66,6 @@ let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
     this._buttonComponent && this._buttonComponent.focus();
   }
 
-  handleElementRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  handleButtonRef = component => {
-    this._buttonComponent = component;
-  };
-
   render() {
     const _this$props = this.props,
           children = _this$props.children,
@@ -120,7 +107,19 @@ let Button = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0,
     return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, buttonProps, children);
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "Button", _class2.componentId = 'Button', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  display: 'inline-block',
+  textAlign: 'center',
+  withBackground: true,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 exports.Button = Button;
 var _default = Button;
 exports.default = _default;

package/lib/CloseButton/index.js

@@ -33,7 +33,7 @@ var _props = require("./props");
 
 const _excluded = ["screenReaderLabel", "elementRef", "size", "onClick", "margin", "placement", "offset", "type", "as", "href", "cursor", "tabIndex", "styles"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -41,30 +41,19 @@ category: components
 ---
 @tsProps
 **/
-let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class CloseButton extends _react.Component {
-  static displayName = "CloseButton";
-  static componentId = 'CloseButton';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    type: 'button',
-    placement: 'static',
-    offset: 'x-small',
-    size: 'small',
-    margin: '0',
-    as: 'button',
-    cursor: 'pointer'
-  };
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CloseButton extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -126,7 +115,17 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
     }, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel)));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CloseButton", _class2.componentId = 'CloseButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  type: 'button',
+  placement: 'static',
+  offset: 'x-small',
+  size: 'small',
+  margin: '0',
+  as: 'button',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 exports.CloseButton = CloseButton;
 var _default = CloseButton;
 exports.default = _default;

package/lib/CondensedButton/index.js

@@ -27,7 +27,7 @@ var _props = require("./props");
 
 const _excluded = ["children", "type", "size", "elementRef", "as", "interaction", "color", "margin", "cursor", "href", "renderIcon"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -36,31 +36,21 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class CondensedButton extends _react.Component {
-  static displayName = "CondensedButton";
-  static componentId = 'CondensedButton';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'primary',
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _baseButton = null;
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class CondensedButton extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this._baseButton = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -106,7 +96,16 @@ let CondensedButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _de
     }), children);
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "CondensedButton", _class2.componentId = 'CondensedButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'primary',
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 exports.CondensedButton = CondensedButton;
 var _default = CondensedButton;
 exports.default = _default;

package/lib/IconButton/index.js

@@ -29,7 +29,7 @@ var _props = require("./props");
 
 const _excluded = ["children", "renderIcon", "screenReaderLabel", "type", "size", "elementRef", "as", "interaction", "color", "focusColor", "shape", "withBackground", "withBorder", "margin", "cursor", "href"];
 
-var _dec, _dec2, _class;
+var _dec, _dec2, _class, _class2;
 
 /**
 ---
@@ -38,34 +38,21 @@ category: components
 @tsProps
 **/
 // needed for listing the available theme variables on docs page
-let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = class IconButton extends _react.Component {
-  static displayName = "IconButton";
-  static componentId = 'IconButton';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    type: 'button',
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    color: 'secondary',
-    shape: 'rectangle',
-    withBackground: true,
-    withBorder: true,
-    margin: '0',
-    cursor: 'pointer'
-  };
-  _baseButton = null;
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
+let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class IconButton extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this._baseButton = null;
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+  }
 
   get focused() {
     return this._baseButton && this._baseButton.focused;
@@ -117,7 +104,19 @@ let IconButton = (_dec = (0, _emotion.withStyle)(null, _theme.default), _dec2 =
     }), /*#__PURE__*/_react.default.createElement(_ScreenReaderContent.ScreenReaderContent, null, screenReaderLabel));
   }
 
-}) || _class) || _class);
+}, _class2.displayName = "IconButton", _class2.componentId = 'IconButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  type: 'button',
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  color: 'secondary',
+  shape: 'rectangle',
+  withBackground: true,
+  withBorder: true,
+  margin: '0',
+  cursor: 'pointer'
+}, _class2)) || _class) || _class);
 exports.IconButton = IconButton;
 var _default = IconButton;
 exports.default = _default;

package/lib/ToggleButton/index.js

@@ -27,7 +27,7 @@ var _props = require("./props");
 
 const _excluded = ["as", "color", "elementRef", "size", "interaction", "mountNode", "renderIcon", "renderTooltipContent", "screenReaderLabel", "status", "placement", "onClick"];
 
-var _dec, _class;
+var _dec, _class, _class2;
 
 /**
 ---
@@ -35,38 +35,24 @@ category: components
 ---
 @tsProps
 **/
-let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = class ToggleButton extends _react.Component {
-  static displayName = "ToggleButton";
-  static componentId = 'ToggleButton';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    size: 'medium',
-    as: 'button',
-    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
-    interaction: void 0,
-    mountNode: null,
-    color: 'secondary',
-    placement: 'top center',
-    constrain: 'window'
-  };
-
+let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 = class ToggleButton extends _react.Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
     this.state = {
       isShowingTooltip: props.isShowingTooltip || false
     };
   }
 
-  ref = null;
-  handleRef = el => {
-    const elementRef = this.props.elementRef;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-
   get isShowingTooltip() {
     return typeof this.props.isShowingTooltip === 'undefined' ? this.state.isShowingTooltip : this.props.isShowingTooltip;
   }
@@ -118,7 +104,16 @@ let ToggleButton = (_dec = (0, _testable.testable)(), _dec(_class = class Toggle
     }), (0, _callRenderProp.callRenderProp)(renderIcon)));
   }
 
-}) || _class);
+}, _class2.displayName = "ToggleButton", _class2.componentId = 'ToggleButton', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  size: 'medium',
+  as: 'button',
+  // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+  interaction: void 0,
+  mountNode: null,
+  color: 'secondary',
+  placement: 'top center',
+  constrain: 'window'
+}, _class2)) || _class);
 exports.ToggleButton = ToggleButton;
 var _default = ToggleButton;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-test-locator": "8.25.1-snapshot-10",
-    "@instructure/ui-test-queries": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-themes": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-13",
+    "@instructure/ui-test-queries": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-themes": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/shared-types": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-color-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-position": "8.25.1-snapshot-10",
-    "@instructure/ui-react-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-testable": "8.25.1-snapshot-10",
-    "@instructure/ui-tooltip": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-view": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/shared-types": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-position": "8.25.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-testable": "8.25.1-snapshot-13",
+    "@instructure/ui-tooltip": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-view": "8.25.1-snapshot-13",
     "keycode": "^2",
     "prop-types": "^15"
   },