@khanacademy/wonder-blocks-button 7.1.0 → 7.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 +39 -0
- package/dist/es/index.js +87 -83
- package/dist/index.js +105 -96
- package/dist/themes/default.d.ts +38 -12
- package/dist/themes/khanmigo.d.ts +38 -12
- package/dist/themes/themed-button.d.ts +38 -12
- package/package.json +9 -9
package/dist/index.js
CHANGED
|
@@ -14,7 +14,10 @@ var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
|
|
|
14
14
|
var tokens = require('@khanacademy/wonder-blocks-tokens');
|
|
15
15
|
var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
16
16
|
|
|
17
|
-
function
|
|
17
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
18
|
+
|
|
19
|
+
function _interopNamespace(e) {
|
|
20
|
+
if (e && e.__esModule) return e;
|
|
18
21
|
var n = Object.create(null);
|
|
19
22
|
if (e) {
|
|
20
23
|
Object.keys(e).forEach(function (k) {
|
|
@@ -27,74 +30,82 @@ function _interopNamespaceDefault(e) {
|
|
|
27
30
|
}
|
|
28
31
|
});
|
|
29
32
|
}
|
|
30
|
-
n
|
|
33
|
+
n["default"] = e;
|
|
31
34
|
return Object.freeze(n);
|
|
32
35
|
}
|
|
33
36
|
|
|
34
|
-
var
|
|
35
|
-
var
|
|
37
|
+
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
38
|
+
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
39
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
40
|
+
var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
|
|
36
41
|
|
|
37
42
|
const {
|
|
38
43
|
semanticColor
|
|
39
44
|
} = tokens__namespace;
|
|
40
45
|
const textUnderlineOffset = tokens__namespace.spacing.xxxSmall_4;
|
|
46
|
+
const focusOutline = {
|
|
47
|
+
border: semanticColor.focus.outer
|
|
48
|
+
};
|
|
49
|
+
const focusOutlineLight = {
|
|
50
|
+
border: semanticColor.border.inverse
|
|
51
|
+
};
|
|
41
52
|
const theme$1 = {
|
|
42
53
|
color: {
|
|
43
|
-
|
|
44
|
-
progressive:
|
|
54
|
+
primary: {
|
|
55
|
+
progressive: _extends__default["default"]({}, semanticColor.action.primary.progressive, {
|
|
56
|
+
focus: focusOutline,
|
|
45
57
|
disabled: {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
foreground: semanticColor.action.disabled.secondary
|
|
58
|
+
background: semanticColor.action.primary.disabled.background,
|
|
59
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
49
60
|
}
|
|
50
61
|
}),
|
|
51
|
-
progressiveLight:
|
|
52
|
-
|
|
62
|
+
progressiveLight: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
|
|
63
|
+
focus: focusOutlineLight,
|
|
64
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
53
65
|
border: semanticColor.border.inverse
|
|
54
66
|
}),
|
|
55
|
-
press:
|
|
56
|
-
border: semanticColor.action.
|
|
67
|
+
press: _extends__default["default"]({}, semanticColor.action.secondary.progressive.press, {
|
|
68
|
+
border: semanticColor.action.secondary.progressive.press.background
|
|
57
69
|
}),
|
|
58
70
|
disabled: {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
foreground: semanticColor.action.outlined.progressive.default.foreground
|
|
71
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
72
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
62
73
|
}
|
|
63
74
|
}),
|
|
64
|
-
destructive:
|
|
75
|
+
destructive: _extends__default["default"]({}, semanticColor.action.primary.destructive, {
|
|
76
|
+
focus: focusOutline,
|
|
65
77
|
disabled: {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
foreground: semanticColor.action.disabled.secondary
|
|
78
|
+
background: semanticColor.action.primary.disabled.background,
|
|
79
|
+
foreground: semanticColor.action.primary.disabled.foreground
|
|
69
80
|
}
|
|
70
81
|
}),
|
|
71
|
-
destructiveLight:
|
|
72
|
-
|
|
82
|
+
destructiveLight: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
|
|
83
|
+
focus: focusOutlineLight,
|
|
84
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
73
85
|
border: semanticColor.border.inverse
|
|
74
86
|
}),
|
|
75
|
-
press:
|
|
76
|
-
border: semanticColor.action.
|
|
87
|
+
press: _extends__default["default"]({}, semanticColor.action.secondary.destructive.press, {
|
|
88
|
+
border: semanticColor.action.secondary.destructive.press.background
|
|
77
89
|
}),
|
|
78
90
|
disabled: {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
foreground: semanticColor.action.outlined.destructive.default.foreground
|
|
91
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
92
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
82
93
|
}
|
|
83
94
|
})
|
|
84
95
|
},
|
|
85
|
-
|
|
86
|
-
progressive:
|
|
87
|
-
default:
|
|
96
|
+
secondary: {
|
|
97
|
+
progressive: _extends__default["default"]({}, semanticColor.action.secondary.progressive, {
|
|
98
|
+
default: _extends__default["default"]({}, semanticColor.action.secondary.progressive.default, {
|
|
88
99
|
background: "transparent"
|
|
89
100
|
}),
|
|
90
|
-
|
|
101
|
+
focus: focusOutline,
|
|
102
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.progressive.hover, {
|
|
91
103
|
background: "transparent",
|
|
92
104
|
icon: "transparent"
|
|
93
105
|
}),
|
|
94
106
|
disabled: {
|
|
95
|
-
border: semanticColor.action.disabled.
|
|
96
|
-
|
|
97
|
-
foreground: semanticColor.text.disabled
|
|
107
|
+
border: semanticColor.action.primary.disabled.border,
|
|
108
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
98
109
|
}
|
|
99
110
|
}),
|
|
100
111
|
progressiveLight: {
|
|
@@ -103,6 +114,7 @@ const theme$1 = {
|
|
|
103
114
|
background: "transparent",
|
|
104
115
|
foreground: semanticColor.text.inverse
|
|
105
116
|
},
|
|
117
|
+
focus: focusOutlineLight,
|
|
106
118
|
hover: {
|
|
107
119
|
border: semanticColor.border.inverse,
|
|
108
120
|
background: "transparent",
|
|
@@ -111,24 +123,24 @@ const theme$1 = {
|
|
|
111
123
|
},
|
|
112
124
|
press: {
|
|
113
125
|
border: tokens__namespace.color.fadedBlue,
|
|
114
|
-
background: semanticColor.action.
|
|
126
|
+
background: semanticColor.action.primary.progressive.press.background,
|
|
115
127
|
foreground: semanticColor.text.inverse
|
|
116
128
|
},
|
|
117
129
|
disabled: {
|
|
118
|
-
border: semanticColor.action.
|
|
119
|
-
background: semanticColor.action.
|
|
130
|
+
border: semanticColor.action.secondary.progressive.press.background,
|
|
131
|
+
background: semanticColor.action.secondary.progressive.press.background,
|
|
120
132
|
foreground: tokens__namespace.color.white50
|
|
121
133
|
}
|
|
122
134
|
},
|
|
123
|
-
destructive:
|
|
124
|
-
|
|
135
|
+
destructive: _extends__default["default"]({}, semanticColor.action.secondary.destructive, {
|
|
136
|
+
focus: focusOutline,
|
|
137
|
+
hover: _extends__default["default"]({}, semanticColor.action.secondary.destructive.hover, {
|
|
125
138
|
background: "transparent",
|
|
126
139
|
icon: "transparent"
|
|
127
140
|
}),
|
|
128
141
|
disabled: {
|
|
129
|
-
border: semanticColor.action.disabled.
|
|
130
|
-
|
|
131
|
-
foreground: semanticColor.text.disabled
|
|
142
|
+
border: semanticColor.action.primary.disabled.border,
|
|
143
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
132
144
|
}
|
|
133
145
|
}),
|
|
134
146
|
destructiveLight: {
|
|
@@ -137,6 +149,7 @@ const theme$1 = {
|
|
|
137
149
|
background: "transparent",
|
|
138
150
|
foreground: semanticColor.text.inverse
|
|
139
151
|
},
|
|
152
|
+
focus: focusOutlineLight,
|
|
140
153
|
hover: {
|
|
141
154
|
border: semanticColor.border.inverse,
|
|
142
155
|
background: "transparent",
|
|
@@ -145,12 +158,12 @@ const theme$1 = {
|
|
|
145
158
|
},
|
|
146
159
|
press: {
|
|
147
160
|
border: tokens__namespace.color.fadedRed,
|
|
148
|
-
background: semanticColor.action.
|
|
161
|
+
background: semanticColor.action.primary.destructive.press.background,
|
|
149
162
|
foreground: semanticColor.text.inverse
|
|
150
163
|
},
|
|
151
164
|
disabled: {
|
|
152
|
-
border: semanticColor.action.
|
|
153
|
-
background: semanticColor.action.
|
|
165
|
+
border: semanticColor.action.secondary.destructive.press.background,
|
|
166
|
+
background: semanticColor.action.secondary.destructive.press.background,
|
|
154
167
|
foreground: tokens__namespace.color.white50
|
|
155
168
|
}
|
|
156
169
|
}
|
|
@@ -159,17 +172,17 @@ const theme$1 = {
|
|
|
159
172
|
progressive: {
|
|
160
173
|
default: {
|
|
161
174
|
background: "transparent",
|
|
162
|
-
foreground: semanticColor.action.
|
|
175
|
+
foreground: semanticColor.action.secondary.progressive.default.foreground
|
|
163
176
|
},
|
|
177
|
+
focus: focusOutline,
|
|
164
178
|
hover: {
|
|
165
|
-
border: semanticColor.action.
|
|
179
|
+
border: semanticColor.action.secondary.progressive.hover.border
|
|
166
180
|
},
|
|
167
181
|
press: {
|
|
168
|
-
foreground: semanticColor.action.
|
|
182
|
+
foreground: semanticColor.action.secondary.progressive.press.foreground
|
|
169
183
|
},
|
|
170
184
|
disabled: {
|
|
171
|
-
|
|
172
|
-
foreground: semanticColor.text.disabled
|
|
185
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
173
186
|
}
|
|
174
187
|
},
|
|
175
188
|
progressiveLight: {
|
|
@@ -178,6 +191,7 @@ const theme$1 = {
|
|
|
178
191
|
background: "transparent",
|
|
179
192
|
foreground: semanticColor.text.inverse
|
|
180
193
|
},
|
|
194
|
+
focus: focusOutlineLight,
|
|
181
195
|
hover: {
|
|
182
196
|
border: semanticColor.border.inverse,
|
|
183
197
|
background: "transparent",
|
|
@@ -188,24 +202,23 @@ const theme$1 = {
|
|
|
188
202
|
foreground: tokens__namespace.color.fadedBlue
|
|
189
203
|
},
|
|
190
204
|
disabled: {
|
|
191
|
-
border: semanticColor.action.outlined.progressive.press.background,
|
|
192
205
|
foreground: tokens__namespace.color.white50
|
|
193
206
|
}
|
|
194
207
|
},
|
|
195
208
|
destructive: {
|
|
196
209
|
default: {
|
|
197
210
|
background: "transparent",
|
|
198
|
-
foreground: semanticColor.action.
|
|
211
|
+
foreground: semanticColor.action.secondary.destructive.default.foreground
|
|
199
212
|
},
|
|
213
|
+
focus: focusOutline,
|
|
200
214
|
hover: {
|
|
201
|
-
border: semanticColor.action.
|
|
215
|
+
border: semanticColor.action.secondary.destructive.hover.border
|
|
202
216
|
},
|
|
203
217
|
press: {
|
|
204
|
-
foreground: semanticColor.action.
|
|
218
|
+
foreground: semanticColor.action.secondary.destructive.press.foreground
|
|
205
219
|
},
|
|
206
220
|
disabled: {
|
|
207
|
-
|
|
208
|
-
foreground: semanticColor.text.disabled
|
|
221
|
+
foreground: semanticColor.action.secondary.disabled.foreground
|
|
209
222
|
}
|
|
210
223
|
},
|
|
211
224
|
destructiveLight: {
|
|
@@ -214,6 +227,7 @@ const theme$1 = {
|
|
|
214
227
|
background: "transparent",
|
|
215
228
|
foreground: semanticColor.text.inverse
|
|
216
229
|
},
|
|
230
|
+
focus: focusOutlineLight,
|
|
217
231
|
hover: {
|
|
218
232
|
border: semanticColor.border.inverse,
|
|
219
233
|
background: "transparent",
|
|
@@ -224,7 +238,6 @@ const theme$1 = {
|
|
|
224
238
|
foreground: tokens__namespace.color.fadedRed
|
|
225
239
|
},
|
|
226
240
|
disabled: {
|
|
227
|
-
border: semanticColor.action.outlined.destructive.press.background,
|
|
228
241
|
foreground: tokens__namespace.color.white50
|
|
229
242
|
}
|
|
230
243
|
}
|
|
@@ -291,7 +304,7 @@ const theme$1 = {
|
|
|
291
304
|
const secondaryBgColor = tokens__namespace.color.offWhite;
|
|
292
305
|
const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
293
306
|
color: {
|
|
294
|
-
|
|
307
|
+
secondary: {
|
|
295
308
|
progressive: {
|
|
296
309
|
default: {
|
|
297
310
|
border: tokens__namespace.color.fadedBlue,
|
|
@@ -300,7 +313,7 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
|
300
313
|
hover: {
|
|
301
314
|
background: secondaryBgColor,
|
|
302
315
|
icon: tokens__namespace.color.fadedBlue16,
|
|
303
|
-
foreground: tokens__namespace.semanticColor.action.
|
|
316
|
+
foreground: tokens__namespace.semanticColor.action.secondary.progressive.default.foreground
|
|
304
317
|
},
|
|
305
318
|
press: {
|
|
306
319
|
background: tokens__namespace.color.fadedBlue8
|
|
@@ -314,7 +327,7 @@ const theme = wonderBlocksTheming.mergeTheme(theme$1, {
|
|
|
314
327
|
hover: {
|
|
315
328
|
background: secondaryBgColor,
|
|
316
329
|
icon: tokens__namespace.color.fadedRed16,
|
|
317
|
-
foreground: tokens__namespace.semanticColor.action.
|
|
330
|
+
foreground: tokens__namespace.semanticColor.action.secondary.destructive.default.foreground
|
|
318
331
|
},
|
|
319
332
|
press: {
|
|
320
333
|
background: tokens__namespace.color.fadedRed8
|
|
@@ -371,13 +384,13 @@ function ButtonIcon({
|
|
|
371
384
|
};
|
|
372
385
|
switch (size) {
|
|
373
386
|
case "small":
|
|
374
|
-
return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon,
|
|
387
|
+
return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, _extends__default["default"]({}, commonProps, {
|
|
375
388
|
size: "small",
|
|
376
389
|
icon: icon
|
|
377
390
|
}));
|
|
378
391
|
case "medium":
|
|
379
392
|
default:
|
|
380
|
-
return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon,
|
|
393
|
+
return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, _extends__default["default"]({}, commonProps, {
|
|
381
394
|
size: "medium",
|
|
382
395
|
icon: icon
|
|
383
396
|
}));
|
|
@@ -416,11 +429,11 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
|
|
|
416
429
|
endIcon,
|
|
417
430
|
id
|
|
418
431
|
} = props,
|
|
419
|
-
restProps =
|
|
432
|
+
restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
|
|
420
433
|
const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
|
|
421
434
|
const disabled = spinner || disabledProp;
|
|
422
435
|
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, startIcon && sharedStyles.withStartIcon, endIcon && sharedStyles.withEndIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.pressed : focused && buttonStyles.focused), kind === "tertiary" && !pressed && focused && [buttonStyles.focused, disabled && buttonStyles.disabledFocus], size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
|
|
423
|
-
const commonProps =
|
|
436
|
+
const commonProps = _extends__default["default"]({
|
|
424
437
|
"data-testid": testId,
|
|
425
438
|
id: id,
|
|
426
439
|
role: "button",
|
|
@@ -458,15 +471,15 @@ const ButtonCore = React__namespace.forwardRef(function ButtonCore(props, ref) {
|
|
|
458
471
|
testId: testId ? `${testId}-end-icon` : undefined
|
|
459
472
|
})));
|
|
460
473
|
if (href && !disabled) {
|
|
461
|
-
return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink,
|
|
474
|
+
return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
|
|
462
475
|
to: href,
|
|
463
476
|
ref: ref
|
|
464
|
-
}), contents) : React__namespace.createElement(StyledA,
|
|
477
|
+
}), contents) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
|
|
465
478
|
href: href,
|
|
466
479
|
ref: ref
|
|
467
480
|
}), contents);
|
|
468
481
|
} else {
|
|
469
|
-
return React__namespace.createElement(StyledButton,
|
|
482
|
+
return React__namespace.createElement(StyledButton, _extends__default["default"]({
|
|
470
483
|
type: type || "button"
|
|
471
484
|
}, commonProps, {
|
|
472
485
|
"aria-disabled": disabled,
|
|
@@ -569,13 +582,18 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
569
582
|
const colorToAction = light ? buttonColor === "destructive" ? "destructiveLight" : "progressiveLight" : buttonColor === "destructive" ? "destructive" : "progressive";
|
|
570
583
|
let newStyles = {};
|
|
571
584
|
if (kind === "primary") {
|
|
572
|
-
const themeColorAction = theme.color.
|
|
573
|
-
const
|
|
574
|
-
outlineColor: themeColorAction.hover.border,
|
|
585
|
+
const themeColorAction = theme.color.primary[colorToAction];
|
|
586
|
+
const sharedFocusHoverStyling = {
|
|
575
587
|
outlineOffset: theme.border.offset.primary,
|
|
576
588
|
outlineStyle: "solid",
|
|
577
589
|
outlineWidth: theme.border.width.focused
|
|
578
590
|
};
|
|
591
|
+
const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
592
|
+
outlineColor: themeColorAction.focus.border
|
|
593
|
+
});
|
|
594
|
+
const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
595
|
+
outlineColor: themeColorAction.hover.border
|
|
596
|
+
});
|
|
579
597
|
const activePressedStyling = {
|
|
580
598
|
background: themeColorAction.press.background,
|
|
581
599
|
outlineColor: themeColorAction.press.border,
|
|
@@ -588,7 +606,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
588
606
|
background: themeColorAction.default.background,
|
|
589
607
|
color: themeColorAction.default.foreground,
|
|
590
608
|
paddingInline: padding,
|
|
591
|
-
[":hover:not([aria-disabled=true])"]:
|
|
609
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
592
610
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
593
611
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
594
612
|
},
|
|
@@ -598,20 +616,23 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
598
616
|
background: themeColorAction.disabled.background,
|
|
599
617
|
color: themeColorAction.disabled.foreground,
|
|
600
618
|
cursor: "default",
|
|
601
|
-
":focus-visible":
|
|
602
|
-
outlineColor: themeColorAction.disabled.border
|
|
603
|
-
})
|
|
619
|
+
":focus-visible": focusStyling
|
|
604
620
|
}
|
|
605
621
|
};
|
|
606
622
|
} else if (kind === "secondary") {
|
|
607
|
-
const themeColorAction = theme.color.
|
|
608
|
-
const
|
|
623
|
+
const themeColorAction = theme.color.secondary[colorToAction];
|
|
624
|
+
const sharedFocusHoverStyling = {
|
|
609
625
|
background: themeColorAction.hover.background,
|
|
610
|
-
outlineColor: themeColorAction.hover.border,
|
|
611
626
|
outlineStyle: "solid",
|
|
612
627
|
outlineOffset: theme.border.offset.secondary,
|
|
613
628
|
outlineWidth: theme.border.width.focused
|
|
614
629
|
};
|
|
630
|
+
const focusStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
631
|
+
outlineColor: themeColorAction.focus.border
|
|
632
|
+
});
|
|
633
|
+
const hoverStyling = _extends__default["default"]({}, sharedFocusHoverStyling, {
|
|
634
|
+
outlineColor: themeColorAction.hover.border
|
|
635
|
+
});
|
|
615
636
|
const activePressedStyling = {
|
|
616
637
|
background: themeColorAction.press.background,
|
|
617
638
|
color: themeColorAction.press.foreground,
|
|
@@ -627,7 +648,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
627
648
|
borderStyle: "solid",
|
|
628
649
|
borderWidth: theme.border.width.secondary,
|
|
629
650
|
paddingInline: padding,
|
|
630
|
-
[":hover:not([aria-disabled=true])"]:
|
|
651
|
+
[":hover:not([aria-disabled=true])"]: hoverStyling,
|
|
631
652
|
[":focus-visible:not([aria-disabled=true])"]: focusStyling,
|
|
632
653
|
[":active:not([aria-disabled=true])"]: activePressedStyling
|
|
633
654
|
},
|
|
@@ -637,13 +658,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
637
658
|
color: themeColorAction.disabled.foreground,
|
|
638
659
|
borderColor: themeColorAction.disabled.border,
|
|
639
660
|
cursor: "default",
|
|
640
|
-
":focus-visible":
|
|
641
|
-
borderColor: themeColorAction.disabled.border,
|
|
642
|
-
outlineColor: themeColorAction.disabled.border,
|
|
643
|
-
outlineOffset: theme.border.offset.secondary,
|
|
644
|
-
outlineStyle: "solid",
|
|
645
|
-
outlineWidth: theme.border.width.disabled
|
|
646
|
-
}
|
|
661
|
+
":focus-visible": focusStyling
|
|
647
662
|
},
|
|
648
663
|
iconWrapperHovered: {
|
|
649
664
|
backgroundColor: themeColorAction.hover.icon,
|
|
@@ -655,7 +670,7 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
655
670
|
const focusStyling = {
|
|
656
671
|
outlineStyle: "solid",
|
|
657
672
|
borderColor: "transparent",
|
|
658
|
-
outlineColor: themeColorAction.
|
|
673
|
+
outlineColor: themeColorAction.focus.border,
|
|
659
674
|
outlineWidth: theme.border.width.focused,
|
|
660
675
|
borderRadius: theme.border.radius.default
|
|
661
676
|
};
|
|
@@ -683,15 +698,9 @@ const _generateStyles = (buttonColor = "default", kind, light, size, theme, them
|
|
|
683
698
|
disabled: {
|
|
684
699
|
color: themeColorAction.disabled.foreground,
|
|
685
700
|
cursor: "default",
|
|
686
|
-
":focus-visible":
|
|
687
|
-
outlineColor: themeColorAction.disabled.border,
|
|
688
|
-
outlineStyle: "solid",
|
|
689
|
-
outlineWidth: theme.border.width.disabled
|
|
690
|
-
}
|
|
701
|
+
":focus-visible": focusStyling
|
|
691
702
|
},
|
|
692
|
-
disabledFocus:
|
|
693
|
-
outlineColor: themeColorAction.disabled.border
|
|
694
|
-
}
|
|
703
|
+
disabledFocus: focusStyling
|
|
695
704
|
};
|
|
696
705
|
} else {
|
|
697
706
|
throw new Error("Button kind not recognized");
|
|
@@ -720,11 +729,11 @@ const Button = React__namespace.forwardRef(function Button(props, ref) {
|
|
|
720
729
|
disabled = false,
|
|
721
730
|
spinner = false
|
|
722
731
|
} = props,
|
|
723
|
-
sharedButtonCoreProps =
|
|
732
|
+
sharedButtonCoreProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
724
733
|
const renderClickableBehavior = router => {
|
|
725
734
|
const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
|
|
726
735
|
const renderProp = (state, restChildProps) => {
|
|
727
|
-
return React__namespace.createElement(ButtonCore,
|
|
736
|
+
return React__namespace.createElement(ButtonCore, _extends__default["default"]({}, sharedButtonCoreProps, state, restChildProps, {
|
|
728
737
|
disabled: disabled,
|
|
729
738
|
spinner: spinner || state.waiting,
|
|
730
739
|
color: color,
|
package/dist/themes/default.d.ts
CHANGED
|
@@ -3,10 +3,12 @@ declare const theme: {
|
|
|
3
3
|
/**
|
|
4
4
|
* Primary
|
|
5
5
|
*/
|
|
6
|
-
|
|
6
|
+
primary: {
|
|
7
7
|
progressive: {
|
|
8
|
-
|
|
8
|
+
focus: {
|
|
9
9
|
border: string;
|
|
10
|
+
};
|
|
11
|
+
disabled: {
|
|
10
12
|
background: string;
|
|
11
13
|
foreground: string;
|
|
12
14
|
};
|
|
@@ -27,6 +29,9 @@ declare const theme: {
|
|
|
27
29
|
};
|
|
28
30
|
};
|
|
29
31
|
progressiveLight: {
|
|
32
|
+
focus: {
|
|
33
|
+
border: string;
|
|
34
|
+
};
|
|
30
35
|
hover: {
|
|
31
36
|
border: string;
|
|
32
37
|
background: string;
|
|
@@ -38,7 +43,6 @@ declare const theme: {
|
|
|
38
43
|
foreground: string;
|
|
39
44
|
};
|
|
40
45
|
disabled: {
|
|
41
|
-
border: string;
|
|
42
46
|
background: string;
|
|
43
47
|
foreground: string;
|
|
44
48
|
};
|
|
@@ -49,8 +53,10 @@ declare const theme: {
|
|
|
49
53
|
};
|
|
50
54
|
};
|
|
51
55
|
destructive: {
|
|
52
|
-
|
|
56
|
+
focus: {
|
|
53
57
|
border: string;
|
|
58
|
+
};
|
|
59
|
+
disabled: {
|
|
54
60
|
background: string;
|
|
55
61
|
foreground: string;
|
|
56
62
|
};
|
|
@@ -71,6 +77,9 @@ declare const theme: {
|
|
|
71
77
|
};
|
|
72
78
|
};
|
|
73
79
|
destructiveLight: {
|
|
80
|
+
focus: {
|
|
81
|
+
border: string;
|
|
82
|
+
};
|
|
74
83
|
hover: {
|
|
75
84
|
border: string;
|
|
76
85
|
background: string;
|
|
@@ -82,7 +91,6 @@ declare const theme: {
|
|
|
82
91
|
foreground: string;
|
|
83
92
|
};
|
|
84
93
|
disabled: {
|
|
85
|
-
border: string;
|
|
86
94
|
background: string;
|
|
87
95
|
foreground: string;
|
|
88
96
|
};
|
|
@@ -98,13 +106,16 @@ declare const theme: {
|
|
|
98
106
|
*
|
|
99
107
|
* Outlined buttons
|
|
100
108
|
*/
|
|
101
|
-
|
|
109
|
+
secondary: {
|
|
102
110
|
progressive: {
|
|
103
111
|
default: {
|
|
104
112
|
background: string;
|
|
105
113
|
border: string;
|
|
106
114
|
foreground: string;
|
|
107
115
|
};
|
|
116
|
+
focus: {
|
|
117
|
+
border: string;
|
|
118
|
+
};
|
|
108
119
|
hover: {
|
|
109
120
|
background: string;
|
|
110
121
|
icon: string;
|
|
@@ -113,7 +124,6 @@ declare const theme: {
|
|
|
113
124
|
};
|
|
114
125
|
disabled: {
|
|
115
126
|
border: string;
|
|
116
|
-
background: string;
|
|
117
127
|
foreground: string;
|
|
118
128
|
};
|
|
119
129
|
press: {
|
|
@@ -128,6 +138,9 @@ declare const theme: {
|
|
|
128
138
|
background: string;
|
|
129
139
|
foreground: string;
|
|
130
140
|
};
|
|
141
|
+
focus: {
|
|
142
|
+
border: string;
|
|
143
|
+
};
|
|
131
144
|
hover: {
|
|
132
145
|
border: string;
|
|
133
146
|
background: string;
|
|
@@ -146,6 +159,9 @@ declare const theme: {
|
|
|
146
159
|
};
|
|
147
160
|
};
|
|
148
161
|
destructive: {
|
|
162
|
+
focus: {
|
|
163
|
+
border: string;
|
|
164
|
+
};
|
|
149
165
|
hover: {
|
|
150
166
|
background: string;
|
|
151
167
|
icon: string;
|
|
@@ -154,7 +170,6 @@ declare const theme: {
|
|
|
154
170
|
};
|
|
155
171
|
disabled: {
|
|
156
172
|
border: string;
|
|
157
|
-
background: string;
|
|
158
173
|
foreground: string;
|
|
159
174
|
};
|
|
160
175
|
default: {
|
|
@@ -174,6 +189,9 @@ declare const theme: {
|
|
|
174
189
|
background: string;
|
|
175
190
|
foreground: string;
|
|
176
191
|
};
|
|
192
|
+
focus: {
|
|
193
|
+
border: string;
|
|
194
|
+
};
|
|
177
195
|
hover: {
|
|
178
196
|
border: string;
|
|
179
197
|
background: string;
|
|
@@ -203,6 +221,9 @@ declare const theme: {
|
|
|
203
221
|
background: string;
|
|
204
222
|
foreground: string;
|
|
205
223
|
};
|
|
224
|
+
focus: {
|
|
225
|
+
border: string;
|
|
226
|
+
};
|
|
206
227
|
hover: {
|
|
207
228
|
border: string;
|
|
208
229
|
};
|
|
@@ -210,7 +231,6 @@ declare const theme: {
|
|
|
210
231
|
foreground: string;
|
|
211
232
|
};
|
|
212
233
|
disabled: {
|
|
213
|
-
border: string;
|
|
214
234
|
foreground: string;
|
|
215
235
|
};
|
|
216
236
|
};
|
|
@@ -220,6 +240,9 @@ declare const theme: {
|
|
|
220
240
|
background: string;
|
|
221
241
|
foreground: string;
|
|
222
242
|
};
|
|
243
|
+
focus: {
|
|
244
|
+
border: string;
|
|
245
|
+
};
|
|
223
246
|
hover: {
|
|
224
247
|
border: string;
|
|
225
248
|
background: string;
|
|
@@ -230,7 +253,6 @@ declare const theme: {
|
|
|
230
253
|
foreground: string;
|
|
231
254
|
};
|
|
232
255
|
disabled: {
|
|
233
|
-
border: string;
|
|
234
256
|
foreground: string;
|
|
235
257
|
};
|
|
236
258
|
};
|
|
@@ -239,6 +261,9 @@ declare const theme: {
|
|
|
239
261
|
background: string;
|
|
240
262
|
foreground: string;
|
|
241
263
|
};
|
|
264
|
+
focus: {
|
|
265
|
+
border: string;
|
|
266
|
+
};
|
|
242
267
|
hover: {
|
|
243
268
|
border: string;
|
|
244
269
|
};
|
|
@@ -246,7 +271,6 @@ declare const theme: {
|
|
|
246
271
|
foreground: string;
|
|
247
272
|
};
|
|
248
273
|
disabled: {
|
|
249
|
-
border: string;
|
|
250
274
|
foreground: string;
|
|
251
275
|
};
|
|
252
276
|
};
|
|
@@ -256,6 +280,9 @@ declare const theme: {
|
|
|
256
280
|
background: string;
|
|
257
281
|
foreground: string;
|
|
258
282
|
};
|
|
283
|
+
focus: {
|
|
284
|
+
border: string;
|
|
285
|
+
};
|
|
259
286
|
hover: {
|
|
260
287
|
border: string;
|
|
261
288
|
background: string;
|
|
@@ -266,7 +293,6 @@ declare const theme: {
|
|
|
266
293
|
foreground: string;
|
|
267
294
|
};
|
|
268
295
|
disabled: {
|
|
269
|
-
border: string;
|
|
270
296
|
foreground: string;
|
|
271
297
|
};
|
|
272
298
|
};
|