@atlaskit/button 17.23.0 → 18.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/button
 
+## 18.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.0.0
+
+### Major Changes
+
+- [#113901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113901)
+  [`49ea6581aea88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49ea6581aea88) -
+  The `overlay` prop has been removed in new buttons. It only existed in legacy buttons to support
+  loading spinners, which can be achieved in the new button using the `isLoading` prop.
+
 ## 17.23.0
 
 ### Minor Changes
@@ -70,8 +85,8 @@
 ### Minor Changes
 
 - [#111486](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111486)
-  [`f848f651ef678`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f848f651ef678) - ###
-  Accessibility improvement
+  [`f848f651ef678`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f848f651ef678) -
+  **Accessibility improvement**
 
   New buttons now adds ", Loading" to the accessible name of loading buttons regardless of how they
   are labelled. This supports labelling by text content (`children`), `aria-label`, and
@@ -87,7 +102,7 @@
   ```
   screen.findByRole("button", {
     name: /, Loading/,
-  })
+  });
   ```
 
   To validate a loading button that is already located, use `toHaveAccessibleName()`:
@@ -105,10 +120,8 @@
   ```
   render(<Button isLoading testId="bar">My label</Button>);
 
-
   const spinner = screen.getByTestId("bar--loading-spinner-wrapper");
   expect(spinner).toBeInTheDocument();
-
   ```
 
 ## 17.17.3

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
   _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Button__
@@ -45,7 +45,6 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -85,7 +84,6 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

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

@@ -12,7 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _useDefaultButton = _interopRequireDefault(require("./use-default-button"));
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
   _excluded2 = ["className", "css", "as", "style"];
 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; }
@@ -39,7 +39,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -76,7 +75,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

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

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _content = _interopRequireDefault(require("../shared/content"));
 var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
-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; }
@@ -47,14 +46,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size;
-  var hasOverlay = Boolean(overlay || isLoading);
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -65,16 +62,16 @@ var useDefaultButton = function useDefaultButton(_ref) {
     children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, iconBefore && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "before",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
       icon: iconBefore,
       size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/_react.default.createElement(_content.default, {
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, children), iconAfter && /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
       position: "after",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
       icon: iconAfter,
       size: UNSAFE_iconAfter_size
@@ -93,16 +90,10 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? (0, _loadingOverlay.default)({
-      spacing: spacing,
-      appearance: appearance,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      testId: testId
-    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     hasIconBefore: Boolean(iconBefore),
     hasIconAfter: Boolean(iconAfter)
   });

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

@@ -12,7 +12,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pressable = _interopRequireDefault(require("@atlaskit/primitives/pressable"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "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"],
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
   _excluded2 = ["className", "css", "as", "style"];
 /**
  * __Icon Button__
@@ -47,7 +47,6 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shape = _ref.shape,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -90,7 +89,6 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,

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

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _anchor = _interopRequireDefault(require("@atlaskit/primitives/anchor"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useIconButton = _interopRequireDefault(require("./use-icon-button"));
-var _excluded = ["aria-label", "aria-labelledby", "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"],
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
   _excluded2 = ["className", "css", "as", "style"];
 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; }
@@ -41,7 +41,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shape = _ref.shape,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -76,7 +75,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,

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

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _content = _interopRequireDefault(require("../shared/content"));
 var _iconRenderer = _interopRequireDefault(require("../shared/icon-renderer"));
-var _loadingOverlay = _interopRequireDefault(require("../shared/loading-overlay"));
 var _useButtonBase = _interopRequireDefault(require("../shared/use-button-base"));
 /**
  * __Use icon button__
@@ -30,7 +29,8 @@ var useIconButton = function useIconButton(_ref) {
     icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     isSelected = _ref.isSelected,
     label = _ref.label,
     onClick = _ref.onClick,
@@ -43,14 +43,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     shape = _ref.shape,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size;
-  var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
   var baseProps = (0, _useButtonBase.default)({
     analyticsContext: analyticsContext,
@@ -61,7 +59,7 @@ var useIconButton = function useIconButton(_ref) {
     buttonType: buttonType,
     children: /*#__PURE__*/_react.default.createElement(_content.default, {
       type: "icon",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
       icon: icon,
       size: UNSAFE_size
@@ -82,16 +80,10 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? (0, _loadingOverlay.default)({
-      spacing: spacing,
-      appearance: appearance,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      testId: testId
-    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
-    spacing: spacing
+    spacing: spacing,
+    testId: testId
   });
   return baseProps;
 };

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

@@ -63,11 +63,11 @@ var Content = function Content(_ref) {
   var children = _ref.children,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    hasOverlay = _ref.hasOverlay,
+    isLoading = _ref.isLoading,
     position = _ref.position;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "span",
-    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(hasOverlay ? [fadeStyles] : []), (0, _toConsumableArray2.default)(position === 'before' ? [beforeIconStyles] : []), (0, _toConsumableArray2.default)(position === 'after' ? [afterIconStyles] : []))
+    xcss: [commonStyles].concat((0, _toConsumableArray2.default)(type === 'text' ? [textStyles] : [iconStyles]), (0, _toConsumableArray2.default)(isLoading ? [fadeStyles] : []), (0, _toConsumableArray2.default)(position === 'before' ? [beforeIconStyles] : []), (0, _toConsumableArray2.default)(position === 'after' ? [afterIconStyles] : []))
   }, children);
 };
 var _default = exports.default = Content;

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

@@ -18,6 +18,7 @@ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"
 var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _constants = require("./constants");
+var _loadingOverlay = _interopRequireDefault(require("./loading-overlay"));
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -294,6 +295,7 @@ var linkDecorationStyles = (0, _primitives.xcss)({
   }
 });
 var disabledStyles = (0, _primitives.xcss)({
+  cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
   // @ts-expect-error
@@ -449,12 +451,9 @@ var circleStyles = (0, _primitives.xcss)({
 var fullWidthStyles = (0, _primitives.xcss)({
   width: '100%'
 });
-var loadingOverlayStyles = (0, _primitives.xcss)({
+var loadingStyles = (0, _primitives.xcss)({
   cursor: 'progress'
 });
-var nonInteractiveStyles = (0, _primitives.xcss)({
-  cursor: 'not-allowed'
-});
 var iconButtonStyles = (0, _primitives.xcss)({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
@@ -482,7 +481,7 @@ var navigationSplitButtonStyles = (0, _primitives.xcss)({
   paddingInlineEnd: 'space.075',
   paddingInlineStart: 'space.075'
 });
-var overlayStyles = (0, _primitives.xcss)({
+var loadingOverlayStyles = (0, _primitives.xcss)({
   display: 'flex',
   position: 'absolute',
   alignItems: 'center',
@@ -536,12 +535,12 @@ var useButtonBase = function useButtonBase(_ref) {
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
     propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    testId = _ref.testId,
     ariaLabel = _ref.ariaLabel,
     ariaLabelledBy = _ref.ariaLabelledBy;
   var localRef = (0, _react.useRef)(null);
@@ -557,9 +556,9 @@ var useButtonBase = function useButtonBase(_ref) {
   var appearance = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  var hasOverlay = Boolean(overlay);
-  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
-  var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  var isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  var isEffectivelyDisabled = isDisabled || isLoading;
   var isSelected = propIsSelected && !isDisabled;
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
@@ -570,15 +569,20 @@ var useButtonBase = function useButtonBase(_ref) {
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
-    // Consider overlay buttons to be effectively disabled
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
-    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, isLoading ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       as: "span",
-      xcss: overlayStyles
-    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+      xcss: loadingOverlayStyles
+    }, (0, _loadingOverlay.default)({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      testId: testId
+    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
       id: loadingLabelId
-    }, ", Loading")),
+    }, _constants.LOADING_LABEL)),
     'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(_constants.LOADING_LABEL) : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
   }, (0, _blockEvents.default)(isEffectivelyDisabled, {

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

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

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

@@ -35,7 +35,6 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shouldFitContainer,
   spacing,
   testId,
@@ -77,7 +76,6 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     onPointerUpCapture,
     onTouchEndCapture,
     onTouchStartCapture,
-    overlay,
     ref,
     shouldFitContainer,
     spacing,

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

@@ -26,7 +26,6 @@ const LinkButtonBase = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shouldFitContainer,
   spacing,
   testId,
@@ -66,7 +65,6 @@ const LinkButtonBase = ({
     onPointerUpCapture,
     onTouchEndCapture,
     onTouchStartCapture,
-    overlay,
     ref,
     shouldFitContainer,
     spacing,

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

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
-import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use default button base__
@@ -36,7 +35,6 @@ const useDefaultButton = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   ref,
   shouldFitContainer,
   spacing,
@@ -44,7 +42,6 @@ const useDefaultButton = ({
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size
 }) => {
-  const hasOverlay = Boolean(overlay || isLoading);
   const baseProps = useButtonBase({
     analyticsContext,
     appearance,
@@ -55,16 +52,16 @@ const useDefaultButton = ({
     children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: iconBefore,
       size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: iconAfter,
       size: UNSAFE_iconAfter_size
@@ -83,16 +80,10 @@ const useDefaultButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      spacing,
-      appearance,
-      isDisabled,
-      isSelected,
-      testId
-    }) : overlay,
     ref,
     shouldFitContainer,
     spacing,
+    testId,
     hasIconBefore: Boolean(iconBefore),
     hasIconAfter: Boolean(iconAfter)
   });

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

@@ -37,7 +37,6 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shape,
   spacing,
   testId,
@@ -82,7 +81,6 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     onPointerUpCapture,
     onTouchEndCapture,
     onTouchStartCapture,
-    overlay,
     ref,
     shape,
     spacing,

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

@@ -28,7 +28,6 @@ const LinkIconButtonBase = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shape,
   spacing,
   testId,
@@ -66,7 +65,6 @@ const LinkIconButtonBase = ({
     onPointerUpCapture,
     onTouchEndCapture,
     onTouchStartCapture,
-    overlay,
     ref,
     shape,
     spacing,

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

@@ -2,7 +2,6 @@ import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
-import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use icon button__
@@ -23,7 +22,7 @@ const useIconButton = ({
   icon,
   interactionName,
   isDisabled,
-  isLoading,
+  isLoading = false,
   isSelected,
   label,
   onClick,
@@ -36,7 +35,6 @@ const useIconButton = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   ref,
   shape,
   shouldFitContainer,
@@ -44,7 +42,6 @@ const useIconButton = ({
   testId,
   UNSAFE_size
 }) => {
-  const hasOverlay = Boolean(overlay || isLoading);
   const isCircle = shape === 'circle';
   const baseProps = useButtonBase({
     analyticsContext,
@@ -55,7 +52,7 @@ const useIconButton = ({
     buttonType,
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: icon,
       size: UNSAFE_size
@@ -76,16 +73,10 @@ const useIconButton = ({
     onPointerDownCapture,
     onPointerUpCapture,
     onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      spacing,
-      appearance,
-      isDisabled,
-      isSelected,
-      testId
-    }) : overlay,
     ref,
     shouldFitContainer,
-    spacing
+    spacing,
+    testId
   });
   return baseProps;
 };

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

@@ -54,12 +54,12 @@ const afterIconStyles = xcss({
 const Content = ({
   children,
   type = 'text',
-  hasOverlay,
+  isLoading,
   position
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(hasOverlay ? [fadeStyles] : []), ...(position === 'before' ? [beforeIconStyles] : []), ...(position === 'after' ? [afterIconStyles] : [])]
+    xcss: [commonStyles, ...(type === 'text' ? [textStyles] : [iconStyles]), ...(isLoading ? [fadeStyles] : []), ...(position === 'before' ? [beforeIconStyles] : []), ...(position === 'after' ? [afterIconStyles] : [])]
   }, children);
 };
 export default Content;