@atlaskit/button 19.2.1 → 20.0.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/button
2
2
 
3
+ ## 20.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#128880](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128880)
8
+ [`eb643a54fc192`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eb643a54fc192) -
9
+ Removed `link` and `subtle-link` options in the `appearance` prop for the LinkButton. Removed
10
+ `none` option in the `spacing` prop for the new Buttons.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 19.2.1
4
17
 
5
18
  ### Patch Changes
@@ -17,8 +17,7 @@ var _utils = require("./utils");
17
17
 
18
18
  var heights = {
19
19
  default: "".concat(32 / 14, "em"),
20
- compact: "".concat(24 / 14, "em"),
21
- none: 'auto'
20
+ compact: "".concat(24 / 14, "em")
22
21
  };
23
22
  var baseDividerStyles = (0, _react.css)({
24
23
  width: "var(--ds-border-width, 1px)",
@@ -11,8 +11,6 @@ function getIconSpacing(spacing) {
11
11
  switch (spacing) {
12
12
  case 'compact':
13
13
  return 'small';
14
- case 'none':
15
- return 'xsmall';
16
14
  default:
17
15
  return 'medium';
18
16
  }
@@ -225,53 +225,6 @@ var subtleInteractiveRefreshedStyles = (0, _primitives.xcss)({
225
225
  color: 'color.text.subtle'
226
226
  }
227
227
  });
228
- var linkStyles = (0, _primitives.xcss)({
229
- // @ts-expect-error
230
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
231
- color: "var(--ds-link, ".concat(colors.B400, ")"),
232
- background: "var(--ds-background-neutral-subtle, transparent)",
233
- textDecoration: 'none',
234
- ':hover': {
235
- // @ts-expect-error
236
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
237
- color: "var(--ds-link, ".concat(colors.B300, ")"),
238
- background: "var(--ds-background-neutral-subtle, transparent)"
239
- },
240
- ':active': {
241
- // @ts-expect-error
242
- color: "var(--ds-link-pressed, #0055CC)",
243
- background: "var(--ds-background-neutral-subtle, transparent)"
244
- },
245
- ':visited': {
246
- // @ts-expect-error
247
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
248
- color: "var(--ds-link, ".concat(colors.B400, ")")
249
- }
250
- });
251
- var subtleLinkStyles = (0, _primitives.xcss)({
252
- // @ts-expect-error
253
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
254
- color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
255
- background: "var(--ds-background-neutral-subtle, transparent)",
256
- textDecoration: 'none',
257
- ':hover': {
258
- // @ts-expect-error
259
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
260
- color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
261
- background: "var(--ds-background-neutral-subtle, transparent)"
262
- },
263
- ':active': {
264
- // @ts-expect-error
265
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
266
- color: "var(--ds-text, ".concat(colors.N400, ")"),
267
- background: "var(--ds-background-neutral-subtle, transparent)"
268
- },
269
- ':visited': {
270
- // @ts-expect-error
271
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
272
- color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
273
- }
274
- });
275
228
 
276
229
  // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
277
230
  var linkDecorationUnsetStyles = (0, _primitives.xcss)({
@@ -286,14 +239,6 @@ var linkDecorationUnsetStyles = (0, _primitives.xcss)({
286
239
  textDecoration: 'none'
287
240
  }
288
241
  });
289
- var linkDecorationStyles = (0, _primitives.xcss)({
290
- ':hover': {
291
- textDecoration: 'underline'
292
- },
293
- ':focus': {
294
- textDecoration: 'underline'
295
- }
296
- });
297
242
  var disabledStyles = (0, _primitives.xcss)({
298
243
  cursor: 'not-allowed',
299
244
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -440,17 +385,6 @@ var baseSpacingCompactStyles = (0, _primitives.xcss)({
440
385
  var tokenizedSpacingCompactStyles = (0, _primitives.xcss)({
441
386
  paddingBlock: 'space.025'
442
387
  });
443
- var spacingNoneStyles = (0, _primitives.xcss)({
444
- columnGap: 'space.0',
445
- height: 'auto',
446
- lineHeight: 'inherit',
447
- paddingInlineEnd: 'space.0',
448
- paddingInlineStart: 'space.0',
449
- verticalAlign: 'baseline'
450
- });
451
- var tokenizedSpacingNoneStyles = (0, _primitives.xcss)({
452
- paddingBlock: 'space.0'
453
- });
454
388
  var circleStyles = (0, _primitives.xcss)({
455
389
  borderRadius: 'border.radius.circle'
456
390
  });
@@ -569,13 +503,13 @@ var useButtonBase = function useButtonBase(_ref) {
569
503
  (0, _useAutoFocus.default)(localRef, autoFocus);
570
504
  return _objectSpread({
571
505
  ref: (0, _mergeRefs.default)([localRef, ref]),
572
- xcss: [(0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
506
+ xcss: [(0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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,
573
507
  // TODO: remove me once we kill color fallbacks
574
508
  isSelected && appearance === 'danger' && selectedDangerStyles,
575
509
  // TODO: remove me once we kill color fallbacks
576
510
  isSelected && appearance === 'warning' && selectedWarningStyles,
577
511
  // TODO: remove me once we kill color fallbacks
578
- isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && (0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
512
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && ((0, _platformFeatureFlags.fg)('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
579
513
  isDisabled: isEffectivelyDisabled,
580
514
  children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, isLoading ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
581
515
  as: "span",
@@ -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: "19.2.1",
136
+ packageVersion: "20.0.0",
137
137
  analyticsData: analyticsContext
138
138
  });
139
139
 
@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.linkButtonAppearances = exports.iconButtonAppearances = exports.buttonAppearances = void 0;
7
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'];
8
+ var linkButtonAppearances = exports.linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
9
9
  var iconButtonAppearances = exports.iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.iconButtonSpacing = exports.buttonSpacing = void 0;
7
- var buttonSpacing = exports.buttonSpacing = ['default', 'compact', 'none'];
7
+ var buttonSpacing = exports.buttonSpacing = ['default', 'compact'];
8
8
  var iconButtonSpacing = exports.iconButtonSpacing = ['default', 'compact'];
@@ -8,8 +8,7 @@ import { css, jsx } from '@emotion/react';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
9
  const heights = {
10
10
  default: `${32 / 14}em`,
11
- compact: `${24 / 14}em`,
12
- none: 'auto'
11
+ compact: `${24 / 14}em`
13
12
  };
14
13
  import { SplitButtonContext } from './split-button-context';
15
14
  import { getActions } from './utils';
@@ -4,8 +4,6 @@ function getIconSpacing(spacing) {
4
4
  switch (spacing) {
5
5
  case 'compact':
6
6
  return 'small';
7
- case 'none':
8
- return 'xsmall';
9
7
  default:
10
8
  return 'medium';
11
9
  }
@@ -212,53 +212,6 @@ const subtleInteractiveRefreshedStyles = xcss({
212
212
  color: 'color.text.subtle'
213
213
  }
214
214
  });
215
- const linkStyles = xcss({
216
- // @ts-expect-error
217
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
218
- color: `var(--ds-link, ${colors.B400})`,
219
- background: "var(--ds-background-neutral-subtle, transparent)",
220
- textDecoration: 'none',
221
- ':hover': {
222
- // @ts-expect-error
223
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
224
- color: `var(--ds-link, ${colors.B300})`,
225
- background: "var(--ds-background-neutral-subtle, transparent)"
226
- },
227
- ':active': {
228
- // @ts-expect-error
229
- color: "var(--ds-link-pressed, #0055CC)",
230
- background: "var(--ds-background-neutral-subtle, transparent)"
231
- },
232
- ':visited': {
233
- // @ts-expect-error
234
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
235
- color: `var(--ds-link, ${colors.B400})`
236
- }
237
- });
238
- const subtleLinkStyles = xcss({
239
- // @ts-expect-error
240
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
241
- color: `var(--ds-text-subtle, ${colors.N200})`,
242
- background: "var(--ds-background-neutral-subtle, transparent)",
243
- textDecoration: 'none',
244
- ':hover': {
245
- // @ts-expect-error
246
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
247
- color: `var(--ds-text-subtle, ${colors.N90})`,
248
- background: "var(--ds-background-neutral-subtle, transparent)"
249
- },
250
- ':active': {
251
- // @ts-expect-error
252
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
253
- color: `var(--ds-text, ${colors.N400})`,
254
- background: "var(--ds-background-neutral-subtle, transparent)"
255
- },
256
- ':visited': {
257
- // @ts-expect-error
258
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
259
- color: `var(--ds-text-subtle, ${colors.N200})`
260
- }
261
- });
262
215
 
263
216
  // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
264
217
  const linkDecorationUnsetStyles = xcss({
@@ -273,14 +226,6 @@ const linkDecorationUnsetStyles = xcss({
273
226
  textDecoration: 'none'
274
227
  }
275
228
  });
276
- const linkDecorationStyles = xcss({
277
- ':hover': {
278
- textDecoration: 'underline'
279
- },
280
- ':focus': {
281
- textDecoration: 'underline'
282
- }
283
- });
284
229
  const disabledStyles = xcss({
285
230
  cursor: 'not-allowed',
286
231
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -427,17 +372,6 @@ const baseSpacingCompactStyles = xcss({
427
372
  const tokenizedSpacingCompactStyles = xcss({
428
373
  paddingBlock: 'space.025'
429
374
  });
430
- const spacingNoneStyles = xcss({
431
- columnGap: 'space.0',
432
- height: 'auto',
433
- lineHeight: 'inherit',
434
- paddingInlineEnd: 'space.0',
435
- paddingInlineStart: 'space.0',
436
- verticalAlign: 'baseline'
437
- });
438
- const tokenizedSpacingNoneStyles = xcss({
439
- paddingBlock: 'space.0'
440
- });
441
375
  const circleStyles = xcss({
442
376
  borderRadius: 'border.radius.circle'
443
377
  });
@@ -548,13 +482,13 @@ const useButtonBase = ({
548
482
  useAutoFocus(localRef, autoFocus);
549
483
  return {
550
484
  ref: mergeRefs([localRef, ref]),
551
- xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
485
+ xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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,
552
486
  // TODO: remove me once we kill color fallbacks
553
487
  isSelected && appearance === 'danger' && selectedDangerStyles,
554
488
  // TODO: remove me once we kill color fallbacks
555
489
  isSelected && appearance === 'warning' && selectedWarningStyles,
556
490
  // TODO: remove me once we kill color fallbacks
557
- isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && fg('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
491
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
558
492
  isDisabled: isEffectivelyDisabled,
559
493
  children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
560
494
  as: "span",
@@ -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: "19.2.1",
122
+ packageVersion: "20.0.0",
123
123
  analyticsData: analyticsContext
124
124
  });
125
125
 
@@ -1,4 +1,4 @@
1
1
  const buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
2
- const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery', 'link', 'subtle-link'];
2
+ const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
3
3
  const iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
4
4
  export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
@@ -1,3 +1,3 @@
1
- const buttonSpacing = ['default', 'compact', 'none'];
1
+ const buttonSpacing = ['default', 'compact'];
2
2
  const iconButtonSpacing = ['default', 'compact'];
3
3
  export { buttonSpacing, iconButtonSpacing };
@@ -8,8 +8,7 @@ import { css, jsx } from '@emotion/react';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
9
  var heights = {
10
10
  default: "".concat(32 / 14, "em"),
11
- compact: "".concat(24 / 14, "em"),
12
- none: 'auto'
11
+ compact: "".concat(24 / 14, "em")
13
12
  };
14
13
  import { SplitButtonContext } from './split-button-context';
15
14
  import { getActions } from './utils';
@@ -4,8 +4,6 @@ function getIconSpacing(spacing) {
4
4
  switch (spacing) {
5
5
  case 'compact':
6
6
  return 'small';
7
- case 'none':
8
- return 'xsmall';
9
7
  default:
10
8
  return 'medium';
11
9
  }
@@ -215,53 +215,6 @@ var subtleInteractiveRefreshedStyles = xcss({
215
215
  color: 'color.text.subtle'
216
216
  }
217
217
  });
218
- var linkStyles = xcss({
219
- // @ts-expect-error
220
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
221
- color: "var(--ds-link, ".concat(colors.B400, ")"),
222
- background: "var(--ds-background-neutral-subtle, transparent)",
223
- textDecoration: 'none',
224
- ':hover': {
225
- // @ts-expect-error
226
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
227
- color: "var(--ds-link, ".concat(colors.B300, ")"),
228
- background: "var(--ds-background-neutral-subtle, transparent)"
229
- },
230
- ':active': {
231
- // @ts-expect-error
232
- color: "var(--ds-link-pressed, #0055CC)",
233
- background: "var(--ds-background-neutral-subtle, transparent)"
234
- },
235
- ':visited': {
236
- // @ts-expect-error
237
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
238
- color: "var(--ds-link, ".concat(colors.B400, ")")
239
- }
240
- });
241
- var subtleLinkStyles = xcss({
242
- // @ts-expect-error
243
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
244
- color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
245
- background: "var(--ds-background-neutral-subtle, transparent)",
246
- textDecoration: 'none',
247
- ':hover': {
248
- // @ts-expect-error
249
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
250
- color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
251
- background: "var(--ds-background-neutral-subtle, transparent)"
252
- },
253
- ':active': {
254
- // @ts-expect-error
255
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
256
- color: "var(--ds-text, ".concat(colors.N400, ")"),
257
- background: "var(--ds-background-neutral-subtle, transparent)"
258
- },
259
- ':visited': {
260
- // @ts-expect-error
261
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
262
- color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
263
- }
264
- });
265
218
 
266
219
  // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
267
220
  var linkDecorationUnsetStyles = xcss({
@@ -276,14 +229,6 @@ var linkDecorationUnsetStyles = xcss({
276
229
  textDecoration: 'none'
277
230
  }
278
231
  });
279
- var linkDecorationStyles = xcss({
280
- ':hover': {
281
- textDecoration: 'underline'
282
- },
283
- ':focus': {
284
- textDecoration: 'underline'
285
- }
286
- });
287
232
  var disabledStyles = xcss({
288
233
  cursor: 'not-allowed',
289
234
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -430,17 +375,6 @@ var baseSpacingCompactStyles = xcss({
430
375
  var tokenizedSpacingCompactStyles = xcss({
431
376
  paddingBlock: 'space.025'
432
377
  });
433
- var spacingNoneStyles = xcss({
434
- columnGap: 'space.0',
435
- height: 'auto',
436
- lineHeight: 'inherit',
437
- paddingInlineEnd: 'space.0',
438
- paddingInlineStart: 'space.0',
439
- verticalAlign: 'baseline'
440
- });
441
- var tokenizedSpacingNoneStyles = xcss({
442
- paddingBlock: 'space.0'
443
- });
444
378
  var circleStyles = xcss({
445
379
  borderRadius: 'border.radius.circle'
446
380
  });
@@ -559,13 +493,13 @@ var useButtonBase = function useButtonBase(_ref) {
559
493
  useAutoFocus(localRef, autoFocus);
560
494
  return _objectSpread({
561
495
  ref: mergeRefs([localRef, ref]),
562
- xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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), appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
496
+ xcss: [fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedButtonStyles : hardCodedButtonStyles, 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,
563
497
  // TODO: remove me once we kill color fallbacks
564
498
  isSelected && appearance === 'danger' && selectedDangerStyles,
565
499
  // TODO: remove me once we kill color fallbacks
566
500
  isSelected && appearance === 'warning' && selectedWarningStyles,
567
501
  // TODO: remove me once we kill color fallbacks
568
- isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && fg('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
502
+ isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (fg('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
569
503
  isDisabled: isEffectivelyDisabled,
570
504
  children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
571
505
  as: "span",
@@ -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: "19.2.1",
128
+ packageVersion: "20.0.0",
129
129
  analyticsData: analyticsContext
130
130
  });
131
131
 
@@ -1,4 +1,4 @@
1
1
  var buttonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
2
- var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery', 'link', 'subtle-link'];
2
+ var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
3
3
  var iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
4
4
  export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
@@ -1,3 +1,3 @@
1
- var buttonSpacing = ['default', 'compact', 'none'];
1
+ var buttonSpacing = ['default', 'compact'];
2
2
  var iconButtonSpacing = ['default', 'compact'];
3
3
  export { buttonSpacing, iconButtonSpacing };
@@ -12,7 +12,7 @@ export type CommonIconButtonProps = {
12
12
  */
13
13
  icon: IconProp;
14
14
  /**
15
- * Prevent a tooltip from showing. Use sparingly.
15
+ * Prevents a tooltip with the label text from showing. Use sparingly, as most icon-only buttons benefit from a tooltip or some other text clarifying the action.
16
16
  */
17
17
  isTooltipDisabled?: boolean;
18
18
  /**
@@ -2,10 +2,10 @@ import type React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
4
4
  export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
5
- export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
5
+ export type LinkButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
6
6
  export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
7
7
  export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
8
- export type ButtonSpacing = 'compact' | 'default' | 'none';
8
+ export type ButtonSpacing = 'compact' | 'default';
9
9
  export type IconButtonSpacing = 'compact' | 'default';
10
10
  export type Spacing = ButtonSpacing | IconButtonSpacing;
11
11
  export type IconProp = React.ComponentType<IconProps | UNSAFE_NewIconProps>;
@@ -12,7 +12,7 @@ export type CommonIconButtonProps = {
12
12
  */
13
13
  icon: IconProp;
14
14
  /**
15
- * Prevent a tooltip from showing. Use sparingly.
15
+ * Prevents a tooltip with the label text from showing. Use sparingly, as most icon-only buttons benefit from a tooltip or some other text clarifying the action.
16
16
  */
17
17
  isTooltipDisabled?: boolean;
18
18
  /**
@@ -2,10 +2,10 @@ import type React from 'react';
2
2
  import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
3
  import { type IconProps, type UNSAFE_NewIconProps } from '@atlaskit/icon/types';
4
4
  export type ButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
5
- export type LinkButtonAppearance = 'default' | 'danger' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'warning' | 'discovery';
5
+ export type LinkButtonAppearance = 'default' | 'danger' | 'primary' | 'subtle' | 'warning' | 'discovery';
6
6
  export type IconButtonAppearance = 'default' | 'primary' | 'discovery' | 'subtle';
7
7
  export type Appearance = ButtonAppearance | LinkButtonAppearance | IconButtonAppearance;
8
- export type ButtonSpacing = 'compact' | 'default' | 'none';
8
+ export type ButtonSpacing = 'compact' | 'default';
9
9
  export type IconButtonSpacing = 'compact' | 'default';
10
10
  export type Spacing = ButtonSpacing | IconButtonSpacing;
11
11
  export type IconProp = React.ComponentType<IconProps | UNSAFE_NewIconProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/button",
3
- "version": "19.2.1",
3
+ "version": "20.0.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/"
@@ -89,7 +89,7 @@
89
89
  "@atlaskit/analytics-next": "^10.1.0",
90
90
  "@atlaskit/ds-lib": "^2.4.0",
91
91
  "@atlaskit/focus-ring": "^1.6.0",
92
- "@atlaskit/icon": "^22.12.0",
92
+ "@atlaskit/icon": "^22.13.0",
93
93
  "@atlaskit/interaction-context": "^2.1.0",
94
94
  "@atlaskit/platform-feature-flags": "^0.3.0",
95
95
  "@atlaskit/primitives": "^12.0.0",