@atlaskit/button 17.22.2 → 18.0.0

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

@@ -12,6 +12,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';
 var buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -284,6 +285,7 @@ var linkDecorationStyles = xcss({
   }
 });
 var 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, ".concat(colors.N20A, ")"),
   // @ts-expect-error
@@ -439,12 +441,9 @@ var circleStyles = xcss({
 var fullWidthStyles = xcss({
   width: '100%'
 });
-var loadingOverlayStyles = xcss({
+var loadingStyles = xcss({
   cursor: 'progress'
 });
-var nonInteractiveStyles = xcss({
-  cursor: 'not-allowed'
-});
 var iconButtonStyles = xcss({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
@@ -472,7 +471,7 @@ var navigationSplitButtonStyles = xcss({
   paddingInlineEnd: 'space.075',
   paddingInlineStart: 'space.075'
 });
-var overlayStyles = xcss({
+var loadingOverlayStyles = xcss({
   display: 'flex',
   position: 'absolute',
   alignItems: 'center',
@@ -526,12 +525,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 = useRef(null);
@@ -547,9 +546,9 @@ var useButtonBase = function useButtonBase(_ref) {
   var appearance = 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;
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
@@ -560,15 +559,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' && (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: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      testId: testId
+    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: loadingLabelId
-    }, ", Loading")),
+    }, LOADING_LABEL)),
     'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
   }, blockEvents(isEffectivelyDisabled, {

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

@@ -125,7 +125,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/types/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, 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, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, 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, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types/new-button/variants/default/use-default-button.d.ts

@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, 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, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, 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, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/shared/content.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
-    hasOverlay: boolean;
+    isLoading: boolean;
     position?: 'before' | 'after';
 };
 /**
@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
 export default Content;

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -19,7 +19,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     isLoading?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'testId'> & ControlledEvents<TagName>;
 type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: XCSS | Array<XCSS | false | undefined>;
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types/new-button/variants/types.d.ts

@@ -16,12 +16,6 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
-    /**
-     * @deprecated This is no longer supported and will be removed in a future major release. It only existed to support loading spinners, which can now be achieved with the `isLoading` prop.
-     *
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
-     */
-    overlay?: React.ReactNode;
     /**
      * Disable the button to prevent user interaction.
      */

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, 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, ...rest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, 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, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts

@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, 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, ...rest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, 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, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types-ts4.5/new-button/variants/shared/content.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
-    hasOverlay: boolean;
+    isLoading: boolean;
     position?: 'before' | 'after';
 };
 /**
@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
 export default Content;

package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts

@@ -19,7 +19,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     isLoading?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'testId'> & ControlledEvents<TagName>;
 type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: XCSS | Array<XCSS | false | undefined>;
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types-ts4.5/new-button/variants/types.d.ts

@@ -16,12 +16,6 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
-    /**
-     * @deprecated This is no longer supported and will be removed in a future major release. It only existed to support loading spinners, which can now be achieved with the `isLoading` prop.
-     *
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
-     */
-    overlay?: React.ReactNode;
     /**
      * Disable the button to prevent user interaction.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/button",
-	"version": "17.22.2",
+	"version": "18.0.0",
 	"description": "A button triggers an event or action. They let users know what will happen next.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -138,7 +138,7 @@
 		"@atlaskit/primitives": "^8.0.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/tokens": "^1.52.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -204,6 +204,9 @@
 		"platform.design-system-team.component-visual-refresh_t8zbo": {
 			"type": "boolean"
 		},
+		"platform.design-system-team.remove-unsafe-spread-from-new-button_a2xhw": {
+			"type": "boolean"
+		},
 		"platform.design-system-team.button-render-prop-fix_lyo55": {
 			"type": "boolean"
 		}