@atlaskit/button 17.7.2 → 17.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 17.9.0
+
+### Minor Changes
+
+- [#87334](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87334) [`b779928f2d49`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b779928f2d49) - [ux] New buttons now have hovered and pressed interaction states when they are selected (`isSelected`)
+
+## 17.8.0
+
+### Minor Changes
+
+- [#85228](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85228) [`9564de632638`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9564de632638) - Introduces isLoading prop to the new Button and IconButton components. When set to true a traditional loading spinner will be shown.
+
 ## 17.7.2
 
 ### Patch Changes

package/dist/cjs/entry-points/standard-button.js

@@ -10,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _button.default;
   }
 });
-require("@emotion/react");
 var _button = _interopRequireDefault(require("../old-button/button"));

package/dist/cjs/new-button/variants/default/button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "iconBefore", "isLoading", "UNSAFE_iconAfter_size", "iconAfter", "UNSAFE_iconBefore_size", "children", "shouldFitContainer", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "type", "testId"];
 /**
  * __Button__
  *
@@ -29,6 +29,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     iconAfter = _ref.iconAfter,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
@@ -62,6 +63,7 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

package/dist/cjs/new-button/variants/default/use-default-button.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -32,6 +33,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     children = _ref.children,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -47,7 +50,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -81,7 +84,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? (0, _loadingOverlay.default)({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/cjs/new-button/variants/icon/button.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
+var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance", "spacing", "isDisabled", "isSelected", "isLoading", "icon", "label", "overlay", "onClick", "onMouseDownCapture", "onMouseUpCapture", "onKeyDownCapture", "onKeyUpCapture", "onTouchStartCapture", "onTouchEndCapture", "onPointerDownCapture", "onPointerUpCapture", "onClickCapture", "shape", "type", "testId", "UNSAFE_size", "aria-label"];
 /**
  * __Icon Button__
  *
@@ -28,6 +28,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     spacing = _ref.spacing,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     icon = _ref.icon,
     label = _ref.label,
     overlay = _ref.overlay,
@@ -61,6 +62,7 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

package/dist/cjs/new-button/variants/icon/use-icon-button.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
+var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
  * __Use icon button__
@@ -27,6 +28,7 @@ var useIconButton = function useIconButton(_ref) {
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     label = _ref.label,
     onClick = _ref.onClick,
     onMouseDownCapture = _ref.onMouseDownCapture,
@@ -44,7 +46,7 @@ var useIconButton = function useIconButton(_ref) {
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     UNSAFE_size = _ref.UNSAFE_size;
-  var hasOverlay = Boolean(overlay);
+  var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
@@ -73,7 +75,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? (0, _loadingOverlay.default)({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing

package/dist/cjs/new-button/variants/shared/colors.js

@@ -24,18 +24,14 @@ var values = {
       hover: 'color.background.neutral.hovered',
       active: 'color.background.neutral.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
     },
     primary: {
       default: 'color.background.brand.bold',
       hover: 'color.background.brand.bold.hovered',
       active: 'color.background.brand.bold.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
     },
     warning: {
       default: 'color.background.warning.bold',
@@ -43,8 +39,14 @@ var values = {
       active: 'color.background.warning.bold.pressed',
       // @ts-expect-error
       disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
+        // @ts-expect-error
+        hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
+        // @ts-expect-error
+        active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
+      }
     },
     danger: {
       default: 'color.background.danger.bold',
@@ -52,27 +54,35 @@ var values = {
       active: 'color.background.danger.bold.pressed',
       // @ts-expect-error
       disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.R500, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
+        // @ts-expect-error
+        hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
+        // @ts-expect-error
+        active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
+      }
     },
     link: {
-      default: 'color.background.neutral.subtle',
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      default: 'color.background.neutral.subtle'
     },
     subtle: {
       default: 'color.background.neutral.subtle',
       hover: 'color.background.neutral.subtle.hovered',
       active: 'color.background.neutral.subtle.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-neutral-subtle, none)",
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-neutral-subtle, none)"
     },
     'subtle-link': {
-      default: 'color.background.neutral.subtle',
+      default: 'color.background.neutral.subtle'
+    },
+    selected: {
+      // @ts-expect-error
+      default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
+      // @ts-expect-error
+      hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
       // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
     }
   },
   color: {
@@ -81,45 +91,41 @@ var values = {
       default: "var(--ds-text, ".concat(colors.N500, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     primary: {
       default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     warning: {
       default: 'color.text.warning.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N800, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-text-selected, ".concat(colors.N800, ")")
+      }
     },
     danger: {
       default: 'color.text.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N0, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-text-selected, ".concat(colors.N0, ")")
+      }
     },
     link: {
       default: 'color.link',
       // @ts-expect-error
       hover: "var(--ds-link, ".concat(colors.B300, ")"),
       active: 'color.link.pressed',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     subtle: {
       // @ts-expect-error
       default: "var(--ds-text, ".concat(colors.N500, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     'subtle-link': {
       // @ts-expect-error
@@ -128,9 +134,11 @@ var values = {
       hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.N400, ")"),
-      disabled: 'color.text.disabled',
+      disabled: 'color.text.disabled'
+    },
+    selected: {
       // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      default: "var(--ds-text-selected, ".concat(colors.N20, ")")
     }
   }
 };

package/dist/cjs/new-button/variants/shared/loading-overlay.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = renderLoadingOverlay;
+var _react = _interopRequireDefault(require("react"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+function getIconSpacing(spacing) {
+  switch (spacing) {
+    case 'compact':
+      return 'small';
+    case 'none':
+      return 'xsmall';
+    default:
+      return 'medium';
+  }
+}
+function getSpinnerAppearance(_ref) {
+  var appearance = _ref.appearance,
+    isDisabled = _ref.isDisabled,
+    isSelected = _ref.isSelected;
+  if (isDisabled) {
+    return 'inherit';
+  }
+  if (isSelected) {
+    return 'invert';
+  }
+  if (appearance === 'primary' || appearance === 'danger') {
+    return 'invert';
+  }
+  return 'inherit';
+}
+function renderLoadingOverlay(_ref2) {
+  var appearance = _ref2.appearance,
+    spacing = _ref2.spacing,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected;
+  return /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
+  });
+}

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -66,21 +66,23 @@ function getColors(_ref2) {
     isHighlighted = _ref2.isHighlighted,
     isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
+  var showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
+  key = showSelectedState && isActiveOverSelected ? 'active' : key;
+
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
     backgroundColor: getColor({
-      group: _colors.default.background[appearance],
+      group: showSelectedState && _colors.default.background[appearance]['selected'] || _colors.default.background[showSelectedState ? 'selected' : appearance],
       key: key
     }),
-    color: "".concat(getColor({
-      group: _colors.default.color[appearance],
+    color: getColor({
+      group: showSelectedState && _colors.default.color[appearance]['selected'] || _colors.default.color[showSelectedState ? 'selected' : appearance],
       key: key
-    }))
+    })
   };
 }
 function getXCSS(_ref3) {

package/dist/cjs/old-button/shared/button-base.js

@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.2",
+    packageVersion: "17.9.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/entry-points/standard-button.js

@@ -1,6 +1 @@
-/**
- * Must import '@emotion/core' in order to resolve type error
- * https://product-fabric.atlassian.net/browse/DSP-3222
- */
-import '@emotion/react';
 export { default } from '../old-button/button';

package/dist/es2019/new-button/variants/default/button.js

@@ -20,6 +20,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   isDisabled,
   isSelected,
   iconBefore,
+  isLoading,
   UNSAFE_iconAfter_size,
   iconAfter,
   UNSAFE_iconBefore_size,
@@ -53,6 +54,7 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     interactionName,
     isDisabled,
     isSelected,
+    isLoading,
     onClick,
     onMouseDownCapture,
     onMouseUpCapture,

package/dist/es2019/new-button/variants/default/use-default-button.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use default button base__
@@ -22,6 +23,7 @@ const useDefaultButton = ({
   interactionName,
   isDisabled,
   isSelected,
+  isLoading = false,
   children,
   onClick,
   onMouseDownCapture,
@@ -38,7 +40,7 @@ const useDefaultButton = ({
   shouldFitContainer,
   spacing
 }) => {
-  const hasOverlay = Boolean(overlay);
+  const hasOverlay = Boolean(overlay || isLoading);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -72,7 +74,12 @@ const useDefaultButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected
+    }) : overlay,
     ref,
     shouldFitContainer,
     spacing,

package/dist/es2019/new-button/variants/icon/button.js

@@ -19,6 +19,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   spacing,
   isDisabled,
   isSelected,
+  isLoading,
   icon,
   label,
   overlay,
@@ -53,6 +54,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     interactionName,
     isDisabled,
     isSelected,
+    isLoading,
     label,
     onClick,
     onMouseDownCapture,

package/dist/es2019/new-button/variants/icon/use-icon-button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
+import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use icon button__
@@ -20,6 +21,7 @@ const useIconButton = ({
   interactionName,
   isDisabled,
   isSelected,
+  isLoading,
   label,
   onClick,
   onMouseDownCapture,
@@ -38,7 +40,7 @@ const useIconButton = ({
   spacing,
   UNSAFE_size
 }) => {
-  const hasOverlay = Boolean(overlay);
+  const hasOverlay = Boolean(overlay || isLoading);
   const isCircle = shape === 'circle';
   const baseProps = useButtonBase({
     analyticsContext,
@@ -67,7 +69,12 @@ const useIconButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected
+    }) : overlay,
     ref,
     shouldFitContainer,
     spacing