@spark-web/button 1.1.1 → 1.3.0

package/dist/spark-web-button.esm.js

@@ -1,50 +1,123 @@
 import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Box } from '@spark-web/box';
+import { useComposedRefs } from '@spark-web/utils';
+import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Spinner } from '@spark-web/spinner';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import { Children, isValidElement, cloneElement, forwardRef } from 'react';
-import { css } from '@emotion/css';
 import { Text } from '@spark-web/text';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { css } from '@emotion/css';
 import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
+import { buildDataAttributes } from '@spark-web/utils/internal';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
 
+var _excluded$2 = ["onClick", "disabled", "type"];
+var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var onClickProp = _ref.onClick,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'button' : _ref$type,
+      consumerProps = _objectWithoutProperties(_ref, _excluded$2);
+
+  var internalRef = useRef(null);
+  var composedRef = useComposedRefs(internalRef, forwardedRef);
+  /**
+   * In Safari buttons are not focused automatically by the browser once
+   * pressed, the default behaviour is to focus the nearest focusable ancestor.
+   * To fix this we need to manually focus the button element after the user
+   * presses the element.
+   */
+
+  var onClick = useCallback(function (event) {
+    var _internalRef$current;
+
+    (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
+    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
+    preventableClickHandler(event);
+  }, [disabled, onClickProp]);
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+    as: "button",
+    ref: composedRef,
+    "aria-disabled": disabled,
+    onClick: onClick,
+    type: type
+  }));
+});
+BaseButton.displayName = 'BaseButton';
+/**
+ * handle "disabled" behaviour w/o disabling buttons
+ * @see https://axesslab.com/disabled-buttons-suck/
+ */
+
+function getPreventableClickHandler(onClick, disabled) {
+  return function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+    } else {
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }
+  };
+}
+
+var highDisabledStyles = {
+  backgroundDisabled: 'disabled',
+  borderDisabled: 'fieldDisabled',
+  textToneDisabled: 'neutralInverted'
+};
+var highDisabledAltStyles = {
+  backgroundDisabled: 'neutral',
+  borderDisabled: 'standard',
+  textToneDisabled: 'placeholder'
+};
+var lowDisabledStyles = {
+  backgroundDisabled: 'inputDisabled',
+  textToneDisabled: 'disabled'
+};
+var lowDisabledAltStyles = {
+  backgroundDisabled: 'inputDisabled',
+  borderDisabled: 'fieldDisabled',
+  textToneDisabled: 'disabled'
+};
+var noneDisabledStyles = {
+  backgroundDisabled: 'neutral',
+  textToneDisabled: 'disabled'
+};
 var variants = {
   high: {
-    primary: {
+    primary: _objectSpread({
       background: 'primary',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
-    },
-    secondary: {
+    }, highDisabledStyles),
+    secondary: _objectSpread({
       background: 'secondary',
       backgroundHover: 'secondaryHover',
       backgroundActive: 'secondaryActive'
-    },
-    neutral: {
+    }, highDisabledStyles),
+    neutral: _objectSpread({
       background: 'neutral',
       border: 'field',
       backgroundHover: 'neutralHover',
       backgroundActive: 'neutralActive'
-    },
-    positive: {
+    }, highDisabledAltStyles),
+    positive: _objectSpread({
       background: 'positive',
       backgroundHover: 'positiveHover',
       backgroundActive: 'positiveActive'
-    },
-    critical: {
+    }, highDisabledStyles),
+    critical: _objectSpread({
       background: 'critical',
       backgroundHover: 'criticalHover',
       backgroundActive: 'criticalActive'
-    },
+    }, highDisabledStyles),
     caution: undefined,
     info: undefined
   },
   low: {
-    primary: {
+    primary: _objectSpread({
       background: 'surface',
       border: 'primary',
       borderWidth: 'large',
@@ -55,8 +128,8 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
-    },
-    secondary: {
+    }, lowDisabledAltStyles),
+    secondary: _objectSpread({
       background: 'surface',
       border: 'secondary',
       borderWidth: 'large',
@@ -67,76 +140,76 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'secondaryActive',
       textToneActive: 'secondaryActive'
-    },
-    neutral: {
+    }, lowDisabledAltStyles),
+    neutral: _objectSpread({
       background: 'neutralLow',
       backgroundHover: 'neutralLowHover',
       backgroundActive: 'neutralLowActive'
-    },
-    positive: {
+    }, lowDisabledStyles),
+    positive: _objectSpread({
       background: 'positiveLow',
       backgroundHover: 'positiveLowHover',
       backgroundActive: 'positiveLowActive'
-    },
-    caution: {
+    }, lowDisabledStyles),
+    caution: _objectSpread({
       background: 'cautionLow',
       backgroundHover: 'cautionLowHover',
       backgroundActive: 'cautionLowActive'
-    },
-    critical: {
+    }, lowDisabledStyles),
+    critical: _objectSpread({
       background: 'criticalLow',
       backgroundHover: 'criticalLowHover',
       backgroundActive: 'criticalLowActive'
-    },
-    info: {
+    }, lowDisabledStyles),
+    info: _objectSpread({
       background: 'infoLow',
       backgroundHover: 'infoLowHover',
       backgroundActive: 'infoLowActive'
-    }
+    }, lowDisabledStyles)
   },
   none: {
-    primary: {
+    primary: _objectSpread({
       background: 'surface',
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
-    },
-    secondary: {
+    }, noneDisabledStyles),
+    secondary: _objectSpread({
       background: 'surface',
       textTone: 'secondaryActive',
       backgroundHover: 'secondaryLowHover',
       backgroundActive: 'secondaryLowActive'
-    },
-    neutral: {
+    }, noneDisabledStyles),
+    neutral: _objectSpread({
       background: 'surface',
       textTone: 'neutral',
       backgroundHover: 'neutralLowHover',
       backgroundActive: 'neutralLowActive'
-    },
-    positive: {
+    }, noneDisabledStyles),
+    positive: _objectSpread({
       background: 'surface',
       textTone: 'positive',
       backgroundHover: 'positiveLowHover',
       backgroundActive: 'positiveLowActive'
-    },
-    caution: {
+    }, noneDisabledStyles),
+    caution: _objectSpread({
       background: 'surface',
       textTone: 'caution',
       backgroundHover: 'cautionLowHover',
       backgroundActive: 'cautionLowActive'
-    },
-    critical: {
+    }, noneDisabledStyles),
+    critical: _objectSpread({
       background: 'surface',
       textTone: 'critical',
       backgroundHover: 'criticalLowHover',
       backgroundActive: 'criticalLowActive'
-    },
-    info: {
+    }, noneDisabledStyles),
+    info: _objectSpread({
       background: 'surface',
       textTone: 'info',
       backgroundHover: 'infoLowHover',
       backgroundActive: 'infoLowActive'
-    }
+    }, noneDisabledStyles)
   }
 };
 var mapTokens = {
@@ -162,7 +235,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
       tone = _ref.tone;
   var variant = variants[prominence][tone];
   return Children.map(children, function (child) {
-    if (typeof child === 'string') {
+    if (typeof child === 'string' || typeof child === 'number') {
       return /*#__PURE__*/jsx(HiddenWhenLoading, {
         isLoading: isLoading,
         children: /*#__PURE__*/jsx(Text, {
@@ -199,10 +272,12 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
 function HiddenWhenLoading(_ref2) {
   var children = _ref2.children,
       isLoading = _ref2.isLoading;
-  return /*#__PURE__*/jsx("span", {
-    className: isLoading ? css({
-      opacity: 0
-    }) : undefined,
+  return /*#__PURE__*/jsx(Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: isLoading ? 0 : undefined,
     children: children
   });
 }
@@ -216,9 +291,12 @@ function useButtonStyles(_ref) {
   var focusRingStyles = useFocusRing({
     tone: tone
   });
+  var disabledFocusRingStyles = useFocusRing({
+    tone: 'disabled'
+  });
   var variant = variants[prominence][tone];
   var isLarge = size === 'large';
-  var transitionColours = {
+  var transitionColors = {
     transitionProperty: 'color, background-color, border-color, text-decoration-color',
     transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
     transitionDuration: "".concat(theme.animation.standard.duration, "ms")
@@ -238,27 +316,38 @@ function useButtonStyles(_ref) {
     position: 'relative',
     width: iconOnly ? mapTokens.size[size] : undefined,
     // interactions styles
-    className: css(_objectSpread(_objectSpread({}, transitionColours), {}, {
-      '&:hover': {
-        borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
-        backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
-        // Style button text when hovering
-        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
-          color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
-          stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
-        })
+    className: css(_objectSpread(_objectSpread({}, transitionColors), {}, {
+      '&:not([aria-disabled=true])': {
+        ':hover': {
+          borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
+          backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
+          // Style button text when hovering
+          '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
+            color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
+            stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
+          })
+        },
+        ':active': {
+          borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme.border.color[variant.borderActive] : undefined,
+          backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
+          transform: 'scale(0.98)',
+          // Style button text when it's active
+          '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
+            color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
+            stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
+          })
+        },
+        ':focus': focusRingStyles
       },
-      '&:active': {
-        borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme.border.color[variant.borderActive] : undefined,
-        backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
-        transform: 'scale(0.98)',
-        // Style button text when it's active
-        '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
-          color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
-          stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
-        })
-      },
-      ':focus': focusRingStyles
+      '&[aria-disabled=true]': {
+        backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
+        borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme.border.color[variant.borderDisabled] : undefined,
+        '*': {
+          color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined,
+          stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined
+        },
+        ':focus': disabledFocusRingStyles
+      }
     }))
   };
   return buttonStyleProps;
@@ -270,13 +359,12 @@ var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data",
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
  */
-var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var ariaControls = _ref['aria-controls'],
       ariaDescribedBy = _ref['aria-describedby'],
       ariaExpanded = _ref['aria-expanded'],
       data = _ref.data,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      disabled = _ref.disabled,
       id = _ref.id,
       _ref$loading = _ref.loading,
       loading = _ref$loading === void 0 ? false : _ref$loading,
@@ -287,8 +375,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$tone = _ref.tone,
       tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
+      type = _ref.type,
       props = _objectWithoutProperties(_ref, _excluded$1);
 
   var iconOnly = Boolean(props.label);
@@ -301,24 +388,17 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isDisabled = disabled || loading;
   var isLoading = loading && !disabled;
   var variant = variants[prominence][tone];
-  /**
-   * handle "disabled" behaviour w/o disabling buttons
-   * @see https://axesslab.com/disabled-buttons-suck/
-   */
-
-  var handleClick = getPreventableClickHandler(onClick, isDisabled);
-  return /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
     "aria-controls": ariaControls,
     "aria-describedby": ariaDescribedBy,
-    "aria-disabled": isDisabled,
     "aria-expanded": ariaExpanded,
     "aria-label": props.label,
-    as: "button",
+    data: data,
+    disabled: isDisabled,
     id: id,
-    onClick: handleClick,
-    ref: ref,
-    type: type
-  }, buttonStyleProps), data ? buildDataAttributes(data) : undefined), {}, {
+    onClick: onClick,
+    ref: forwardedRef,
+    type: type,
     children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
       isLoading: isLoading,
       prominence: prominence,
@@ -330,21 +410,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 Button.displayName = 'Button';
-/**
- * Prevent click events when the component is "disabled".
- * Note: we don't want to actually disable a button element for several reasons.
- * One being because that would prohibit the use of tooltips.
- */
-
-function getPreventableClickHandler(onClick, disabled) {
-  return function handleClick(event) {
-    if (disabled) {
-      event.preventDefault();
-    } else {
-      onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-  };
-}
 
 function Loading(_ref2) {
   var tone = _ref2.tone;
@@ -407,4 +472,4 @@ var ButtonLink = forwardRefWithAs(function (_ref, ref) {
   }));
 });
 
-export { Button, ButtonLink };
+export { BaseButton, Button, ButtonLink };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "license": "MIT",
   "main": "dist/spark-web-button.cjs.js",
   "module": "dist/spark-web-button.esm.js",
@@ -8,16 +8,16 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/runtime": "^7.18.9",
     "@emotion/css": "^11.9.0",
-    "@spark-web/a11y": "^1.0.5",
-    "@spark-web/box": "^1.0.5",
-    "@spark-web/icon": "^1.1.3",
-    "@spark-web/link": "^1.0.5",
-    "@spark-web/spinner": "^1.0.2",
-    "@spark-web/text": "^1.0.5",
-    "@spark-web/theme": "^3.0.1",
-    "@spark-web/utils": "^1.1.3"
+    "@spark-web/a11y": "^1.2.0",
+    "@spark-web/box": "^1.0.7",
+    "@spark-web/icon": "^1.1.5",
+    "@spark-web/link": "^1.0.7",
+    "@spark-web/spinner": "^1.0.5",
+    "@spark-web/text": "^1.0.7",
+    "@spark-web/theme": "^3.0.3",
+    "@spark-web/utils": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",