@atlaskit/button 17.22.2 → 18.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/button
 
+## 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
+
+- [#112945](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112945)
+  [`d7af9e23536c0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7af9e23536c0) -
+  New button prevents unintended spread props being passed to children. The following props will now
+  be ignored:
+
+  - css
+  - style
+  - as
+  - className
+
+  Note: These props were already excluded via types. The API has not changed.
+
 ## 17.22.2
 
 ### Patch Changes

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

@@ -8,9 +8,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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__
  *
@@ -43,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,
@@ -51,7 +52,14 @@ var Button = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwa
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
@@ -76,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

@@ -9,9 +9,11 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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; }
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -37,18 +39,24 @@ 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,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useDefaultButton.default)({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,
@@ -67,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

@@ -8,10 +8,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+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__
  *
@@ -45,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,
@@ -53,7 +54,15 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
+
   /**
    * TODO: At some stage I'll look into re-using more logic across 'default' and 'icon'
    * buttons. It's currently duplicated and mostly the same.
@@ -80,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,
@@ -105,9 +113,8 @@ var IconButton = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.f
       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, {
+      return /*#__PURE__*/_react.default.createElement(_pressable.default, (0, _extends2.default)({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

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

@@ -9,10 +9,12 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+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; }
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
@@ -39,13 +41,19 @@ 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,
     tooltip = _ref.tooltip,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    unsafeRest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = (0, _objectWithoutProperties2.default)(unsafeRest, _excluded2);
+  var rest = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = (0, _useIconButton.default)({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -67,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.22.2",
+    packageVersion: "18.0.0",
     analyticsData: analyticsContext
   });
 

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -34,15 +35,23 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shouldFitContainer,
   spacing,
   testId,
   type = 'button',
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
     ariaLabel,
     ariaLabelledBy,
@@ -67,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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 const LinkButtonBase = ({
@@ -25,19 +26,27 @@ const LinkButtonBase = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shouldFitContainer,
   spacing,
   testId,
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size,
-  ...rest
+  ...unsafeRest
 }, ref) => {
+  // @ts-expect-error
+  const {
+    className: _className,
+    css: _css,
+    as: _as,
+    style: _style,
+    ...saferRest
+  } = unsafeRest;
+  const rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   const baseProps = useDefaultButton({
-    ariaLabel,
-    ariaLabelledBy,
     analyticsContext,
     appearance,
+    ariaLabel,
+    ariaLabelledBy,
     autoFocus,
     buttonType: 'link',
     children,
@@ -56,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)
   });