@atlaskit/button 17.22.2 → 18.0.0

package/dist/es2019/new-button/variants/icon/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 Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -36,15 +37,24 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shape,
   spacing,
   testId,
   tooltip,
   type = 'button',
   UNSAFE_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;
+
   /**
    * 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.
@@ -71,7 +81,6 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     onPointerUpCapture,
     onTouchEndCapture,
     onTouchStartCapture,
-    overlay,
     ref,
     shape,
     spacing,
@@ -95,9 +104,8 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       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(Pressable
-    // Top level props
-    , _extends({}, rest, {
+    }, triggerProps => /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+      // Top level props
       "aria-labelledby": baseProps['aria-labelledby'],
       type: type,
       testId: testId,

package/dist/es2019/new-button/variants/icon/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 Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -27,14 +28,22 @@ const LinkIconButtonBase = ({
   onPointerUpCapture,
   onTouchEndCapture,
   onTouchStartCapture,
-  overlay,
   shape,
   spacing,
   testId,
   tooltip,
   UNSAFE_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 = useIconButton({
     analyticsContext,
     appearance,
@@ -56,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;

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

@@ -9,6 +9,7 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
+import renderLoadingOverlay from './loading-overlay';
 const buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -281,6 +282,7 @@ const linkDecorationStyles = xcss({
   }
 });
 const disabledStyles = 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, ${colors.N20A})`,
   // @ts-expect-error
@@ -436,12 +438,9 @@ const circleStyles = xcss({
 const fullWidthStyles = xcss({
   width: '100%'
 });
-const loadingOverlayStyles = xcss({
+const loadingStyles = xcss({
   cursor: 'progress'
 });
-const nonInteractiveStyles = xcss({
-  cursor: 'not-allowed'
-});
 const iconButtonStyles = xcss({
   height: `${32 / 14}em`,
   width: `${32 / 14}em`,
@@ -469,7 +468,7 @@ const navigationSplitButtonStyles = xcss({
   paddingInlineEnd: 'space.075',
   paddingInlineStart: 'space.075'
 });
-const overlayStyles = xcss({
+const loadingOverlayStyles = xcss({
   display: 'flex',
   position: 'absolute',
   alignItems: 'center',
@@ -516,10 +515,10 @@ const useButtonBase = ({
   onPointerDownCapture,
   onPointerUpCapture,
   onClickCapture,
-  overlay,
   ref,
   shouldFitContainer = false,
   spacing: propSpacing = 'default',
+  testId,
   ariaLabel,
   ariaLabelledBy
 }) => {
@@ -536,9 +535,9 @@ const useButtonBase = ({
   const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  const hasOverlay = Boolean(overlay);
-  const isInteractive = !isDisabled && !isLoading && !hasOverlay;
-  const isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  const isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  const isEffectivelyDisabled = isDisabled || isLoading;
   const isSelected = propIsSelected && !isDisabled;
   useAutoFocus(localRef, autoFocus);
   return {
@@ -549,15 +548,20 @@ const useButtonBase = ({
     // 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' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && 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' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && 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.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      xcss: overlayStyles
-    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+      xcss: loadingOverlayStyles
+    }, renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected,
+      testId
+    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: loadingLabelId
-    }, ", Loading")),
+    }, LOADING_LABEL)),
     'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
     ...blockEvents(isEffectivelyDisabled, {

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

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

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
 /**
@@ -36,7 +38,6 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -44,7 +45,14 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
@@ -69,7 +77,6 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 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';
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
@@ -27,18 +29,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 = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useDefaultButton({
-    ariaLabel: ariaLabel,
-    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     children: children,
@@ -57,7 +65,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/esm/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__
@@ -37,14 +36,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 = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -55,16 +52,16 @@ var useDefaultButton = function useDefaultButton(_ref) {
     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 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      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/esm/new-button/variants/icon/button.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -38,7 +40,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shape = _ref.shape,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -46,7 +47,15 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     UNSAFE_size = _ref.UNSAFE_size,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = 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.
@@ -73,7 +82,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,
@@ -98,9 +106,8 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       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.createElement(Pressable
-      // Top level props
-      , _extends({}, rest, {
+      return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+        // Top level props
         "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import React, { forwardRef, memo } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
@@ -29,13 +31,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 = _objectWithoutProperties(_ref, _excluded);
+    unsafeRest = _objectWithoutProperties(_ref, _excluded);
+  // @ts-expect-error
+  var _className = unsafeRest.className,
+    _css = unsafeRest.css,
+    _as = unsafeRest.as,
+    _style = unsafeRest.style,
+    saferRest = _objectWithoutProperties(unsafeRest, _excluded2);
+  var rest = getBooleanFF('platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw') ? saferRest : unsafeRest;
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -57,7 +65,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,

package/dist/esm/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,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,
@@ -36,14 +36,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 = useButtonBase({
     analyticsContext: analyticsContext,
@@ -54,7 +52,7 @@ var useIconButton = function useIconButton(_ref) {
     buttonType: buttonType,
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: icon,
       size: UNSAFE_size
@@ -75,16 +73,10 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      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/esm/new-button/variants/shared/content.js

@@ -56,11 +56,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.createElement(Box, {
     as: "span",
-    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(hasOverlay ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
+    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(isLoading ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
   }, children);
 };
 export default Content;