@atlaskit/button 17.7.2 → 17.9.0

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

@@ -15,18 +15,14 @@ const values = {
       hover: 'color.background.neutral.hovered',
       active: 'color.background.neutral.pressed',
       // @ts-expect-error
-      disabled: `var(--ds-background-disabled, ${colors.N20A})`,
-      // @ts-expect-error
-      selected: `var(--ds-background-selected, ${colors.N700})`
+      disabled: `var(--ds-background-disabled, ${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, ${colors.N20A})`,
-      // @ts-expect-error
-      selected: `var(--ds-background-selected, ${colors.N700})`
+      disabled: `var(--ds-background-disabled, ${colors.N20A})`
     },
     warning: {
       default: 'color.background.warning.bold',
@@ -34,8 +30,14 @@ const values = {
       active: 'color.background.warning.bold.pressed',
       // @ts-expect-error
       disabled: `var(--ds-background-disabled, ${colors.N20A})`,
-      // @ts-expect-error
-      selected: `var(--ds-background-selected, ${colors.Y400})`
+      selected: {
+        // @ts-expect-error
+        default: `var(--ds-background-selected, ${colors.Y400})`,
+        // @ts-expect-error
+        hover: `var(--ds-background-selected-hovered, ${colors.Y400})`,
+        // @ts-expect-error
+        active: `var(--ds-background-selected-pressed, ${colors.Y400})`
+      }
     },
     danger: {
       default: 'color.background.danger.bold',
@@ -43,27 +45,35 @@ const values = {
       active: 'color.background.danger.bold.pressed',
       // @ts-expect-error
       disabled: `var(--ds-background-disabled, ${colors.N20A})`,
-      // @ts-expect-error
-      selected: `var(--ds-background-selected, ${colors.R500})`
+      selected: {
+        // @ts-expect-error
+        default: `var(--ds-background-selected, ${colors.R500})`,
+        // @ts-expect-error
+        hover: `var(--ds-background-selected-hovered, ${colors.R500})`,
+        // @ts-expect-error
+        active: `var(--ds-background-selected-pressed, ${colors.R500})`
+      }
     },
     link: {
-      default: 'color.background.neutral.subtle',
-      // @ts-expect-error
-      selected: `var(--ds-background-selected, ${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, ${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, ${colors.N700})`,
+      // @ts-expect-error
+      hover: `var(--ds-background-selected-hovered, ${colors.N700})`,
       // @ts-expect-error
-      selected: `var(--ds-background-selected, ${colors.N700})`
+      active: `var(--ds-background-selected-pressed, ${colors.N700})`
     }
   },
   color: {
@@ -72,45 +82,41 @@ const values = {
       default: `var(--ds-text, ${colors.N500})`,
       // @ts-expect-error
       active: `var(--ds-text, ${colors.B400})`,
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N20})`
+      disabled: 'color.text.disabled'
     },
     primary: {
       default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N20})`
+      disabled: 'color.text.disabled'
     },
     warning: {
       default: 'color.text.warning.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N800})`
+      selected: {
+        // @ts-expect-error
+        default: `var(--ds-text-selected, ${colors.N800})`
+      }
     },
     danger: {
       default: 'color.text.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N0})`
+      selected: {
+        // @ts-expect-error
+        default: `var(--ds-text-selected, ${colors.N0})`
+      }
     },
     link: {
       default: 'color.link',
       // @ts-expect-error
       hover: `var(--ds-link, ${colors.B300})`,
       active: 'color.link.pressed',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N20})`
+      disabled: 'color.text.disabled'
     },
     subtle: {
       // @ts-expect-error
       default: `var(--ds-text, ${colors.N500})`,
       // @ts-expect-error
       active: `var(--ds-text, ${colors.B400})`,
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N20})`
+      disabled: 'color.text.disabled'
     },
     'subtle-link': {
       // @ts-expect-error
@@ -119,9 +125,11 @@ const values = {
       hover: `var(--ds-text-subtle, ${colors.N90})`,
       // @ts-expect-error
       active: `var(--ds-text, ${colors.N400})`,
-      disabled: 'color.text.disabled',
+      disabled: 'color.text.disabled'
+    },
+    selected: {
       // @ts-expect-error
-      selected: `var(--ds-text-selected, ${colors.N20})`
+      default: `var(--ds-text-selected, ${colors.N20})`
     }
   }
 };

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import Spinner from '@atlaskit/spinner';
+function getIconSpacing(spacing) {
+  switch (spacing) {
+    case 'compact':
+      return 'small';
+    case 'none':
+      return 'xsmall';
+    default:
+      return 'medium';
+  }
+}
+function getSpinnerAppearance({
+  appearance,
+  isDisabled,
+  isSelected
+}) {
+  if (isDisabled) {
+    return 'inherit';
+  }
+  if (isSelected) {
+    return 'invert';
+  }
+  if (appearance === 'primary' || appearance === 'danger') {
+    return 'invert';
+  }
+  return 'inherit';
+}
+export default function renderLoadingOverlay({
+  appearance,
+  spacing,
+  isDisabled,
+  isSelected
+}) {
+  return /*#__PURE__*/React.createElement(Spinner, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance,
+      isDisabled,
+      isSelected
+    })
+  });
+}

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

@@ -56,21 +56,23 @@ function getColors({
   isActiveOverSelected,
   hasOverlay
 }) {
+  const showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
   let 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.background[appearance],
+      group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
       key
     }),
-    color: `${getColor({
-      group: colors.color[appearance],
+    color: getColor({
+      group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
       key
-    })}`
+    })
   };
 }
 export function getXCSS({

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

@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.2",
+    packageVersion: "17.9.0",
     analyticsData: analyticsContext
   });
 

package/dist/esm/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/esm/new-button/variants/default/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
@@ -22,6 +22,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     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,
@@ -55,6 +56,7 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,
     onMouseUpCapture: onMouseUpCapture,

package/dist/esm/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,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,
@@ -37,7 +40,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 = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -71,7 +74,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
 import useIconButton from './use-icon-button';
@@ -21,6 +21,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     spacing = _ref.spacing,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
+    isLoading = _ref.isLoading,
     icon = _ref.icon,
     label = _ref.label,
     overlay = _ref.overlay,
@@ -54,6 +55,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     interactionName: interactionName,
     isDisabled: isDisabled,
     isSelected: isSelected,
+    isLoading: isLoading,
     label: label,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

package/dist/esm/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 @@ 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,
@@ -37,7 +39,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 = useButtonBase({
     analyticsContext: analyticsContext,
@@ -66,7 +68,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: overlay,
+    overlay: isLoading ? renderLoadingOverlay({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing

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

@@ -15,18 +15,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',
@@ -34,8 +30,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',
@@ -43,27 +45,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: {
@@ -72,45 +82,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
@@ -119,9 +125,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/esm/new-button/variants/shared/loading-overlay.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Spinner from '@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';
+}
+export default function renderLoadingOverlay(_ref2) {
+  var appearance = _ref2.appearance,
+    spacing = _ref2.spacing,
+    isDisabled = _ref2.isDisabled,
+    isSelected = _ref2.isSelected;
+  return /*#__PURE__*/React.createElement(Spinner, {
+    label: ", Loading",
+    size: getIconSpacing(spacing),
+    appearance: getSpinnerAppearance({
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected
+    })
+  });
+}

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

@@ -58,21 +58,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.background[appearance],
+      group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
       key: key
     }),
-    color: "".concat(getColor({
-      group: colors.color[appearance],
+    color: getColor({
+      group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
       key: key
-    }))
+    })
   };
 }
 export function getXCSS(_ref3) {

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

@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.7.2",
+    packageVersion: "17.9.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/entry-points/standard-button.d.ts

@@ -1,7 +1,2 @@
-/**
- * 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';
 export type { ButtonProps } from '../old-button/button';

package/dist/types/new-button/variants/default/types.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

package/dist/types/new-button/variants/default/use-default-button.d.ts

@@ -11,5 +11,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, autoFocus, buttonType, iconBefore: IconBefore, UNSAFE_iconBefore_size, iconAfter: IconAfter, UNSAFE_iconAfter_size, interactionName, isDisabled, isSelected, isLoading, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types/new-button/variants/icon/types.d.ts

@@ -1,5 +1,9 @@
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
     /**
      * The button style variation.
      */