@atlaskit/button 17.8.0 → 17.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/button
 
+## 17.10.0
+
+### Minor Changes
+
+- [#88036](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88036) [`c1d62ce0679e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1d62ce0679e) - - Fixed a bug in new loading buttons where the spinner color was incorrect in selected state.
+  - Fixed a bug where the `isLoading` prop on new buttons was mistakenly added to unsupported link buttons.
+  - New loading buttons now display a loading cursor (`cursor: progress`), rather than a disabled cursor (`cursor: not-allowed`).
+
+### Patch Changes
+
+- [#87335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87335) [`4bb74bb023d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4bb74bb023d4) - Added explicit `text-decoration` styles to new button focus states. This ensures button styles are not interfered with by global styles.
+
+## 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

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/use-default-button.js

@@ -73,6 +73,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

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

@@ -62,6 +62,7 @@ var useIconButton = function useIconButton(_ref) {
     }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     isIconButton: true,
     isCircle: isCircle,

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

@@ -21,12 +21,9 @@ function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected;
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -49,6 +49,8 @@ var useButtonBase = function useButtonBase(_ref) {
     buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -104,6 +106,7 @@ var useButtonBase = function useButtonBase(_ref) {
       appearance: appearance,
       spacing: spacing,
       isDisabled: isDisabled,
+      isLoading: isLoading,
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isActiveOverSelected: isActiveOverSelected,
@@ -117,7 +120,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

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) {
@@ -88,6 +90,7 @@ function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isLoading = _ref3.isLoading,
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
@@ -160,8 +163,8 @@ function getXCSS(_ref3) {
     width: width,
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, combinedBaseColorStyles), isDisabled || hasOverlay ? {
-    cursor: 'not-allowed'
+  }, combinedBaseColorStyles), isDisabled || hasOverlay || isLoading ? {
+    cursor: isLoading ? 'progress' : 'not-allowed'
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -185,6 +188,11 @@ function getXCSS(_ref3) {
     })), {}, {
       // background, box-shadow
       transitionDuration: '0s, 0s'
-    })
+    }),
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    }
   }, splitButtonStyles));
 }

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.8.0",
+    packageVersion: "17.10.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/use-default-button.js

@@ -63,6 +63,7 @@ const useDefaultButton = ({
     }))),
     interactionName,
     isDisabled,
+    isLoading,
     isSelected,
     onClick,
     onMouseDownCapture,

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

@@ -56,6 +56,7 @@ const useIconButton = ({
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,
+    isLoading,
     isSelected,
     isIconButton: true,
     isCircle,

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

@@ -15,12 +15,9 @@ function getSpinnerAppearance({
   isDisabled,
   isSelected
 }) {
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -33,6 +33,7 @@ const useButtonBase = ({
   autoFocus = false,
   buttonType,
   isDisabled: propIsDisabled = false,
+  isLoading = false,
   isSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
@@ -83,6 +84,7 @@ const useButtonBase = ({
     appearance,
     spacing,
     isDisabled,
+    isLoading,
     isSelected,
     isHighlighted,
     isActiveOverSelected,
@@ -95,7 +97,7 @@ const useButtonBase = ({
     hasIconAfter,
     isSplit: isSplitButton,
     isNavigationSplit: isNavigationSplitButton
-  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }), [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return {
     ref: setRef,

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({
@@ -78,6 +80,7 @@ export function getXCSS({
   spacing,
   isDisabled,
   isSelected,
+  isLoading,
   isHighlighted,
   isActiveOverSelected,
   isIconButton,
@@ -155,8 +158,8 @@ export function getXCSS({
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center',
     ...combinedBaseColorStyles,
-    ...(isDisabled || hasOverlay ? {
-      cursor: 'not-allowed'
+    ...(isDisabled || hasOverlay || isLoading ? {
+      cursor: isLoading ? 'progress' : 'not-allowed'
     } : {}),
     ':hover': {
       ...getColors({
@@ -183,6 +186,11 @@ export function getXCSS({
       // background, box-shadow
       transitionDuration: '0s, 0s'
     },
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    },
     ...splitButtonStyles
   });
 }

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.8.0",
+    packageVersion: "17.10.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/use-default-button.js

@@ -63,6 +63,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

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

@@ -55,6 +55,7 @@ var useIconButton = function useIconButton(_ref) {
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     isIconButton: true,
     isCircle: isCircle,