@atlaskit/button 17.20.0 → 17.21.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 (15) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/new-button/containers/split-button/split-button.js +23 -6
  3. package/dist/cjs/new-button/variants/shared/use-button-base.js +79 -18
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/es2019/new-button/containers/split-button/split-button.js +22 -5
  6. package/dist/es2019/new-button/variants/shared/use-button-base.js +79 -18
  7. package/dist/es2019/old-button/shared/button-base.js +1 -1
  8. package/dist/esm/new-button/containers/split-button/split-button.js +23 -6
  9. package/dist/esm/new-button/variants/shared/use-button-base.js +79 -18
  10. package/dist/esm/old-button/shared/button-base.js +1 -1
  11. package/dist/types/new-button/containers/split-button/split-button.d.ts +2 -1
  12. package/dist/types/new-button/variants/shared/use-button-base.d.ts +1 -1
  13. package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts +2 -1
  14. package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +1 -1
  15. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 17.21.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#112202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112202)
8
+ [`60baf23d5f27d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/60baf23d5f27d) -
9
+ Testing a new visual appearance behind a feature flag. If successful it'll be released at a later
10
+ date.
11
+
3
12
  ## 17.20.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/new-button/containers/split-button/split-button.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
9
  var _constants = require("@atlaskit/theme/constants");
9
10
  var _splitButtonContext = require("./split-button-context");
10
11
  var _utils = require("./utils");
@@ -23,7 +24,7 @@ var heights = {
23
24
  };
24
25
  var baseDividerStyles = (0, _react.css)({
25
26
  display: 'inline-flex',
26
- width: '1px',
27
+ width: "var(--ds-border-width, 1px)",
27
28
  position: 'relative',
28
29
  zIndex: 2
29
30
  });
@@ -56,6 +57,9 @@ var dividerAppearance = {
56
57
  }),
57
58
  navigation: navigationDividerStyles
58
59
  };
60
+ var dividerRefreshedOffsetStyles = (0, _react.css)({
61
+ marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
62
+ });
59
63
  var dividerHeight = {
60
64
  default: defaultDividerStyles,
61
65
  compact: compactDividerStyles
@@ -71,7 +75,7 @@ var Divider = exports.Divider = function Divider(_ref) {
71
75
  return (
72
76
  // I find it funny to provide a div for Divider
73
77
  (0, _react.jsx)("div", {
74
- css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
78
+ css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
75
79
  })
76
80
  );
77
81
  };
@@ -95,13 +99,22 @@ var secondaryButtonStyles = (0, _react.css)({
95
99
  borderStartStartRadius: 0
96
100
  }
97
101
  });
102
+ var defaultAppearanceContainerStyles = (0, _react.css)({
103
+ borderRadius: "var(--ds-border-radius, 3px)",
104
+ outlineColor: "var(--ds-border, #091E4224)",
105
+ outlineOffset: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")"),
106
+ outlineStyle: 'solid',
107
+ outlineWidth: "var(--ds-border-width, 1px)"
108
+ });
109
+
98
110
  /**
99
111
  * TODO: Add JSdoc
100
112
  */
101
113
  var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
102
- var children = _ref2.children;
114
+ var appearance = _ref2.appearance,
115
+ children = _ref2.children;
103
116
  return (0, _react.jsx)("div", {
104
- css: splitButtonStyles
117
+ css: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
105
118
  }, children);
106
119
  };
107
120
 
@@ -125,7 +138,9 @@ var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
125
138
  var _getActions = (0, _utils.getActions)(children),
126
139
  PrimaryAction = _getActions.PrimaryAction,
127
140
  SecondaryAction = _getActions.SecondaryAction;
128
- return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
141
+ return (0, _react.jsx)(SplitButtonContainer, {
142
+ appearance: appearance
143
+ }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
129
144
  value: {
130
145
  appearance: appearance,
131
146
  spacing: spacing,
@@ -153,7 +168,9 @@ var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWi
153
168
  spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
154
169
  _ref4$isDisabled = _ref4.isDisabled,
155
170
  isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
156
- return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
171
+ return (0, _react.jsx)(SplitButtonContainer, {
172
+ appearance: appearance
173
+ }, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
157
174
  value: {
158
175
  appearance: appearance,
159
176
  spacing: spacing,
package/dist/cjs/new-button/variants/shared/use-button-base.js CHANGED
@@ -33,27 +33,25 @@ var buttonStyles = (0, _primitives.xcss)({
33
33
  alignItems: 'baseline',
34
34
  justifyContent: 'center',
35
35
  columnGap: 'space.050',
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
37
- background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
38
36
  borderRadius: 'border.radius.100',
39
37
  borderWidth: 'border.width.0',
40
- // @ts-expect-error
41
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
42
- color: "var(--ds-text, ".concat(colors.N500, ")"),
43
38
  flexShrink: 0,
44
39
  height: "".concat(32 / fontSize, "em"),
45
40
  paddingInlineEnd: 'space.150',
46
41
  paddingInlineStart: 'space.150',
47
42
  textAlign: 'center',
48
- transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
43
+ transition: 'background 0.1s ease-out',
49
44
  verticalAlign: 'middle',
50
- ':visited': {
51
- // @ts-expect-error
52
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
53
- color: "var(--ds-text, ".concat(colors.N500, ")")
45
+ '::after': {
46
+ borderRadius: 'inherit',
47
+ inset: 'space.0',
48
+ borderStyle: 'solid',
49
+ borderWidth: "var(--ds-border-width, 1px)",
50
+ pointerEvents: 'none',
51
+ position: 'absolute'
54
52
  }
55
53
  });
56
- var baseButtonStyles = (0, _primitives.xcss)({
54
+ var hardCodedButtonStyles = (0, _primitives.xcss)({
57
55
  fontFamily: 'inherit',
58
56
  fontSize: 'inherit',
59
57
  fontStyle: 'normal',
@@ -71,16 +69,46 @@ var defaultInteractiveStyles = (0, _primitives.xcss)({
71
69
  background: "var(--ds-background-neutral-hovered, #091e4214)",
72
70
  // @ts-expect-error
73
71
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
74
- color: "var(--ds-text, ".concat(colors.N500, ")"),
75
- transitionDuration: '0s, 0.15s'
72
+ color: "var(--ds-text, ".concat(colors.N500, ")")
76
73
  },
77
74
  ':active': {
78
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
79
76
  background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
80
77
  // @ts-expect-error
81
78
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
82
- color: "var(--ds-text, ".concat(colors.B400, ")"),
83
- transitionDuration: '0s, 0s'
79
+ color: "var(--ds-text, ".concat(colors.B400, ")")
80
+ }
81
+ });
82
+ var defaultInteractiveRefreshedStyles = (0, _primitives.xcss)({
83
+ ':hover': {
84
+ background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
85
+ color: 'color.text.subtle'
86
+ },
87
+ ':active': {
88
+ background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
89
+ color: 'color.text.subtle'
90
+ }
91
+ });
92
+ var defaultStyles = (0, _primitives.xcss)({
93
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
94
+ background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
95
+ // @ts-expect-error — using tokens for explicit fallback usage.
96
+ color: "var(--ds-text, ".concat(colors.N500, ")"),
97
+ ':visited': {
98
+ // @ts-expect-error
99
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
100
+ color: "var(--ds-text, ".concat(colors.N500, ")")
101
+ }
102
+ });
103
+ var defaultRefreshedStyles = (0, _primitives.xcss)({
104
+ background: "var(--ds-background-neutral-subtle, #00000000)",
105
+ color: 'color.text.subtle',
106
+ '::after': {
107
+ content: '""',
108
+ borderColor: 'color.border'
109
+ },
110
+ ':visited': {
111
+ color: 'color.text.subtle'
84
112
  }
85
113
  });
86
114
  var primaryStyles = (0, _primitives.xcss)({
@@ -168,6 +196,13 @@ var subtleStyles = (0, _primitives.xcss)({
168
196
  color: "var(--ds-text, #42526E)"
169
197
  }
170
198
  });
199
+ var subtleRefreshedStyles = (0, _primitives.xcss)({
200
+ background: "var(--ds-background-neutral-subtle, transparent)",
201
+ color: 'color.text.subtle',
202
+ ':visited': {
203
+ color: 'color.text.subtle'
204
+ }
205
+ });
171
206
  var subtleInteractiveStyles = (0, _primitives.xcss)({
172
207
  ':hover': {
173
208
  background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -180,6 +215,16 @@ var subtleInteractiveStyles = (0, _primitives.xcss)({
180
215
  color: "var(--ds-text, #42526E)"
181
216
  }
182
217
  });
218
+ var subtleInteractiveRefreshedStyles = (0, _primitives.xcss)({
219
+ ':hover': {
220
+ background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
221
+ color: 'color.text.subtle'
222
+ },
223
+ ':active': {
224
+ background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
225
+ color: 'color.text.subtle'
226
+ }
227
+ });
183
228
  var linkStyles = (0, _primitives.xcss)({
184
229
  // @ts-expect-error
185
230
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -265,6 +310,9 @@ var disabledStyles = (0, _primitives.xcss)({
265
310
  background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
266
311
  // @ts-expect-error
267
312
  color: "var(--ds-text-disabled, #091E424F)"
313
+ },
314
+ '::after': {
315
+ content: 'none'
268
316
  }
269
317
  });
270
318
  var selectedStyles = (0, _primitives.xcss)({
@@ -279,6 +327,17 @@ var selectedStyles = (0, _primitives.xcss)({
279
327
  color: "var(--ds-text-selected, ".concat(colors.N20, ")")
280
328
  }
281
329
  });
330
+ var selectedRefreshedStyles = (0, _primitives.xcss)({
331
+ background: "var(--ds-background-selected, #E9F2FF)",
332
+ color: 'color.text.selected',
333
+ '::after': {
334
+ content: '""',
335
+ borderColor: 'color.border.selected'
336
+ },
337
+ ':visited': {
338
+ color: 'color.text.selected'
339
+ }
340
+ });
282
341
  var selectedInteractiveStyles = (0, _primitives.xcss)({
283
342
  ':hover': {
284
343
  // @ts-expect-error
@@ -458,7 +517,7 @@ var useButtonBase = function useButtonBase(_ref) {
458
517
  _ref$isLoading = _ref.isLoading,
459
518
  isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
460
519
  _ref$isSelected = _ref.isSelected,
461
- isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
520
+ propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
462
521
  _ref$isIconButton = _ref.isIconButton,
463
522
  isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
464
523
  _ref$isCircle = _ref.isCircle,
@@ -495,16 +554,18 @@ var useButtonBase = function useButtonBase(_ref) {
495
554
  });
496
555
  var isSplitButton = Boolean(splitButtonContext);
497
556
  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
498
- var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
557
+ var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
558
+ var appearance = (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
499
559
  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
500
560
  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
501
561
  var hasOverlay = Boolean(overlay);
502
562
  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
503
563
  var isEffectivelyDisabled = isDisabled || Boolean(overlay);
564
+ var isSelected = propIsSelected && !isDisabled;
504
565
  (0, _useAutoFocus.default)(localRef, autoFocus);
505
566
  return _objectSpread({
506
567
  ref: (0, _mergeRefs.default)([localRef, ref]),
507
- xcss: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && 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' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
568
+ xcss: [(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? 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.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
508
569
  // TODO: remove me once we kill color fallbacks
509
570
  isSelected && appearance === 'danger' && selectedDangerStyles,
510
571
  // TODO: remove me once we kill color fallbacks
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -133,7 +133,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
133
133
  action: 'clicked',
134
134
  componentName: 'button',
135
135
  packageName: "@atlaskit/button",
136
- packageVersion: "17.20.0",
136
+ packageVersion: "17.21.0",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
package/dist/es2019/new-button/containers/split-button/split-button.js CHANGED
@@ -5,6 +5,7 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
9
  import { fontSize as getFontSize } from '@atlaskit/theme/constants';
9
10
  const fontSize = getFontSize();
10
11
  const heights = {
@@ -16,7 +17,7 @@ import { SplitButtonContext } from './split-button-context';
16
17
  import { getActions } from './utils';
17
18
  const baseDividerStyles = css({
18
19
  display: 'inline-flex',
19
- width: '1px',
20
+ width: "var(--ds-border-width, 1px)",
20
21
  position: 'relative',
21
22
  zIndex: 2
22
23
  });
@@ -49,6 +50,9 @@ const dividerAppearance = {
49
50
  }),
50
51
  navigation: navigationDividerStyles
51
52
  };
53
+ const dividerRefreshedOffsetStyles = css({
54
+ marginInline: `calc(0px - ${"var(--ds-border-width, 1px)"})`
55
+ });
52
56
  const dividerHeight = {
53
57
  default: defaultDividerStyles,
54
58
  compact: compactDividerStyles
@@ -64,7 +68,7 @@ export const Divider = ({
64
68
  return (
65
69
  // I find it funny to provide a div for Divider
66
70
  jsx("div", {
67
- css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
71
+ css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
68
72
  })
69
73
  );
70
74
  };
@@ -88,14 +92,23 @@ const secondaryButtonStyles = css({
88
92
  borderStartStartRadius: 0
89
93
  }
90
94
  });
95
+ const defaultAppearanceContainerStyles = css({
96
+ borderRadius: "var(--ds-border-radius, 3px)",
97
+ outlineColor: "var(--ds-border, #091E4224)",
98
+ outlineOffset: `calc(0px - ${"var(--ds-border-width, 1px)"})`,
99
+ outlineStyle: 'solid',
100
+ outlineWidth: "var(--ds-border-width, 1px)"
101
+ });
102
+
91
103
  /**
92
104
  * TODO: Add JSdoc
93
105
  */
94
106
  export const SplitButtonContainer = ({
107
+ appearance,
95
108
  children
96
109
  }) => {
97
110
  return jsx("div", {
98
- css: splitButtonStyles
111
+ css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
99
112
  }, children);
100
113
  };
101
114
 
@@ -118,7 +131,9 @@ export const SplitButton = ({
118
131
  PrimaryAction,
119
132
  SecondaryAction
120
133
  } = getActions(children);
121
- return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
134
+ return jsx(SplitButtonContainer, {
135
+ appearance: appearance
136
+ }, jsx(SplitButtonContext.Provider, {
122
137
  value: {
123
138
  appearance,
124
139
  spacing,
@@ -144,7 +159,9 @@ export const SplitButtonWithSlots = ({
144
159
  spacing = 'default',
145
160
  isDisabled = false
146
161
  }) => {
147
- return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
162
+ return jsx(SplitButtonContainer, {
163
+ appearance: appearance
164
+ }, jsx(SplitButtonContext.Provider, {
148
165
  value: {
149
166
  appearance,
150
167
  spacing,
package/dist/es2019/new-button/variants/shared/use-button-base.js CHANGED
@@ -20,27 +20,25 @@ const buttonStyles = xcss({
20
20
  alignItems: 'baseline',
21
21
  justifyContent: 'center',
22
22
  columnGap: 'space.050',
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
24
- background: `var(--ds-background-neutral, ${colors.N20A})`,
25
23
  borderRadius: 'border.radius.100',
26
24
  borderWidth: 'border.width.0',
27
- // @ts-expect-error
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
29
- color: `var(--ds-text, ${colors.N500})`,
30
25
  flexShrink: 0,
31
26
  height: `${32 / fontSize}em`,
32
27
  paddingInlineEnd: 'space.150',
33
28
  paddingInlineStart: 'space.150',
34
29
  textAlign: 'center',
35
- transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
30
+ transition: 'background 0.1s ease-out',
36
31
  verticalAlign: 'middle',
37
- ':visited': {
38
- // @ts-expect-error
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
40
- color: `var(--ds-text, ${colors.N500})`
32
+ '::after': {
33
+ borderRadius: 'inherit',
34
+ inset: 'space.0',
35
+ borderStyle: 'solid',
36
+ borderWidth: "var(--ds-border-width, 1px)",
37
+ pointerEvents: 'none',
38
+ position: 'absolute'
41
39
  }
42
40
  });
43
- const baseButtonStyles = xcss({
41
+ const hardCodedButtonStyles = xcss({
44
42
  fontFamily: 'inherit',
45
43
  fontSize: 'inherit',
46
44
  fontStyle: 'normal',
@@ -58,16 +56,46 @@ const defaultInteractiveStyles = xcss({
58
56
  background: "var(--ds-background-neutral-hovered, #091e4214)",
59
57
  // @ts-expect-error
60
58
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
61
- color: `var(--ds-text, ${colors.N500})`,
62
- transitionDuration: '0s, 0.15s'
59
+ color: `var(--ds-text, ${colors.N500})`
63
60
  },
64
61
  ':active': {
65
62
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
66
63
  background: `var(--ds-background-neutral-pressed, ${colors.B75})`,
67
64
  // @ts-expect-error
68
65
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
69
- color: `var(--ds-text, ${colors.B400})`,
70
- transitionDuration: '0s, 0s'
66
+ color: `var(--ds-text, ${colors.B400})`
67
+ }
68
+ });
69
+ const defaultInteractiveRefreshedStyles = xcss({
70
+ ':hover': {
71
+ background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
72
+ color: 'color.text.subtle'
73
+ },
74
+ ':active': {
75
+ background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
76
+ color: 'color.text.subtle'
77
+ }
78
+ });
79
+ const defaultStyles = xcss({
80
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
81
+ background: `var(--ds-background-neutral, ${colors.N20A})`,
82
+ // @ts-expect-error — using tokens for explicit fallback usage.
83
+ color: `var(--ds-text, ${colors.N500})`,
84
+ ':visited': {
85
+ // @ts-expect-error
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
87
+ color: `var(--ds-text, ${colors.N500})`
88
+ }
89
+ });
90
+ const defaultRefreshedStyles = xcss({
91
+ background: "var(--ds-background-neutral-subtle, #00000000)",
92
+ color: 'color.text.subtle',
93
+ '::after': {
94
+ content: '""',
95
+ borderColor: 'color.border'
96
+ },
97
+ ':visited': {
98
+ color: 'color.text.subtle'
71
99
  }
72
100
  });
73
101
  const primaryStyles = xcss({
@@ -155,6 +183,13 @@ const subtleStyles = xcss({
155
183
  color: "var(--ds-text, #42526E)"
156
184
  }
157
185
  });
186
+ const subtleRefreshedStyles = xcss({
187
+ background: "var(--ds-background-neutral-subtle, transparent)",
188
+ color: 'color.text.subtle',
189
+ ':visited': {
190
+ color: 'color.text.subtle'
191
+ }
192
+ });
158
193
  const subtleInteractiveStyles = xcss({
159
194
  ':hover': {
160
195
  background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -167,6 +202,16 @@ const subtleInteractiveStyles = xcss({
167
202
  color: "var(--ds-text, #42526E)"
168
203
  }
169
204
  });
205
+ const subtleInteractiveRefreshedStyles = xcss({
206
+ ':hover': {
207
+ background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
208
+ color: 'color.text.subtle'
209
+ },
210
+ ':active': {
211
+ background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
212
+ color: 'color.text.subtle'
213
+ }
214
+ });
170
215
  const linkStyles = xcss({
171
216
  // @ts-expect-error
172
217
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -252,6 +297,9 @@ const disabledStyles = xcss({
252
297
  background: `var(--ds-background-disabled, ${colors.N20A})`,
253
298
  // @ts-expect-error
254
299
  color: "var(--ds-text-disabled, #091E424F)"
300
+ },
301
+ '::after': {
302
+ content: 'none'
255
303
  }
256
304
  });
257
305
  const selectedStyles = xcss({
@@ -266,6 +314,17 @@ const selectedStyles = xcss({
266
314
  color: `var(--ds-text-selected, ${colors.N20})`
267
315
  }
268
316
  });
317
+ const selectedRefreshedStyles = xcss({
318
+ background: "var(--ds-background-selected, #E9F2FF)",
319
+ color: 'color.text.selected',
320
+ '::after': {
321
+ content: '""',
322
+ borderColor: 'color.border.selected'
323
+ },
324
+ ':visited': {
325
+ color: 'color.text.selected'
326
+ }
327
+ });
269
328
  const selectedInteractiveStyles = xcss({
270
329
  ':hover': {
271
330
  // @ts-expect-error
@@ -440,7 +499,7 @@ const useButtonBase = ({
440
499
  autoFocus = false,
441
500
  isDisabled: propIsDisabled = false,
442
501
  isLoading = false,
443
- isSelected = false,
502
+ isSelected: propIsSelected = false,
444
503
  // TODO: Separate Icon Button styling from button base
445
504
  isIconButton = false,
446
505
  isCircle = false,
@@ -474,16 +533,18 @@ const useButtonBase = ({
474
533
  });
475
534
  const isSplitButton = Boolean(splitButtonContext);
476
535
  const isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
477
- const appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
536
+ const isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
537
+ const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
478
538
  const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
479
539
  const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
480
540
  const hasOverlay = Boolean(overlay);
481
541
  const isInteractive = !isDisabled && !isLoading && !hasOverlay;
482
542
  const isEffectivelyDisabled = isDisabled || Boolean(overlay);
543
+ const isSelected = propIsSelected && !isDisabled;
483
544
  useAutoFocus(localRef, autoFocus);
484
545
  return {
485
546
  ref: mergeRefs([localRef, ref]),
486
- xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && 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' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
547
+ xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? 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' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
487
548
  // TODO: remove me once we kill color fallbacks
488
549
  isSelected && appearance === 'danger' && selectedDangerStyles,
489
550
  // TODO: remove me once we kill color fallbacks
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
119
119
  action: 'clicked',
120
120
  componentName: 'button',
121
121
  packageName: "@atlaskit/button",
122
- packageVersion: "17.20.0",
122
+ packageVersion: "17.21.0",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
package/dist/esm/new-button/containers/split-button/split-button.js CHANGED
@@ -5,6 +5,7 @@
5
5
 
6
6
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
7
  import { css, jsx } from '@emotion/react';
8
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
9
  import { fontSize as getFontSize } from '@atlaskit/theme/constants';
9
10
  var fontSize = getFontSize();
10
11
  var heights = {
@@ -16,7 +17,7 @@ import { SplitButtonContext } from './split-button-context';
16
17
  import { getActions } from './utils';
17
18
  var baseDividerStyles = css({
18
19
  display: 'inline-flex',
19
- width: '1px',
20
+ width: "var(--ds-border-width, 1px)",
20
21
  position: 'relative',
21
22
  zIndex: 2
22
23
  });
@@ -49,6 +50,9 @@ var dividerAppearance = {
49
50
  }),
50
51
  navigation: navigationDividerStyles
51
52
  };
53
+ var dividerRefreshedOffsetStyles = css({
54
+ marginInline: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")")
55
+ });
52
56
  var dividerHeight = {
53
57
  default: defaultDividerStyles,
54
58
  compact: compactDividerStyles
@@ -64,7 +68,7 @@ export var Divider = function Divider(_ref) {
64
68
  return (
65
69
  // I find it funny to provide a div for Divider
66
70
  jsx("div", {
67
- css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined]
71
+ css: [baseDividerStyles, dividerHeight[spacing], dividerAppearance[appearance], isDisabled ? dividerDisabledStyles : undefined, getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && dividerRefreshedOffsetStyles]
68
72
  })
69
73
  );
70
74
  };
@@ -88,13 +92,22 @@ var secondaryButtonStyles = css({
88
92
  borderStartStartRadius: 0
89
93
  }
90
94
  });
95
+ var defaultAppearanceContainerStyles = css({
96
+ borderRadius: "var(--ds-border-radius, 3px)",
97
+ outlineColor: "var(--ds-border, #091E4224)",
98
+ outlineOffset: "calc(0px - ".concat("var(--ds-border-width, 1px)", ")"),
99
+ outlineStyle: 'solid',
100
+ outlineWidth: "var(--ds-border-width, 1px)"
101
+ });
102
+
91
103
  /**
92
104
  * TODO: Add JSdoc
93
105
  */
94
106
  export var SplitButtonContainer = function SplitButtonContainer(_ref2) {
95
- var children = _ref2.children;
107
+ var appearance = _ref2.appearance,
108
+ children = _ref2.children;
96
109
  return jsx("div", {
97
- css: splitButtonStyles
110
+ css: [getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && appearance === 'default' && defaultAppearanceContainerStyles, splitButtonStyles]
98
111
  }, children);
99
112
  };
100
113
 
@@ -118,7 +131,9 @@ export var SplitButton = function SplitButton(_ref3) {
118
131
  var _getActions = getActions(children),
119
132
  PrimaryAction = _getActions.PrimaryAction,
120
133
  SecondaryAction = _getActions.SecondaryAction;
121
- return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
134
+ return jsx(SplitButtonContainer, {
135
+ appearance: appearance
136
+ }, jsx(SplitButtonContext.Provider, {
122
137
  value: {
123
138
  appearance: appearance,
124
139
  spacing: spacing,
@@ -146,7 +161,9 @@ export var SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
146
161
  spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
147
162
  _ref4$isDisabled = _ref4.isDisabled,
148
163
  isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
149
- return jsx(SplitButtonContainer, null, jsx(SplitButtonContext.Provider, {
164
+ return jsx(SplitButtonContainer, {
165
+ appearance: appearance
166
+ }, jsx(SplitButtonContext.Provider, {
150
167
  value: {
151
168
  appearance: appearance,
152
169
  spacing: spacing,
package/dist/esm/new-button/variants/shared/use-button-base.js CHANGED
@@ -23,27 +23,25 @@ var buttonStyles = xcss({
23
23
  alignItems: 'baseline',
24
24
  justifyContent: 'center',
25
25
  columnGap: 'space.050',
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
27
- background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
28
26
  borderRadius: 'border.radius.100',
29
27
  borderWidth: 'border.width.0',
30
- // @ts-expect-error
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
32
- color: "var(--ds-text, ".concat(colors.N500, ")"),
33
28
  flexShrink: 0,
34
29
  height: "".concat(32 / fontSize, "em"),
35
30
  paddingInlineEnd: 'space.150',
36
31
  paddingInlineStart: 'space.150',
37
32
  textAlign: 'center',
38
- transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
33
+ transition: 'background 0.1s ease-out',
39
34
  verticalAlign: 'middle',
40
- ':visited': {
41
- // @ts-expect-error
42
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
43
- color: "var(--ds-text, ".concat(colors.N500, ")")
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'
44
42
  }
45
43
  });
46
- var baseButtonStyles = xcss({
44
+ var hardCodedButtonStyles = xcss({
47
45
  fontFamily: 'inherit',
48
46
  fontSize: 'inherit',
49
47
  fontStyle: 'normal',
@@ -61,16 +59,46 @@ var defaultInteractiveStyles = xcss({
61
59
  background: "var(--ds-background-neutral-hovered, #091e4214)",
62
60
  // @ts-expect-error
63
61
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
64
- color: "var(--ds-text, ".concat(colors.N500, ")"),
65
- transitionDuration: '0s, 0.15s'
62
+ color: "var(--ds-text, ".concat(colors.N500, ")")
66
63
  },
67
64
  ':active': {
68
65
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
69
66
  background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
70
67
  // @ts-expect-error
71
68
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
72
- color: "var(--ds-text, ".concat(colors.B400, ")"),
73
- transitionDuration: '0s, 0s'
69
+ color: "var(--ds-text, ".concat(colors.B400, ")")
70
+ }
71
+ });
72
+ var defaultInteractiveRefreshedStyles = xcss({
73
+ ':hover': {
74
+ background: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
75
+ color: 'color.text.subtle'
76
+ },
77
+ ':active': {
78
+ background: "var(--ds-background-neutral-subtle-pressed, #091E4224)",
79
+ color: 'color.text.subtle'
80
+ }
81
+ });
82
+ var defaultStyles = xcss({
83
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
84
+ background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
85
+ // @ts-expect-error — using tokens for explicit fallback usage.
86
+ color: "var(--ds-text, ".concat(colors.N500, ")"),
87
+ ':visited': {
88
+ // @ts-expect-error
89
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
90
+ color: "var(--ds-text, ".concat(colors.N500, ")")
91
+ }
92
+ });
93
+ var defaultRefreshedStyles = xcss({
94
+ background: "var(--ds-background-neutral-subtle, #00000000)",
95
+ color: 'color.text.subtle',
96
+ '::after': {
97
+ content: '""',
98
+ borderColor: 'color.border'
99
+ },
100
+ ':visited': {
101
+ color: 'color.text.subtle'
74
102
  }
75
103
  });
76
104
  var primaryStyles = xcss({
@@ -158,6 +186,13 @@ var subtleStyles = xcss({
158
186
  color: "var(--ds-text, #42526E)"
159
187
  }
160
188
  });
189
+ var subtleRefreshedStyles = xcss({
190
+ background: "var(--ds-background-neutral-subtle, transparent)",
191
+ color: 'color.text.subtle',
192
+ ':visited': {
193
+ color: 'color.text.subtle'
194
+ }
195
+ });
161
196
  var subtleInteractiveStyles = xcss({
162
197
  ':hover': {
163
198
  background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
@@ -170,6 +205,16 @@ var subtleInteractiveStyles = xcss({
170
205
  color: "var(--ds-text, #42526E)"
171
206
  }
172
207
  });
208
+ var subtleInteractiveRefreshedStyles = xcss({
209
+ ':hover': {
210
+ background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
211
+ color: 'color.text.subtle'
212
+ },
213
+ ':active': {
214
+ background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
215
+ color: 'color.text.subtle'
216
+ }
217
+ });
173
218
  var linkStyles = xcss({
174
219
  // @ts-expect-error
175
220
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -255,6 +300,9 @@ var disabledStyles = xcss({
255
300
  background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
256
301
  // @ts-expect-error
257
302
  color: "var(--ds-text-disabled, #091E424F)"
303
+ },
304
+ '::after': {
305
+ content: 'none'
258
306
  }
259
307
  });
260
308
  var selectedStyles = xcss({
@@ -269,6 +317,17 @@ var selectedStyles = xcss({
269
317
  color: "var(--ds-text-selected, ".concat(colors.N20, ")")
270
318
  }
271
319
  });
320
+ var selectedRefreshedStyles = xcss({
321
+ background: "var(--ds-background-selected, #E9F2FF)",
322
+ color: 'color.text.selected',
323
+ '::after': {
324
+ content: '""',
325
+ borderColor: 'color.border.selected'
326
+ },
327
+ ':visited': {
328
+ color: 'color.text.selected'
329
+ }
330
+ });
272
331
  var selectedInteractiveStyles = xcss({
273
332
  ':hover': {
274
333
  // @ts-expect-error
@@ -448,7 +507,7 @@ var useButtonBase = function useButtonBase(_ref) {
448
507
  _ref$isLoading = _ref.isLoading,
449
508
  isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
450
509
  _ref$isSelected = _ref.isSelected,
451
- isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
510
+ propIsSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
452
511
  _ref$isIconButton = _ref.isIconButton,
453
512
  isIconButton = _ref$isIconButton === void 0 ? false : _ref$isIconButton,
454
513
  _ref$isCircle = _ref.isCircle,
@@ -485,16 +544,18 @@ var useButtonBase = function useButtonBase(_ref) {
485
544
  });
486
545
  var isSplitButton = Boolean(splitButtonContext);
487
546
  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
488
- var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
547
+ var isDefaultAppearanceSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) === 'default';
548
+ var appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
489
549
  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
490
550
  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
491
551
  var hasOverlay = Boolean(overlay);
492
552
  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
493
553
  var isEffectivelyDisabled = isDisabled || Boolean(overlay);
554
+ var isSelected = propIsSelected && !isDisabled;
494
555
  useAutoFocus(localRef, autoFocus);
495
556
  return _objectSpread({
496
557
  ref: mergeRefs([localRef, ref]),
497
- xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : baseButtonStyles, buttonStyles, appearance === 'default' && isInteractive && 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' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
558
+ xcss: [getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, buttonStyles, appearance === 'default' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? 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' && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') ? selectedRefreshedStyles : selectedStyles), isSelected && isInteractive && selectedInteractiveStyles,
498
559
  // TODO: remove me once we kill color fallbacks
499
560
  isSelected && appearance === 'danger' && selectedDangerStyles,
500
561
  // TODO: remove me once we kill color fallbacks
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -125,7 +125,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
125
125
  action: 'clicked',
126
126
  componentName: 'button',
127
127
  packageName: "@atlaskit/button",
128
- packageVersion: "17.20.0",
128
+ packageVersion: "17.21.0",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
package/dist/types/new-button/containers/split-button/split-button.d.ts CHANGED
@@ -17,7 +17,8 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
17
17
  /**
18
18
  * TODO: Add JSdoc
19
19
  */
20
- export declare const SplitButtonContainer: ({ children }: {
20
+ export declare const SplitButtonContainer: ({ appearance, children, }: {
21
+ appearance: SplitButtonAppearance;
21
22
  children: ReactNode;
22
23
  }) => jsx.JSX.Element;
23
24
  /**
package/dist/types/new-button/variants/shared/use-button-base.d.ts CHANGED
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
42
42
  *
43
43
  * @private
44
44
  */
45
- declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
45
+ declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
46
46
  export default useButtonBase;
package/dist/types-ts4.5/new-button/containers/split-button/split-button.d.ts CHANGED
@@ -17,7 +17,8 @@ export declare const Divider: ({ appearance, spacing, isDisabled }: DividerProps
17
17
  /**
18
18
  * TODO: Add JSdoc
19
19
  */
20
- export declare const SplitButtonContainer: ({ children }: {
20
+ export declare const SplitButtonContainer: ({ appearance, children, }: {
21
+ appearance: SplitButtonAppearance;
21
22
  children: ReactNode;
22
23
  }) => jsx.JSX.Element;
23
24
  /**
package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts CHANGED
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
42
42
  *
43
43
  * @private
44
44
  */
45
- declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
45
+ declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
46
46
  export default useButtonBase;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "17.20.0",
3
+ "version": "17.21.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/"
@@ -198,6 +198,9 @@
198
198
  "platform-feature-flags": {
199
199
  "platform.design-system-team.button-tokenised-typography-styles": {
200
200
  "type": "boolean"
201
+ },
202
+ "platform.design-system-team.component-visual-refresh_t8zbo": {
203
+ "type": "boolean"
201
204
  }
202
205
  }
203
206
  }