@atlaskit/button 17.8.0 → 17.10.0

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

@@ -15,18 +15,14 @@ var values = {
       hover: 'color.background.neutral.hovered',
       active: 'color.background.neutral.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
     },
     primary: {
       default: 'color.background.brand.bold',
       hover: 'color.background.brand.bold.hovered',
       active: 'color.background.brand.bold.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")")
     },
     warning: {
       default: 'color.background.warning.bold',
@@ -34,8 +30,14 @@ var values = {
       active: 'color.background.warning.bold.pressed',
       // @ts-expect-error
       disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.Y400, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
+        // @ts-expect-error
+        hover: "var(--ds-background-selected-hovered, ".concat(colors.Y400, ")"),
+        // @ts-expect-error
+        active: "var(--ds-background-selected-pressed, ".concat(colors.Y400, ")")
+      }
     },
     danger: {
       default: 'color.background.danger.bold',
@@ -43,27 +45,35 @@ var values = {
       active: 'color.background.danger.bold.pressed',
       // @ts-expect-error
       disabled: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.R500, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-background-selected, ".concat(colors.R500, ")"),
+        // @ts-expect-error
+        hover: "var(--ds-background-selected-hovered, ".concat(colors.R500, ")"),
+        // @ts-expect-error
+        active: "var(--ds-background-selected-pressed, ".concat(colors.R500, ")")
+      }
     },
     link: {
-      default: 'color.background.neutral.subtle',
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      default: 'color.background.neutral.subtle'
     },
     subtle: {
       default: 'color.background.neutral.subtle',
       hover: 'color.background.neutral.subtle.hovered',
       active: 'color.background.neutral.subtle.pressed',
       // @ts-expect-error
-      disabled: "var(--ds-background-neutral-subtle, none)",
-      // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      disabled: "var(--ds-background-neutral-subtle, none)"
     },
     'subtle-link': {
-      default: 'color.background.neutral.subtle',
+      default: 'color.background.neutral.subtle'
+    },
+    selected: {
+      // @ts-expect-error
+      default: "var(--ds-background-selected, ".concat(colors.N700, ")"),
+      // @ts-expect-error
+      hover: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
       // @ts-expect-error
-      selected: "var(--ds-background-selected, ".concat(colors.N700, ")")
+      active: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
     }
   },
   color: {
@@ -72,45 +82,41 @@ var values = {
       default: "var(--ds-text, ".concat(colors.N500, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     primary: {
       default: 'color.text.inverse',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     warning: {
       default: 'color.text.warning.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N800, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-text-selected, ".concat(colors.N800, ")")
+      }
     },
     danger: {
       default: 'color.text.inverse',
       disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N0, ")")
+      selected: {
+        // @ts-expect-error
+        default: "var(--ds-text-selected, ".concat(colors.N0, ")")
+      }
     },
     link: {
       default: 'color.link',
       // @ts-expect-error
       hover: "var(--ds-link, ".concat(colors.B300, ")"),
       active: 'color.link.pressed',
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     subtle: {
       // @ts-expect-error
       default: "var(--ds-text, ".concat(colors.N500, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.B400, ")"),
-      disabled: 'color.text.disabled',
-      // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      disabled: 'color.text.disabled'
     },
     'subtle-link': {
       // @ts-expect-error
@@ -119,9 +125,11 @@ var values = {
       hover: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
       // @ts-expect-error
       active: "var(--ds-text, ".concat(colors.N400, ")"),
-      disabled: 'color.text.disabled',
+      disabled: 'color.text.disabled'
+    },
+    selected: {
       // @ts-expect-error
-      selected: "var(--ds-text-selected, ".concat(colors.N20, ")")
+      default: "var(--ds-text-selected, ".concat(colors.N20, ")")
     }
   }
 };

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

@@ -58,21 +58,23 @@ function getColors(_ref2) {
     isHighlighted = _ref2.isHighlighted,
     isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
+  var showSelectedState = (isSelected || isHighlighted) && !isDisabled && !isActiveOverSelected;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
+  key = showSelectedState && isActiveOverSelected ? 'active' : key;
+
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
     backgroundColor: getColor({
-      group: colors.background[appearance],
+      group: showSelectedState && colors.background[appearance]['selected'] || colors.background[showSelectedState ? 'selected' : appearance],
       key: key
     }),
-    color: "".concat(getColor({
-      group: colors.color[appearance],
+    color: getColor({
+      group: showSelectedState && colors.color[appearance]['selected'] || colors.color[showSelectedState ? 'selected' : appearance],
       key: key
-    }))
+    })
   };
 }
 export function getXCSS(_ref3) {
@@ -80,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,
@@ -152,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,
@@ -177,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.8.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/entry-points/standard-button.d.ts

@@ -1,7 +1,2 @@
-/**
- * Must import '@emotion/core' in order to resolve type error
- * https://product-fabric.atlassian.net/browse/DSP-3222
- */
-import '@emotion/react';
 export { default } from '../old-button/button';
 export type { ButtonProps } from '../old-button/button';

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/colors.d.ts

@@ -5,10 +5,12 @@ export type ColorGroup<T extends BackgroundColor | TextColor> = {
     hover?: T;
     active?: T;
     disabled?: T;
-    selected?: T;
 };
-export type ColorPreset<T extends BackgroundColor | TextColor> = {
-    [key in Appearance]: ColorGroup<T>;
+export type ColorGroupWithSelected<T extends BackgroundColor | TextColor> = ColorGroup<T> & {
+    selected?: ColorGroup<T>;
+};
+export type ColorPreset<T extends BackgroundColor | TextColor> = Record<Appearance, ColorGroupWithSelected<T>> & {
+    selected: ColorGroup<T>;
 };
 type Values = {
     background: ColorPreset<BackgroundColor>;

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/entry-points/standard-button.d.ts

@@ -1,7 +1,2 @@
-/**
- * Must import '@emotion/core' in order to resolve type error
- * https://product-fabric.atlassian.net/browse/DSP-3222
- */
-import '@emotion/react';
 export { default } from '../old-button/button';
 export type { ButtonProps } from '../old-button/button';

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/colors.d.ts

@@ -5,10 +5,12 @@ export type ColorGroup<T extends BackgroundColor | TextColor> = {
     hover?: T;
     active?: T;
     disabled?: T;
-    selected?: T;
 };
-export type ColorPreset<T extends BackgroundColor | TextColor> = {
-    [key in Appearance]: ColorGroup<T>;
+export type ColorGroupWithSelected<T extends BackgroundColor | TextColor> = ColorGroup<T> & {
+    selected?: ColorGroup<T>;
+};
+export type ColorPreset<T extends BackgroundColor | TextColor> = Record<Appearance, ColorGroupWithSelected<T>> & {
+    selected: ColorGroup<T>;
 };
 type Values = {
     background: ColorPreset<BackgroundColor>;

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