@instructure/ui-buttons 8.18.0 → 8.18.1-snapshot.12

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.18.0",
+  "version": "8.18.1-snapshot.12+ca14b3dc8",
   "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.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-queries": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-queries": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-a11y-content": "8.18.0",
-    "@instructure/ui-a11y-utils": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-dom-utils": "8.18.0",
-    "@instructure/ui-icons": "8.18.0",
-    "@instructure/ui-position": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-tooltip": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
-    "@instructure/ui-view": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-icons": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-position": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-tooltip": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -54,5 +54,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
 }