@atlaskit/button 20.5.3 → 21.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.js +1 -23
  3. package/dist/cjs/new-button/variants/shared/use-button-base.js +2 -55
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/es2019/new-button/containers/split-button/split-button.js +1 -23
  6. package/dist/es2019/new-button/variants/shared/use-button-base.js +2 -55
  7. package/dist/es2019/old-button/shared/button-base.js +1 -1
  8. package/dist/esm/new-button/containers/split-button/split-button.js +1 -23
  9. package/dist/esm/new-button/variants/shared/use-button-base.js +2 -55
  10. package/dist/esm/old-button/shared/button-base.js +1 -1
  11. package/package.json +21 -24
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 21.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#117964](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117964)
8
+ [`78292160a22d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78292160a22d6) -
9
+ Updated styles for new button to use `rem` unit for width and height instead of `em` with
10
+ fractional units. This change is no longer behind a feature flag.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 21.0.0
17
+
18
+ ### Major Changes
19
+
20
+ - [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
21
+ [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
22
+ This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
23
+ status of only supporting React 18 going forward. No explicit breaking change to React support has
24
+ been made in this release, but this is to signify going forward, breaking changes for React 16 or
25
+ React 17 may come via non-major semver releases.
26
+
27
+ Please refer this community post for more details:
28
+ https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
29
+
30
+ ### Patch Changes
31
+
32
+ - Updated dependencies
33
+
3
34
  ## 20.5.3
4
35
 
5
36
  ### Patch Changes
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -61,14 +61,6 @@ var dividerRefreshedOffsetStyles = (0, _react.css)({
61
61
  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
62
62
  });
63
63
  var dividerHeight = {
64
- default: (0, _react.css)({
65
- height: "".concat(32 / 14, "em")
66
- }),
67
- compact: (0, _react.css)({
68
- height: "".concat(24 / 14, "em")
69
- })
70
- };
71
- var dividerHeightWithRem = {
72
64
  default: (0, _react.css)({
73
65
  height: '2rem'
74
66
  }),
@@ -77,17 +69,6 @@ var dividerHeightWithRem = {
77
69
  })
78
70
  };
79
71
  var defaultDividerHeight = {
80
- // The divider height is calculated by subtracting twice the border width from the button height.
81
- // This ensures the divider does not intersect with the button's border, avoiding visual issues
82
- // caused by overlapping alpha colors (color.border) at the intersection.
83
- default: (0, _react.css)({
84
- height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
85
- }),
86
- compact: (0, _react.css)({
87
- height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
88
- })
89
- };
90
- var defaultDividerHeightWithRem = {
91
72
  // The divider height is calculated by subtracting twice the border width from the button height.
92
73
  // This ensures the divider does not intersect with the button's border, avoiding visual issues
93
74
  // caused by overlapping alpha colors (color.border) at the intersection.
@@ -106,13 +87,10 @@ var Divider = exports.Divider = function Divider(_ref) {
106
87
  spacing = _ref.spacing,
107
88
  _ref$isDisabled = _ref.isDisabled,
108
89
  isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
109
- // Pulling these out of the below `css` prop to avoid nested ternaries
110
- var defaultDividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
111
- var dividerHeightStyles = (0, _platformFeatureFlags.fg)('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
112
90
  return (
113
91
  // I find it funny to provide a div for Divider
114
92
  (0, _react.jsx)("div", {
115
- 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]
93
+ 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]
116
94
  })
117
95
  );
118
96
  };
package/dist/cjs/new-button/variants/shared/use-button-base.js CHANGED
@@ -23,38 +23,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
23
23
  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; }
24
24
  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; }
25
25
  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; }
26
- // If updating `buttonStyles`, also update `buttonStylesWithRem`.
27
26
  var buttonStyles = (0, _primitives.xcss)({
28
- display: 'inline-flex',
29
- boxSizing: 'border-box',
30
- width: 'auto',
31
- maxWidth: '100%',
32
- position: 'relative',
33
- alignItems: 'baseline',
34
- justifyContent: 'center',
35
- columnGap: 'space.050',
36
- borderRadius: 'border.radius.100',
37
- borderWidth: 'border.width.0',
38
- flexShrink: 0,
39
- height: "".concat(32 / 14, "em"),
40
- font: 'font.body',
41
- fontWeight: 'font.weight.medium',
42
- paddingBlock: 'space.075',
43
- paddingInlineEnd: 'space.150',
44
- paddingInlineStart: 'space.150',
45
- textAlign: 'center',
46
- transition: 'background 0.1s ease-out',
47
- verticalAlign: 'middle',
48
- '::after': {
49
- borderRadius: 'inherit',
50
- inset: 'space.0',
51
- borderStyle: 'solid',
52
- borderWidth: "var(--ds-border-width, 1px)",
53
- pointerEvents: 'none',
54
- position: 'absolute'
55
- }
56
- });
57
- var buttonStylesWithRem = (0, _primitives.xcss)({
58
27
  display: 'inline-flex',
59
28
  boxSizing: 'border-box',
60
29
  width: 'auto',
@@ -393,17 +362,7 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
393
362
  background: "var(--ds-background-selected, #403294)"
394
363
  }
395
364
  });
396
-
397
- // If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
398
365
  var spacingCompactStyles = (0, _primitives.xcss)({
399
- columnGap: 'space.050',
400
- height: "".concat(24 / 14, "em"),
401
- paddingBlock: 'space.025',
402
- paddingInlineEnd: 'space.150',
403
- paddingInlineStart: 'space.150',
404
- verticalAlign: 'middle'
405
- });
406
- var spacingCompactStylesWithRem = (0, _primitives.xcss)({
407
366
  columnGap: 'space.050',
408
367
  height: '1.5rem',
409
368
  paddingBlock: 'space.025',
@@ -420,25 +379,13 @@ var fullWidthStyles = (0, _primitives.xcss)({
420
379
  var loadingStyles = (0, _primitives.xcss)({
421
380
  cursor: 'progress'
422
381
  });
423
- // If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
424
382
  var iconButtonStyles = (0, _primitives.xcss)({
425
- height: "".concat(32 / 14, "em"),
426
- width: "".concat(32 / 14, "em"),
427
- paddingInlineEnd: 'space.0',
428
- paddingInlineStart: 'space.0'
429
- });
430
- var iconButtonStylesWithRem = (0, _primitives.xcss)({
431
383
  height: '2rem',
432
384
  width: '2rem',
433
385
  paddingInlineEnd: 'space.0',
434
386
  paddingInlineStart: 'space.0'
435
387
  });
436
- // If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
437
388
  var iconButtonCompactStyles = (0, _primitives.xcss)({
438
- width: "".concat(24 / 14, "em"),
439
- height: "".concat(24 / 14, "em")
440
- });
441
- var iconButtonCompactStylesWithRem = (0, _primitives.xcss)({
442
389
  width: '1.5rem',
443
390
  height: '1.5rem'
444
391
  });
@@ -537,13 +484,13 @@ var useButtonBase = function useButtonBase(_ref) {
537
484
  (0, _useAutoFocus.default)(localRef, autoFocus);
538
485
  return _objectSpread({
539
486
  ref: (0, _mergeRefs.default)([localRef, ref]),
540
- 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,
487
+ 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,
541
488
  // TODO: remove me once we kill color fallbacks
542
489
  isSelected && appearance === 'danger' && selectedDangerStyles,
543
490
  // TODO: remove me once we kill color fallbacks
544
491
  isSelected && appearance === 'warning' && selectedWarningStyles,
545
492
  // TODO: remove me once we kill color fallbacks
546
- 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],
493
+ 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],
547
494
  isDisabled: isEffectivelyDisabled,
548
495
  children: /*#__PURE__*/_react.default.createElement(_splitButtonContext.SplitButtonContext.Provider, {
549
496
  value: undefined
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -133,7 +133,7 @@ var ButtonBase = /*#__PURE__*/_react.default.forwardRef(function ButtonBase(prop
133
133
  action: 'clicked',
134
134
  componentName: 'button',
135
135
  packageName: "@atlaskit/button",
136
- packageVersion: "20.5.3",
136
+ packageVersion: "21.1.0",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -55,14 +55,6 @@ const dividerRefreshedOffsetStyles = css({
55
55
  marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
56
56
  });
57
57
  const dividerHeight = {
58
- default: css({
59
- height: `${32 / 14}em`
60
- }),
61
- compact: css({
62
- height: `${24 / 14}em`
63
- })
64
- };
65
- const dividerHeightWithRem = {
66
58
  default: css({
67
59
  height: '2rem'
68
60
  }),
@@ -71,17 +63,6 @@ const dividerHeightWithRem = {
71
63
  })
72
64
  };
73
65
  const defaultDividerHeight = {
74
- // The divider height is calculated by subtracting twice the border width from the button height.
75
- // This ensures the divider does not intersect with the button's border, avoiding visual issues
76
- // caused by overlapping alpha colors (color.border) at the intersection.
77
- default: css({
78
- height: `calc(${32 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
79
- }),
80
- compact: css({
81
- height: `calc(${24 / 14}em - ${"var(--ds-border-width, 1px)"} - ${"var(--ds-border-width, 1px)"})`
82
- })
83
- };
84
- const defaultDividerHeightWithRem = {
85
66
  // The divider height is calculated by subtracting twice the border width from the button height.
86
67
  // This ensures the divider does not intersect with the button's border, avoiding visual issues
87
68
  // caused by overlapping alpha colors (color.border) at the intersection.
@@ -100,13 +81,10 @@ export const Divider = ({
100
81
  spacing,
101
82
  isDisabled = false
102
83
  }) => {
103
- // Pulling these out of the below `css` prop to avoid nested ternaries
104
- const defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
105
- const dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
106
84
  return (
107
85
  // I find it funny to provide a div for Divider
108
86
  jsx("div", {
109
- 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]
87
+ 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]
110
88
  })
111
89
  );
112
90
  };
package/dist/es2019/new-button/variants/shared/use-button-base.js CHANGED
@@ -10,38 +10,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
10
10
  import blockEvents from './block-events';
11
11
  import { LOADING_LABEL } from './constants';
12
12
  import renderLoadingOverlay from './loading-overlay';
13
- // If updating `buttonStyles`, also update `buttonStylesWithRem`.
14
13
  const buttonStyles = xcss({
15
- display: 'inline-flex',
16
- boxSizing: 'border-box',
17
- width: 'auto',
18
- maxWidth: '100%',
19
- position: 'relative',
20
- alignItems: 'baseline',
21
- justifyContent: 'center',
22
- columnGap: 'space.050',
23
- borderRadius: 'border.radius.100',
24
- borderWidth: 'border.width.0',
25
- flexShrink: 0,
26
- height: `${32 / 14}em`,
27
- font: 'font.body',
28
- fontWeight: 'font.weight.medium',
29
- paddingBlock: 'space.075',
30
- paddingInlineEnd: 'space.150',
31
- paddingInlineStart: 'space.150',
32
- textAlign: 'center',
33
- transition: 'background 0.1s ease-out',
34
- verticalAlign: 'middle',
35
- '::after': {
36
- borderRadius: 'inherit',
37
- inset: 'space.0',
38
- borderStyle: 'solid',
39
- borderWidth: "var(--ds-border-width, 1px)",
40
- pointerEvents: 'none',
41
- position: 'absolute'
42
- }
43
- });
44
- const buttonStylesWithRem = xcss({
45
14
  display: 'inline-flex',
46
15
  boxSizing: 'border-box',
47
16
  width: 'auto',
@@ -380,17 +349,7 @@ const selectedDiscoveryStyles = xcss({
380
349
  background: "var(--ds-background-selected, #403294)"
381
350
  }
382
351
  });
383
-
384
- // If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
385
352
  const spacingCompactStyles = xcss({
386
- columnGap: 'space.050',
387
- height: `${24 / 14}em`,
388
- paddingBlock: 'space.025',
389
- paddingInlineEnd: 'space.150',
390
- paddingInlineStart: 'space.150',
391
- verticalAlign: 'middle'
392
- });
393
- const spacingCompactStylesWithRem = xcss({
394
353
  columnGap: 'space.050',
395
354
  height: '1.5rem',
396
355
  paddingBlock: 'space.025',
@@ -407,25 +366,13 @@ const fullWidthStyles = xcss({
407
366
  const loadingStyles = xcss({
408
367
  cursor: 'progress'
409
368
  });
410
- // If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
411
369
  const iconButtonStyles = xcss({
412
- height: `${32 / 14}em`,
413
- width: `${32 / 14}em`,
414
- paddingInlineEnd: 'space.0',
415
- paddingInlineStart: 'space.0'
416
- });
417
- const iconButtonStylesWithRem = xcss({
418
370
  height: '2rem',
419
371
  width: '2rem',
420
372
  paddingInlineEnd: 'space.0',
421
373
  paddingInlineStart: 'space.0'
422
374
  });
423
- // If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
424
375
  const iconButtonCompactStyles = xcss({
425
- width: `${24 / 14}em`,
426
- height: `${24 / 14}em`
427
- });
428
- const iconButtonCompactStylesWithRem = xcss({
429
376
  width: '1.5rem',
430
377
  height: '1.5rem'
431
378
  });
@@ -516,13 +463,13 @@ const useButtonBase = ({
516
463
  useAutoFocus(localRef, autoFocus);
517
464
  return {
518
465
  ref: mergeRefs([localRef, ref]),
519
- 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,
466
+ 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,
520
467
  // TODO: remove me once we kill color fallbacks
521
468
  isSelected && appearance === 'danger' && selectedDangerStyles,
522
469
  // TODO: remove me once we kill color fallbacks
523
470
  isSelected && appearance === 'warning' && selectedWarningStyles,
524
471
  // TODO: remove me once we kill color fallbacks
525
- 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],
472
+ 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],
526
473
  isDisabled: isEffectivelyDisabled,
527
474
  children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
528
475
  value: undefined
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -119,7 +119,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref)
119
119
  action: 'clicked',
120
120
  componentName: 'button',
121
121
  packageName: "@atlaskit/button",
122
- packageVersion: "20.5.3",
122
+ packageVersion: "21.1.0",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
package/dist/esm/new-button/containers/split-button/split-button.js CHANGED
@@ -57,14 +57,6 @@ var dividerRefreshedOffsetStyles = css({
57
57
  marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
58
58
  });
59
59
  var dividerHeight = {
60
- default: css({
61
- height: "".concat(32 / 14, "em")
62
- }),
63
- compact: css({
64
- height: "".concat(24 / 14, "em")
65
- })
66
- };
67
- var dividerHeightWithRem = {
68
60
  default: css({
69
61
  height: '2rem'
70
62
  }),
@@ -73,17 +65,6 @@ var dividerHeightWithRem = {
73
65
  })
74
66
  };
75
67
  var defaultDividerHeight = {
76
- // The divider height is calculated by subtracting twice the border width from the button height.
77
- // This ensures the divider does not intersect with the button's border, avoiding visual issues
78
- // caused by overlapping alpha colors (color.border) at the intersection.
79
- default: css({
80
- height: "calc(".concat(32 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
81
- }),
82
- compact: css({
83
- height: "calc(".concat(24 / 14, "em - ", "var(--ds-border-width, 1px)", " - ", "var(--ds-border-width, 1px)", ")")
84
- })
85
- };
86
- var defaultDividerHeightWithRem = {
87
68
  // The divider height is calculated by subtracting twice the border width from the button height.
88
69
  // This ensures the divider does not intersect with the button's border, avoiding visual issues
89
70
  // caused by overlapping alpha colors (color.border) at the intersection.
@@ -102,13 +83,10 @@ export var Divider = function Divider(_ref) {
102
83
  spacing = _ref.spacing,
103
84
  _ref$isDisabled = _ref.isDisabled,
104
85
  isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
105
- // Pulling these out of the below `css` prop to avoid nested ternaries
106
- var defaultDividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? defaultDividerHeightWithRem : defaultDividerHeight;
107
- var dividerHeightStyles = fg('platform_dst_button_replace_em_with_rem') ? dividerHeightWithRem : dividerHeight;
108
86
  return (
109
87
  // I find it funny to provide a div for Divider
110
88
  jsx("div", {
111
- 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]
89
+ 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]
112
90
  })
113
91
  );
114
92
  };
package/dist/esm/new-button/variants/shared/use-button-base.js CHANGED
@@ -13,38 +13,7 @@ import { SplitButtonContext, useSplitButtonContext } from '../../containers/spli
13
13
  import blockEvents from './block-events';
14
14
  import { LOADING_LABEL } from './constants';
15
15
  import renderLoadingOverlay from './loading-overlay';
16
- // If updating `buttonStyles`, also update `buttonStylesWithRem`.
17
16
  var buttonStyles = xcss({
18
- display: 'inline-flex',
19
- boxSizing: 'border-box',
20
- width: 'auto',
21
- maxWidth: '100%',
22
- position: 'relative',
23
- alignItems: 'baseline',
24
- justifyContent: 'center',
25
- columnGap: 'space.050',
26
- borderRadius: 'border.radius.100',
27
- borderWidth: 'border.width.0',
28
- flexShrink: 0,
29
- height: "".concat(32 / 14, "em"),
30
- font: 'font.body',
31
- fontWeight: 'font.weight.medium',
32
- paddingBlock: 'space.075',
33
- paddingInlineEnd: 'space.150',
34
- paddingInlineStart: 'space.150',
35
- textAlign: 'center',
36
- transition: 'background 0.1s ease-out',
37
- verticalAlign: 'middle',
38
- '::after': {
39
- borderRadius: 'inherit',
40
- inset: 'space.0',
41
- borderStyle: 'solid',
42
- borderWidth: "var(--ds-border-width, 1px)",
43
- pointerEvents: 'none',
44
- position: 'absolute'
45
- }
46
- });
47
- var buttonStylesWithRem = xcss({
48
17
  display: 'inline-flex',
49
18
  boxSizing: 'border-box',
50
19
  width: 'auto',
@@ -383,17 +352,7 @@ var selectedDiscoveryStyles = xcss({
383
352
  background: "var(--ds-background-selected, #403294)"
384
353
  }
385
354
  });
386
-
387
- // If updating `spacingCompactStyles`, also update `spacingCompactStylesWithRem`.
388
355
  var spacingCompactStyles = xcss({
389
- columnGap: 'space.050',
390
- height: "".concat(24 / 14, "em"),
391
- paddingBlock: 'space.025',
392
- paddingInlineEnd: 'space.150',
393
- paddingInlineStart: 'space.150',
394
- verticalAlign: 'middle'
395
- });
396
- var spacingCompactStylesWithRem = xcss({
397
356
  columnGap: 'space.050',
398
357
  height: '1.5rem',
399
358
  paddingBlock: 'space.025',
@@ -410,25 +369,13 @@ var fullWidthStyles = xcss({
410
369
  var loadingStyles = xcss({
411
370
  cursor: 'progress'
412
371
  });
413
- // If updating `iconButtonStyles`, also update `iconButtonStylesWithRem`.
414
372
  var iconButtonStyles = xcss({
415
- height: "".concat(32 / 14, "em"),
416
- width: "".concat(32 / 14, "em"),
417
- paddingInlineEnd: 'space.0',
418
- paddingInlineStart: 'space.0'
419
- });
420
- var iconButtonStylesWithRem = xcss({
421
373
  height: '2rem',
422
374
  width: '2rem',
423
375
  paddingInlineEnd: 'space.0',
424
376
  paddingInlineStart: 'space.0'
425
377
  });
426
- // If updating `iconButtonCompactStyles`, also update `iconButtonCompactStylesWithRem`.
427
378
  var iconButtonCompactStyles = xcss({
428
- width: "".concat(24 / 14, "em"),
429
- height: "".concat(24 / 14, "em")
430
- });
431
- var iconButtonCompactStylesWithRem = xcss({
432
379
  width: '1.5rem',
433
380
  height: '1.5rem'
434
381
  });
@@ -527,13 +474,13 @@ var useButtonBase = function useButtonBase(_ref) {
527
474
  useAutoFocus(localRef, autoFocus);
528
475
  return _objectSpread({
529
476
  ref: mergeRefs([localRef, ref]),
530
- 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,
477
+ 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,
531
478
  // TODO: remove me once we kill color fallbacks
532
479
  isSelected && appearance === 'danger' && selectedDangerStyles,
533
480
  // TODO: remove me once we kill color fallbacks
534
481
  isSelected && appearance === 'warning' && selectedWarningStyles,
535
482
  // TODO: remove me once we kill color fallbacks
536
- 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],
483
+ 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],
537
484
  isDisabled: isEffectivelyDisabled,
538
485
  children: /*#__PURE__*/React.createElement(SplitButtonContext.Provider, {
539
486
  value: undefined
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -125,7 +125,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
125
125
  action: 'clicked',
126
126
  componentName: 'button',
127
127
  packageName: "@atlaskit/button",
128
- packageVersion: "20.5.3",
128
+ packageVersion: "21.1.0",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "20.5.3",
3
+ "version": "21.1.0",
4
4
  "description": "A button triggers an event or action. They let users know what will happen next.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -84,41 +84,41 @@
84
84
  ".": "./src/index.tsx"
85
85
  },
86
86
  "dependencies": {
87
- "@atlaskit/analytics-next": "^10.3.0",
88
- "@atlaskit/ds-lib": "^3.5.0",
89
- "@atlaskit/focus-ring": "^2.1.0",
90
- "@atlaskit/icon": "^23.9.0",
91
- "@atlaskit/interaction-context": "^2.6.0",
87
+ "@atlaskit/analytics-next": "^11.0.0",
88
+ "@atlaskit/ds-lib": "^4.0.0",
89
+ "@atlaskit/focus-ring": "^3.0.0",
90
+ "@atlaskit/icon": "^24.0.0",
91
+ "@atlaskit/interaction-context": "^3.0.0",
92
92
  "@atlaskit/platform-feature-flags": "^1.1.0",
93
- "@atlaskit/primitives": "^13.5.0",
94
- "@atlaskit/spinner": "^17.1.0",
95
- "@atlaskit/theme": "^16.0.0",
96
- "@atlaskit/tokens": "^3.3.0",
97
- "@atlaskit/tooltip": "^19.1.0",
98
- "@atlaskit/visually-hidden": "^1.6.0",
93
+ "@atlaskit/primitives": "^14.0.0",
94
+ "@atlaskit/spinner": "^18.0.0",
95
+ "@atlaskit/theme": "^17.0.0",
96
+ "@atlaskit/tokens": "^4.1.0",
97
+ "@atlaskit/tooltip": "^20.0.0",
98
+ "@atlaskit/visually-hidden": "^2.0.0",
99
99
  "@babel/runtime": "^7.0.0",
100
100
  "@emotion/react": "^11.7.1"
101
101
  },
102
102
  "peerDependencies": {
103
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
103
+ "react": "^18.2.0"
104
104
  },
105
105
  "devDependencies": {
106
106
  "@af/accessibility-testing": "*",
107
107
  "@af/integration-testing": "*",
108
108
  "@af/visual-regression": "*",
109
- "@atlaskit/app-provider": "^1.8.0",
110
- "@atlaskit/checkbox": "^15.3.0",
109
+ "@atlaskit/app-provider": "^2.0.0",
110
+ "@atlaskit/checkbox": "^16.0.0",
111
111
  "@atlaskit/docs": "*",
112
- "@atlaskit/dropdown-menu": "^12.26.0",
113
- "@atlaskit/form": "^11.1.0",
112
+ "@atlaskit/dropdown-menu": "^13.0.0",
113
+ "@atlaskit/form": "^12.0.0",
114
114
  "@atlaskit/heading": "*",
115
115
  "@atlaskit/link": "*",
116
- "@atlaskit/logo": "^15.3.0",
117
- "@atlaskit/modal-dialog": "^12.20.0",
116
+ "@atlaskit/logo": "^16.0.0",
117
+ "@atlaskit/modal-dialog": "^13.0.0",
118
118
  "@atlaskit/section-message": "*",
119
- "@atlaskit/select": "^18.10.0",
119
+ "@atlaskit/select": "^19.0.0",
120
120
  "@atlaskit/ssr": "*",
121
- "@atlaskit/toggle": "^14.1.0",
121
+ "@atlaskit/toggle": "^15.0.0",
122
122
  "@atlaskit/visual-regression": "*",
123
123
  "@testing-library/react": "^13.4.0",
124
124
  "@testing-library/user-event": "^14.4.3",
@@ -132,9 +132,6 @@
132
132
  "platform-feature-flags": {
133
133
  "platform-component-visual-refresh": {
134
134
  "type": "boolean"
135
- },
136
- "platform_dst_button_replace_em_with_rem": {
137
- "type": "boolean"
138
135
  }
139
136
  }
140
137
  }