@instructure/ui-buttons 8.17.1-snapshot.82 → 8.18.1-snapshot.1

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.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
+
+**Note:** Version bump only for package @instructure/ui-buttons
+
 # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
 
 ### Bug Fixes

package/es/BaseButton/index.js

@@ -108,11 +108,15 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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() {
@@ -127,9 +131,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get hasOnlyIconVisible() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          renderIcon = _this$props2.renderIcon;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !hasVisibleChildren(children));
   }
 
@@ -168,10 +172,10 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   get focusColor() {
-    const _this$props3 = this.props,
-          color = _this$props3.color,
-          focusColor = _this$props3.focusColor,
-          withBackground = _this$props3.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;
@@ -197,12 +201,12 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
   }
 
   renderChildren() {
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+    const _this$props6 = this.props,
+          renderIcon = _this$props6.renderIcon,
+          children = _this$props6.children,
+          styles = _this$props6.styles;
     const wrappedChildren = jsx("span", {
-      css: styles?.children
+      css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
 
     if (!renderIcon) {
@@ -211,45 +215,45 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
 
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
     const wrappedIcon = jsx("span", {
-      css: styles?.iconSVG
+      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
     }, callRenderProp(renderIcon));
     const flexChildren = hasOnlyIconVisible ? jsx("span", {
-      css: styles?.iconOnly
+      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
     }, wrappedIcon, children) : [jsx("span", {
       key: "icon",
-      css: styles?.iconWrapper
+      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
     }, wrappedIcon), jsx("span", {
       key: "children",
-      css: styles?.childrenWrapper
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
     }, wrappedChildren)];
     return jsx("span", {
-      css: styles?.childrenLayout
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
     }, flexChildren);
   }
 
   render() {
-    const _this$props5 = this.props,
-          type = _this$props5.type,
-          size = _this$props5.size,
-          elementRef = _this$props5.elementRef,
-          as = _this$props5.as,
-          href = _this$props5.href,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          textAlign = _this$props5.textAlign,
-          shape = _this$props5.shape,
-          display = _this$props5.display,
-          withBackground = _this$props5.withBackground,
-          withBorder = _this$props5.withBorder,
-          isCondensed = _this$props5.isCondensed,
-          margin = _this$props5.margin,
-          cursor = _this$props5.cursor,
-          onClick = _this$props5.onClick,
-          renderIcon = _this$props5.renderIcon,
-          tabIndex = _this$props5.tabIndex,
-          styles = _this$props5.styles,
-          makeStyles = _this$props5.makeStyles,
-          props = _objectWithoutProperties(_this$props5, _excluded);
+    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 = _objectWithoutProperties(_this$props7, _excluded);
 
     const isDisabled = this.isDisabled,
           isEnabled = this.isEnabled,
@@ -275,9 +279,9 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       role: onClick && as !== 'button' ? 'button' : void 0,
       tabIndex: onClick && as ? tabIndexNumber || 0 : tabIndexNumber,
       disabled: isDisabled || isReadOnly,
-      css: isEnabled ? styles?.baseButton : null
+      css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null
     }), jsx("span", {
-      css: styles?.content
+      css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.renderChildren()));
   }
 

package/es/BaseButton/theme.js

@@ -72,8 +72,8 @@ const generateComponentTheme = theme => {
       primaryGhostHoverBackground: alpha(theme['ic-brand-button--primary-bgd'], 10)
     },
     'canvas-high-contrast': {
-      secondaryBorderColor: colors?.borderMedium,
-      primaryInverseBorderColor: colors?.borderMedium
+      secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+      primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
     },
     instructure: {
       borderRadius: '999em',
@@ -89,29 +89,29 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     transform: 'none',
     hoverTransform: 'none',
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     textTransform: 'none',
     letterSpacing: 'normal',
-    borderRadius: borders?.radiusMedium,
-    borderStyle: borders?.style,
-    borderWidth: borders?.widthSmall,
-    smallHeight: forms?.inputHeightSmall,
-    smallFontSize: typography?.fontSizeSmall,
-    smallPaddingHorizontal: spacing?.xSmall,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    smallPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
     smallPaddingTop: '0.375rem',
     smallPaddingBottom: '0.3125rem',
-    mediumHeight: forms?.inputHeightMedium,
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumPaddingHorizontal: spacing?.small,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     mediumPaddingTop: '0.5625rem',
     mediumPaddingBottom: '0.5625rem',
-    largeHeight: forms?.inputHeightLarge,
-    largeFontSize: typography?.fontSizeLarge,
-    largePaddingHorizontal: spacing?.medium,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largePaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
     largePaddingTop: '0.6875rem',
     largePaddingBottom: '0.6875rem',
-    lineHeight: typography?.lineHeightFit,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
     iconSizeSmall: '1rem',
     iconSizeMedium: '1.25rem',
     iconSizeLarge: '1.625rem',
@@ -119,47 +119,47 @@ const generateComponentTheme = theme => {
     iconTextGapCondensed: spacing.xxSmall,
     ...generateButtonThemeVars({
       style: 'primary',
-      backgroundColor: colors?.backgroundBrand,
-      borderColor: colors?.borderBrand,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textBrand
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
     }),
     ...generateButtonThemeVars({
       style: 'secondary',
-      backgroundColor: colors?.backgroundLight,
-      borderColor: colors?.borderLight,
-      ghostBorderColor: colors?.borderDarkest,
-      textColor: colors?.textDarkest,
-      ghostTextColor: colors?.textDarkest
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
+      ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
     }),
     ...generateButtonThemeVars({
       style: 'success',
-      backgroundColor: colors?.backgroundSuccess,
-      borderColor: colors?.borderSuccess,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textSuccess
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
     }),
     ...generateButtonThemeVars({
       style: 'danger',
-      backgroundColor: colors?.backgroundDanger,
-      borderColor: colors?.borderDanger,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textDanger
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
     }),
     ...generateButtonThemeVars({
       style: 'primaryInverse',
-      backgroundColor: colors?.backgroundLightest,
-      borderColor: colors?.borderLightest,
-      textColor: colors?.textDarkest,
-      ghostTextColor: colors?.textLightest
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
     }),
     // Overrides for primary-inverse to match what was previously the `light` button variant
-    primaryInverseBorderColor: darken(colors?.borderLight, 10),
-    primaryInverseHoverBackground: darken(colors?.backgroundLightest, 5),
-    primaryInverseActiveBackground: colors?.backgroundLightest,
-    primaryInverseActiveBoxShadow: `${activeShadow} ${darken(colors?.borderLightest, 25)}`,
+    primaryInverseBorderColor: darken(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
+    primaryInverseHoverBackground: darken(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
+    primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    primaryInverseActiveBoxShadow: `${activeShadow} ${darken(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
     // Overrides for ghost hover states to ensure correct color contrast for a11y
-    successGhostHoverBackground: alpha(colors?.textSuccess, 1)
+    successGhostHoverBackground: alpha(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/CloseButton/index.js

@@ -61,11 +61,15 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get interaction() {
@@ -80,24 +84,24 @@ let CloseButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   render() {
-    const _this$props = this.props,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          elementRef = _this$props.elementRef,
-          size = _this$props.size,
-          onClick = _this$props.onClick,
-          margin = _this$props.margin,
-          placement = _this$props.placement,
-          offset = _this$props.offset,
-          type = _this$props.type,
-          as = _this$props.as,
-          href = _this$props.href,
-          cursor = _this$props.cursor,
-          tabIndex = _this$props.tabIndex,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          screenReaderLabel = _this$props3.screenReaderLabel,
+          elementRef = _this$props3.elementRef,
+          size = _this$props3.size,
+          onClick = _this$props3.onClick,
+          margin = _this$props3.margin,
+          placement = _this$props3.placement,
+          offset = _this$props3.offset,
+          type = _this$props3.type,
+          as = _this$props3.as,
+          href = _this$props3.href,
+          cursor = _this$props3.cursor,
+          tabIndex = _this$props3.tabIndex,
+          styles = _this$props3.styles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     return jsx("span", Object.assign({}, passthroughProps(props), {
-      css: styles?.closeButton
+      css: styles === null || styles === void 0 ? void 0 : styles.closeButton
     }), jsx(BaseButton, {
       renderIcon: IconXSolid,
       elementRef: this.handleRef,

package/es/CloseButton/theme.js

@@ -31,10 +31,10 @@ const generateComponentTheme = theme => {
   const spacing = theme.spacing,
         stacking = theme.stacking;
   const componentVariables = {
-    offsetMedium: spacing?.medium,
-    offsetSmall: spacing?.small,
-    offsetXSmall: spacing?.xSmall,
-    zIndex: stacking?.above
+    offsetMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    offsetSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    offsetXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
   };
   return { ...componentVariables
   };

package/lib/BaseButton/index.js

@@ -112,11 +112,15 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   componentDidMount() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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() {
-    this.props.makeStyles?.(this.makeStylesVariables);
+    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() {
@@ -131,9 +135,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get hasOnlyIconVisible() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          renderIcon = _this$props2.renderIcon;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          renderIcon = _this$props4.renderIcon;
     return !!(renderIcon && !(0, _hasVisibleChildren.hasVisibleChildren)(children));
   }
 
@@ -172,10 +176,10 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   get focusColor() {
-    const _this$props3 = this.props,
-          color = _this$props3.color,
-          focusColor = _this$props3.focusColor,
-          withBackground = _this$props3.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;
@@ -201,12 +205,12 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   renderChildren() {
-    const _this$props4 = this.props,
-          renderIcon = _this$props4.renderIcon,
-          children = _this$props4.children,
-          styles = _this$props4.styles;
+    const _this$props6 = this.props,
+          renderIcon = _this$props6.renderIcon,
+          children = _this$props6.children,
+          styles = _this$props6.styles;
     const wrappedChildren = (0, _emotion.jsx)("span", {
-      css: styles?.children
+      css: styles === null || styles === void 0 ? void 0 : styles.children
     }, children);
 
     if (!renderIcon) {
@@ -215,45 +219,45 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
 
     const hasOnlyIconVisible = this.hasOnlyIconVisible;
     const wrappedIcon = (0, _emotion.jsx)("span", {
-      css: styles?.iconSVG
+      css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
     }, (0, _callRenderProp.callRenderProp)(renderIcon));
     const flexChildren = hasOnlyIconVisible ? (0, _emotion.jsx)("span", {
-      css: styles?.iconOnly
+      css: styles === null || styles === void 0 ? void 0 : styles.iconOnly
     }, wrappedIcon, children) : [(0, _emotion.jsx)("span", {
       key: "icon",
-      css: styles?.iconWrapper
+      css: styles === null || styles === void 0 ? void 0 : styles.iconWrapper
     }, wrappedIcon), (0, _emotion.jsx)("span", {
       key: "children",
-      css: styles?.childrenWrapper
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenWrapper
     }, wrappedChildren)];
     return (0, _emotion.jsx)("span", {
-      css: styles?.childrenLayout
+      css: styles === null || styles === void 0 ? void 0 : styles.childrenLayout
     }, flexChildren);
   }
 
   render() {
-    const _this$props5 = this.props,
-          type = _this$props5.type,
-          size = _this$props5.size,
-          elementRef = _this$props5.elementRef,
-          as = _this$props5.as,
-          href = _this$props5.href,
-          color = _this$props5.color,
-          focusColor = _this$props5.focusColor,
-          textAlign = _this$props5.textAlign,
-          shape = _this$props5.shape,
-          display = _this$props5.display,
-          withBackground = _this$props5.withBackground,
-          withBorder = _this$props5.withBorder,
-          isCondensed = _this$props5.isCondensed,
-          margin = _this$props5.margin,
-          cursor = _this$props5.cursor,
-          onClick = _this$props5.onClick,
-          renderIcon = _this$props5.renderIcon,
-          tabIndex = _this$props5.tabIndex,
-          styles = _this$props5.styles,
-          makeStyles = _this$props5.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+    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);
     const isDisabled = this.isDisabled,
           isEnabled = this.isEnabled,
           isReadOnly = this.isReadOnly;
@@ -278,9 +282,9 @@ let BaseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       role: onClick && as !== 'button' ? 'button' : void 0,
       tabIndex: onClick && as ? tabIndexNumber || 0 : tabIndexNumber,
       disabled: isDisabled || isReadOnly,
-      css: isEnabled ? styles?.baseButton : null
+      css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null
     }), (0, _emotion.jsx)("span", {
-      css: styles?.content
+      css: styles === null || styles === void 0 ? void 0 : styles.content
     }, this.renderChildren()));
   }
 

package/lib/BaseButton/theme.js

@@ -82,8 +82,8 @@ const generateComponentTheme = theme => {
       primaryGhostHoverBackground: (0, _alpha.alpha)(theme['ic-brand-button--primary-bgd'], 10)
     },
     'canvas-high-contrast': {
-      secondaryBorderColor: colors?.borderMedium,
-      primaryInverseBorderColor: colors?.borderMedium
+      secondaryBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+      primaryInverseBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium
     },
     instructure: {
       borderRadius: '999em',
@@ -99,29 +99,29 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     transform: 'none',
     hoverTransform: 'none',
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
     textTransform: 'none',
     letterSpacing: 'normal',
-    borderRadius: borders?.radiusMedium,
-    borderStyle: borders?.style,
-    borderWidth: borders?.widthSmall,
-    smallHeight: forms?.inputHeightSmall,
-    smallFontSize: typography?.fontSizeSmall,
-    smallPaddingHorizontal: spacing?.xSmall,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
+    smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    smallPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
     smallPaddingTop: '0.375rem',
     smallPaddingBottom: '0.3125rem',
-    mediumHeight: forms?.inputHeightMedium,
-    mediumFontSize: typography?.fontSizeMedium,
-    mediumPaddingHorizontal: spacing?.small,
+    mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
+    mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    mediumPaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     mediumPaddingTop: '0.5625rem',
     mediumPaddingBottom: '0.5625rem',
-    largeHeight: forms?.inputHeightLarge,
-    largeFontSize: typography?.fontSizeLarge,
-    largePaddingHorizontal: spacing?.medium,
+    largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge,
+    largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
+    largePaddingHorizontal: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
     largePaddingTop: '0.6875rem',
     largePaddingBottom: '0.6875rem',
-    lineHeight: typography?.lineHeightFit,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit,
     iconSizeSmall: '1rem',
     iconSizeMedium: '1.25rem',
     iconSizeLarge: '1.625rem',
@@ -129,47 +129,47 @@ const generateComponentTheme = theme => {
     iconTextGapCondensed: spacing.xxSmall,
     ...generateButtonThemeVars({
       style: 'primary',
-      backgroundColor: colors?.backgroundBrand,
-      borderColor: colors?.borderBrand,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textBrand
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textBrand
     }),
     ...generateButtonThemeVars({
       style: 'secondary',
-      backgroundColor: colors?.backgroundLight,
-      borderColor: colors?.borderLight,
-      ghostBorderColor: colors?.borderDarkest,
-      textColor: colors?.textDarkest,
-      ghostTextColor: colors?.textDarkest
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLight,
+      ghostBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest
     }),
     ...generateButtonThemeVars({
       style: 'success',
-      backgroundColor: colors?.backgroundSuccess,
-      borderColor: colors?.borderSuccess,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textSuccess
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderSuccess,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess
     }),
     ...generateButtonThemeVars({
       style: 'danger',
-      backgroundColor: colors?.backgroundDanger,
-      borderColor: colors?.borderDanger,
-      textColor: colors?.textLightest,
-      ghostTextColor: colors?.textDanger
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDanger,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
     }),
     ...generateButtonThemeVars({
       style: 'primaryInverse',
-      backgroundColor: colors?.backgroundLightest,
-      borderColor: colors?.borderLightest,
-      textColor: colors?.textDarkest,
-      ghostTextColor: colors?.textLightest
+      backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+      borderColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+      textColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+      ghostTextColor: colors === null || colors === void 0 ? void 0 : colors.textLightest
     }),
     // Overrides for primary-inverse to match what was previously the `light` button variant
-    primaryInverseBorderColor: (0, _darken.darken)(colors?.borderLight, 10),
-    primaryInverseHoverBackground: (0, _darken.darken)(colors?.backgroundLightest, 5),
-    primaryInverseActiveBackground: colors?.backgroundLightest,
-    primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors?.borderLightest, 25)}`,
+    primaryInverseBorderColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLight, 10),
+    primaryInverseHoverBackground: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.backgroundLightest, 5),
+    primaryInverseActiveBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    primaryInverseActiveBoxShadow: `${activeShadow} ${(0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.borderLightest, 25)}`,
     // Overrides for ghost hover states to ensure correct color contrast for a11y
-    successGhostHoverBackground: (0, _alpha.alpha)(colors?.textSuccess, 1)
+    successGhostHoverBackground: (0, _alpha.alpha)(colors === null || colors === void 0 ? void 0 : colors.textSuccess, 1)
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/CloseButton/index.js

@@ -57,11 +57,15 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   get interaction() {
@@ -76,23 +80,23 @@ let CloseButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defaul
   }
 
   render() {
-    const _this$props = this.props,
-          screenReaderLabel = _this$props.screenReaderLabel,
-          elementRef = _this$props.elementRef,
-          size = _this$props.size,
-          onClick = _this$props.onClick,
-          margin = _this$props.margin,
-          placement = _this$props.placement,
-          offset = _this$props.offset,
-          type = _this$props.type,
-          as = _this$props.as,
-          href = _this$props.href,
-          cursor = _this$props.cursor,
-          tabIndex = _this$props.tabIndex,
-          styles = _this$props.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          screenReaderLabel = _this$props3.screenReaderLabel,
+          elementRef = _this$props3.elementRef,
+          size = _this$props3.size,
+          onClick = _this$props3.onClick,
+          margin = _this$props3.margin,
+          placement = _this$props3.placement,
+          offset = _this$props3.offset,
+          type = _this$props3.type,
+          as = _this$props3.as,
+          href = _this$props3.href,
+          cursor = _this$props3.cursor,
+          tabIndex = _this$props3.tabIndex,
+          styles = _this$props3.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return (0, _emotion.jsx)("span", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
-      css: styles?.closeButton
+      css: styles === null || styles === void 0 ? void 0 : styles.closeButton
     }), (0, _emotion.jsx)(_BaseButton.BaseButton, {
       renderIcon: _IconXSolid.IconXSolid,
       elementRef: this.handleRef,

package/lib/CloseButton/theme.js

@@ -38,10 +38,10 @@ const generateComponentTheme = theme => {
   const spacing = theme.spacing,
         stacking = theme.stacking;
   const componentVariables = {
-    offsetMedium: spacing?.medium,
-    offsetSmall: spacing?.small,
-    offsetXSmall: spacing?.xSmall,
-    zIndex: stacking?.above
+    offsetMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    offsetSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    offsetXSmall: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
   };
   return { ...componentVariables
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "8.17.1-snapshot.82+96244a097",
+  "version": "8.18.1-snapshot.1+669aa5892",
   "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.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-queries": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-queries": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.17.1-snapshot.82+96244a097",
-    "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
-    "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-a11y-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-position": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-tooltip": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
-    "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
+    "@instructure/console": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-position": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-tooltip": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
+    "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -55,5 +55,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
+  "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
 }