@atlaskit/button 17.17.2 → 17.18.0

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

@@ -14,6 +14,8 @@ import useDefaultButton from './use-default-button';
 const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   analyticsContext,
   appearance,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   autoFocus,
   children,
   iconAfter,
@@ -42,6 +44,8 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
   ...rest
 }, ref) {
   const baseProps = useDefaultButton({
+    ariaLabel,
+    ariaLabelledBy,
     analyticsContext,
     appearance,
     autoFocus,
@@ -67,12 +71,15 @@ const Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function B
     ref,
     shouldFitContainer,
     spacing,
+    testId,
     UNSAFE_iconAfter_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/es2019/new-button/variants/default/link.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
-import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
+import Anchor from '@atlaskit/primitives/anchor';
 import useDefaultButton from './use-default-button';
 const LinkButtonBase = ({
   analyticsContext,
   appearance,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   autoFocus,
   children,
   href,
@@ -32,6 +34,8 @@ const LinkButtonBase = ({
   ...rest
 }, ref) => {
   const baseProps = useDefaultButton({
+    ariaLabel,
+    ariaLabelledBy,
     analyticsContext,
     appearance,
     autoFocus,
@@ -56,12 +60,15 @@ const LinkButtonBase = ({
     ref,
     shouldFitContainer,
     spacing,
+    testId,
     UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size
   });
-  return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
+  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/es2019/new-button/variants/default/use-default-button.js

@@ -14,6 +14,8 @@ import useButtonBase from '../shared/use-button-base';
 const useDefaultButton = ({
   analyticsContext,
   appearance,
+  ariaLabel,
+  ariaLabelledBy,
   autoFocus,
   buttonType,
   children,
@@ -37,6 +39,7 @@ const useDefaultButton = ({
   ref,
   shouldFitContainer,
   spacing,
+  testId,
   UNSAFE_iconAfter_size,
   UNSAFE_iconBefore_size
 }) => {
@@ -45,6 +48,8 @@ const useDefaultButton = ({
     analyticsContext,
     appearance,
     autoFocus,
+    ariaLabel,
+    ariaLabelledBy,
     buttonType,
     children: /*#__PURE__*/React.createElement(Fragment, null, IconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
@@ -83,7 +88,8 @@ const useDefaultButton = ({
       spacing,
       appearance,
       isDisabled,
-      isSelected
+      isSelected,
+      testId
     }) : overlay,
     ref,
     shouldFitContainer,

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

@@ -15,6 +15,7 @@ import useIconButton from './use-icon-button';
 const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Button({
   // Prevent duplicate labels being added.
   'aria-label': preventedAriaLabel,
+  'aria-labelledby': ariaLabelledBy,
   analyticsContext,
   appearance,
   autoFocus,
@@ -51,6 +52,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   const baseProps = useIconButton({
     analyticsContext,
     appearance,
+    ariaLabelledBy,
     autoFocus,
     buttonType: 'button',
     icon,
@@ -73,6 +75,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     ref,
     shape,
     spacing,
+    testId,
     UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -95,6 +98,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }, triggerProps => /*#__PURE__*/React.createElement(Pressable
     // Top level props
     , _extends({}, rest, {
+      "aria-labelledby": baseProps['aria-labelledby'],
       type: type,
       testId: testId,
       componentName: "IconButton",
@@ -160,6 +164,7 @@ const IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }), baseProps.children));
   }
   return /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
+    "aria-labelledby": baseProps['aria-labelledby'],
     ref: baseProps.ref,
     xcss: baseProps.xcss,
     isDisabled: baseProps.isDisabled,

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

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, memo } from 'react';
-import UNSAFE_ANCHOR from '@atlaskit/primitives/anchor';
+import Anchor from '@atlaskit/primitives/anchor';
 import Tooltip from '@atlaskit/tooltip';
 import useIconButton from './use-icon-button';
 const LinkIconButtonBase = ({
   // Prevent duplicate labels being added.
   'aria-label': preventedAriaLabel,
+  'aria-labelledby': ariaLabelledBy,
   analyticsContext,
   appearance,
   autoFocus,
@@ -37,6 +38,7 @@ const LinkIconButtonBase = ({
   const baseProps = useIconButton({
     analyticsContext,
     appearance,
+    ariaLabelledBy,
     autoFocus,
     buttonType: 'link',
     icon,
@@ -58,6 +60,7 @@ const LinkIconButtonBase = ({
     ref,
     shape,
     spacing,
+    testId,
     UNSAFE_size
   });
   if (!isTooltipDisabled) {
@@ -77,9 +80,10 @@ const LinkIconButtonBase = ({
       component: tooltip === null || tooltip === void 0 ? void 0 : tooltip.component,
       hideTooltipOnClick: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnClick,
       hideTooltipOnMouseDown: tooltip === null || tooltip === void 0 ? void 0 : tooltip.hideTooltipOnMouseDown
-    }, triggerProps => /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
+    }, triggerProps => /*#__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,
@@ -151,9 +155,10 @@ const LinkIconButtonBase = ({
       "aria-disabled": baseProps.isDisabled === true ? true : undefined
     }), baseProps.children));
   }
-  return /*#__PURE__*/React.createElement(UNSAFE_ANCHOR
+  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/es2019/new-button/variants/icon/use-icon-button.js

@@ -15,6 +15,8 @@ import useButtonBase from '../shared/use-button-base';
 const useIconButton = ({
   analyticsContext,
   appearance,
+  ariaLabel,
+  ariaLabelledBy,
   autoFocus,
   buttonType,
   icon: Icon,
@@ -38,6 +40,7 @@ const useIconButton = ({
   shape,
   shouldFitContainer,
   spacing,
+  testId,
   UNSAFE_size
 }) => {
   const hasOverlay = Boolean(overlay || isLoading);
@@ -46,6 +49,8 @@ const useIconButton = ({
     analyticsContext,
     appearance,
     autoFocus,
+    ariaLabel,
+    ariaLabelledBy,
     buttonType,
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
@@ -75,7 +80,8 @@ const useIconButton = ({
       spacing,
       appearance,
       isDisabled,
-      isSelected
+      isSelected,
+      testId
     }) : overlay,
     ref,
     shouldFitContainer,

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

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

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

@@ -27,15 +27,16 @@ export default function renderLoadingOverlay({
   appearance,
   spacing,
   isDisabled,
-  isSelected
+  isSelected,
+  testId
 }) {
   return /*#__PURE__*/React.createElement(Spinner, {
-    label: ", Loading",
     size: getIconSpacing(spacing),
     appearance: getSpinnerAppearance({
       appearance,
       isDisabled,
       isSelected
-    })
+    }),
+    testId: testId ? `${testId}--loading-spinner` : undefined
   });
 }

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

@@ -1,12 +1,15 @@
 import React, { Fragment, useRef } from 'react';
+import { uid } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import * as colors from '@atlaskit/theme/colors';
 import { fontSize as getFontSize } from '@atlaskit/theme/constants';
+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';
 const fontSize = getFontSize();
 const buttonStyles = xcss({
   display: 'inline-flex',
@@ -17,10 +20,12 @@ const buttonStyles = xcss({
   alignItems: 'baseline',
   justifyContent: 'center',
   columnGap: 'space.050',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-neutral, ${colors.N20A})`,
   borderRadius: 'border.radius.100',
   borderWidth: 'border.width.0',
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text, ${colors.N500})`,
   flexShrink: 0,
   height: `${32 / fontSize}em`,
@@ -31,6 +36,7 @@ const buttonStyles = xcss({
   verticalAlign: 'middle',
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text, ${colors.N500})`
   }
 });
@@ -51,12 +57,15 @@ const defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text, ${colors.N500})`,
     transitionDuration: '0s, 0.15s'
   },
   ':active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-neutral-pressed, ${colors.B75})`,
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text, ${colors.B400})`,
     transitionDuration: '0s, 0s'
   }
@@ -160,11 +169,13 @@ const subtleInteractiveStyles = xcss({
 });
 const linkStyles = xcss({
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-link, ${colors.B400})`,
   background: "var(--ds-background-neutral-subtle, transparent)",
   textDecoration: 'none',
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-link, ${colors.B300})`,
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
@@ -175,26 +186,31 @@ const linkStyles = xcss({
   },
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-link, ${colors.B400})`
   }
 });
 const subtleLinkStyles = xcss({
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-subtle, ${colors.N200})`,
   background: "var(--ds-background-neutral-subtle, transparent)",
   textDecoration: 'none',
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-subtle, ${colors.N90})`,
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text, ${colors.N400})`,
     background: "var(--ds-background-neutral-subtle, transparent)"
   },
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-subtle, ${colors.N200})`
   }
 });
@@ -221,72 +237,94 @@ const linkDecorationStyles = xcss({
   }
 });
 const disabledStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-disabled, ${colors.N20A})`,
   // @ts-expect-error
   color: "var(--ds-text-disabled, #091E424F)",
   ':hover': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-disabled, ${colors.N20A})`,
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
   },
   ':active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-disabled, ${colors.N20A})`,
     // @ts-expect-error
     color: "var(--ds-text-disabled, #091E424F)"
   }
 });
 const selectedStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-selected, ${colors.N700})`,
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-selected, ${colors.N20})`,
   ':visited': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`
   }
 });
 const selectedInteractiveStyles = xcss({
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected-hovered, ${colors.N700})`
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected-pressed, ${colors.N700})`
   }
 });
 
 // TODO: Remove me once we kill color fallbacks
 const selectedWarningStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-selected, ${colors.Y400})`,
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-selected, ${colors.N800})`,
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected, ${colors.Y400})`
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected, ${colors.Y400})`
   }
 });
 
 // TODO: Remove me once we kill color fallbacks
 const selectedDangerStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-selected, ${colors.R500})`,
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-selected, ${colors.N20})`,
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected, ${colors.R500})`
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     background: `var(--ds-background-selected, ${colors.R500})`
   }
 });
@@ -295,14 +333,17 @@ const selectedDangerStyles = xcss({
 const selectedDiscoveryStyles = xcss({
   background: "var(--ds-background-selected, #403294)",
   // @ts-expect-error
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   color: `var(--ds-text-selected, ${colors.N20})`,
   ':hover': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
     background: "var(--ds-background-selected, #403294)"
   },
   ':active': {
     // @ts-expect-error
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     color: `var(--ds-text-selected, ${colors.N20})`,
     background: "var(--ds-background-selected, #403294)"
   }
@@ -420,10 +461,17 @@ const useButtonBase = ({
   overlay,
   ref,
   shouldFitContainer = false,
-  spacing: propSpacing = 'default'
+  spacing: propSpacing = 'default',
+  ariaLabel,
+  ariaLabelledBy
 }) => {
   const localRef = useRef(null);
   const splitButtonContext = useSplitButtonContext();
+  // TODO: Use React 18's useId() hook when we update.
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  const loadingLabelId = uid({
+    ariaLabelledBy
+  });
   const isSplitButton = Boolean(splitButtonContext);
   const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
   const appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
@@ -447,7 +495,11 @@ const useButtonBase = ({
     children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
       as: "span",
       xcss: overlayStyles
-    }, overlay) : null),
+    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+      id: loadingLabelId
+    }, ", Loading")),
+    'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
+    'aria-labelledby': isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
     ...blockEvents(isEffectivelyDisabled, {
       onClick,
       onMouseDownCapture,

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import ButtonBase from './shared/button-base';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 import GlobalTheme from '@atlaskit/theme/components';
 import ButtonBase from '../shared/button-base';
 import getIsOnlySingleIcon from '../shared/get-is-only-single-icon';

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.2",
+    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