@atlaskit/button 19.2.0 → 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 +19 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +1 -2
- package/dist/cjs/new-button/variants/shared/loading-overlay.js +0 -2
- package/dist/cjs/new-button/variants/shared/use-button-base.js +2 -68
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/cjs/utils/appearances.js +1 -1
- package/dist/cjs/utils/spacing.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.js +1 -2
- package/dist/es2019/new-button/variants/shared/loading-overlay.js +0 -2
- package/dist/es2019/new-button/variants/shared/use-button-base.js +2 -68
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/es2019/utils/appearances.js +1 -1
- package/dist/es2019/utils/spacing.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.js +1 -2
- package/dist/esm/new-button/variants/shared/loading-overlay.js +0 -2
- package/dist/esm/new-button/variants/shared/use-button-base.js +2 -68
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/esm/utils/appearances.js +1 -1
- package/dist/esm/utils/spacing.js +1 -1
- package/dist/types/new-button/variants/icon/types.d.ts +1 -1
- package/dist/types/new-button/variants/types.d.ts +2 -2
- package/dist/types-ts4.5/new-button/variants/icon/types.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/types.d.ts +2 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
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
|
+
|
|
16
|
+
## 19.2.1
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 19.2.0
|
|
4
23
|
|
|
5
24
|
### Minor 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)",
|
|
@@ -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),
|
|
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),
|
|
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: "
|
|
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'
|
|
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'
|
|
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';
|
|
@@ -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),
|
|
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),
|
|
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: "
|
|
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'
|
|
2
|
+
const linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
|
|
3
3
|
const iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
|
|
4
4
|
export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
|
|
@@ -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';
|
|
@@ -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),
|
|
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),
|
|
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: "
|
|
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'
|
|
2
|
+
var linkButtonAppearances = ['default', 'primary', 'subtle', 'warning', 'danger', 'discovery'];
|
|
3
3
|
var iconButtonAppearances = ['default', 'primary', 'discovery', 'subtle'];
|
|
4
4
|
export { buttonAppearances, linkButtonAppearances, iconButtonAppearances };
|
|
@@ -12,7 +12,7 @@ export type CommonIconButtonProps = {
|
|
|
12
12
|
*/
|
|
13
13
|
icon: IconProp;
|
|
14
14
|
/**
|
|
15
|
-
*
|
|
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' | '
|
|
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'
|
|
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
|
-
*
|
|
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' | '
|
|
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'
|
|
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": "
|
|
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,12 +89,12 @@
|
|
|
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.
|
|
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",
|
|
96
96
|
"@atlaskit/spinner": "^16.3.0",
|
|
97
|
-
"@atlaskit/theme": "^
|
|
97
|
+
"@atlaskit/theme": "^13.0.0",
|
|
98
98
|
"@atlaskit/tokens": "^1.58.0",
|
|
99
99
|
"@atlaskit/tooltip": "^18.7.0",
|
|
100
100
|
"@atlaskit/visually-hidden": "^1.5.0",
|