@atlaskit/button 20.2.6 → 20.3.1
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 +15 -0
- package/dist/cjs/new-button/variants/shared/use-button-base.js +6 -21
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/variants/shared/use-button-base.js +6 -21
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/variants/shared/use-button-base.js +6 -21
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/package.json +5 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 20.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 20.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#155195](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155195)
|
|
14
|
+
[`8aebfeb14d89a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8aebfeb14d89a) -
|
|
15
|
+
[ux] Removed feature flag `platform.design-system-team.button-tokenised-typography-styles`
|
|
16
|
+
resulting in fully tokenised typography styles.
|
|
17
|
+
|
|
3
18
|
## 20.2.6
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -36,6 +36,9 @@ var buttonStyles = (0, _primitives.xcss)({
|
|
|
36
36
|
borderWidth: 'border.width.0',
|
|
37
37
|
flexShrink: 0,
|
|
38
38
|
height: "".concat(32 / 14, "em"),
|
|
39
|
+
font: 'font.body',
|
|
40
|
+
fontWeight: 'font.weight.medium',
|
|
41
|
+
paddingBlock: 'space.075',
|
|
39
42
|
paddingInlineEnd: 'space.150',
|
|
40
43
|
paddingInlineStart: 'space.150',
|
|
41
44
|
textAlign: 'center',
|
|
@@ -50,19 +53,6 @@ var buttonStyles = (0, _primitives.xcss)({
|
|
|
50
53
|
position: 'absolute'
|
|
51
54
|
}
|
|
52
55
|
});
|
|
53
|
-
var hardCodedButtonStyles = (0, _primitives.xcss)({
|
|
54
|
-
fontFamily: 'inherit',
|
|
55
|
-
fontSize: 'inherit',
|
|
56
|
-
fontStyle: 'normal',
|
|
57
|
-
fontWeight: 500,
|
|
58
|
-
lineHeight: "".concat(32 / 14, "em"),
|
|
59
|
-
paddingBlock: 'space.0'
|
|
60
|
-
});
|
|
61
|
-
var tokenizedButtonStyles = (0, _primitives.xcss)({
|
|
62
|
-
font: 'font.body',
|
|
63
|
-
fontWeight: 'font.weight.medium',
|
|
64
|
-
paddingBlock: 'space.075'
|
|
65
|
-
});
|
|
66
56
|
var defaultInteractiveStyles = (0, _primitives.xcss)({
|
|
67
57
|
':hover': {
|
|
68
58
|
background: "var(--ds-background-neutral-hovered, #091e4214)",
|
|
@@ -375,16 +365,11 @@ var selectedDiscoveryStyles = (0, _primitives.xcss)({
|
|
|
375
365
|
var spacingCompactStyles = (0, _primitives.xcss)({
|
|
376
366
|
columnGap: 'space.050',
|
|
377
367
|
height: "".concat(24 / 14, "em"),
|
|
368
|
+
paddingBlock: 'space.025',
|
|
378
369
|
paddingInlineEnd: 'space.150',
|
|
379
370
|
paddingInlineStart: 'space.150',
|
|
380
371
|
verticalAlign: 'middle'
|
|
381
372
|
});
|
|
382
|
-
var baseSpacingCompactStyles = (0, _primitives.xcss)({
|
|
383
|
-
lineHeight: "".concat(24 / 14, "em")
|
|
384
|
-
});
|
|
385
|
-
var tokenizedSpacingCompactStyles = (0, _primitives.xcss)({
|
|
386
|
-
paddingBlock: 'space.025'
|
|
387
|
-
});
|
|
388
373
|
var circleStyles = (0, _primitives.xcss)({
|
|
389
374
|
borderRadius: 'border.radius.circle'
|
|
390
375
|
});
|
|
@@ -499,13 +484,13 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
499
484
|
(0, _useAutoFocus.default)(localRef, autoFocus);
|
|
500
485
|
return _objectSpread({
|
|
501
486
|
ref: (0, _mergeRefs.default)([localRef, ref]),
|
|
502
|
-
xcss: [
|
|
487
|
+
xcss: [buttonStyles, appearance === 'default' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
503
488
|
// TODO: remove me once we kill color fallbacks
|
|
504
489
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
505
490
|
// TODO: remove me once we kill color fallbacks
|
|
506
491
|
isSelected && appearance === 'warning' && selectedWarningStyles,
|
|
507
492
|
// TODO: remove me once we kill color fallbacks
|
|
508
|
-
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles,
|
|
493
|
+
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
|
|
509
494
|
isDisabled: isEffectivelyDisabled,
|
|
510
495
|
children: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children, isLoading ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
511
496
|
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: "20.
|
|
136
|
+
packageVersion: "20.3.1",
|
|
137
137
|
analyticsData: analyticsContext
|
|
138
138
|
});
|
|
139
139
|
|
|
@@ -23,6 +23,9 @@ const buttonStyles = xcss({
|
|
|
23
23
|
borderWidth: 'border.width.0',
|
|
24
24
|
flexShrink: 0,
|
|
25
25
|
height: `${32 / 14}em`,
|
|
26
|
+
font: 'font.body',
|
|
27
|
+
fontWeight: 'font.weight.medium',
|
|
28
|
+
paddingBlock: 'space.075',
|
|
26
29
|
paddingInlineEnd: 'space.150',
|
|
27
30
|
paddingInlineStart: 'space.150',
|
|
28
31
|
textAlign: 'center',
|
|
@@ -37,19 +40,6 @@ const buttonStyles = xcss({
|
|
|
37
40
|
position: 'absolute'
|
|
38
41
|
}
|
|
39
42
|
});
|
|
40
|
-
const hardCodedButtonStyles = xcss({
|
|
41
|
-
fontFamily: 'inherit',
|
|
42
|
-
fontSize: 'inherit',
|
|
43
|
-
fontStyle: 'normal',
|
|
44
|
-
fontWeight: 500,
|
|
45
|
-
lineHeight: `${32 / 14}em`,
|
|
46
|
-
paddingBlock: 'space.0'
|
|
47
|
-
});
|
|
48
|
-
const tokenizedButtonStyles = xcss({
|
|
49
|
-
font: 'font.body',
|
|
50
|
-
fontWeight: 'font.weight.medium',
|
|
51
|
-
paddingBlock: 'space.075'
|
|
52
|
-
});
|
|
53
43
|
const defaultInteractiveStyles = xcss({
|
|
54
44
|
':hover': {
|
|
55
45
|
background: "var(--ds-background-neutral-hovered, #091e4214)",
|
|
@@ -362,16 +352,11 @@ const selectedDiscoveryStyles = xcss({
|
|
|
362
352
|
const spacingCompactStyles = xcss({
|
|
363
353
|
columnGap: 'space.050',
|
|
364
354
|
height: `${24 / 14}em`,
|
|
355
|
+
paddingBlock: 'space.025',
|
|
365
356
|
paddingInlineEnd: 'space.150',
|
|
366
357
|
paddingInlineStart: 'space.150',
|
|
367
358
|
verticalAlign: 'middle'
|
|
368
359
|
});
|
|
369
|
-
const baseSpacingCompactStyles = xcss({
|
|
370
|
-
lineHeight: `${24 / 14}em`
|
|
371
|
-
});
|
|
372
|
-
const tokenizedSpacingCompactStyles = xcss({
|
|
373
|
-
paddingBlock: 'space.025'
|
|
374
|
-
});
|
|
375
360
|
const circleStyles = xcss({
|
|
376
361
|
borderRadius: 'border.radius.circle'
|
|
377
362
|
});
|
|
@@ -478,13 +463,13 @@ const useButtonBase = ({
|
|
|
478
463
|
useAutoFocus(localRef, autoFocus);
|
|
479
464
|
return {
|
|
480
465
|
ref: mergeRefs([localRef, ref]),
|
|
481
|
-
xcss: [
|
|
466
|
+
xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
482
467
|
// TODO: remove me once we kill color fallbacks
|
|
483
468
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
484
469
|
// TODO: remove me once we kill color fallbacks
|
|
485
470
|
isSelected && appearance === 'warning' && selectedWarningStyles,
|
|
486
471
|
// TODO: remove me once we kill color fallbacks
|
|
487
|
-
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles,
|
|
472
|
+
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
|
|
488
473
|
isDisabled: isEffectivelyDisabled,
|
|
489
474
|
children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
|
|
490
475
|
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: "20.
|
|
122
|
+
packageVersion: "20.3.1",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -26,6 +26,9 @@ var buttonStyles = xcss({
|
|
|
26
26
|
borderWidth: 'border.width.0',
|
|
27
27
|
flexShrink: 0,
|
|
28
28
|
height: "".concat(32 / 14, "em"),
|
|
29
|
+
font: 'font.body',
|
|
30
|
+
fontWeight: 'font.weight.medium',
|
|
31
|
+
paddingBlock: 'space.075',
|
|
29
32
|
paddingInlineEnd: 'space.150',
|
|
30
33
|
paddingInlineStart: 'space.150',
|
|
31
34
|
textAlign: 'center',
|
|
@@ -40,19 +43,6 @@ var buttonStyles = xcss({
|
|
|
40
43
|
position: 'absolute'
|
|
41
44
|
}
|
|
42
45
|
});
|
|
43
|
-
var hardCodedButtonStyles = xcss({
|
|
44
|
-
fontFamily: 'inherit',
|
|
45
|
-
fontSize: 'inherit',
|
|
46
|
-
fontStyle: 'normal',
|
|
47
|
-
fontWeight: 500,
|
|
48
|
-
lineHeight: "".concat(32 / 14, "em"),
|
|
49
|
-
paddingBlock: 'space.0'
|
|
50
|
-
});
|
|
51
|
-
var tokenizedButtonStyles = xcss({
|
|
52
|
-
font: 'font.body',
|
|
53
|
-
fontWeight: 'font.weight.medium',
|
|
54
|
-
paddingBlock: 'space.075'
|
|
55
|
-
});
|
|
56
46
|
var defaultInteractiveStyles = xcss({
|
|
57
47
|
':hover': {
|
|
58
48
|
background: "var(--ds-background-neutral-hovered, #091e4214)",
|
|
@@ -365,16 +355,11 @@ var selectedDiscoveryStyles = xcss({
|
|
|
365
355
|
var spacingCompactStyles = xcss({
|
|
366
356
|
columnGap: 'space.050',
|
|
367
357
|
height: "".concat(24 / 14, "em"),
|
|
358
|
+
paddingBlock: 'space.025',
|
|
368
359
|
paddingInlineEnd: 'space.150',
|
|
369
360
|
paddingInlineStart: 'space.150',
|
|
370
361
|
verticalAlign: 'middle'
|
|
371
362
|
});
|
|
372
|
-
var baseSpacingCompactStyles = xcss({
|
|
373
|
-
lineHeight: "".concat(24 / 14, "em")
|
|
374
|
-
});
|
|
375
|
-
var tokenizedSpacingCompactStyles = xcss({
|
|
376
|
-
paddingBlock: 'space.025'
|
|
377
|
-
});
|
|
378
363
|
var circleStyles = xcss({
|
|
379
364
|
borderRadius: 'border.radius.circle'
|
|
380
365
|
});
|
|
@@ -489,13 +474,13 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
489
474
|
useAutoFocus(localRef, autoFocus);
|
|
490
475
|
return _objectSpread({
|
|
491
476
|
ref: mergeRefs([localRef, ref]),
|
|
492
|
-
xcss: [
|
|
477
|
+
xcss: [buttonStyles, appearance === 'default' && (fg('platform-component-visual-refresh') ? defaultRefreshedStyles : defaultStyles), appearance === 'default' && isInteractive && (fg('platform-component-visual-refresh') ? defaultInteractiveRefreshedStyles : defaultInteractiveStyles), appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'discovery' && discoveryStyles, appearance === 'discovery' && isInteractive && discoveryInteractiveStyles, appearance === 'subtle' && (fg('platform-component-visual-refresh') ? subtleRefreshedStyles : subtleStyles), appearance === 'subtle' && isInteractive && (fg('platform-component-visual-refresh') ? subtleInteractiveRefreshedStyles : subtleInteractiveStyles), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
493
478
|
// TODO: remove me once we kill color fallbacks
|
|
494
479
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
495
480
|
// TODO: remove me once we kill color fallbacks
|
|
496
481
|
isSelected && appearance === 'warning' && selectedWarningStyles,
|
|
497
482
|
// TODO: remove me once we kill color fallbacks
|
|
498
|
-
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles,
|
|
483
|
+
isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, hasIconBefore && buttonIconBeforeStyles, hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
|
|
499
484
|
isDisabled: isEffectivelyDisabled,
|
|
500
485
|
children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
|
|
501
486
|
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: "20.
|
|
128
|
+
packageVersion: "20.3.1",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.3.1",
|
|
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/"
|
|
@@ -85,10 +85,10 @@
|
|
|
85
85
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
86
86
|
"@atlaskit/ds-lib": "^3.1.0",
|
|
87
87
|
"@atlaskit/focus-ring": "^1.6.0",
|
|
88
|
-
"@atlaskit/icon": "^22.
|
|
88
|
+
"@atlaskit/icon": "^22.24.0",
|
|
89
89
|
"@atlaskit/interaction-context": "^2.1.0",
|
|
90
90
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
91
|
-
"@atlaskit/primitives": "^
|
|
91
|
+
"@atlaskit/primitives": "^13.0.0",
|
|
92
92
|
"@atlaskit/spinner": "^16.3.0",
|
|
93
93
|
"@atlaskit/theme": "^14.0.0",
|
|
94
94
|
"@atlaskit/tokens": "^2.0.0",
|
|
@@ -106,8 +106,8 @@
|
|
|
106
106
|
"@af/visual-regression": "*",
|
|
107
107
|
"@atlaskit/app-provider": "^1.4.0",
|
|
108
108
|
"@atlaskit/calendar": "^15.0.0",
|
|
109
|
-
"@atlaskit/checkbox": "^15.
|
|
110
|
-
"@atlaskit/dropdown-menu": "^12.
|
|
109
|
+
"@atlaskit/checkbox": "^15.1.0",
|
|
110
|
+
"@atlaskit/dropdown-menu": "^12.22.0",
|
|
111
111
|
"@atlaskit/ssr": "*",
|
|
112
112
|
"@atlaskit/toggle": "^13.4.0",
|
|
113
113
|
"@atlaskit/visual-regression": "*",
|
|
@@ -127,9 +127,6 @@
|
|
|
127
127
|
},
|
|
128
128
|
"homepage": "https://atlassian.design/components/button/",
|
|
129
129
|
"platform-feature-flags": {
|
|
130
|
-
"platform.design-system-team.button-tokenised-typography-styles": {
|
|
131
|
-
"type": "boolean"
|
|
132
|
-
},
|
|
133
130
|
"platform-component-visual-refresh": {
|
|
134
131
|
"type": "boolean"
|
|
135
132
|
}
|