@atlaskit/button 17.9.0 → 17.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/button
 
+## 17.10.0
+
+### Minor Changes
+
+- [#88036](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88036) [`c1d62ce0679e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1d62ce0679e) - - Fixed a bug in new loading buttons where the spinner color was incorrect in selected state.
+  - Fixed a bug where the `isLoading` prop on new buttons was mistakenly added to unsupported link buttons.
+  - New loading buttons now display a loading cursor (`cursor: progress`), rather than a disabled cursor (`cursor: not-allowed`).
+
+### Patch Changes
+
+- [#87335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87335) [`4bb74bb023d4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4bb74bb023d4) - Added explicit `text-decoration` styles to new button focus states. This ensures button styles are not interfered with by global styles.
+
 ## 17.9.0
 
 ### Minor Changes

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

@@ -73,6 +73,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

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

@@ -62,6 +62,7 @@ var useIconButton = function useIconButton(_ref) {
     }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     isIconButton: true,
     isCircle: isCircle,

package/dist/cjs/new-button/variants/shared/loading-overlay.js

@@ -21,12 +21,9 @@ function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected;
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

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

@@ -49,6 +49,8 @@ var useButtonBase = function useButtonBase(_ref) {
     buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -104,6 +106,7 @@ var useButtonBase = function useButtonBase(_ref) {
       appearance: appearance,
       spacing: spacing,
       isDisabled: isDisabled,
+      isLoading: isLoading,
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isActiveOverSelected: isActiveOverSelected,
@@ -117,7 +120,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

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

@@ -90,6 +90,7 @@ function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isLoading = _ref3.isLoading,
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
@@ -162,8 +163,8 @@ function getXCSS(_ref3) {
     width: width,
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, combinedBaseColorStyles), isDisabled || hasOverlay ? {
-    cursor: 'not-allowed'
+  }, combinedBaseColorStyles), isDisabled || hasOverlay || isLoading ? {
+    cursor: isLoading ? 'progress' : 'not-allowed'
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -187,6 +188,11 @@ function getXCSS(_ref3) {
     })), {}, {
       // background, box-shadow
       transitionDuration: '0s, 0s'
-    })
+    }),
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    }
   }, splitButtonStyles));
 }

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

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

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

@@ -63,6 +63,7 @@ const useDefaultButton = ({
     }))),
     interactionName,
     isDisabled,
+    isLoading,
     isSelected,
     onClick,
     onMouseDownCapture,

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

@@ -56,6 +56,7 @@ const useIconButton = ({
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName,
     isDisabled,
+    isLoading,
     isSelected,
     isIconButton: true,
     isCircle,

package/dist/es2019/new-button/variants/shared/loading-overlay.js

@@ -15,12 +15,9 @@ function getSpinnerAppearance({
   isDisabled,
   isSelected
 }) {
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

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

@@ -33,6 +33,7 @@ const useButtonBase = ({
   autoFocus = false,
   buttonType,
   isDisabled: propIsDisabled = false,
+  isLoading = false,
   isSelected = false,
   // TODO: Separate Icon Button styling from button base
   isIconButton = false,
@@ -83,6 +84,7 @@ const useButtonBase = ({
     appearance,
     spacing,
     isDisabled,
+    isLoading,
     isSelected,
     isHighlighted,
     isActiveOverSelected,
@@ -95,7 +97,7 @@ const useButtonBase = ({
     hasIconAfter,
     isSplit: isSplitButton,
     isNavigationSplit: isNavigationSplitButton
-  }), [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }), [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   const isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return {
     ref: setRef,

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

@@ -80,6 +80,7 @@ export function getXCSS({
   spacing,
   isDisabled,
   isSelected,
+  isLoading,
   isHighlighted,
   isActiveOverSelected,
   isIconButton,
@@ -157,8 +158,8 @@ export function getXCSS({
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center',
     ...combinedBaseColorStyles,
-    ...(isDisabled || hasOverlay ? {
-      cursor: 'not-allowed'
+    ...(isDisabled || hasOverlay || isLoading ? {
+      cursor: isLoading ? 'progress' : 'not-allowed'
     } : {}),
     ':hover': {
       ...getColors({
@@ -185,6 +186,11 @@ export function getXCSS({
       // background, box-shadow
       transitionDuration: '0s, 0s'
     },
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    },
     ...splitButtonStyles
   });
 }

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

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

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

@@ -63,6 +63,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     }))),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     onClick: onClick,
     onMouseDownCapture: onMouseDownCapture,

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

@@ -55,6 +55,7 @@ var useIconButton = function useIconButton(_ref) {
     }), /*#__PURE__*/React.createElement(VisuallyHidden, null, label)),
     interactionName: interactionName,
     isDisabled: isDisabled,
+    isLoading: isLoading,
     isSelected: isSelected,
     isIconButton: true,
     isCircle: isCircle,

package/dist/esm/new-button/variants/shared/loading-overlay.js

@@ -14,12 +14,9 @@ function getSpinnerAppearance(_ref) {
   var appearance = _ref.appearance,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected;
-  if (isDisabled) {
+  if (isDisabled || isSelected) {
     return 'inherit';
   }
-  if (isSelected) {
-    return 'invert';
-  }
   if (appearance === 'primary' || appearance === 'danger') {
     return 'invert';
   }

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

@@ -39,6 +39,8 @@ var useButtonBase = function useButtonBase(_ref) {
     buttonType = _ref.buttonType,
     _ref$isDisabled = _ref.isDisabled,
     propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -94,6 +96,7 @@ var useButtonBase = function useButtonBase(_ref) {
       appearance: appearance,
       spacing: spacing,
       isDisabled: isDisabled,
+      isLoading: isLoading,
       isSelected: isSelected,
       isHighlighted: isHighlighted,
       isActiveOverSelected: isActiveOverSelected,
@@ -107,7 +110,7 @@ var useButtonBase = function useButtonBase(_ref) {
       isSplit: isSplitButton,
       isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
+  }, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

package/dist/esm/new-button/variants/shared/xcss.js

@@ -82,6 +82,7 @@ export function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isLoading = _ref3.isLoading,
     isHighlighted = _ref3.isHighlighted,
     isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
@@ -154,8 +155,8 @@ export function getXCSS(_ref3) {
     width: width,
     // justifyContent required for shouldFitContainer buttons with an icon inside
     justifyContent: 'center'
-  }, combinedBaseColorStyles), isDisabled || hasOverlay ? {
-    cursor: 'not-allowed'
+  }, combinedBaseColorStyles), isDisabled || hasOverlay || isLoading ? {
+    cursor: isLoading ? 'progress' : 'not-allowed'
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
@@ -179,6 +180,11 @@ export function getXCSS(_ref3) {
     })), {}, {
       // background, box-shadow
       transitionDuration: '0s, 0s'
-    })
+    }),
+    ':focus': {
+      // Required due to Jira's AUI CSS reset
+      // See https://product-fabric.atlassian.net/browse/DSP-15687
+      textDecoration: !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? 'underline' : 'none'
+    }
   }, splitButtonStyles));
 }

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

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

package/dist/types/containers/button-group.d.ts

@@ -4,11 +4,11 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons
+     * The appearance to apply to all buttons.
      */
     appearance?: Appearance;
     /**
-     * The buttons to render inside the Button Group
+     * The buttons to render inside the button group.
      */
     children?: React.ReactNode;
     /**
@@ -16,12 +16,12 @@ export type ButtonGroupProps = {
      */
     testId?: string;
     /**
-     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Refers to an `aria-label` attribute. Sets an accessible name for the button group wrapper to announce it to users of assistive technology.
      * Usage of either this, or the `titleId` attribute is strongly recommended.
      */
     label?: string;
     /**
-     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * ID referenced by the button group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group-button title element.
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;

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

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

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

@@ -1,9 +1,5 @@
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * The button style variation.
      */

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

@@ -16,6 +16,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     appearance?: Appearance;
     children: React.ReactNode;
     spacing?: Spacing;
+    isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
@@ -36,5 +37,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -7,6 +7,7 @@ export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
+    isLoading: boolean;
     isSelected: boolean;
     isHighlighted: boolean;
     isActiveOverSelected: boolean;
@@ -29,4 +30,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isLoading, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

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

@@ -67,6 +67,10 @@ export type AdditionalButtonVariantProps = {
      * The button style variation.
      */
     appearance?: ButtonAppearance;
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
 };
 /**
  * Combines common button props with additional HTML attributes

package/dist/types/old-button/types.d.ts

@@ -5,85 +5,85 @@ export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type BaseOwnProps = {
     /**
-     * The base styling to apply to the button
+     * The base styling to apply to the button.
      */
     appearance?: Appearance;
     /**
-     * Set the button to autofocus on mount
+     * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
     /**
-     * Add a classname to the button
+     * Add a classname to the button.
      */
     className?: string;
     /**
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
      */
     overlay?: React.ReactNode;
     /**
-     * Provides a url for buttons being used as a link
+     * Provides a URL that's used when the button is a link styled as a button.
      */
     href?: string;
     /**
-     * Places an icon within the button, after the button's text
+     * Places an icon within the button, after the button's text.
      */
     iconAfter?: React.ReactChild;
     /**
-     * Places an icon within the button, before the button's text
+     * Places an icon within the button, before the button's text.
      */
     iconBefore?: React.ReactChild;
     /**
-     * Set if the button is disabled
+     * Set if the button is disabled.
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Change the style to indicate the button is selected.
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur
+     * Handler to be called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Handler to be called on focus
+     * Handler to be called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Set the amount of padding in the button
+     * Set the amount of padding in the button.
      */
     spacing?: Spacing;
     /**
-     * Pass target down to a link within the button component, if a href is provided
+     * Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.
      */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
-     * Pass type down to a button
+     * Pass type down to the button.
      */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /**
-     * Option to fit button width to its parent width
+     * Option to fit button width to its parent width.
      */
     shouldFitContainer?: boolean;
     /**
-     * Text content to be rendered in the button
+     * Text content to be rendered in the button.
      */
     children?: React.ReactNode;
     /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
     /**
      * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from button
+     * Additional information to be included in the `context` of analytics events that come from button.
      */
     analyticsContext?: Record<string, any>;
 };

package/dist/types-ts4.5/containers/button-group.d.ts

@@ -4,11 +4,11 @@ import { jsx } from '@emotion/react';
 import { Appearance } from '../old-button/types';
 export type ButtonGroupProps = {
     /**
-     * The appearance to apply to all buttons
+     * The appearance to apply to all buttons.
      */
     appearance?: Appearance;
     /**
-     * The buttons to render inside the Button Group
+     * The buttons to render inside the button group.
      */
     children?: React.ReactNode;
     /**
@@ -16,12 +16,12 @@ export type ButtonGroupProps = {
      */
     testId?: string;
     /**
-     * Refers to an aria-label attribute. Sets an accessible name for ButtonGroup wrapper to announce it to users of assistive technology.
+     * Refers to an `aria-label` attribute. Sets an accessible name for the button group wrapper to announce it to users of assistive technology.
      * Usage of either this, or the `titleId` attribute is strongly recommended.
      */
     label?: string;
     /**
-     * Id referenced by the ButtonGroup wrapper's aria-labelledby attribute. This id should be assigned to the group-button title element.
+     * ID referenced by the button group wrapper's `aria-labelledby` attribute. This ID should be assigned to the group-button title element.
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;

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

@@ -1,10 +1,6 @@
 /// <reference types="react" />
 import { type ButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonDefaultButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * Text content to be rendered in the button. Required so that screen readers always have an accessible label provided for the button.
      */

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

@@ -1,9 +1,5 @@
 import { type IconButtonAppearance, type IconButtonSpacing, type IconProp, type IconSize } from '../types';
 export type CommonIconButtonProps = {
-    /**
-     * Conditionally show a spinner over the top of a button
-     */
-    isLoading?: boolean;
     /**
      * The button style variation.
      */

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

@@ -16,6 +16,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     appearance?: Appearance;
     children: React.ReactNode;
     spacing?: Spacing;
+    isLoading?: boolean;
 } & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: ReturnType<typeof xcss>;
@@ -36,5 +37,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

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

@@ -7,6 +7,7 @@ export type GetXCSSArgs = {
     appearance: Appearance;
     spacing: Spacing;
     isDisabled: boolean;
+    isLoading: boolean;
     isSelected: boolean;
     isHighlighted: boolean;
     isActiveOverSelected: boolean;
@@ -29,4 +30,4 @@ export type GetXCSSArgs = {
      */
     isNavigationSplit: boolean;
 };
-export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;
+export declare function getXCSS({ appearance, spacing, isDisabled, isSelected, isLoading, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, isLink, isSplit, isNavigationSplit, hasOverlay, hasIconBefore, hasIconAfter, }: GetXCSSArgs): ReturnType<typeof xcss>;

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

@@ -67,6 +67,10 @@ export type AdditionalButtonVariantProps = {
      * The button style variation.
      */
     appearance?: ButtonAppearance;
+    /**
+     * Conditionally show a spinner over the top of a button
+     */
+    isLoading?: boolean;
 };
 /**
  * Combines common button props with additional HTML attributes

package/dist/types-ts4.5/old-button/types.d.ts

@@ -5,85 +5,85 @@ export type Spacing = 'compact' | 'default' | 'none';
 type Combine<First, Second> = Omit<First, keyof Second> & Second;
 export type BaseOwnProps = {
     /**
-     * The base styling to apply to the button
+     * The base styling to apply to the button.
      */
     appearance?: Appearance;
     /**
-     * Set the button to autofocus on mount
+     * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
     /**
-     * Add a classname to the button
+     * Add a classname to the button.
      */
     className?: string;
     /**
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner
+     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
      */
     overlay?: React.ReactNode;
     /**
-     * Provides a url for buttons being used as a link
+     * Provides a URL that's used when the button is a link styled as a button.
      */
     href?: string;
     /**
-     * Places an icon within the button, after the button's text
+     * Places an icon within the button, after the button's text.
      */
     iconAfter?: React.ReactChild;
     /**
-     * Places an icon within the button, before the button's text
+     * Places an icon within the button, before the button's text.
      */
     iconBefore?: React.ReactChild;
     /**
-     * Set if the button is disabled
+     * Set if the button is disabled.
      */
     isDisabled?: boolean;
     /**
-     * Change the style to indicate the button is selected
+     * Change the style to indicate the button is selected.
      */
     isSelected?: boolean;
     /**
-     * Handler to be called on blur
+     * Handler to be called on blur.
      */
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
      */
     onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Handler to be called on focus
+     * Handler to be called on focus.
      */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Set the amount of padding in the button
+     * Set the amount of padding in the button.
      */
     spacing?: Spacing;
     /**
-     * Pass target down to a link within the button component, if a href is provided
+     * Pass target down to the button. If a href is provided, this will be a semantic link styled as a button.
      */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
     /**
-     * Pass type down to a button
+     * Pass type down to the button.
      */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     /**
-     * Option to fit button width to its parent width
+     * Option to fit button width to its parent width.
      */
     shouldFitContainer?: boolean;
     /**
-     * Text content to be rendered in the button
+     * Text content to be rendered in the button.
      */
     children?: React.ReactNode;
     /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
     component?: React.ComponentType<React.AllHTMLAttributes<HTMLElement>> | React.ElementType;
     /**
      * An optional name used to identify this component to press listeners. For example, interaction tracing. For more information,
-     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration)
+     * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
     /**
-     * Additional information to be included in the `context` of analytics events that come from button
+     * Additional information to be included in the `context` of analytics events that come from button.
      */
     analyticsContext?: Record<string, any>;
 };

package/extract-react-types/new-button/variants/default/{common-props.tsx → common-default-button-props.tsx}

@@ -4,7 +4,7 @@ import {
   type SupportedElements,
 } from '../../../../src/new-button/variants/types';
 
-export default function CommonProps(
+export default function CommonDefaultButtonProps(
   props: CommonButtonProps<SupportedElements> & CommonDefaultButtonProps,
 ) {
   return null;

package/extract-react-types/new-button/variants/icon-button/icon-button-props.tsx

@@ -0,0 +1,5 @@
+import { AdditionalButtonVariantProps } from '../../../../src/new-button/variants/types';
+
+export default function IconButtonProps(props: AdditionalButtonVariantProps) {
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/button",
-  "version": "17.9.0",
+  "version": "17.10.0",
   "description": "A button triggers an event or action. They let users know what will happen next.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"