@atlaskit/button 21.1.0 → 21.1.2
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 +130 -15
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/variants/shared/use-button-base.js +130 -15
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/variants/shared/use-button-base.js +130 -15
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +1 -1
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/button
|
|
2
2
|
|
|
3
|
+
## 21.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 21.1.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#119753](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119753)
|
|
14
|
+
[`6a1bfec451e30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a1bfec451e30) -
|
|
15
|
+
[ux] `color` and `text-decoration` style specificity have been increased to reduce the probability
|
|
16
|
+
of global `<a>` tag styles interfering with button styles.
|
|
17
|
+
|
|
3
18
|
## 21.1.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
|
@@ -88,6 +88,21 @@ var defaultStyles = (0, _primitives.xcss)({
|
|
|
88
88
|
// @ts-expect-error
|
|
89
89
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
90
90
|
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
91
|
+
},
|
|
92
|
+
':hover': {
|
|
93
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
95
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
96
|
+
},
|
|
97
|
+
':active': {
|
|
98
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
100
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
101
|
+
},
|
|
102
|
+
':focus': {
|
|
103
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
104
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
105
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
91
106
|
}
|
|
92
107
|
});
|
|
93
108
|
var defaultRefreshedStyles = (0, _primitives.xcss)({
|
|
@@ -99,15 +114,31 @@ var defaultRefreshedStyles = (0, _primitives.xcss)({
|
|
|
99
114
|
},
|
|
100
115
|
':visited': {
|
|
101
116
|
color: 'color.text.subtle'
|
|
117
|
+
},
|
|
118
|
+
':hover': {
|
|
119
|
+
color: 'color.text.subtle'
|
|
120
|
+
},
|
|
121
|
+
':active': {
|
|
122
|
+
color: 'color.text.subtle'
|
|
123
|
+
},
|
|
124
|
+
':focus': {
|
|
125
|
+
color: 'color.text.subtle'
|
|
102
126
|
}
|
|
103
127
|
});
|
|
104
128
|
var primaryStyles = (0, _primitives.xcss)({
|
|
105
129
|
background: "var(--ds-background-brand-bold, #0052CC)",
|
|
106
|
-
|
|
107
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
130
|
+
color: 'color.text.inverse',
|
|
108
131
|
':visited': {
|
|
109
|
-
|
|
110
|
-
|
|
132
|
+
color: 'color.text.inverse'
|
|
133
|
+
},
|
|
134
|
+
':hover': {
|
|
135
|
+
color: 'color.text.inverse'
|
|
136
|
+
},
|
|
137
|
+
':active': {
|
|
138
|
+
color: 'color.text.inverse'
|
|
139
|
+
},
|
|
140
|
+
':focus': {
|
|
141
|
+
color: 'color.text.inverse'
|
|
111
142
|
}
|
|
112
143
|
});
|
|
113
144
|
var primaryInteractiveStyles = (0, _primitives.xcss)({
|
|
@@ -129,6 +160,18 @@ var warningStyles = (0, _primitives.xcss)({
|
|
|
129
160
|
':visited': {
|
|
130
161
|
// @ts-expect-error
|
|
131
162
|
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
163
|
+
},
|
|
164
|
+
':hover': {
|
|
165
|
+
// @ts-expect-error
|
|
166
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
167
|
+
},
|
|
168
|
+
':active': {
|
|
169
|
+
// @ts-expect-error
|
|
170
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
171
|
+
},
|
|
172
|
+
':focus': {
|
|
173
|
+
// @ts-expect-error
|
|
174
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
132
175
|
}
|
|
133
176
|
});
|
|
134
177
|
var warningInteractiveStyles = (0, _primitives.xcss)({
|
|
@@ -148,6 +191,15 @@ var dangerStyles = (0, _primitives.xcss)({
|
|
|
148
191
|
color: 'color.text.inverse',
|
|
149
192
|
':visited': {
|
|
150
193
|
color: 'color.text.inverse'
|
|
194
|
+
},
|
|
195
|
+
':hover': {
|
|
196
|
+
color: 'color.text.inverse'
|
|
197
|
+
},
|
|
198
|
+
':active': {
|
|
199
|
+
color: 'color.text.inverse'
|
|
200
|
+
},
|
|
201
|
+
':focus': {
|
|
202
|
+
color: 'color.text.inverse'
|
|
151
203
|
}
|
|
152
204
|
});
|
|
153
205
|
var dangerInteractiveStyles = (0, _primitives.xcss)({
|
|
@@ -165,6 +217,15 @@ var discoveryStyles = (0, _primitives.xcss)({
|
|
|
165
217
|
color: 'color.text.inverse',
|
|
166
218
|
':visited': {
|
|
167
219
|
color: 'color.text.inverse'
|
|
220
|
+
},
|
|
221
|
+
':hover': {
|
|
222
|
+
color: 'color.text.inverse'
|
|
223
|
+
},
|
|
224
|
+
':active': {
|
|
225
|
+
color: 'color.text.inverse'
|
|
226
|
+
},
|
|
227
|
+
':focus': {
|
|
228
|
+
color: 'color.text.inverse'
|
|
168
229
|
}
|
|
169
230
|
});
|
|
170
231
|
var discoveryInteractiveStyles = (0, _primitives.xcss)({
|
|
@@ -184,6 +245,18 @@ var subtleStyles = (0, _primitives.xcss)({
|
|
|
184
245
|
':visited': {
|
|
185
246
|
// @ts-expect-error
|
|
186
247
|
color: "var(--ds-text, #42526E)"
|
|
248
|
+
},
|
|
249
|
+
':hover': {
|
|
250
|
+
// @ts-expect-error
|
|
251
|
+
color: "var(--ds-text, #42526E)"
|
|
252
|
+
},
|
|
253
|
+
':active': {
|
|
254
|
+
// @ts-expect-error
|
|
255
|
+
color: "var(--ds-text, #42526E)"
|
|
256
|
+
},
|
|
257
|
+
':focus': {
|
|
258
|
+
// @ts-expect-error
|
|
259
|
+
color: "var(--ds-text, #42526E)"
|
|
187
260
|
}
|
|
188
261
|
});
|
|
189
262
|
var subtleRefreshedStyles = (0, _primitives.xcss)({
|
|
@@ -191,6 +264,15 @@ var subtleRefreshedStyles = (0, _primitives.xcss)({
|
|
|
191
264
|
color: 'color.text.subtle',
|
|
192
265
|
':visited': {
|
|
193
266
|
color: 'color.text.subtle'
|
|
267
|
+
},
|
|
268
|
+
':hover': {
|
|
269
|
+
color: 'color.text.subtle'
|
|
270
|
+
},
|
|
271
|
+
':active': {
|
|
272
|
+
color: 'color.text.subtle'
|
|
273
|
+
},
|
|
274
|
+
':focus': {
|
|
275
|
+
color: 'color.text.subtle'
|
|
194
276
|
}
|
|
195
277
|
});
|
|
196
278
|
var subtleInteractiveStyles = (0, _primitives.xcss)({
|
|
@@ -216,8 +298,10 @@ var subtleInteractiveRefreshedStyles = (0, _primitives.xcss)({
|
|
|
216
298
|
}
|
|
217
299
|
});
|
|
218
300
|
|
|
219
|
-
//
|
|
220
|
-
|
|
301
|
+
// Reinforce existing styles with higher specificity
|
|
302
|
+
// to defend against global anchor styles from products,
|
|
303
|
+
// preventing issues in Jira and Confluence.
|
|
304
|
+
var linkDefensiveStyles = (0, _primitives.xcss)({
|
|
221
305
|
textDecoration: 'none',
|
|
222
306
|
':hover': {
|
|
223
307
|
textDecoration: 'none'
|
|
@@ -227,28 +311,34 @@ var linkDecorationUnsetStyles = (0, _primitives.xcss)({
|
|
|
227
311
|
},
|
|
228
312
|
':focus': {
|
|
229
313
|
textDecoration: 'none'
|
|
314
|
+
},
|
|
315
|
+
':visited': {
|
|
316
|
+
textDecoration: 'none'
|
|
230
317
|
}
|
|
231
318
|
});
|
|
232
319
|
var disabledStyles = (0, _primitives.xcss)({
|
|
233
320
|
cursor: 'not-allowed',
|
|
234
321
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
235
322
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
236
|
-
|
|
237
|
-
|
|
323
|
+
color: 'color.text.disabled',
|
|
324
|
+
'::after': {
|
|
325
|
+
content: 'none'
|
|
326
|
+
},
|
|
327
|
+
':visited': {
|
|
328
|
+
color: 'color.text.disabled'
|
|
329
|
+
},
|
|
238
330
|
':hover': {
|
|
239
331
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
240
332
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
241
|
-
|
|
242
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
333
|
+
color: 'color.text.disabled'
|
|
243
334
|
},
|
|
244
335
|
':active': {
|
|
245
336
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
246
337
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
247
|
-
|
|
248
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
338
|
+
color: 'color.text.disabled'
|
|
249
339
|
},
|
|
250
|
-
'
|
|
251
|
-
|
|
340
|
+
':focus': {
|
|
341
|
+
color: 'color.text.disabled'
|
|
252
342
|
}
|
|
253
343
|
});
|
|
254
344
|
var selectedStyles = (0, _primitives.xcss)({
|
|
@@ -261,6 +351,21 @@ var selectedStyles = (0, _primitives.xcss)({
|
|
|
261
351
|
// @ts-expect-error
|
|
262
352
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
263
353
|
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
354
|
+
},
|
|
355
|
+
':hover': {
|
|
356
|
+
// @ts-expect-error
|
|
357
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
358
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
359
|
+
},
|
|
360
|
+
':active': {
|
|
361
|
+
// @ts-expect-error
|
|
362
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
363
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
364
|
+
},
|
|
365
|
+
':focus': {
|
|
366
|
+
// @ts-expect-error
|
|
367
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
368
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
264
369
|
}
|
|
265
370
|
});
|
|
266
371
|
var selectedRefreshedStyles = (0, _primitives.xcss)({
|
|
@@ -272,6 +377,15 @@ var selectedRefreshedStyles = (0, _primitives.xcss)({
|
|
|
272
377
|
},
|
|
273
378
|
':visited': {
|
|
274
379
|
color: 'color.text.selected'
|
|
380
|
+
},
|
|
381
|
+
':hover': {
|
|
382
|
+
color: 'color.text.selected'
|
|
383
|
+
},
|
|
384
|
+
':active': {
|
|
385
|
+
color: 'color.text.selected'
|
|
386
|
+
},
|
|
387
|
+
':focus': {
|
|
388
|
+
color: 'color.text.selected'
|
|
275
389
|
}
|
|
276
390
|
});
|
|
277
391
|
var selectedInsideSplitButtonStyles = (0, _primitives.xcss)({
|
|
@@ -435,6 +549,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
435
549
|
propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
436
550
|
_ref$autoFocus = _ref.autoFocus,
|
|
437
551
|
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
552
|
+
buttonType = _ref.buttonType,
|
|
438
553
|
_ref$isDisabled = _ref.isDisabled,
|
|
439
554
|
propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
440
555
|
_ref$isLoading = _ref.isLoading,
|
|
@@ -484,7 +599,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
484
599
|
(0, _useAutoFocus.default)(localRef, autoFocus);
|
|
485
600
|
return _objectSpread({
|
|
486
601
|
ref: (0, _mergeRefs.default)([localRef, ref]),
|
|
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),
|
|
602
|
+
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), buttonType === 'link' && linkDefensiveStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
488
603
|
// TODO: remove me once we kill color fallbacks
|
|
489
604
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
490
605
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -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: "21.1.
|
|
136
|
+
packageVersion: "21.1.2",
|
|
137
137
|
analyticsData: analyticsContext
|
|
138
138
|
});
|
|
139
139
|
|
|
@@ -75,6 +75,21 @@ const defaultStyles = xcss({
|
|
|
75
75
|
// @ts-expect-error
|
|
76
76
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
77
77
|
color: `var(--ds-text, ${colors.N500})`
|
|
78
|
+
},
|
|
79
|
+
':hover': {
|
|
80
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
82
|
+
color: `var(--ds-text, ${colors.N500})`
|
|
83
|
+
},
|
|
84
|
+
':active': {
|
|
85
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
87
|
+
color: `var(--ds-text, ${colors.N500})`
|
|
88
|
+
},
|
|
89
|
+
':focus': {
|
|
90
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
92
|
+
color: `var(--ds-text, ${colors.N500})`
|
|
78
93
|
}
|
|
79
94
|
});
|
|
80
95
|
const defaultRefreshedStyles = xcss({
|
|
@@ -86,15 +101,31 @@ const defaultRefreshedStyles = xcss({
|
|
|
86
101
|
},
|
|
87
102
|
':visited': {
|
|
88
103
|
color: 'color.text.subtle'
|
|
104
|
+
},
|
|
105
|
+
':hover': {
|
|
106
|
+
color: 'color.text.subtle'
|
|
107
|
+
},
|
|
108
|
+
':active': {
|
|
109
|
+
color: 'color.text.subtle'
|
|
110
|
+
},
|
|
111
|
+
':focus': {
|
|
112
|
+
color: 'color.text.subtle'
|
|
89
113
|
}
|
|
90
114
|
});
|
|
91
115
|
const primaryStyles = xcss({
|
|
92
116
|
background: "var(--ds-background-brand-bold, #0052CC)",
|
|
93
|
-
|
|
94
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
117
|
+
color: 'color.text.inverse',
|
|
95
118
|
':visited': {
|
|
96
|
-
|
|
97
|
-
|
|
119
|
+
color: 'color.text.inverse'
|
|
120
|
+
},
|
|
121
|
+
':hover': {
|
|
122
|
+
color: 'color.text.inverse'
|
|
123
|
+
},
|
|
124
|
+
':active': {
|
|
125
|
+
color: 'color.text.inverse'
|
|
126
|
+
},
|
|
127
|
+
':focus': {
|
|
128
|
+
color: 'color.text.inverse'
|
|
98
129
|
}
|
|
99
130
|
});
|
|
100
131
|
const primaryInteractiveStyles = xcss({
|
|
@@ -116,6 +147,18 @@ const warningStyles = xcss({
|
|
|
116
147
|
':visited': {
|
|
117
148
|
// @ts-expect-error
|
|
118
149
|
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
150
|
+
},
|
|
151
|
+
':hover': {
|
|
152
|
+
// @ts-expect-error
|
|
153
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
154
|
+
},
|
|
155
|
+
':active': {
|
|
156
|
+
// @ts-expect-error
|
|
157
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
158
|
+
},
|
|
159
|
+
':focus': {
|
|
160
|
+
// @ts-expect-error
|
|
161
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
119
162
|
}
|
|
120
163
|
});
|
|
121
164
|
const warningInteractiveStyles = xcss({
|
|
@@ -135,6 +178,15 @@ const dangerStyles = xcss({
|
|
|
135
178
|
color: 'color.text.inverse',
|
|
136
179
|
':visited': {
|
|
137
180
|
color: 'color.text.inverse'
|
|
181
|
+
},
|
|
182
|
+
':hover': {
|
|
183
|
+
color: 'color.text.inverse'
|
|
184
|
+
},
|
|
185
|
+
':active': {
|
|
186
|
+
color: 'color.text.inverse'
|
|
187
|
+
},
|
|
188
|
+
':focus': {
|
|
189
|
+
color: 'color.text.inverse'
|
|
138
190
|
}
|
|
139
191
|
});
|
|
140
192
|
const dangerInteractiveStyles = xcss({
|
|
@@ -152,6 +204,15 @@ const discoveryStyles = xcss({
|
|
|
152
204
|
color: 'color.text.inverse',
|
|
153
205
|
':visited': {
|
|
154
206
|
color: 'color.text.inverse'
|
|
207
|
+
},
|
|
208
|
+
':hover': {
|
|
209
|
+
color: 'color.text.inverse'
|
|
210
|
+
},
|
|
211
|
+
':active': {
|
|
212
|
+
color: 'color.text.inverse'
|
|
213
|
+
},
|
|
214
|
+
':focus': {
|
|
215
|
+
color: 'color.text.inverse'
|
|
155
216
|
}
|
|
156
217
|
});
|
|
157
218
|
const discoveryInteractiveStyles = xcss({
|
|
@@ -171,6 +232,18 @@ const subtleStyles = xcss({
|
|
|
171
232
|
':visited': {
|
|
172
233
|
// @ts-expect-error
|
|
173
234
|
color: "var(--ds-text, #42526E)"
|
|
235
|
+
},
|
|
236
|
+
':hover': {
|
|
237
|
+
// @ts-expect-error
|
|
238
|
+
color: "var(--ds-text, #42526E)"
|
|
239
|
+
},
|
|
240
|
+
':active': {
|
|
241
|
+
// @ts-expect-error
|
|
242
|
+
color: "var(--ds-text, #42526E)"
|
|
243
|
+
},
|
|
244
|
+
':focus': {
|
|
245
|
+
// @ts-expect-error
|
|
246
|
+
color: "var(--ds-text, #42526E)"
|
|
174
247
|
}
|
|
175
248
|
});
|
|
176
249
|
const subtleRefreshedStyles = xcss({
|
|
@@ -178,6 +251,15 @@ const subtleRefreshedStyles = xcss({
|
|
|
178
251
|
color: 'color.text.subtle',
|
|
179
252
|
':visited': {
|
|
180
253
|
color: 'color.text.subtle'
|
|
254
|
+
},
|
|
255
|
+
':hover': {
|
|
256
|
+
color: 'color.text.subtle'
|
|
257
|
+
},
|
|
258
|
+
':active': {
|
|
259
|
+
color: 'color.text.subtle'
|
|
260
|
+
},
|
|
261
|
+
':focus': {
|
|
262
|
+
color: 'color.text.subtle'
|
|
181
263
|
}
|
|
182
264
|
});
|
|
183
265
|
const subtleInteractiveStyles = xcss({
|
|
@@ -203,8 +285,10 @@ const subtleInteractiveRefreshedStyles = xcss({
|
|
|
203
285
|
}
|
|
204
286
|
});
|
|
205
287
|
|
|
206
|
-
//
|
|
207
|
-
|
|
288
|
+
// Reinforce existing styles with higher specificity
|
|
289
|
+
// to defend against global anchor styles from products,
|
|
290
|
+
// preventing issues in Jira and Confluence.
|
|
291
|
+
const linkDefensiveStyles = xcss({
|
|
208
292
|
textDecoration: 'none',
|
|
209
293
|
':hover': {
|
|
210
294
|
textDecoration: 'none'
|
|
@@ -214,28 +298,34 @@ const linkDecorationUnsetStyles = xcss({
|
|
|
214
298
|
},
|
|
215
299
|
':focus': {
|
|
216
300
|
textDecoration: 'none'
|
|
301
|
+
},
|
|
302
|
+
':visited': {
|
|
303
|
+
textDecoration: 'none'
|
|
217
304
|
}
|
|
218
305
|
});
|
|
219
306
|
const disabledStyles = xcss({
|
|
220
307
|
cursor: 'not-allowed',
|
|
221
308
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
222
309
|
background: `var(--ds-background-disabled, ${colors.N20A})`,
|
|
223
|
-
|
|
224
|
-
|
|
310
|
+
color: 'color.text.disabled',
|
|
311
|
+
'::after': {
|
|
312
|
+
content: 'none'
|
|
313
|
+
},
|
|
314
|
+
':visited': {
|
|
315
|
+
color: 'color.text.disabled'
|
|
316
|
+
},
|
|
225
317
|
':hover': {
|
|
226
318
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
227
319
|
background: `var(--ds-background-disabled, ${colors.N20A})`,
|
|
228
|
-
|
|
229
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
320
|
+
color: 'color.text.disabled'
|
|
230
321
|
},
|
|
231
322
|
':active': {
|
|
232
323
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
233
324
|
background: `var(--ds-background-disabled, ${colors.N20A})`,
|
|
234
|
-
|
|
235
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
325
|
+
color: 'color.text.disabled'
|
|
236
326
|
},
|
|
237
|
-
'
|
|
238
|
-
|
|
327
|
+
':focus': {
|
|
328
|
+
color: 'color.text.disabled'
|
|
239
329
|
}
|
|
240
330
|
});
|
|
241
331
|
const selectedStyles = xcss({
|
|
@@ -248,6 +338,21 @@ const selectedStyles = xcss({
|
|
|
248
338
|
// @ts-expect-error
|
|
249
339
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
250
340
|
color: `var(--ds-text-selected, ${colors.N20})`
|
|
341
|
+
},
|
|
342
|
+
':hover': {
|
|
343
|
+
// @ts-expect-error
|
|
344
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
345
|
+
color: `var(--ds-text-selected, ${colors.N20})`
|
|
346
|
+
},
|
|
347
|
+
':active': {
|
|
348
|
+
// @ts-expect-error
|
|
349
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
350
|
+
color: `var(--ds-text-selected, ${colors.N20})`
|
|
351
|
+
},
|
|
352
|
+
':focus': {
|
|
353
|
+
// @ts-expect-error
|
|
354
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
355
|
+
color: `var(--ds-text-selected, ${colors.N20})`
|
|
251
356
|
}
|
|
252
357
|
});
|
|
253
358
|
const selectedRefreshedStyles = xcss({
|
|
@@ -259,6 +364,15 @@ const selectedRefreshedStyles = xcss({
|
|
|
259
364
|
},
|
|
260
365
|
':visited': {
|
|
261
366
|
color: 'color.text.selected'
|
|
367
|
+
},
|
|
368
|
+
':hover': {
|
|
369
|
+
color: 'color.text.selected'
|
|
370
|
+
},
|
|
371
|
+
':active': {
|
|
372
|
+
color: 'color.text.selected'
|
|
373
|
+
},
|
|
374
|
+
':focus': {
|
|
375
|
+
color: 'color.text.selected'
|
|
262
376
|
}
|
|
263
377
|
});
|
|
264
378
|
const selectedInsideSplitButtonStyles = xcss({
|
|
@@ -420,6 +534,7 @@ const loadingOverlayStyles = xcss({
|
|
|
420
534
|
const useButtonBase = ({
|
|
421
535
|
appearance: propAppearance = 'default',
|
|
422
536
|
autoFocus = false,
|
|
537
|
+
buttonType,
|
|
423
538
|
isDisabled: propIsDisabled = false,
|
|
424
539
|
isLoading = false,
|
|
425
540
|
isSelected: propIsSelected = false,
|
|
@@ -463,7 +578,7 @@ const useButtonBase = ({
|
|
|
463
578
|
useAutoFocus(localRef, autoFocus);
|
|
464
579
|
return {
|
|
465
580
|
ref: mergeRefs([localRef, ref]),
|
|
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),
|
|
581
|
+
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), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
467
582
|
// TODO: remove me once we kill color fallbacks
|
|
468
583
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
469
584
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -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: "21.1.
|
|
122
|
+
packageVersion: "21.1.2",
|
|
123
123
|
analyticsData: analyticsContext
|
|
124
124
|
});
|
|
125
125
|
|
|
@@ -78,6 +78,21 @@ var defaultStyles = xcss({
|
|
|
78
78
|
// @ts-expect-error
|
|
79
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
80
80
|
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
81
|
+
},
|
|
82
|
+
':hover': {
|
|
83
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
84
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
85
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
86
|
+
},
|
|
87
|
+
':active': {
|
|
88
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
90
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
91
|
+
},
|
|
92
|
+
':focus': {
|
|
93
|
+
// @ts-expect-error — using tokens for explicit fallback usage.
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- -- Ignored via go/DSP-18766
|
|
95
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
81
96
|
}
|
|
82
97
|
});
|
|
83
98
|
var defaultRefreshedStyles = xcss({
|
|
@@ -89,15 +104,31 @@ var defaultRefreshedStyles = xcss({
|
|
|
89
104
|
},
|
|
90
105
|
':visited': {
|
|
91
106
|
color: 'color.text.subtle'
|
|
107
|
+
},
|
|
108
|
+
':hover': {
|
|
109
|
+
color: 'color.text.subtle'
|
|
110
|
+
},
|
|
111
|
+
':active': {
|
|
112
|
+
color: 'color.text.subtle'
|
|
113
|
+
},
|
|
114
|
+
':focus': {
|
|
115
|
+
color: 'color.text.subtle'
|
|
92
116
|
}
|
|
93
117
|
});
|
|
94
118
|
var primaryStyles = xcss({
|
|
95
119
|
background: "var(--ds-background-brand-bold, #0052CC)",
|
|
96
|
-
|
|
97
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
120
|
+
color: 'color.text.inverse',
|
|
98
121
|
':visited': {
|
|
99
|
-
|
|
100
|
-
|
|
122
|
+
color: 'color.text.inverse'
|
|
123
|
+
},
|
|
124
|
+
':hover': {
|
|
125
|
+
color: 'color.text.inverse'
|
|
126
|
+
},
|
|
127
|
+
':active': {
|
|
128
|
+
color: 'color.text.inverse'
|
|
129
|
+
},
|
|
130
|
+
':focus': {
|
|
131
|
+
color: 'color.text.inverse'
|
|
101
132
|
}
|
|
102
133
|
});
|
|
103
134
|
var primaryInteractiveStyles = xcss({
|
|
@@ -119,6 +150,18 @@ var warningStyles = xcss({
|
|
|
119
150
|
':visited': {
|
|
120
151
|
// @ts-expect-error
|
|
121
152
|
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
153
|
+
},
|
|
154
|
+
':hover': {
|
|
155
|
+
// @ts-expect-error
|
|
156
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
157
|
+
},
|
|
158
|
+
':active': {
|
|
159
|
+
// @ts-expect-error
|
|
160
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
161
|
+
},
|
|
162
|
+
':focus': {
|
|
163
|
+
// @ts-expect-error
|
|
164
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
122
165
|
}
|
|
123
166
|
});
|
|
124
167
|
var warningInteractiveStyles = xcss({
|
|
@@ -138,6 +181,15 @@ var dangerStyles = xcss({
|
|
|
138
181
|
color: 'color.text.inverse',
|
|
139
182
|
':visited': {
|
|
140
183
|
color: 'color.text.inverse'
|
|
184
|
+
},
|
|
185
|
+
':hover': {
|
|
186
|
+
color: 'color.text.inverse'
|
|
187
|
+
},
|
|
188
|
+
':active': {
|
|
189
|
+
color: 'color.text.inverse'
|
|
190
|
+
},
|
|
191
|
+
':focus': {
|
|
192
|
+
color: 'color.text.inverse'
|
|
141
193
|
}
|
|
142
194
|
});
|
|
143
195
|
var dangerInteractiveStyles = xcss({
|
|
@@ -155,6 +207,15 @@ var discoveryStyles = xcss({
|
|
|
155
207
|
color: 'color.text.inverse',
|
|
156
208
|
':visited': {
|
|
157
209
|
color: 'color.text.inverse'
|
|
210
|
+
},
|
|
211
|
+
':hover': {
|
|
212
|
+
color: 'color.text.inverse'
|
|
213
|
+
},
|
|
214
|
+
':active': {
|
|
215
|
+
color: 'color.text.inverse'
|
|
216
|
+
},
|
|
217
|
+
':focus': {
|
|
218
|
+
color: 'color.text.inverse'
|
|
158
219
|
}
|
|
159
220
|
});
|
|
160
221
|
var discoveryInteractiveStyles = xcss({
|
|
@@ -174,6 +235,18 @@ var subtleStyles = xcss({
|
|
|
174
235
|
':visited': {
|
|
175
236
|
// @ts-expect-error
|
|
176
237
|
color: "var(--ds-text, #42526E)"
|
|
238
|
+
},
|
|
239
|
+
':hover': {
|
|
240
|
+
// @ts-expect-error
|
|
241
|
+
color: "var(--ds-text, #42526E)"
|
|
242
|
+
},
|
|
243
|
+
':active': {
|
|
244
|
+
// @ts-expect-error
|
|
245
|
+
color: "var(--ds-text, #42526E)"
|
|
246
|
+
},
|
|
247
|
+
':focus': {
|
|
248
|
+
// @ts-expect-error
|
|
249
|
+
color: "var(--ds-text, #42526E)"
|
|
177
250
|
}
|
|
178
251
|
});
|
|
179
252
|
var subtleRefreshedStyles = xcss({
|
|
@@ -181,6 +254,15 @@ var subtleRefreshedStyles = xcss({
|
|
|
181
254
|
color: 'color.text.subtle',
|
|
182
255
|
':visited': {
|
|
183
256
|
color: 'color.text.subtle'
|
|
257
|
+
},
|
|
258
|
+
':hover': {
|
|
259
|
+
color: 'color.text.subtle'
|
|
260
|
+
},
|
|
261
|
+
':active': {
|
|
262
|
+
color: 'color.text.subtle'
|
|
263
|
+
},
|
|
264
|
+
':focus': {
|
|
265
|
+
color: 'color.text.subtle'
|
|
184
266
|
}
|
|
185
267
|
});
|
|
186
268
|
var subtleInteractiveStyles = xcss({
|
|
@@ -206,8 +288,10 @@ var subtleInteractiveRefreshedStyles = xcss({
|
|
|
206
288
|
}
|
|
207
289
|
});
|
|
208
290
|
|
|
209
|
-
//
|
|
210
|
-
|
|
291
|
+
// Reinforce existing styles with higher specificity
|
|
292
|
+
// to defend against global anchor styles from products,
|
|
293
|
+
// preventing issues in Jira and Confluence.
|
|
294
|
+
var linkDefensiveStyles = xcss({
|
|
211
295
|
textDecoration: 'none',
|
|
212
296
|
':hover': {
|
|
213
297
|
textDecoration: 'none'
|
|
@@ -217,28 +301,34 @@ var linkDecorationUnsetStyles = xcss({
|
|
|
217
301
|
},
|
|
218
302
|
':focus': {
|
|
219
303
|
textDecoration: 'none'
|
|
304
|
+
},
|
|
305
|
+
':visited': {
|
|
306
|
+
textDecoration: 'none'
|
|
220
307
|
}
|
|
221
308
|
});
|
|
222
309
|
var disabledStyles = xcss({
|
|
223
310
|
cursor: 'not-allowed',
|
|
224
311
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
225
312
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
226
|
-
|
|
227
|
-
|
|
313
|
+
color: 'color.text.disabled',
|
|
314
|
+
'::after': {
|
|
315
|
+
content: 'none'
|
|
316
|
+
},
|
|
317
|
+
':visited': {
|
|
318
|
+
color: 'color.text.disabled'
|
|
319
|
+
},
|
|
228
320
|
':hover': {
|
|
229
321
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
230
322
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
231
|
-
|
|
232
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
323
|
+
color: 'color.text.disabled'
|
|
233
324
|
},
|
|
234
325
|
':active': {
|
|
235
326
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
236
327
|
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
237
|
-
|
|
238
|
-
color: "var(--ds-text-disabled, #091E424F)"
|
|
328
|
+
color: 'color.text.disabled'
|
|
239
329
|
},
|
|
240
|
-
'
|
|
241
|
-
|
|
330
|
+
':focus': {
|
|
331
|
+
color: 'color.text.disabled'
|
|
242
332
|
}
|
|
243
333
|
});
|
|
244
334
|
var selectedStyles = xcss({
|
|
@@ -251,6 +341,21 @@ var selectedStyles = xcss({
|
|
|
251
341
|
// @ts-expect-error
|
|
252
342
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
253
343
|
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
344
|
+
},
|
|
345
|
+
':hover': {
|
|
346
|
+
// @ts-expect-error
|
|
347
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
348
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
349
|
+
},
|
|
350
|
+
':active': {
|
|
351
|
+
// @ts-expect-error
|
|
352
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
353
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
354
|
+
},
|
|
355
|
+
':focus': {
|
|
356
|
+
// @ts-expect-error
|
|
357
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
358
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
254
359
|
}
|
|
255
360
|
});
|
|
256
361
|
var selectedRefreshedStyles = xcss({
|
|
@@ -262,6 +367,15 @@ var selectedRefreshedStyles = xcss({
|
|
|
262
367
|
},
|
|
263
368
|
':visited': {
|
|
264
369
|
color: 'color.text.selected'
|
|
370
|
+
},
|
|
371
|
+
':hover': {
|
|
372
|
+
color: 'color.text.selected'
|
|
373
|
+
},
|
|
374
|
+
':active': {
|
|
375
|
+
color: 'color.text.selected'
|
|
376
|
+
},
|
|
377
|
+
':focus': {
|
|
378
|
+
color: 'color.text.selected'
|
|
265
379
|
}
|
|
266
380
|
});
|
|
267
381
|
var selectedInsideSplitButtonStyles = xcss({
|
|
@@ -425,6 +539,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
425
539
|
propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
426
540
|
_ref$autoFocus = _ref.autoFocus,
|
|
427
541
|
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
542
|
+
buttonType = _ref.buttonType,
|
|
428
543
|
_ref$isDisabled = _ref.isDisabled,
|
|
429
544
|
propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
430
545
|
_ref$isLoading = _ref.isLoading,
|
|
@@ -474,7 +589,7 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
474
589
|
useAutoFocus(localRef, autoFocus);
|
|
475
590
|
return _objectSpread({
|
|
476
591
|
ref: mergeRefs([localRef, ref]),
|
|
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),
|
|
592
|
+
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), buttonType === 'link' && linkDefensiveStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
478
593
|
// TODO: remove me once we kill color fallbacks
|
|
479
594
|
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
480
595
|
// TODO: remove me once we kill color fallbacks
|
|
@@ -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: "21.1.
|
|
128
|
+
packageVersion: "21.1.2",
|
|
129
129
|
analyticsData: analyticsContext
|
|
130
130
|
});
|
|
131
131
|
|
|
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
|
42
42
|
*
|
|
43
43
|
* @private
|
|
44
44
|
*/
|
|
45
|
-
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
45
|
+
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
46
46
|
export default useButtonBase;
|
|
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
|
42
42
|
*
|
|
43
43
|
* @private
|
|
44
44
|
*/
|
|
45
|
-
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
45
|
+
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, buttonType, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
46
46
|
export default useButtonBase;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "21.1.
|
|
3
|
+
"version": "21.1.2",
|
|
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/"
|
|
@@ -87,15 +87,15 @@
|
|
|
87
87
|
"@atlaskit/analytics-next": "^11.0.0",
|
|
88
88
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
89
89
|
"@atlaskit/focus-ring": "^3.0.0",
|
|
90
|
-
"@atlaskit/icon": "^24.
|
|
90
|
+
"@atlaskit/icon": "^24.1.0",
|
|
91
91
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
92
92
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
93
|
-
"@atlaskit/primitives": "^14.
|
|
93
|
+
"@atlaskit/primitives": "^14.1.0",
|
|
94
94
|
"@atlaskit/spinner": "^18.0.0",
|
|
95
95
|
"@atlaskit/theme": "^17.0.0",
|
|
96
|
-
"@atlaskit/tokens": "^4.
|
|
96
|
+
"@atlaskit/tokens": "^4.3.0",
|
|
97
97
|
"@atlaskit/tooltip": "^20.0.0",
|
|
98
|
-
"@atlaskit/visually-hidden": "^
|
|
98
|
+
"@atlaskit/visually-hidden": "^3.0.0",
|
|
99
99
|
"@babel/runtime": "^7.0.0",
|
|
100
100
|
"@emotion/react": "^11.7.1"
|
|
101
101
|
},
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
"@af/integration-testing": "*",
|
|
108
108
|
"@af/visual-regression": "*",
|
|
109
109
|
"@atlaskit/app-provider": "^2.0.0",
|
|
110
|
-
"@atlaskit/checkbox": "^
|
|
110
|
+
"@atlaskit/checkbox": "^17.0.0",
|
|
111
111
|
"@atlaskit/docs": "*",
|
|
112
112
|
"@atlaskit/dropdown-menu": "^13.0.0",
|
|
113
113
|
"@atlaskit/form": "^12.0.0",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"@atlaskit/logo": "^16.0.0",
|
|
117
117
|
"@atlaskit/modal-dialog": "^13.0.0",
|
|
118
118
|
"@atlaskit/section-message": "*",
|
|
119
|
-
"@atlaskit/select": "^
|
|
119
|
+
"@atlaskit/select": "^20.0.0",
|
|
120
120
|
"@atlaskit/ssr": "*",
|
|
121
121
|
"@atlaskit/toggle": "^15.0.0",
|
|
122
122
|
"@atlaskit/visual-regression": "*",
|