@atlaskit/button 17.12.0 → 17.12.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 +12 -0
- package/dist/cjs/new-button/containers/split-button/split-button.js +9 -3
- package/dist/cjs/new-button/variants/shared/use-button-base.js +332 -46
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/new-button/containers/split-button/split-button.js +7 -1
- package/dist/es2019/new-button/variants/shared/use-button-base.js +333 -45
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/new-button/containers/split-button/split-button.js +7 -1
- package/dist/esm/new-button/variants/shared/use-button-base.js +333 -47
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/dist/types/new-button/variants/shared/use-button-base.d.ts +3 -2
- package/dist/types/old-button/custom-theme-button/theme.d.ts +2 -6
- package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts +3 -2
- package/dist/types-ts4.5/old-button/custom-theme-button/theme.d.ts +2 -6
- package/package.json +4 -2
- package/dist/cjs/new-button/variants/shared/colors.js +0 -145
- package/dist/cjs/new-button/variants/shared/xcss.js +0 -198
- package/dist/es2019/new-button/variants/shared/colors.js +0 -136
- package/dist/es2019/new-button/variants/shared/xcss.js +0 -196
- package/dist/esm/new-button/variants/shared/colors.js +0 -136
- package/dist/esm/new-button/variants/shared/xcss.js +0 -190
- package/dist/types/new-button/variants/shared/colors.d.ts +0 -20
- package/dist/types/new-button/variants/shared/xcss.d.ts +0 -33
- package/dist/types-ts4.5/new-button/variants/shared/colors.d.ts +0 -20
- package/dist/types-ts4.5/new-button/variants/shared/xcss.d.ts +0 -33
|
@@ -1,21 +1,337 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
import React, { Fragment,
|
|
4
|
+
import React, { Fragment, useRef } from 'react';
|
|
5
|
+
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
5
6
|
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
6
7
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
8
|
+
import * as colors from '@atlaskit/theme/colors';
|
|
9
|
+
import { fontSize as getFontSize } from '@atlaskit/theme/constants';
|
|
7
10
|
import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
|
|
8
11
|
import blockEvents from './block-events';
|
|
9
|
-
|
|
12
|
+
var fontSize = getFontSize();
|
|
13
|
+
var buttonStyles = xcss({
|
|
14
|
+
display: 'inline-flex',
|
|
15
|
+
boxSizing: 'border-box',
|
|
16
|
+
width: 'auto',
|
|
17
|
+
maxWidth: '100%',
|
|
18
|
+
position: 'relative',
|
|
19
|
+
alignItems: 'baseline',
|
|
20
|
+
justifyContent: 'center',
|
|
21
|
+
columnGap: 'space.050',
|
|
22
|
+
background: "var(--ds-background-neutral, ".concat(colors.N20A, ")"),
|
|
23
|
+
borderRadius: 'border.radius.100',
|
|
24
|
+
borderWidth: 'border.width.0',
|
|
25
|
+
// @ts-expect-error
|
|
26
|
+
color: "var(--ds-text, ".concat(colors.N500, ")"),
|
|
27
|
+
fontFamily: 'inherit',
|
|
28
|
+
fontSize: 'inherit',
|
|
29
|
+
fontStyle: 'normal',
|
|
30
|
+
fontWeight: 500,
|
|
31
|
+
height: "".concat(32 / fontSize, "em"),
|
|
32
|
+
lineHeight: "".concat(32 / fontSize, "em"),
|
|
33
|
+
paddingBlock: 'space.0',
|
|
34
|
+
paddingInlineEnd: 'space.150',
|
|
35
|
+
paddingInlineStart: 'space.150',
|
|
36
|
+
textAlign: 'center',
|
|
37
|
+
transition: 'background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
|
|
38
|
+
verticalAlign: 'middle',
|
|
39
|
+
whiteSpace: 'nowrap',
|
|
40
|
+
':visited': {
|
|
41
|
+
// @ts-expect-error
|
|
42
|
+
color: "var(--ds-text, ".concat(colors.N500, ")")
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
var defaultInteractiveStyles = xcss({
|
|
46
|
+
':hover': {
|
|
47
|
+
background: "var(--ds-background-neutral-hovered, #091e4214)",
|
|
48
|
+
// @ts-expect-error
|
|
49
|
+
color: "var(--ds-text, ".concat(colors.N500, ")"),
|
|
50
|
+
transitionDuration: '0s, 0.15s'
|
|
51
|
+
},
|
|
52
|
+
':active': {
|
|
53
|
+
background: "var(--ds-background-neutral-pressed, ".concat(colors.B75, ")"),
|
|
54
|
+
// @ts-expect-error
|
|
55
|
+
color: "var(--ds-text, ".concat(colors.B400, ")"),
|
|
56
|
+
transitionDuration: '0s, 0s'
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
var primaryStyles = xcss({
|
|
60
|
+
background: "var(--ds-background-brand-bold, #0052CC)",
|
|
61
|
+
// @ts-expect-error
|
|
62
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
63
|
+
':visited': {
|
|
64
|
+
// @ts-expect-error
|
|
65
|
+
color: "var(--ds-text-inverse, #FFFFFF)"
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
var primaryInteractiveStyles = xcss({
|
|
69
|
+
':hover': {
|
|
70
|
+
// @ts-expect-error
|
|
71
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
72
|
+
background: "var(--ds-background-brand-bold-hovered, #0065FF)"
|
|
73
|
+
},
|
|
74
|
+
':active': {
|
|
75
|
+
// @ts-expect-error
|
|
76
|
+
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
77
|
+
background: "var(--ds-background-brand-bold-pressed, #0747A6)"
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
var warningStyles = xcss({
|
|
81
|
+
background: "var(--ds-background-warning-bold, #FFAB00)",
|
|
82
|
+
// @ts-expect-error
|
|
83
|
+
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
84
|
+
':visited': {
|
|
85
|
+
// @ts-expect-error
|
|
86
|
+
color: "var(--ds-text-warning-inverse, #172B4D)"
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
var warningInteractiveStyles = xcss({
|
|
90
|
+
':hover': {
|
|
91
|
+
// @ts-expect-error
|
|
92
|
+
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
93
|
+
background: "var(--ds-background-warning-bold-hovered, #FFC400)"
|
|
94
|
+
},
|
|
95
|
+
':active': {
|
|
96
|
+
// @ts-expect-error
|
|
97
|
+
color: "var(--ds-text-warning-inverse, #172B4D)",
|
|
98
|
+
background: "var(--ds-background-warning-bold-pressed, #FF991F)"
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
var dangerStyles = xcss({
|
|
102
|
+
background: "var(--ds-background-danger-bold, #DE350B)",
|
|
103
|
+
color: 'color.text.inverse',
|
|
104
|
+
':visited': {
|
|
105
|
+
color: 'color.text.inverse'
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
var dangerInteractiveStyles = xcss({
|
|
109
|
+
':hover': {
|
|
110
|
+
color: 'color.text.inverse',
|
|
111
|
+
background: "var(--ds-background-danger-bold-hovered, #FF5630)"
|
|
112
|
+
},
|
|
113
|
+
':active': {
|
|
114
|
+
color: 'color.text.inverse',
|
|
115
|
+
background: "var(--ds-background-danger-bold-pressed, #BF2600)"
|
|
116
|
+
}
|
|
117
|
+
});
|
|
118
|
+
var subtleStyles = xcss({
|
|
119
|
+
background: "var(--ds-background-neutral-subtle, transparent)",
|
|
120
|
+
// @ts-expect-error
|
|
121
|
+
color: "var(--ds-text, #42526E)",
|
|
122
|
+
':visited': {
|
|
123
|
+
// @ts-expect-error
|
|
124
|
+
color: "var(--ds-text, #42526E)"
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
var subtleInteractiveStyles = xcss({
|
|
128
|
+
':hover': {
|
|
129
|
+
background: "var(--ds-background-neutral-subtle-hovered, #091e4214)",
|
|
130
|
+
// @ts-expect-error
|
|
131
|
+
color: "var(--ds-text, #42526E)"
|
|
132
|
+
},
|
|
133
|
+
':active': {
|
|
134
|
+
background: "var(--ds-background-neutral-subtle-pressed, #B3D4FF)",
|
|
135
|
+
// @ts-expect-error
|
|
136
|
+
color: "var(--ds-text, #42526E)"
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
var linkStyles = xcss({
|
|
140
|
+
// @ts-expect-error
|
|
141
|
+
color: "var(--ds-link, ".concat(colors.B400, ")"),
|
|
142
|
+
background: "var(--ds-background-neutral-subtle, transparent)",
|
|
143
|
+
textDecoration: 'none',
|
|
144
|
+
':hover': {
|
|
145
|
+
// @ts-expect-error
|
|
146
|
+
color: "var(--ds-link, ".concat(colors.B300, ")"),
|
|
147
|
+
background: "var(--ds-background-neutral-subtle, transparent)"
|
|
148
|
+
},
|
|
149
|
+
':active': {
|
|
150
|
+
// @ts-expect-error
|
|
151
|
+
color: "var(--ds-link-pressed, #0055CC)",
|
|
152
|
+
background: "var(--ds-background-neutral-subtle, transparent)"
|
|
153
|
+
},
|
|
154
|
+
':visited': {
|
|
155
|
+
// @ts-expect-error
|
|
156
|
+
color: "var(--ds-link, ".concat(colors.B400, ")")
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
var subtleLinkStyles = xcss({
|
|
160
|
+
// @ts-expect-error
|
|
161
|
+
color: "var(--ds-text-subtle, ".concat(colors.N200, ")"),
|
|
162
|
+
background: "var(--ds-background-neutral-subtle, transparent)",
|
|
163
|
+
textDecoration: 'none',
|
|
164
|
+
':hover': {
|
|
165
|
+
// @ts-expect-error
|
|
166
|
+
color: "var(--ds-text-subtle, ".concat(colors.N90, ")"),
|
|
167
|
+
background: "var(--ds-background-neutral-subtle, transparent)"
|
|
168
|
+
},
|
|
169
|
+
':active': {
|
|
170
|
+
// @ts-expect-error
|
|
171
|
+
color: "var(--ds-text, ".concat(colors.N400, ")"),
|
|
172
|
+
background: "var(--ds-background-neutral-subtle, transparent)"
|
|
173
|
+
},
|
|
174
|
+
':visited': {
|
|
175
|
+
// @ts-expect-error
|
|
176
|
+
color: "var(--ds-text-subtle, ".concat(colors.N200, ")")
|
|
177
|
+
}
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
// Required due to Jira's AUI CSS reset: https://product-fabric.atlassian.net/browse/DSP-15687
|
|
181
|
+
var linkDecorationUnsetStyles = xcss({
|
|
182
|
+
textDecoration: 'none',
|
|
183
|
+
':hover': {
|
|
184
|
+
textDecoration: 'none'
|
|
185
|
+
},
|
|
186
|
+
':active': {
|
|
187
|
+
textDecoration: 'none'
|
|
188
|
+
},
|
|
189
|
+
':focus': {
|
|
190
|
+
textDecoration: 'none'
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
var linkDecorationStyles = xcss({
|
|
194
|
+
':hover': {
|
|
195
|
+
textDecoration: 'underline'
|
|
196
|
+
},
|
|
197
|
+
':focus': {
|
|
198
|
+
textDecoration: 'underline'
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
var disabledStyles = xcss({
|
|
202
|
+
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
203
|
+
// @ts-expect-error
|
|
204
|
+
color: "var(--ds-text-disabled, #091E424F)",
|
|
205
|
+
':hover': {
|
|
206
|
+
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
207
|
+
// @ts-expect-error
|
|
208
|
+
color: "var(--ds-text-disabled, #091E424F)"
|
|
209
|
+
},
|
|
210
|
+
':active': {
|
|
211
|
+
background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
|
|
212
|
+
// @ts-expect-error
|
|
213
|
+
color: "var(--ds-text-disabled, #091E424F)"
|
|
214
|
+
}
|
|
215
|
+
});
|
|
216
|
+
var selectedStyles = xcss({
|
|
217
|
+
background: "var(--ds-background-selected, ".concat(colors.N700, ")"),
|
|
218
|
+
// @ts-expect-error
|
|
219
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
220
|
+
':visited': {
|
|
221
|
+
// @ts-expect-error
|
|
222
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")")
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
var selectedInteractiveStyles = xcss({
|
|
226
|
+
':hover': {
|
|
227
|
+
// @ts-expect-error
|
|
228
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
229
|
+
background: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")")
|
|
230
|
+
},
|
|
231
|
+
':active': {
|
|
232
|
+
// @ts-expect-error
|
|
233
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
234
|
+
background: "var(--ds-background-selected-pressed, ".concat(colors.N700, ")")
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
// TODO: Remove me once we kill color fallbacks
|
|
239
|
+
var selectedWarningStyles = xcss({
|
|
240
|
+
background: "var(--ds-background-selected, ".concat(colors.Y400, ")"),
|
|
241
|
+
// @ts-expect-error
|
|
242
|
+
color: "var(--ds-text-selected, ".concat(colors.N800, ")"),
|
|
243
|
+
':hover': {
|
|
244
|
+
// @ts-expect-error
|
|
245
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
246
|
+
background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
|
|
247
|
+
},
|
|
248
|
+
':active': {
|
|
249
|
+
// @ts-expect-error
|
|
250
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
251
|
+
background: "var(--ds-background-selected, ".concat(colors.Y400, ")")
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
|
|
255
|
+
// TODO: Remove me once we kill color fallbacks
|
|
256
|
+
var selectedDangerStyles = xcss({
|
|
257
|
+
background: "var(--ds-background-selected, ".concat(colors.R500, ")"),
|
|
258
|
+
// @ts-expect-error
|
|
259
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
260
|
+
':hover': {
|
|
261
|
+
// @ts-expect-error
|
|
262
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
263
|
+
background: "var(--ds-background-selected, ".concat(colors.R500, ")")
|
|
264
|
+
},
|
|
265
|
+
':active': {
|
|
266
|
+
// @ts-expect-error
|
|
267
|
+
color: "var(--ds-text-selected, ".concat(colors.N20, ")"),
|
|
268
|
+
background: "var(--ds-background-selected, ".concat(colors.R500, ")")
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
var spacingCompactStyles = xcss({
|
|
272
|
+
columnGap: 'space.050',
|
|
273
|
+
height: "".concat(24 / fontSize, "em"),
|
|
274
|
+
lineHeight: "".concat(24 / fontSize, "em"),
|
|
275
|
+
paddingInlineEnd: 'space.150',
|
|
276
|
+
paddingInlineStart: 'space.150',
|
|
277
|
+
verticalAlign: 'middle'
|
|
278
|
+
});
|
|
279
|
+
var spacingNoneStyles = xcss({
|
|
280
|
+
columnGap: 'space.0',
|
|
281
|
+
height: 'auto',
|
|
282
|
+
lineHeight: 'inherit',
|
|
283
|
+
paddingInlineEnd: 'space.0',
|
|
284
|
+
paddingInlineStart: 'space.0',
|
|
285
|
+
verticalAlign: 'baseline'
|
|
286
|
+
});
|
|
287
|
+
var circleStyles = xcss({
|
|
288
|
+
borderRadius: 'border.radius.circle'
|
|
289
|
+
});
|
|
290
|
+
var fullWidthStyles = xcss({
|
|
291
|
+
width: '100%'
|
|
292
|
+
});
|
|
293
|
+
var loadingOverlayStyles = xcss({
|
|
294
|
+
cursor: 'progress'
|
|
295
|
+
});
|
|
296
|
+
var nonInteractiveStyles = xcss({
|
|
297
|
+
cursor: 'not-allowed'
|
|
298
|
+
});
|
|
299
|
+
var iconButtonStyles = xcss({
|
|
300
|
+
height: "".concat(32 / fontSize, "em"),
|
|
301
|
+
width: "".concat(32 / fontSize, "em"),
|
|
302
|
+
paddingInlineEnd: 'space.0',
|
|
303
|
+
paddingInlineStart: 'space.0'
|
|
304
|
+
});
|
|
305
|
+
var iconButtonCompactStyles = xcss({
|
|
306
|
+
width: "".concat(24 / fontSize, "em"),
|
|
307
|
+
height: "".concat(24 / fontSize, "em")
|
|
308
|
+
});
|
|
309
|
+
var buttonIconBeforeStyles = xcss({
|
|
310
|
+
paddingInlineStart: 'space.100'
|
|
311
|
+
});
|
|
312
|
+
var buttonIconAfterStyles = xcss({
|
|
313
|
+
paddingInlineEnd: 'space.100'
|
|
314
|
+
});
|
|
315
|
+
var splitButtonStyles = xcss({
|
|
316
|
+
':focus-visible': {
|
|
317
|
+
zIndex: 'card'
|
|
318
|
+
}
|
|
319
|
+
});
|
|
320
|
+
var navigationSplitButtonStyles = xcss({
|
|
321
|
+
width: '24px',
|
|
322
|
+
backgroundColor: 'color.background.neutral.subtle',
|
|
323
|
+
paddingInlineEnd: 'space.075',
|
|
324
|
+
paddingInlineStart: 'space.075'
|
|
325
|
+
});
|
|
10
326
|
var overlayStyles = xcss({
|
|
327
|
+
display: 'flex',
|
|
11
328
|
position: 'absolute',
|
|
12
|
-
|
|
329
|
+
alignItems: 'center',
|
|
330
|
+
justifyContent: 'center',
|
|
331
|
+
insetBlockEnd: 'space.0',
|
|
13
332
|
insetBlockStart: 'space.0',
|
|
14
333
|
insetInlineEnd: 'space.0',
|
|
15
|
-
|
|
16
|
-
display: 'flex',
|
|
17
|
-
alignItems: 'center',
|
|
18
|
-
justifyContent: 'center'
|
|
334
|
+
insetInlineStart: 'space.0'
|
|
19
335
|
});
|
|
20
336
|
|
|
21
337
|
/**
|
|
@@ -36,7 +352,6 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
36
352
|
propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
|
|
37
353
|
_ref$autoFocus = _ref.autoFocus,
|
|
38
354
|
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
39
|
-
buttonType = _ref.buttonType,
|
|
40
355
|
_ref$isDisabled = _ref.isDisabled,
|
|
41
356
|
propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
42
357
|
_ref$isLoading = _ref.isLoading,
|
|
@@ -68,53 +383,24 @@ var useButtonBase = function useButtonBase(_ref) {
|
|
|
68
383
|
shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
|
|
69
384
|
_ref$spacing = _ref.spacing,
|
|
70
385
|
propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
|
|
71
|
-
var
|
|
386
|
+
var localRef = useRef(null);
|
|
72
387
|
var splitButtonContext = useSplitButtonContext();
|
|
73
388
|
var isSplitButton = Boolean(splitButtonContext);
|
|
74
389
|
var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
|
|
75
390
|
var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
|
|
76
391
|
var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
|
|
77
392
|
var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
|
|
78
|
-
var
|
|
79
|
-
var
|
|
80
|
-
var setRef = useCallback(function (node) {
|
|
81
|
-
ourRef.current = node;
|
|
82
|
-
if (ref === null) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
if (typeof ref === 'function') {
|
|
86
|
-
ref(node);
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// @ts-ignore
|
|
91
|
-
ref.current = node;
|
|
92
|
-
}, [ourRef, ref]);
|
|
93
|
-
useAutoFocus(ourRef, autoFocus);
|
|
94
|
-
var buttonXCSS = useMemo(function () {
|
|
95
|
-
return getXCSS({
|
|
96
|
-
appearance: appearance,
|
|
97
|
-
spacing: spacing,
|
|
98
|
-
isDisabled: isDisabled,
|
|
99
|
-
isLoading: isLoading,
|
|
100
|
-
isSelected: isSelected,
|
|
101
|
-
isHighlighted: isHighlighted,
|
|
102
|
-
isActiveOverSelected: isActiveOverSelected,
|
|
103
|
-
shouldFitContainer: shouldFitContainer,
|
|
104
|
-
isIconButton: isIconButton,
|
|
105
|
-
isCircle: isCircle,
|
|
106
|
-
hasOverlay: Boolean(overlay),
|
|
107
|
-
isLink: buttonType === 'link',
|
|
108
|
-
hasIconBefore: hasIconBefore,
|
|
109
|
-
hasIconAfter: hasIconAfter,
|
|
110
|
-
isSplit: isSplitButton,
|
|
111
|
-
isNavigationSplit: isNavigationSplitButton
|
|
112
|
-
});
|
|
113
|
-
}, [appearance, buttonType, spacing, isDisabled, isLoading, isSelected, isHighlighted, isActiveOverSelected, isIconButton, isCircle, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
|
|
393
|
+
var hasOverlay = Boolean(overlay);
|
|
394
|
+
var isInteractive = !isDisabled && !isLoading && !hasOverlay;
|
|
114
395
|
var isEffectivelyDisabled = isDisabled || Boolean(overlay);
|
|
396
|
+
useAutoFocus(localRef, autoFocus);
|
|
115
397
|
return _objectSpread({
|
|
116
|
-
ref:
|
|
117
|
-
xcss:
|
|
398
|
+
ref: mergeRefs([localRef, ref]),
|
|
399
|
+
xcss: [buttonStyles, appearance === 'default' && isInteractive && defaultInteractiveStyles, appearance === 'primary' && primaryStyles, appearance === 'primary' && isInteractive && primaryInteractiveStyles, appearance === 'warning' && warningStyles, appearance === 'warning' && isInteractive && warningInteractiveStyles, appearance === 'danger' && dangerStyles, appearance === 'danger' && isInteractive && dangerInteractiveStyles, appearance === 'subtle' && subtleStyles, appearance === 'subtle' && isInteractive && subtleInteractiveStyles, appearance === 'link' && linkStyles, appearance === 'subtle-link' && subtleLinkStyles, !isSelected && (appearance === 'link' || appearance === 'subtle-link') ? linkDecorationStyles : linkDecorationUnsetStyles, isSelected && selectedStyles, isSelected && isInteractive && selectedInteractiveStyles,
|
|
400
|
+
// TODO: remove me once we kill color fallbacks
|
|
401
|
+
isSelected && appearance === 'danger' && selectedDangerStyles,
|
|
402
|
+
// TODO: remove me once we kill color fallbacks
|
|
403
|
+
isSelected && appearance === 'warning' && selectedWarningStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'none' && spacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
|
|
118
404
|
// Consider overlay buttons to be effectively disabled
|
|
119
405
|
isDisabled: isEffectivelyDisabled,
|
|
120
406
|
children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
|
|
@@ -108,7 +108,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
|
|
|
108
108
|
action: 'clicked',
|
|
109
109
|
componentName: 'button',
|
|
110
110
|
packageName: "@atlaskit/button",
|
|
111
|
-
packageVersion: "17.12.
|
|
111
|
+
packageVersion: "17.12.2",
|
|
112
112
|
analyticsData: analyticsContext
|
|
113
113
|
});
|
|
114
114
|
|
|
@@ -18,8 +18,9 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
|
|
|
18
18
|
spacing?: Spacing;
|
|
19
19
|
isLoading?: boolean;
|
|
20
20
|
} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
|
|
21
|
+
type XCSS = ReturnType<typeof xcss>;
|
|
21
22
|
export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
22
|
-
xcss:
|
|
23
|
+
xcss: XCSS | Array<XCSS | false | undefined>;
|
|
23
24
|
ref(node: TagName | null): void;
|
|
24
25
|
children: React.ReactNode;
|
|
25
26
|
isDisabled: boolean;
|
|
@@ -37,5 +38,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
|
37
38
|
*
|
|
38
39
|
* @private
|
|
39
40
|
*/
|
|
40
|
-
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus,
|
|
41
|
+
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
41
42
|
export default useButtonBase;
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CSSObject } from '@emotion/react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
|
|
4
4
|
export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
|
|
5
5
|
export declare function getSpecifiers(styles: CSSObject): CSSObject;
|
|
6
6
|
export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
|
|
7
7
|
declare const Theme: {
|
|
8
8
|
Consumer: import("react").ComponentType<{
|
|
9
9
|
children: (tokens: ThemeTokens) => import("react").ReactNode;
|
|
10
|
-
} &
|
|
11
|
-
state: InteractionState;
|
|
12
|
-
iconIsOnlyChild?: boolean | undefined;
|
|
13
|
-
mode?: import("@atlaskit/theme").ThemeModes | undefined;
|
|
14
|
-
}>;
|
|
10
|
+
} & Omit<ThemeProps, "children">>;
|
|
15
11
|
Provider: import("react").ComponentType<{
|
|
16
12
|
children?: import("react").ReactNode;
|
|
17
13
|
value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
|
@@ -18,8 +18,9 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
|
|
|
18
18
|
spacing?: Spacing;
|
|
19
19
|
isLoading?: boolean;
|
|
20
20
|
} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
|
|
21
|
+
type XCSS = ReturnType<typeof xcss>;
|
|
21
22
|
export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
22
|
-
xcss:
|
|
23
|
+
xcss: XCSS | Array<XCSS | false | undefined>;
|
|
23
24
|
ref(node: TagName | null): void;
|
|
24
25
|
children: React.ReactNode;
|
|
25
26
|
isDisabled: boolean;
|
|
@@ -37,5 +38,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
|
|
|
37
38
|
*
|
|
38
39
|
* @private
|
|
39
40
|
*/
|
|
40
|
-
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus,
|
|
41
|
+
declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
|
|
41
42
|
export default useButtonBase;
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CSSObject } from '@emotion/react';
|
|
3
|
-
import {
|
|
3
|
+
import { ThemeProps, ThemeTokens } from './custom-theme-button-types';
|
|
4
4
|
export declare function getCustomCss({ appearance, spacing, mode, isSelected, shouldFitContainer, iconIsOnlyChild, isLoading, state, }: ThemeProps): CSSObject;
|
|
5
5
|
export declare function getSpecifiers(styles: CSSObject): CSSObject;
|
|
6
6
|
export declare function defaultThemeFn(current: (values: ThemeProps) => ThemeTokens, values: ThemeProps): ThemeTokens;
|
|
7
7
|
declare const Theme: {
|
|
8
8
|
Consumer: import("react").ComponentType<{
|
|
9
9
|
children: (tokens: ThemeTokens) => import("react").ReactNode;
|
|
10
|
-
} &
|
|
11
|
-
state: InteractionState;
|
|
12
|
-
iconIsOnlyChild?: boolean | undefined;
|
|
13
|
-
mode?: import("@atlaskit/theme").ThemeModes | undefined;
|
|
14
|
-
}>;
|
|
10
|
+
} & Omit<ThemeProps, "children">>;
|
|
15
11
|
Provider: import("react").ComponentType<{
|
|
16
12
|
children?: import("react").ReactNode;
|
|
17
13
|
value?: import("@atlaskit/theme/components").ThemeProp<ThemeTokens, ThemeProps> | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/button",
|
|
3
|
-
"version": "17.12.
|
|
3
|
+
"version": "17.12.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/"
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
85
|
"@atlaskit/analytics-next": "^9.2.0",
|
|
86
|
-
"@atlaskit/ds-lib": "^2.
|
|
86
|
+
"@atlaskit/ds-lib": "^2.3.0",
|
|
87
87
|
"@atlaskit/focus-ring": "^1.3.9",
|
|
88
88
|
"@atlaskit/icon": "^22.1.0",
|
|
89
89
|
"@atlaskit/interaction-context": "^2.1.0",
|
|
@@ -104,6 +104,8 @@
|
|
|
104
104
|
"@af/integration-testing": "*",
|
|
105
105
|
"@af/visual-regression": "*",
|
|
106
106
|
"@atlaskit/app-provider": "^1.3.0",
|
|
107
|
+
"@atlaskit/calendar": "^14.2.0",
|
|
108
|
+
"@atlaskit/checkbox": "^13.1.0",
|
|
107
109
|
"@atlaskit/ssr": "*",
|
|
108
110
|
"@atlaskit/visual-regression": "*",
|
|
109
111
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|