@atlaskit/button 20.4.1 → 20.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/button
 
+## 20.5.0
+
+### Minor Changes
+
+- [#110533](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110533)
+  [`9856bf5d3faeb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9856bf5d3faeb) -
+  Updated styles for new button to use `rem` unit for width and height instead of `em` with
+  fractional units.
+
+## 20.4.2
+
+### Patch Changes
+
+- [#109985](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109985)
+  [`f13dc94ee78bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f13dc94ee78bb) -
+  Remove codemod for deprecated exports and remove now unused dev dependencies.
+
 ## 20.4.1
 
 ### Patch Changes
@@ -1661,36 +1678,6 @@ import CustomThemeButton from '@atlaskit/button/custom-theme-button';
 You can also import them all from the root entry point if you like! Heads up though, **if your
 bundler does not support tree shaking then you will not get the minimum possible bundle size**
 
-We have a **automated codemod** you can run to perform many upgrade processes for you. It comes in
-two flavours:
-
-- `optimistic-15.0.0-lite-mode.ts`: An "optimistic" codemod that moves your buttons to the correct
-  version based on the props you've provided. If you use the `isLoading` prop, it will change the
-  import to use `loading-button`. If you use `theme` prop, imports to `custom-theme-button` will be
-  used. If you have a ThemeProvider above your buttons in the React tree the optimistic codemod
-  can't tell, and this could lead to regressions. Use this codemod with care!
-- `15.0.0-lite-mode.ts`: If you wrap your application in a ThemeProvider, you can use this "safe"
-  codemod to change all usages of button to the `custom-theme-button`.
-
-**Running the codemod cli**
-
-To run the codemod: **You first need to have the latest version of button installed before you can
-run the codemod**
-
-`yarn upgrade @atlaskit/button@^15.0.0`
-
-Once upgraded, use the Atlaskit codemod-cli;
-
-`npx @atlaskit/codemod-cli --parser [PARSER] --extensions [FILE_EXTENSIONS] [TARGET_PATH]`
-
-Or run `npx @atlaskit/codemod-cli -h` for more details on usage. For Atlassians, refer to
-[this doc](https://hello.atlassian.net/wiki/spaces/AF/pages/2627171992/Codemods) for more details on
-the codemod CLI.
-
-```js
-import Button, { LoadingButton, CustomThemeButton } from '@atlaskit/button';
-```
-
 ### Change: default export
 
 Previously the default export of the button package was a button that supported `theme`
@@ -1772,34 +1759,6 @@ content. This approach had a number of shortcomings.
 - Documentation cleanup
 - Examples cleanup
 
-**Automatic upgrading**
-
-We have created some tooling to automatically upgrade your usage of Button!
-
-```
-# You first need to have the latest button installed before you can run the codemod
-yarn add @atlaskit/button@^15.0.0
-
-# Run the codemod cli
-# Pass in a parser for your codebase
-npx @atlaskit/codemod-cli /path/to/target/directory --parser [tsx | flow | babel]
-```
-
-We have created **two** different codemods for you to choose from:
-
-1. **Safe codemod**: This codemod will shift everything over to `CustomThemeButton` which is a 1:1
-   of what exists today. This is super safe and you don’t need to do anything but sit back and
-   enjoy. You get some nice performance wins for just doing this. You can then opportunistically
-   move to the other `button` variants at your future convenience.
-2. **Optimistic codemod**: The codemod will try it’s hardest to move to the best `button` variant in
-   a module based on usage. This is pretty tricky because we are splitting one thing into three. It
-   can also be a bit dangerous because technically you can use a `ButtonTheme.Provider` higher in
-   the React tree and all buttons will pick up that theme. The codemod cannot know about that
-   nuance. This codemod will add comments to any files where it thinks you will need to make a
-   decision and also point out when you might run into any `ButtonTheme.Provider` issues.
-
-_When you use `@atlaskit/codemod-cli` you will be able to select which codemod you want to run_
-
 ### Patch Changes
 
 - [`83e32fa998`](https://bitbucket.org/atlassian/atlassian-frontend/commits/83e32fa998) - Now uses

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

@@ -68,6 +68,14 @@ var dividerHeight = {
     height: "".concat(24 / 14, "em")
   })
 };
+var dividerHeightWithRem = {
+  default: (0, _react.css)({
+    height: '2rem'
+  }),
+  compact: (0, _react.css)({
+    height: '1.5rem'
+  })
+};
 var defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -79,6 +87,17 @@ var defaultDividerHeight = {
     height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
   })
 };
+var defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: (0, _react.css)({
+    height: "calc(2rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: (0, _react.css)({
+    height: "calc(1.5rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -87,10 +106,13 @@ var Divider = exports.Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  var defaultDividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  var dividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     (0, _react.jsx)("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

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

@@ -23,6 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = (0, _primitives.xcss)({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -53,6 +54,36 @@ var buttonStyles = (0, _primitives.xcss)({
     position: 'absolute'
   }
 });
+var buttonStylesWithRem = (0, _primitives.xcss)({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 var defaultInteractiveStyles = (0, _primitives.xcss)({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -362,6 +393,8 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = (0, _primitives.xcss)({
   columnGap: 'space.050',
   height: "".concat(24 / 14, "em"),
@@ -370,6 +403,14 @@ var spacingCompactStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var spacingCompactStylesWithRem = (0, _primitives.xcss)({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 var circleStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius.circle'
 });
@@ -379,16 +420,28 @@ var fullWidthStyles = (0, _primitives.xcss)({
 var loadingStyles = (0, _primitives.xcss)({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = (0, _primitives.xcss)({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+var iconButtonStylesWithRem = (0, _primitives.xcss)({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = (0, _primitives.xcss)({
   width: "".concat(24 / 14, "em"),
   height: "".concat(24 / 14, "em")
 });
+var iconButtonCompactStylesWithRem = (0, _primitives.xcss)({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 var buttonIconBeforeStyles = (0, _primitives.xcss)({
   paddingInlineStart: 'space.100'
 });
@@ -484,13 +537,13 @@ var useButtonBase = function useButtonBase(_ref) {
   (0, _useAutoFocus.default)(localRef, autoFocus);
   return _objectSpread({
     ref: (0, _mergeRefs.default)([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [(0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/_react.default.createElement(_splitButtonContext.SplitButtonContext.Provider, {
       value: undefined

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

@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.1",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

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

@@ -62,6 +62,14 @@ const dividerHeight = {
     height: `${24 / 14}em`
   })
 };
+const dividerHeightWithRem = {
+  default: css({
+    height: '2rem'
+  }),
+  compact: css({
+    height: '1.5rem'
+  })
+};
 const defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -73,6 +81,17 @@ const defaultDividerHeight = {
     height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
   })
 };
+const defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: `calc(2rem - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  }),
+  compact: css({
+    height: `calc(1.5rem - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -81,10 +100,13 @@ export const Divider = ({
   spacing,
   isDisabled = false
 }) => {
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  const defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  const dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

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

@@ -10,6 +10,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 const buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -40,6 +41,36 @@ const buttonStyles = xcss({
     position: 'absolute'
   }
 });
+const buttonStylesWithRem = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 const defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -349,6 +380,8 @@ const selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 const spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: `${24 / 14}em`,
@@ -357,6 +390,14 @@ const spacingCompactStyles = xcss({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+const spacingCompactStylesWithRem = xcss({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 const circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -366,16 +407,28 @@ const fullWidthStyles = xcss({
 const loadingStyles = xcss({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 const iconButtonStyles = xcss({
   height: `${32 / 14}em`,
   width: `${32 / 14}em`,
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+const iconButtonStylesWithRem = xcss({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 const iconButtonCompactStyles = xcss({
   width: `${24 / 14}em`,
   height: `${24 / 14}em`
 });
+const iconButtonCompactStylesWithRem = xcss({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 const buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'
 });
@@ -463,13 +516,13 @@ const useButtonBase = ({
   useAutoFocus(localRef, autoFocus);
   return {
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

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

@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.1",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

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

@@ -64,6 +64,14 @@ var dividerHeight = {
     height: "".concat(24 / 14, "em")
   })
 };
+var dividerHeightWithRem = {
+  default: css({
+    height: '2rem'
+  }),
+  compact: css({
+    height: '1.5rem'
+  })
+};
 var defaultDividerHeight = {
   // The divider height is calculated by subtracting twice the border width from the button height.
   // This ensures the divider does not intersect with the button's border, avoiding visual issues
@@ -75,6 +83,17 @@ var defaultDividerHeight = {
     height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
   })
 };
+var defaultDividerHeightWithRem = {
+  // The divider height is calculated by subtracting twice the border width from the button height.
+  // This ensures the divider does not intersect with the button's border, avoiding visual issues
+  // caused by overlapping alpha colors (color.border) at the intersection.
+  default: css({
+    height: "calc(2rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  }),
+  compact: css({
+    height: "calc(1.5rem - ".concat("var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
+  })
+};
 /**
  * TODO: Add JSDoc
  */
@@ -83,10 +102,13 @@ export var Divider = function Divider(_ref) {
     spacing = _ref.spacing,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  // Pulling these out of the below `css` prop to avoid nested ternaries
+  var defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
+  var dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
   return (
     // I find it funny to provide a div for Divider
     jsx("div", {
-      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeight[spacing] : dividerHeight[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
+      css: [baseDividerStyles, appearance === 'default' && !isDisabled && fg('platform-component-visual-refresh') ? defaultDividerHeightStyles[spacing] : dividerHeightStyles[spacing], isDisabled && (fg('platform-component-visual-refresh') ? dividerDisabledRefreshedStyles : dividerDisabledStyles), !isDisabled && (fg('platform-component-visual-refresh') ? dividerRefreshedAppearance[appearance] : dividerAppearance[appearance]), fg('platform-component-visual-refresh') && dividerRefreshedOffsetStyles]
     })
   );
 };

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

@@ -13,6 +13,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
 import renderLoadingOverlay from './loading-overlay';
+// If updating `buttonStyles`, also update `buttonStylesWithRem`.
 var buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -43,6 +44,36 @@ var buttonStyles = xcss({
     position: 'absolute'
   }
 });
+var buttonStylesWithRem = xcss({
+  display: 'inline-flex',
+  boxSizing: 'border-box',
+  width: 'auto',
+  maxWidth: '100%',
+  position: 'relative',
+  alignItems: 'baseline',
+  justifyContent: 'center',
+  columnGap: 'space.050',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.0',
+  flexShrink: 0,
+  height: '2rem',
+  font: 'font.body',
+  fontWeight: 'font.weight.medium',
+  paddingBlock: 'space.075',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  textAlign: 'center',
+  transition: 'background 0.1s ease-out',
+  verticalAlign: 'middle',
+  '::after': {
+    borderRadius: 'inherit',
+    inset: 'space.0',
+    borderStyle: 'solid',
+    borderWidth: "var(--ds-border-width, 1px)",
+    pointerEvents: 'none',
+    position: 'absolute'
+  }
+});
 var defaultInteractiveStyles = xcss({
   ':hover': {
     background: "var(--ds-background-neutral-hovered, #091e4214)",
@@ -352,6 +383,8 @@ var selectedDiscoveryStyles = xcss({
     background: "var(--ds-background-selected, #403294)"
   }
 });
+
+// If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
 var spacingCompactStyles = xcss({
   columnGap: 'space.050',
   height: "".concat(24 / 14, "em"),
@@ -360,6 +393,14 @@ var spacingCompactStyles = xcss({
   paddingInlineStart: 'space.150',
   verticalAlign: 'middle'
 });
+var spacingCompactStylesWithRem = xcss({
+  columnGap: 'space.050',
+  height: '1.5rem',
+  paddingBlock: 'space.025',
+  paddingInlineEnd: 'space.150',
+  paddingInlineStart: 'space.150',
+  verticalAlign: 'middle'
+});
 var circleStyles = xcss({
   borderRadius: 'border.radius.circle'
 });
@@ -369,16 +410,28 @@ var fullWidthStyles = xcss({
 var loadingStyles = xcss({
   cursor: 'progress'
 });
+// If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
 var iconButtonStyles = xcss({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
   paddingInlineEnd: 'space.0',
   paddingInlineStart: 'space.0'
 });
+var iconButtonStylesWithRem = xcss({
+  height: '2rem',
+  width: '2rem',
+  paddingInlineEnd: 'space.0',
+  paddingInlineStart: 'space.0'
+});
+// If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
 var iconButtonCompactStyles = xcss({
   width: "".concat(24 / 14, "em"),
   height: "".concat(24 / 14, "em")
 });
+var iconButtonCompactStylesWithRem = xcss({
+  width: '1.5rem',
+  height: '1.5rem'
+});
 var buttonIconBeforeStyles = xcss({
   paddingInlineStart: 'space.100'
 });
@@ -474,13 +527,13 @@ var useButtonBase = function useButtonBase(_ref) {
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
     ref: mergeRefs([localRef, ref]),
-    xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
+    xcss: [fg('platform_dst_button_replace_em_with_rem') ? buttonStylesWithRem : buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'danger' && selectedDangerStyles,
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? spacingCompactStylesWithRem : spacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonStylesWithRem : iconButtonStyles), isIconButton && spacing === 'compact' && (fg('platform_dst_button_replace_em_with_rem') ? iconButtonCompactStylesWithRem : iconButtonCompactStyles), shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
     children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
       value: undefined

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

@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "20.4.1",
+    packageVersion: "20.5.0",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/containers/split-button/utils.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
 export declare const getActions: (children: ReactNode) => {
-    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
-    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal;
+    PrimaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
+    SecondaryAction: string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal;
 };