@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 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
- // @ts-expect-error
107
- color: "var(--ds-text-inverse, #FFFFFF)",
130
+ color: 'color.text.inverse',
108
131
  ':visited': {
109
- // @ts-expect-error
110
- color: "var(--ds-text-inverse, #FFFFFF)"
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
- // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
220
- var linkDecorationUnsetStyles = (0, _primitives.xcss)({
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
- // @ts-expect-error
237
- color: "var(--ds-text-disabled, #091E424F)",
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
- // @ts-expect-error
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
- // @ts-expect-error
248
- color: "var(--ds-text-disabled, #091E424F)"
338
+ color: 'color.text.disabled'
249
339
  },
250
- '::after': {
251
- content: 'none'
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), linkDecorationUnsetStyles, isSelected && ((0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
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.0",
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
- // @ts-expect-error
94
- color: "var(--ds-text-inverse, #FFFFFF)",
117
+ color: 'color.text.inverse',
95
118
  ':visited': {
96
- // @ts-expect-error
97
- color: "var(--ds-text-inverse, #FFFFFF)"
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
- // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
207
- const linkDecorationUnsetStyles = xcss({
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
- // @ts-expect-error
224
- color: "var(--ds-text-disabled, #091E424F)",
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
- // @ts-expect-error
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
- // @ts-expect-error
235
- color: "var(--ds-text-disabled, #091E424F)"
325
+ color: 'color.text.disabled'
236
326
  },
237
- '::after': {
238
- content: 'none'
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), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
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.0",
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
- // @ts-expect-error
97
- color: "var(--ds-text-inverse, #FFFFFF)",
120
+ color: 'color.text.inverse',
98
121
  ':visited': {
99
- // @ts-expect-error
100
- color: "var(--ds-text-inverse, #FFFFFF)"
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
- // Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
210
- var linkDecorationUnsetStyles = xcss({
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
- // @ts-expect-error
227
- color: "var(--ds-text-disabled, #091E424F)",
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
- // @ts-expect-error
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
- // @ts-expect-error
238
- color: "var(--ds-text-disabled, #091E424F)"
328
+ color: 'color.text.disabled'
239
329
  },
240
- '::after': {
241
- content: 'none'
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), linkDecorationUnsetStyles, isSelected && (fg('platform-component-visual-refresh') ? selectedRefreshedStyles : selectedStyles), isSelected && isSplitButton && selectedInsideSplitButtonStyles, isSelected && isInteractive && selectedInteractiveStyles,
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.0",
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.0",
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.0.0",
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.0.0",
93
+ "@atlaskit/primitives": "^14.1.0",
94
94
  "@atlaskit/spinner": "^18.0.0",
95
95
  "@atlaskit/theme": "^17.0.0",
96
- "@atlaskit/tokens": "^4.1.0",
96
+ "@atlaskit/tokens": "^4.3.0",
97
97
  "@atlaskit/tooltip": "^20.0.0",
98
- "@atlaskit/visually-hidden": "^2.0.0",
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": "^16.0.0",
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": "^19.0.0",
119
+ "@atlaskit/select": "^20.0.0",
120
120
  "@atlaskit/ssr": "*",
121
121
  "@atlaskit/toggle": "^15.0.0",
122
122
  "@atlaskit/visual-regression": "*",