@spark-web/button 2.0.0-rc.0 → 2.0.0-rc.1

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

@@ -0,0 +1,485 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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 _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { css } from '@emotion/react';
+import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
+import { Spinner } from '@spark-web/spinner';
+import { Text } from '@spark-web/text';
+import { useTheme } from '@spark-web/theme';
+import { useLinkComponent } from '@spark-web/link';
+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 || _internalRef$current.focus();
+    var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
+    preventableClickHandler(event);
+  }, [disabled, onClickProp]);
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+    as: "button",
+    ref: composedRef
+    // Hide aria-disabled attribute when button is not disabled
+    ,
+    "aria-disabled": disabled || undefined,
+    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 || 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: _objectSpread({
+      background: 'primary',
+      backgroundHover: 'primaryHover',
+      backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    secondary: _objectSpread({
+      background: 'secondary',
+      backgroundHover: 'secondaryHover',
+      backgroundActive: 'secondaryActive'
+    }, highDisabledStyles),
+    neutral: _objectSpread({
+      background: 'neutral',
+      border: 'field',
+      backgroundHover: 'neutralHover',
+      backgroundActive: 'neutralActive'
+    }, highDisabledAltStyles),
+    positive: _objectSpread({
+      background: 'positive',
+      backgroundHover: 'positiveHover',
+      backgroundActive: 'positiveActive'
+    }, highDisabledStyles),
+    critical: _objectSpread({
+      background: 'critical',
+      backgroundHover: 'criticalHover',
+      backgroundActive: 'criticalActive'
+    }, highDisabledStyles),
+    caution: undefined,
+    info: undefined
+  },
+  low: {
+    primary: _objectSpread({
+      background: 'surface',
+      border: 'primary',
+      borderWidth: 'large',
+      textTone: 'primary',
+      backgroundHover: 'none',
+      borderHover: 'primaryHover',
+      textToneHover: 'primaryHover',
+      backgroundActive: 'none',
+      borderActive: 'primaryActive',
+      textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    secondary: _objectSpread({
+      background: 'surface',
+      border: 'secondary',
+      borderWidth: 'large',
+      textTone: 'secondary',
+      backgroundHover: 'none',
+      borderHover: 'secondaryHover',
+      textToneHover: 'secondaryHover',
+      backgroundActive: 'none',
+      borderActive: 'secondaryActive',
+      textToneActive: 'secondaryActive'
+    }, lowDisabledAltStyles),
+    neutral: _objectSpread({
+      background: 'neutralLow',
+      backgroundHover: 'neutralLowHover',
+      backgroundActive: 'neutralLowActive'
+    }, lowDisabledStyles),
+    positive: _objectSpread({
+      background: 'positiveLow',
+      backgroundHover: 'positiveLowHover',
+      backgroundActive: 'positiveLowActive'
+    }, lowDisabledStyles),
+    caution: _objectSpread({
+      background: 'cautionLow',
+      backgroundHover: 'cautionLowHover',
+      backgroundActive: 'cautionLowActive'
+    }, lowDisabledStyles),
+    critical: _objectSpread({
+      background: 'criticalLow',
+      backgroundHover: 'criticalLowHover',
+      backgroundActive: 'criticalLowActive'
+    }, lowDisabledStyles),
+    info: _objectSpread({
+      background: 'infoLow',
+      backgroundHover: 'infoLowHover',
+      backgroundActive: 'infoLowActive'
+    }, lowDisabledStyles)
+  },
+  none: {
+    primary: _objectSpread({
+      background: 'surface',
+      textTone: 'primaryActive',
+      backgroundHover: 'primaryLowHover',
+      backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    secondary: _objectSpread({
+      background: 'surface',
+      textTone: 'secondaryActive',
+      backgroundHover: 'secondaryLowHover',
+      backgroundActive: 'secondaryLowActive'
+    }, noneDisabledStyles),
+    neutral: _objectSpread({
+      background: 'surface',
+      textTone: 'neutral',
+      backgroundHover: 'neutralLowHover',
+      backgroundActive: 'neutralLowActive'
+    }, noneDisabledStyles),
+    positive: _objectSpread({
+      background: 'surface',
+      textTone: 'positive',
+      backgroundHover: 'positiveLowHover',
+      backgroundActive: 'positiveLowActive'
+    }, noneDisabledStyles),
+    caution: _objectSpread({
+      background: 'surface',
+      textTone: 'caution',
+      backgroundHover: 'cautionLowHover',
+      backgroundActive: 'cautionLowActive'
+    }, noneDisabledStyles),
+    critical: _objectSpread({
+      background: 'surface',
+      textTone: 'critical',
+      backgroundHover: 'criticalLowHover',
+      backgroundActive: 'criticalLowActive'
+    }, noneDisabledStyles),
+    info: _objectSpread({
+      background: 'surface',
+      textTone: 'info',
+      backgroundHover: 'infoLowHover',
+      backgroundActive: 'infoLowActive'
+    }, noneDisabledStyles)
+  }
+};
+var mapTokens = {
+  fontSize: {
+    medium: 'small',
+    large: 'standard'
+  },
+  size: {
+    medium: 'medium',
+    large: 'large'
+  },
+  spacing: {
+    medium: 'medium',
+    large: 'xlarge'
+  }
+};
+
+var resolveButtonChildren = function resolveButtonChildren(_ref) {
+  var children = _ref.children,
+    isLoading = _ref.isLoading,
+    prominence = _ref.prominence,
+    size = _ref.size,
+    tone = _ref.tone;
+  var variant = variants[prominence][tone];
+  return Children.map(children, function (child) {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return /*#__PURE__*/jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/jsx(Text, {
+          as: "span",
+          baseline: false,
+          overflowStrategy: "nowrap",
+          weight: "semibold",
+          size: mapTokens.fontSize[size],
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone,
+          children: child
+        })
+      });
+    }
+    if ( /*#__PURE__*/isValidElement(child)) {
+      return /*#__PURE__*/jsx(HiddenWhenLoading, {
+        isLoading: isLoading,
+        children: /*#__PURE__*/cloneElement(child, {
+          // Dismiss buttons need to be `xxsmall`
+          // For everything else, we force them to be `xsmall`
+          size: child.props.size === 'xxsmall' ? child.props.size : 'xsmall',
+          // If the button is low prominence with a decorative tone we want to force
+          // the tone to be the same as the button
+          // We also don't want users to override the tone of the icon inside of the button
+          tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+        })
+      });
+    }
+    return null;
+  });
+};
+function HiddenWhenLoading(_ref2) {
+  var children = _ref2.children,
+    isLoading = _ref2.isLoading;
+  return /*#__PURE__*/jsx(Box, {
+    as: "span",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: isLoading ? 0 : undefined,
+    children: children
+  });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * useButtonStyles
+ *
+ * Custom hook for styling buttons and certain links.
+ * Returns a tuple where the first item is an object of props to spread onto the
+ * underlying `Box` component, and the second item is a CSS object that can be
+ * passed to Emotion's `css` function.
+ */
+function useButtonStyles(_ref) {
+  var iconOnly = _ref.iconOnly,
+    prominence = _ref.prominence,
+    size = _ref.size,
+    tone = _ref.tone;
+  var theme = useTheme();
+  var focusRingStyles = useFocusRing({
+    tone: tone
+  });
+  var disabledFocusRingStyles = useFocusRing({
+    tone: 'disabled'
+  });
+  var variant = variants[prominence][tone];
+  var isLarge = size === 'large';
+  var transitionColors = {
+    transitionProperty: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+    transitionTimingFunction: theme.animation.standard.easing,
+    transitionDuration: "".concat(theme.animation.standard.duration, "ms")
+  };
+  return [{
+    alignItems: 'center',
+    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    border: variant === null || variant === void 0 ? void 0 : variant.border,
+    borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
+    borderRadius: isLarge ? 'medium' : 'small',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    gap: 'small',
+    height: mapTokens.size[size],
+    justifyContent: 'center',
+    paddingX: iconOnly ? undefined : mapTokens.spacing[size],
+    position: 'relative',
+    width: iconOnly ? mapTokens.size[size] : undefined
+  }, _objectSpread(_objectSpread({}, transitionColors), {}, {
+    // Styles for buttons that aren't disabled.
+    // Using the :not() pseudo-class so we don't have to undo the styles when
+    // the button is disabled.
+    '&: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
+    },
+    '&[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,
+      cursor: 'default',
+      '*': {
+        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
+    }
+  })];
+}
+
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "data", "disabled", "id", "loading", "onClick", "prominence", "size", "tone", "type"];
+/**
+ * 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, forwardedRef) {
+  var ariaControls = _ref['aria-controls'],
+    ariaDescribedBy = _ref['aria-describedby'],
+    ariaExpanded = _ref['aria-expanded'],
+    data = _ref.data,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onClick = _ref.onClick,
+    _ref$prominence = _ref.prominence,
+    prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
+    type = _ref.type,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var iconOnly = Boolean(props.label);
+  var _useButtonStyles = useButtonStyles({
+      iconOnly: iconOnly,
+      size: size,
+      tone: tone,
+      prominence: prominence
+    }),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    boxProps = _useButtonStyles2[0],
+    buttonStyles = _useButtonStyles2[1];
+  var variant = variants[prominence][tone];
+  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, boxProps), {}, {
+    "aria-controls": ariaControls,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-label": props.label,
+    css: css(buttonStyles),
+    data: data,
+    disabled: loading || disabled,
+    id: id,
+    onClick: onClick,
+    ref: forwardedRef,
+    type: type,
+    children: [resolveButtonChildren(_objectSpread(_objectSpread({}, props), {}, {
+      isLoading: loading,
+      prominence: prominence,
+      size: size,
+      tone: tone
+    })), loading && /*#__PURE__*/jsx(Loading, {
+      tone: variant === null || variant === void 0 ? void 0 : variant.textTone
+    })]
+  }));
+});
+Button.displayName = 'Button';
+function Loading(_ref2) {
+  var tone = _ref2.tone;
+  return /*#__PURE__*/jsxs(Box, {
+    as: "span",
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    children: [/*#__PURE__*/jsx(VisuallyHidden, {
+      children: "button loading indicator"
+    }), /*#__PURE__*/jsx(Spinner, {
+      size: "xsmall",
+      tone: tone
+    })]
+  });
+}
+
+var _excluded = ["data", "href", "target", "id", "prominence", "size", "tone"];
+/** The appearance of a `Button`, with the semantics of a link. */
+var ButtonLink = forwardRefWithAs(function (_ref, forwardedRef) {
+  var data = _ref.data,
+    href = _ref.href,
+    target = _ref.target,
+    id = _ref.id,
+    _ref$prominence = _ref.prominence,
+    prominence = _ref$prominence === void 0 ? 'high' : _ref$prominence,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var LinkComponent = useLinkComponent(forwardedRef);
+  var iconOnly = Boolean(consumerProps.label);
+  var _useButtonStyles = useButtonStyles({
+      iconOnly: iconOnly,
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }),
+    _useButtonStyles2 = _slicedToArray(_useButtonStyles, 2),
+    boxProps = _useButtonStyles2[0],
+    buttonStyles = _useButtonStyles2[1];
+  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, boxProps), {}, {
+    "aria-label": consumerProps.label,
+    as: LinkComponent,
+    asElement: "a",
+    css: css(buttonStyles),
+    data: data,
+    href: href,
+    id: id,
+    target: target,
+    ref: forwardedRef,
+    children: resolveButtonChildren(_objectSpread(_objectSpread({}, consumerProps), {}, {
+      isLoading: false,
+      prominence: prominence,
+      size: size,
+      tone: tone
+    }))
+  }));
+});
+
+export { BaseButton, Button, ButtonLink, useButtonStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,14 +17,14 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.13.5",
-    "@spark-web/a11y": "^2.0.0-rc.0",
-    "@spark-web/box": "^2.0.0-rc.0",
-    "@spark-web/icon": "^2.0.0-rc.0",
-    "@spark-web/link": "^2.0.0-rc.0",
-    "@spark-web/spinner": "^2.0.0-rc.0",
-    "@spark-web/text": "^2.0.0-rc.0",
-    "@spark-web/theme": "^4.0.0-rc.0",
-    "@spark-web/utils": "^2.0.0-rc.0"
+    "@spark-web/a11y": "^2.0.0-rc.1",
+    "@spark-web/box": "^2.0.0-rc.1",
+    "@spark-web/icon": "^2.0.0-rc.1",
+    "@spark-web/link": "^2.0.0-rc.1",
+    "@spark-web/spinner": "^2.0.0-rc.1",
+    "@spark-web/text": "^2.0.0-rc.1",
+    "@spark-web/theme": "^4.0.0-rc.1",
+    "@spark-web/utils": "^2.0.0-rc.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",