@atlaskit/button 17.9.0 → 17.11.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/button
 
+## 17.11.0
+
+### Minor Changes
+
+- [#85696](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85696) [`3f4e688ce636`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f4e688ce636) - Tooltips are now included within icon buttons. They are disabled by default. To enable set `isTooltipDisabled` to false.
+
+## 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

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

@@ -9,8 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-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"];
+var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
 /**
  * __Icon Button__
  *
@@ -21,33 +22,36 @@ var _excluded = ["analyticsContext", "interactionName", "autoFocus", "appearance
  * - [Usage](https://atlassian.design/components/button/usage)
  */
 var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function Button(_ref, ref) {
-  var analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName,
-    autoFocus = _ref.autoFocus,
+  var preventedAriaLabel = _ref['aria-label'],
+    analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
-    spacing = _ref.spacing,
+    autoFocus = _ref.autoFocus,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
-    isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
-    icon = _ref.icon,
+    isSelected = _ref.isSelected,
+    _ref$isTooltipDisable = _ref.isTooltipDisabled,
+    isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
     label = _ref.label,
-    overlay = _ref.overlay,
     onClick = _ref.onClick,
-    onMouseDownCapture = _ref.onMouseDownCapture,
-    onMouseUpCapture = _ref.onMouseUpCapture,
+    onClickCapture = _ref.onClickCapture,
     onKeyDownCapture = _ref.onKeyDownCapture,
     onKeyUpCapture = _ref.onKeyUpCapture,
-    onTouchStartCapture = _ref.onTouchStartCapture,
-    onTouchEndCapture = _ref.onTouchEndCapture,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
-    onClickCapture = _ref.onClickCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    overlay = _ref.overlay,
     shape = _ref.shape,
+    spacing = _ref.spacing,
+    testId = _ref.testId,
+    tooltip = _ref.tooltip,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
-    testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size,
-    preventedAriaLabel = _ref['aria-label'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
@@ -80,6 +84,92 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, function (triggerProps) {
+      return /*#__PURE__*/_react.default.createElement(_pressable.default
+      // Top level props
+      , (0, _extends2.default)({}, rest, {
+        type: type,
+        testId: testId,
+        componentName: "IconButton",
+        analyticsContext: analyticsContext,
+        interactionName: interactionName
+        // Shared between tooltip and native props
+        ,
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse, _rest$onMouseOver;
+          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+          (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse2, _rest$onMouseOut;
+          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+          (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse3, _rest$onMouseMove;
+          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+          (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse4, _rest$onMouseDown;
+          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+          (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus, _rest$onFocus;
+          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+          (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur, _rest$onBlur;
+          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+          (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
+        }
+        // Shared between tooltip and base props
+        ,
+        onClick: function onClick(event, analyticsEvent) {
+          var _baseProps$onClick, _triggerProps$onClick;
+          baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
+        },
+        ref: function ref(_ref2) {
+          var _triggerProps$ref;
+          baseProps.ref(_ref2);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
+        }
+        // Base props only
+        ,
+        xcss: baseProps.xcss,
+        isDisabled: baseProps.isDisabled,
+        onMouseDownCapture: baseProps.onMouseDownCapture,
+        onMouseUpCapture: baseProps.onMouseUpCapture,
+        onKeyDownCapture: baseProps.onKeyDownCapture,
+        onKeyUpCapture: baseProps.onKeyUpCapture,
+        onTouchStartCapture: baseProps.onTouchStartCapture,
+        onTouchEndCapture: baseProps.onTouchEndCapture,
+        onPointerDownCapture: baseProps.onPointerDownCapture,
+        onPointerUpCapture: baseProps.onPointerUpCapture,
+        onClickCapture: baseProps.onClickCapture
+      }), baseProps.children);
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
     ref: baseProps.ref,
     xcss: baseProps.xcss,

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

@@ -10,36 +10,40 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 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", "testId", "UNSAFE_size", "href", "aria-label"];
+var _excluded = ["aria-label", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
 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; }
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
-  var analyticsContext = _ref.analyticsContext,
-    interactionName = _ref.interactionName,
-    autoFocus = _ref.autoFocus,
+  var preventedAriaLabel = _ref['aria-label'],
+    analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
-    spacing = _ref.spacing,
+    autoFocus = _ref.autoFocus,
+    href = _ref.href,
+    icon = _ref.icon,
+    interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
-    icon = _ref.icon,
+    _ref$isTooltipDisable = _ref.isTooltipDisabled,
+    isTooltipDisabled = _ref$isTooltipDisable === void 0 ? true : _ref$isTooltipDisable,
     label = _ref.label,
-    overlay = _ref.overlay,
     onClick = _ref.onClick,
-    onMouseDownCapture = _ref.onMouseDownCapture,
-    onMouseUpCapture = _ref.onMouseUpCapture,
+    onClickCapture = _ref.onClickCapture,
     onKeyDownCapture = _ref.onKeyDownCapture,
     onKeyUpCapture = _ref.onKeyUpCapture,
-    onTouchStartCapture = _ref.onTouchStartCapture,
-    onTouchEndCapture = _ref.onTouchEndCapture,
+    onMouseDownCapture = _ref.onMouseDownCapture,
+    onMouseUpCapture = _ref.onMouseUpCapture,
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
-    onClickCapture = _ref.onClickCapture,
+    onTouchEndCapture = _ref.onTouchEndCapture,
+    onTouchStartCapture = _ref.onTouchStartCapture,
+    overlay = _ref.overlay,
     shape = _ref.shape,
+    spacing = _ref.spacing,
     testId = _ref.testId,
+    tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    href = _ref.href,
-    preventedAriaLabel = _ref['aria-label'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
@@ -67,6 +71,99 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     spacing: spacing,
     UNSAFE_size: UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, function (triggerProps) {
+      return /*#__PURE__*/_react.default.createElement(_anchor.default
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+      , (0, _extends2.default)({}, rest, {
+        testId: testId,
+        componentName: "LinkIconButton",
+        analyticsContext: analyticsContext,
+        interactionName: interactionName
+        // Shared between tooltip and native props
+        ,
+        onMouseOver: function onMouseOver(e) {
+          var _triggerProps$onMouse, _rest$onMouseOver;
+          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
+          (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 || _rest$onMouseOver.call(rest, e);
+        },
+        onMouseOut: function onMouseOut(e) {
+          var _triggerProps$onMouse2, _rest$onMouseOut;
+          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
+          (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 || _rest$onMouseOut.call(rest, e);
+        },
+        onMouseMove: function onMouseMove(e) {
+          var _triggerProps$onMouse3, _rest$onMouseMove;
+          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
+          (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 || _rest$onMouseMove.call(rest, e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          var _triggerProps$onMouse4, _rest$onMouseDown;
+          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
+          (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 || _rest$onMouseDown.call(rest, e);
+        },
+        onFocus: function onFocus(e) {
+          var _triggerProps$onFocus, _rest$onFocus;
+          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
+          (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, e);
+        },
+        onBlur: function onBlur(e) {
+          var _triggerProps$onBlur, _rest$onBlur;
+          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
+          (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, e);
+        }
+        // Shared between tooltip and base props
+        ,
+        onClick: function onClick(event, analyticsEvent) {
+          var _baseProps$onClick, _triggerProps$onClick;
+          baseProps === null || baseProps === void 0 || (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 || _baseProps$onClick.call(baseProps, event, analyticsEvent);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
+        },
+        ref: function ref(_ref2) {
+          var _triggerProps$ref;
+          baseProps.ref(_ref2);
+          triggerProps === null || triggerProps === void 0 || (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 || _triggerProps$ref.call(triggerProps, _ref2);
+        }
+        // Base props only
+        ,
+        xcss: baseProps.xcss,
+        onMouseDownCapture: baseProps.onMouseDownCapture,
+        onMouseUpCapture: baseProps.onMouseUpCapture,
+        onKeyDownCapture: baseProps.onKeyDownCapture,
+        onKeyUpCapture: baseProps.onKeyUpCapture,
+        onTouchStartCapture: baseProps.onTouchStartCapture,
+        onTouchEndCapture: baseProps.onTouchEndCapture,
+        onPointerDownCapture: baseProps.onPointerDownCapture,
+        onPointerUpCapture: baseProps.onPointerUpCapture,
+        onClickCapture: baseProps.onClickCapture
+        /**
+         * Disable link in an accessible way using `href`, `role`, and `aria-disabled`.
+         * @see https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
+         */
+        // @ts-expect-error (`href` is required, we could make it optional but don't want to encourage this pattern elsewhere)
+        ,
+        href: baseProps.isDisabled ? undefined : href,
+        role: baseProps.isDisabled ? 'link' : undefined,
+        "aria-disabled": baseProps.isDisabled === true ? true : undefined
+      }), baseProps.children);
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_anchor.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, rest, {

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/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

@@ -90,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,
@@ -162,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,
@@ -187,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.9.0",
+    packageVersion: "17.11.0",
     analyticsData: analyticsContext
   });
 

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import UNSAFE_PRESSABLE from '@atlaskit/primitives/pressable';
+import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 /**
  * __Icon Button__
@@ -12,33 +13,35 @@ import useIconButton from './use-icon-button';
  * - [Usage](https://atlassian.design/components/button/usage)
  */
 const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
+  // Prevent duplicate labels being added.
+  'aria-label': preventedAriaLabel,
   analyticsContext,
-  interactionName,
-  autoFocus,
   appearance,
-  spacing,
+  autoFocus,
+  icon,
+  interactionName,
   isDisabled,
-  isSelected,
   isLoading,
-  icon,
+  isSelected,
+  isTooltipDisabled = true,
   label,
-  overlay,
   onClick,
-  onMouseDownCapture,
-  onMouseUpCapture,
+  onClickCapture,
   onKeyDownCapture,
   onKeyUpCapture,
-  onTouchStartCapture,
-  onTouchEndCapture,
+  onMouseDownCapture,
+  onMouseUpCapture,
   onPointerDownCapture,
   onPointerUpCapture,
-  onClickCapture,
+  onTouchEndCapture,
+  onTouchStartCapture,
+  overlay,
   shape,
-  type = 'button',
+  spacing,
   testId,
+  tooltip,
+  type = 'button',
   UNSAFE_size,
-  // Prevent duplicate labels being added.
-  'aria-label': preventedAriaLabel,
   ...rest
 }, ref) {
   /**
@@ -72,6 +75,90 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     spacing,
     UNSAFE_size
   });
+  if (!isTooltipDisabled) {
+    var _tooltip$content;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label,
+      testId: tooltip === null || tooltip === void 0 ? void 0 : tooltip.testId,
+      position: tooltip === null || tooltip === void 0 ? void 0 : tooltip.position,
+      delay: tooltip === null || tooltip === void 0 ? void 0 : tooltip.delay,
+      onShow: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onShow,
+      onHide: tooltip === null || tooltip === void 0 ? void 0 : tooltip.onHide,
+      mousePosition: tooltip === null || tooltip === void 0 ? void 0 : tooltip.mousePosition,
+      analyticsContext: tooltip === null || tooltip === void 0 ? void 0 : tooltip.analyticsContext,
+      strategy: tooltip === null || tooltip === void 0 ? void 0 : tooltip.strategy,
+      tag: tooltip === null || tooltip === void 0 ? void 0 : tooltip.tag,
+      truncate: tooltip === null || tooltip === void 0 ? void 0 : tooltip.truncate,
+      component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
+      hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
+      hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
+    }, triggerProps => /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE
+    // Top level props
+    , _extends({}, rest, {
+      type: type,
+      testId: testId,
+      componentName: "IconButton",
+      analyticsContext: analyticsContext,
+      interactionName: interactionName
+      // Shared between tooltip and native props
+      ,
+      onMouseOver: e => {
+        var _triggerProps$onMouse, _rest$onMouseOver;
+        (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 ? void 0 : _triggerProps$onMouse.call(triggerProps, e);
+        (_rest$onMouseOver = rest.onMouseOver) === null || _rest$onMouseOver === void 0 ? void 0 : _rest$onMouseOver.call(rest, e);
+      },
+      onMouseOut: e => {
+        var _triggerProps$onMouse2, _rest$onMouseOut;
+        (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 ? void 0 : _triggerProps$onMouse2.call(triggerProps, e);
+        (_rest$onMouseOut = rest.onMouseOut) === null || _rest$onMouseOut === void 0 ? void 0 : _rest$onMouseOut.call(rest, e);
+      },
+      onMouseMove: e => {
+        var _triggerProps$onMouse3, _rest$onMouseMove;
+        (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 ? void 0 : _triggerProps$onMouse3.call(triggerProps, e);
+        (_rest$onMouseMove = rest.onMouseMove) === null || _rest$onMouseMove === void 0 ? void 0 : _rest$onMouseMove.call(rest, e);
+      },
+      onMouseDown: e => {
+        var _triggerProps$onMouse4, _rest$onMouseDown;
+        (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 ? void 0 : _triggerProps$onMouse4.call(triggerProps, e);
+        (_rest$onMouseDown = rest.onMouseDown) === null || _rest$onMouseDown === void 0 ? void 0 : _rest$onMouseDown.call(rest, e);
+      },
+      onFocus: e => {
+        var _triggerProps$onFocus, _rest$onFocus;
+        (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 ? void 0 : _triggerProps$onFocus.call(triggerProps, e);
+        (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest, e);
+      },
+      onBlur: e => {
+        var _triggerProps$onBlur, _rest$onBlur;
+        (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 ? void 0 : _triggerProps$onBlur.call(triggerProps, e);
+        (_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 ? void 0 : _rest$onBlur.call(rest, e);
+      }
+      // Shared between tooltip and base props
+      ,
+      onClick: (event, analyticsEvent) => {
+        var _baseProps$onClick, _triggerProps$onClick;
+        baseProps === null || baseProps === void 0 ? void 0 : (_baseProps$onClick = baseProps.onClick) === null || _baseProps$onClick === void 0 ? void 0 : _baseProps$onClick.call(baseProps, event, analyticsEvent);
+        triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 ? void 0 : _triggerProps$onClick.call(triggerProps, event);
+      },
+      ref: ref => {
+        var _triggerProps$ref;
+        baseProps.ref(ref);
+        triggerProps === null || triggerProps === void 0 ? void 0 : (_triggerProps$ref = triggerProps.ref) === null || _triggerProps$ref === void 0 ? void 0 : _triggerProps$ref.call(triggerProps, ref);
+      }
+      // Base props only
+      ,
+      xcss: baseProps.xcss,
+      isDisabled: baseProps.isDisabled,
+      onMouseDownCapture: baseProps.onMouseDownCapture,
+      onMouseUpCapture: baseProps.onMouseUpCapture,
+      onKeyDownCapture: baseProps.onKeyDownCapture,
+      onKeyUpCapture: baseProps.onKeyUpCapture,
+      onTouchStartCapture: baseProps.onTouchStartCapture,
+      onTouchEndCapture: baseProps.onTouchEndCapture,
+      onPointerDownCapture: baseProps.onPointerDownCapture,
+      onPointerUpCapture: baseProps.onPointerUpCapture,
+      onClickCapture: baseProps.onClickCapture
+    }), baseProps.children));
+  }
   return /*#__PURE__*/React.createElement(UNSAFE_PRESSABLE, _extends({}, rest, {
     ref: baseProps.ref,
     xcss: baseProps.xcss,