@atlaskit/button 17.12.2 → 17.14.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 (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/new-button/variants/shared/loading-overlay.js +1 -1
  3. package/dist/cjs/new-button/variants/shared/use-button-base.js +39 -3
  4. package/dist/cjs/old-button/shared/button-base.js +1 -1
  5. package/dist/cjs/utils/appearances.js +3 -3
  6. package/dist/es2019/new-button/variants/shared/loading-overlay.js +1 -1
  7. package/dist/es2019/new-button/variants/shared/use-button-base.js +39 -3
  8. package/dist/es2019/old-button/shared/button-base.js +1 -1
  9. package/dist/es2019/utils/appearances.js +3 -3
  10. package/dist/esm/new-button/variants/shared/loading-overlay.js +1 -1
  11. package/dist/esm/new-button/variants/shared/use-button-base.js +39 -3
  12. package/dist/esm/old-button/shared/button-base.js +1 -1
  13. package/dist/esm/utils/appearances.js +3 -3
  14. package/dist/types/new-button/variants/types.d.ts +3 -3
  15. package/dist/types-ts4.5/new-button/variants/types.d.ts +3 -3
  16. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 17.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#91634](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91634) [`f38506801b8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f38506801b8f) - Added a purple `discovery` appearance to new Buttons to be used to communicate change or new features.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 17.13.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [#92980](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92980) [`612718d81d68`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/612718d81d68) - Prevent new buttons from shrinking inside flex containers
18
+
3
19
  ## 17.12.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/new-button/variants/shared/loading-overlay.js CHANGED
@@ -24,7 +24,7 @@ function getSpinnerAppearance(_ref) {
24
24
  if (isDisabled || isSelected) {
25
25
  return 'inherit';
26
26
  }
27
- if (appearance === 'primary' || appearance === 'danger') {
27
+ if (appearance === 'primary' || appearance === 'danger' || appearance === 'discovery') {
28
28
  return 'invert';
29
29
  }
30
30
  return 'inherit';
package/dist/cjs/new-button/variants/shared/use-button-base.js CHANGED
@@ -34,6 +34,7 @@ var buttonStyles = (0, _primitives.xcss)({
34
34
  borderWidth: 'border.width.0',
35
35
  // @ts-expect-error
36
36
  color: "var(--ds-text, ".concat(colors.N500, ")"),
37
+ flexShrink: 0,
37
38
  fontFamily: 'inherit',
38
39
  fontSize: 'inherit',
39
40
  fontStyle: 'normal',
@@ -46,7 +47,6 @@ var buttonStyles = (0, _primitives.xcss)({
46
47
  textAlign: 'center',
47
48
  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
48
49
  verticalAlign: 'middle',
49
- whiteSpace: 'nowrap',
50
50
  ':visited': {
51
51
  // @ts-expect-error
52
52
  color: "var(--ds-text, ".concat(colors.N500, ")")
@@ -125,6 +125,23 @@ var dangerInteractiveStyles = (0, _primitives.xcss)({
125
125
  background: "var(--ds-background-danger-bold-pressed, #BF2600)"
126
126
  }
127
127
  });
128
+ var discoveryStyles = (0, _primitives.xcss)({
129
+ background: "var(--ds-background-discovery-bold, #5243AA)",
130
+ color: 'color.text.inverse',
131
+ ':visited': {
132
+ color: 'color.text.inverse'
133
+ }
134
+ });
135
+ var discoveryInteractiveStyles = (0, _primitives.xcss)({
136
+ ':hover': {
137
+ color: 'color.text.inverse',
138
+ background: "var(--ds-background-discovery-bold-hovered, #8777D9)"
139
+ },
140
+ ':active': {
141
+ color: 'color.text.inverse',
142
+ background: "var(--ds-background-discovery-bold-pressed, #5243AA)"
143
+ }
144
+ });
128
145
  var subtleStyles = (0, _primitives.xcss)({
129
146
  background: "var(--ds-background-neutral-subtle, transparent)",
130
147
  // @ts-expect-error
@@ -278,6 +295,23 @@ var selectedDangerStyles = (0, _primitives.xcss)({
278
295
  background: "var(--ds-background-selected, ".concat(colors.R500, ")")
279
296
  }
280
297
  });
298
+
299
+ // TODO: Remove me once we kill color fallbacks
300
+ var selectedDiscoveryStyles = (0, _primitives.xcss)({
301
+ background: "var(--ds-background-selected, #403294)",
302
+ // @ts-expect-error
303
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
304
+ ':hover': {
305
+ // @ts-expect-error
306
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
307
+ background: "var(--ds-background-selected, #403294)"
308
+ },
309
+ ':active': {
310
+ // @ts-expect-error
311
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
312
+ background: "var(--ds-background-selected, #403294)"
313
+ }
314
+ });
281
315
  var spacingCompactStyles = (0, _primitives.xcss)({
282
316
  columnGap: 'space.050',
283
317
  height: "".concat(24 / fontSize, "em"),
@@ -406,11 +440,13 @@ var useButtonBase = function useButtonBase(_ref) {
406
440
  (0, _useAutoFocus.default)(localRef, autoFocus);
407
441
  return _objectSpread({
408
442
  ref: (0, _mergeRefs.default)([localRef, ref]),
409
- xcss: [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 === '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,
443
+ xcss: [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,
410
444
  // TODO: remove me once we kill color fallbacks
411
445
  isSelected && appearance === 'danger' && selectedDangerStyles,
412
446
  // TODO: remove me once we kill color fallbacks
413
- isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
447
+ isSelected && appearance === 'warning' && selectedWarningStyles,
448
+ // TODO: remove me once we kill color fallbacks
449
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
414
450
  // Consider overlay buttons to be effectively disabled
415
451
  isDisabled: isEffectivelyDisabled,
416
452
  children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, overlay ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
package/dist/cjs/old-button/shared/button-base.js CHANGED
@@ -117,7 +117,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
117
117
  action: 'clicked',
118
118
  componentName: 'button',
119
119
  packageName: "@atlaskit/button",
120
- packageVersion: "17.12.2",
120
+ packageVersion: "17.14.0",
121
121
  analyticsData: analyticsContext
122
122
  });
123
123
 
package/dist/cjs/utils/appearances.js CHANGED
@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.linkButtonAppearances = exports.iconButtonAppearances = exports.buttonAppearances = void 0;
7
- var buttonAppearances = exports.buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
8
- var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
9
- var iconButtonAppearances = exports.iconButtonAppearances = ['default', 'primary', 'subtle'];
7
+ var buttonAppearances = exports.buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
8
+ var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery', 'link', 'subtle-link'];
9
+ var iconButtonAppearances = exports.iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
package/dist/es2019/new-button/variants/shared/loading-overlay.js CHANGED
@@ -18,7 +18,7 @@ function getSpinnerAppearance({
18
18
  if (isDisabled || isSelected) {
19
19
  return 'inherit';
20
20
  }
21
- if (appearance === 'primary' || appearance === 'danger') {
21
+ if (appearance === 'primary' || appearance === 'danger' || appearance === 'discovery') {
22
22
  return 'invert';
23
23
  }
24
24
  return 'inherit';
package/dist/es2019/new-button/variants/shared/use-button-base.js CHANGED
@@ -21,6 +21,7 @@ const buttonStyles = xcss({
21
21
  borderWidth: 'border.width.0',
22
22
  // @ts-expect-error
23
23
  color: `var(--ds-text, ${colors.N500})`,
24
+ flexShrink: 0,
24
25
  fontFamily: 'inherit',
25
26
  fontSize: 'inherit',
26
27
  fontStyle: 'normal',
@@ -33,7 +34,6 @@ const buttonStyles = xcss({
33
34
  textAlign: 'center',
34
35
  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
35
36
  verticalAlign: 'middle',
36
- whiteSpace: 'nowrap',
37
37
  ':visited': {
38
38
  // @ts-expect-error
39
39
  color: `var(--ds-text, ${colors.N500})`
@@ -112,6 +112,23 @@ const dangerInteractiveStyles = xcss({
112
112
  background: "var(--ds-background-danger-bold-pressed, #BF2600)"
113
113
  }
114
114
  });
115
+ const discoveryStyles = xcss({
116
+ background: "var(--ds-background-discovery-bold, #5243AA)",
117
+ color: 'color.text.inverse',
118
+ ':visited': {
119
+ color: 'color.text.inverse'
120
+ }
121
+ });
122
+ const discoveryInteractiveStyles = xcss({
123
+ ':hover': {
124
+ color: 'color.text.inverse',
125
+ background: "var(--ds-background-discovery-bold-hovered, #8777D9)"
126
+ },
127
+ ':active': {
128
+ color: 'color.text.inverse',
129
+ background: "var(--ds-background-discovery-bold-pressed, #5243AA)"
130
+ }
131
+ });
115
132
  const subtleStyles = xcss({
116
133
  background: "var(--ds-background-neutral-subtle, transparent)",
117
134
  // @ts-expect-error
@@ -265,6 +282,23 @@ const selectedDangerStyles = xcss({
265
282
  background: `var(--ds-background-selected, ${colors.R500})`
266
283
  }
267
284
  });
285
+
286
+ // TODO: Remove me once we kill color fallbacks
287
+ const selectedDiscoveryStyles = xcss({
288
+ background: "var(--ds-background-selected, #403294)",
289
+ // @ts-expect-error
290
+ color: `var(--ds-text-selected, ${colors.N20})`,
291
+ ':hover': {
292
+ // @ts-expect-error
293
+ color: `var(--ds-text-selected, ${colors.N20})`,
294
+ background: "var(--ds-background-selected, #403294)"
295
+ },
296
+ ':active': {
297
+ // @ts-expect-error
298
+ color: `var(--ds-text-selected, ${colors.N20})`,
299
+ background: "var(--ds-background-selected, #403294)"
300
+ }
301
+ });
268
302
  const spacingCompactStyles = xcss({
269
303
  columnGap: 'space.050',
270
304
  height: `${24 / fontSize}em`,
@@ -385,11 +419,13 @@ const useButtonBase = ({
385
419
  useAutoFocus(localRef, autoFocus);
386
420
  return {
387
421
  ref: mergeRefs([localRef, ref]),
388
- xcss: [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 === '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,
422
+ xcss: [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,
389
423
  // TODO: remove me once we kill color fallbacks
390
424
  isSelected && appearance === 'danger' && selectedDangerStyles,
391
425
  // TODO: remove me once we kill color fallbacks
392
- isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
426
+ isSelected && appearance === 'warning' && selectedWarningStyles,
427
+ // TODO: remove me once we kill color fallbacks
428
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
393
429
  // Consider overlay buttons to be effectively disabled
394
430
  isDisabled: isEffectivelyDisabled,
395
431
  children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
package/dist/es2019/old-button/shared/button-base.js CHANGED
@@ -102,7 +102,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
102
102
  action: 'clicked',
103
103
  componentName: 'button',
104
104
  packageName: "@atlaskit/button",
105
- packageVersion: "17.12.2",
105
+ packageVersion: "17.14.0",
106
106
  analyticsData: analyticsContext
107
107
  });
108
108
 
package/dist/es2019/utils/appearances.js CHANGED
@@ -1,4 +1,4 @@
1
- const buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
2
- const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
3
- const iconButtonAppearances = ['default', 'primary', 'subtle'];
1
+ const buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
2
+ const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery', 'link', 'subtle-link'];
3
+ const iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
4
4
  export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
package/dist/esm/new-button/variants/shared/loading-overlay.js CHANGED
@@ -17,7 +17,7 @@ function getSpinnerAppearance(_ref) {
17
17
  if (isDisabled || isSelected) {
18
18
  return 'inherit';
19
19
  }
20
- if (appearance === 'primary' || appearance === 'danger') {
20
+ if (appearance === 'primary' || appearance === 'danger' || appearance === 'discovery') {
21
21
  return 'invert';
22
22
  }
23
23
  return 'inherit';
package/dist/esm/new-button/variants/shared/use-button-base.js CHANGED
@@ -24,6 +24,7 @@ var buttonStyles = xcss({
24
24
  borderWidth: 'border.width.0',
25
25
  // @ts-expect-error
26
26
  color: "var(--ds-text, ".concat(colors.N500, ")"),
27
+ flexShrink: 0,
27
28
  fontFamily: 'inherit',
28
29
  fontSize: 'inherit',
29
30
  fontStyle: 'normal',
@@ -36,7 +37,6 @@ var buttonStyles = xcss({
36
37
  textAlign: 'center',
37
38
  transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
38
39
  verticalAlign: 'middle',
39
- whiteSpace: 'nowrap',
40
40
  ':visited': {
41
41
  // @ts-expect-error
42
42
  color: "var(--ds-text, ".concat(colors.N500, ")")
@@ -115,6 +115,23 @@ var dangerInteractiveStyles = xcss({
115
115
  background: "var(--ds-background-danger-bold-pressed, #BF2600)"
116
116
  }
117
117
  });
118
+ var discoveryStyles = xcss({
119
+ background: "var(--ds-background-discovery-bold, #5243AA)",
120
+ color: 'color.text.inverse',
121
+ ':visited': {
122
+ color: 'color.text.inverse'
123
+ }
124
+ });
125
+ var discoveryInteractiveStyles = xcss({
126
+ ':hover': {
127
+ color: 'color.text.inverse',
128
+ background: "var(--ds-background-discovery-bold-hovered, #8777D9)"
129
+ },
130
+ ':active': {
131
+ color: 'color.text.inverse',
132
+ background: "var(--ds-background-discovery-bold-pressed, #5243AA)"
133
+ }
134
+ });
118
135
  var subtleStyles = xcss({
119
136
  background: "var(--ds-background-neutral-subtle, transparent)",
120
137
  // @ts-expect-error
@@ -268,6 +285,23 @@ var selectedDangerStyles = xcss({
268
285
  background: "var(--ds-background-selected, ".concat(colors.R500, ")")
269
286
  }
270
287
  });
288
+
289
+ // TODO: Remove me once we kill color fallbacks
290
+ var selectedDiscoveryStyles = xcss({
291
+ background: "var(--ds-background-selected, #403294)",
292
+ // @ts-expect-error
293
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
294
+ ':hover': {
295
+ // @ts-expect-error
296
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
297
+ background: "var(--ds-background-selected, #403294)"
298
+ },
299
+ ':active': {
300
+ // @ts-expect-error
301
+ color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
302
+ background: "var(--ds-background-selected, #403294)"
303
+ }
304
+ });
271
305
  var spacingCompactStyles = xcss({
272
306
  columnGap: 'space.050',
273
307
  height: "".concat(24 / fontSize, "em"),
@@ -396,11 +430,13 @@ var useButtonBase = function useButtonBase(_ref) {
396
430
  useAutoFocus(localRef, autoFocus);
397
431
  return _objectSpread({
398
432
  ref: mergeRefs([localRef, ref]),
399
- xcss: [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 === '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,
433
+ xcss: [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,
400
434
  // TODO: remove me once we kill color fallbacks
401
435
  isSelected && appearance === 'danger' && selectedDangerStyles,
402
436
  // TODO: remove me once we kill color fallbacks
403
- isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
437
+ isSelected && appearance === 'warning' && selectedWarningStyles,
438
+ // TODO: remove me once we kill color fallbacks
439
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
404
440
  // Consider overlay buttons to be effectively disabled
405
441
  isDisabled: isEffectivelyDisabled,
406
442
  children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
package/dist/esm/old-button/shared/button-base.js CHANGED
@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
108
108
  action: 'clicked',
109
109
  componentName: 'button',
110
110
  packageName: "@atlaskit/button",
111
- packageVersion: "17.12.2",
111
+ packageVersion: "17.14.0",
112
112
  analyticsData: analyticsContext
113
113
  });
114
114
 
package/dist/esm/utils/appearances.js CHANGED
@@ -1,4 +1,4 @@
1
- var buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger'];
2
- var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'link', 'subtle-link'];
3
- var iconButtonAppearances = ['default', 'primary', 'subtle'];
1
+ var buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
2
+ var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery', 'link', 'subtle-link'];
3
+ var iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
4
4
  export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
package/dist/types/new-button/variants/types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconProps } from '@atlaskit/icon/types';
4
- export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
5
- export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
6
- export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
4
+ export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
5
+ export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
6
+ export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
7
7
  export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
8
8
  export type ButtonSpacing = 'compact' | 'default' | 'none';
9
9
  export type IconButtonSpacing = 'compact' | 'default';
package/dist/types-ts4.5/new-button/variants/types.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconProps } from '@atlaskit/icon/types';
4
- export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning';
5
- export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning';
6
- export type IconButtonAppearance = 'default' | 'primary' | 'subtle';
4
+ export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
5
+ export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
6
+ export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
7
7
  export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
8
8
  export type ButtonSpacing = 'compact' | 'default' | 'none';
9
9
  export type IconButtonSpacing = 'compact' | 'default';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "17.12.2",
3
+ "version": "17.14.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/"
@@ -82,7 +82,7 @@
82
82
  ".": "./src/index.tsx"
83
83
  },
84
84
  "dependencies": {
85
- "@atlaskit/analytics-next": "^9.2.0",
85
+ "@atlaskit/analytics-next": "^9.3.0",
86
86
  "@atlaskit/ds-lib": "^2.3.0",
87
87
  "@atlaskit/focus-ring": "^1.3.9",
88
88
  "@atlaskit/icon": "^22.1.0",