@atlaskit/button 17.17.3 → 17.18.0

package/dist/es2019/old-button/custom-theme-button/theme.js

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import { createTheme } from '@atlaskit/theme/components';
 import { getCss } from '../shared/css';
 const stateToSelectorMap = {

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /** @jsx jsx */
 import React, { useCallback, useContext, useEffect, useRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
@@ -114,7 +116,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.17.3",
+    packageVersion: "17.18.0",
     analyticsData: analyticsContext
   });
 
@@ -134,6 +136,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
 
   // we are 'disabling' input with a button when there is an overlay
   const hasOverlay = Boolean(overlay);
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   const fadeStyles = css(getFadingCss({
     hasOverlay
   }));
@@ -177,13 +180,17 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
   }, blockEvents({
     isInteractive
   })), iconBefore ? jsx("span", {
-    css: [fadeStyles, getIconStyle({
+    css: [fadeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    getIconStyle({
       spacing
     }), getSpacingFix(children, iconBeforeSpacingFixStyle)]
   }, iconBefore) : null, getChildren(children, [fadeStyles, getContentStyle({
     spacing
   })]), iconAfter ? jsx("span", {
-    css: [fadeStyles, getIconStyle({
+    css: [fadeStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    getIconStyle({
       spacing
     }), getSpacingFix(children, iconAfterSpacingFixStyle)]
   }, iconAfter) : null, overlay ? jsx("span", {

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

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fontSize as getFontSize,
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -198,7 +199,7 @@ export function getIconStyle({
   return css({
     display: 'flex',
     // icon size cannot grow and shrink
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.icon,
     flexGrow: 0,
     flexShrink: 0,
@@ -214,7 +215,7 @@ export function getContentStyle({
   spacing
 }) {
   return css({
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     margin: spacing === 'none' ? 0 : innerMargin.content,
     // content can grow and shrink
     flexGrow: 1,
@@ -229,6 +230,7 @@ export function getFadingCss({
   hasOverlay
 }) {
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     opacity: hasOverlay ? 0 : 1,
     transition: 'opacity 0.3s'
   });

package/dist/esm/containers/button-group.js

@@ -1,10 +1,12 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 var buttonGroupStyles = css({
   display: 'inline-flex',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> *': {
     flex: '1 0 auto'
   }

package/dist/esm/new-button/containers/split-button/split-button.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
 var fontSize = getFontSize();
@@ -17,9 +18,11 @@ var baseDividerStyles = css({
   zIndex: 2
 });
 var defaultDividerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: heights.default
 });
 var compactDividerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: heights.compact
 });
 var dividerDisabledStyles = css({
@@ -69,14 +72,14 @@ var splitButtonStyles = css({
   whiteSpace: 'nowrap'
 });
 var primaryButtonStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'button,a': {
     borderEndEndRadius: 0,
     borderStartEndRadius: 0
   }
 });
 var secondaryButtonStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'button,a': {
     borderEndStartRadius: 0,
     borderStartStartRadius: 0

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "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", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
 import React from 'react';
 import Pressable from '@atlaskit/primitives/pressable';
 import useDefaultButton from './use-default-button';
@@ -16,6 +16,8 @@ import useDefaultButton from './use-default-button';
 var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     autoFocus = _ref.autoFocus,
     children = _ref.children,
     iconAfter = _ref.iconAfter,
@@ -44,6 +46,8 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseProps = useDefaultButton({
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -69,12 +73,15 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size: UNSAFE_iconBefore_size
   });
   return /*#__PURE__*/React.createElement(Pressable
   // TODO: Remove spread props
   , _extends({}, rest, {
+    "aria-label": baseProps['aria-label'],
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     isDisabled: baseProps.isDisabled,

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

@@ -1,12 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "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", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"];
 import React, { forwardRef, memo } from 'react';
 import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 var LinkButtonBase = function LinkButtonBase(_ref, ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     autoFocus = _ref.autoFocus,
     children = _ref.children,
     href = _ref.href,
@@ -33,6 +35,8 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseProps = useDefaultButton({
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
@@ -57,12 +61,15 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     UNSAFE_iconAfter_size: UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size: UNSAFE_iconBefore_size
   });
   return /*#__PURE__*/React.createElement(Anchor
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, rest, {
+    "aria-label": baseProps['aria-label'],
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     onClick: baseProps.onClick,

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

@@ -14,6 +14,8 @@ import useButtonBase from '../shared/use-button-base';
 var useDefaultButton = function useDefaultButton(_ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     children = _ref.children,
@@ -38,6 +40,7 @@ var useDefaultButton = function useDefaultButton(_ref) {
     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);
@@ -45,6 +48,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
     children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
@@ -83,7 +88,8 @@ var useDefaultButton = function useDefaultButton(_ref) {
       spacing: spacing,
       appearance: appearance,
       isDisabled: isDisabled,
-      isSelected: isSelected
+      isSelected: isSelected,
+      testId: testId
     }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "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", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"];
 import React from 'react';
 import Pressable from '@atlaskit/primitives/pressable';
 import Tooltip from '@atlaskit/tooltip';
@@ -16,6 +16,7 @@ import useIconButton from './use-icon-button';
  */
 var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
@@ -53,6 +54,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'button',
     icon: icon,
@@ -75,6 +77,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     ref: ref,
     shape: shape,
     spacing: spacing,
+    testId: testId,
     UNSAFE_size: UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -98,6 +101,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       return /*#__PURE__*/React.createElement(Pressable
       // Top level props
       , _extends({}, rest, {
+        "aria-labelledby": baseProps['aria-labelledby'],
         type: type,
         testId: testId,
         componentName: "IconButton",
@@ -164,6 +168,7 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     });
   }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     isDisabled: baseProps.isDisabled,

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

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "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", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"];
 import React, { forwardRef, memo } from 'react';
 import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var preventedAriaLabel = _ref['aria-label'],
+    ariaLabelledBy = _ref['aria-labelledby'],
     analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
     autoFocus = _ref.autoFocus,
@@ -38,6 +39,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   var baseProps = useIconButton({
     analyticsContext: analyticsContext,
     appearance: appearance,
+    ariaLabelledBy: ariaLabelledBy,
     autoFocus: autoFocus,
     buttonType: 'link',
     icon: icon,
@@ -59,6 +61,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     ref: ref,
     shape: shape,
     spacing: spacing,
+    testId: testId,
     UNSAFE_size: UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -82,6 +85,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
       return /*#__PURE__*/React.createElement(Anchor
       // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
       , _extends({}, rest, {
+        "aria-labelledby": baseProps['aria-labelledby'],
         testId: testId,
         componentName: "LinkIconButton",
         analyticsContext: analyticsContext,
@@ -157,6 +161,7 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
   return /*#__PURE__*/React.createElement(Anchor
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , _extends({}, rest, {
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     onClick: baseProps.onClick,

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

@@ -15,6 +15,8 @@ import useButtonBase from '../shared/use-button-base';
 var useIconButton = function useIconButton(_ref) {
   var analyticsContext = _ref.analyticsContext,
     appearance = _ref.appearance,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy,
     autoFocus = _ref.autoFocus,
     buttonType = _ref.buttonType,
     Icon = _ref.icon,
@@ -38,6 +40,7 @@ var useIconButton = function useIconButton(_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';
@@ -45,6 +48,8 @@ var useIconButton = function useIconButton(_ref) {
     analyticsContext: analyticsContext,
     appearance: appearance,
     autoFocus: autoFocus,
+    ariaLabel: ariaLabel,
+    ariaLabelledBy: ariaLabelledBy,
     buttonType: buttonType,
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
@@ -74,7 +79,8 @@ var useIconButton = function useIconButton(_ref) {
       spacing: spacing,
       appearance: appearance,
       isDisabled: isDisabled,
-      isSelected: isSelected
+      isSelected: isSelected,
+      testId: testId
     }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,

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

@@ -0,0 +1 @@
+export var LOADING_LABEL = ', Loading';

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

@@ -26,14 +26,15 @@ export default function renderLoadingOverlay(_ref2) {
   var appearance = _ref2.appearance,
     spacing = _ref2.spacing,
     isDisabled = _ref2.isDisabled,
-    isSelected = _ref2.isSelected;
+    isSelected = _ref2.isSelected,
+    testId = _ref2.testId;
   return /*#__PURE__*/React.createElement(Spinner, {
-    label: ", Loading",
     size: getIconSpacing(spacing),
     appearance: getSpinnerAppearance({
       appearance: appearance,
       isDisabled: isDisabled,
       isSelected: isSelected
-    })
+    }),
+    testId: testId ? "".concat(testId, "--loading-spinner") : undefined
   });
 }