@splunk/react-ui 4.43.0 → 4.44.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ButtonGroup.js +10 -11
- package/ButtonSimple.js +209 -209
- package/CHANGELOG.md +21 -0
- package/Clickable.js +1 -1
- package/ComboBox.js +10 -8
- package/Date.js +31 -11
- package/DualListbox.js +1 -1
- package/MIGRATION.mdx +22 -1
- package/Menu.js +1 -1
- package/Multiselect.js +12 -10
- package/Number.js +169 -167
- package/Slider.js +17 -13
- package/StaticContent.js +15 -13
- package/Table.js +16 -7
- package/Tree.d.ts +2 -0
- package/package.json +2 -2
- package/types/src/Date/Date.d.ts +3 -2
- package/types/src/Number/Number.d.ts +1 -0
- package/types/src/Slider/Slider.d.ts +1 -1
- package/types/src/StaticContent/StaticContent.d.ts +3 -1
package/ButtonSimple.js
CHANGED
|
@@ -70,10 +70,10 @@
|
|
|
70
70
|
const i = require("prop-types");
|
|
71
71
|
var t = r.n(i);
|
|
72
72
|
// CONCATENATED MODULE: external "@splunk/themes"
|
|
73
|
-
const
|
|
73
|
+
const n = require("@splunk/themes");
|
|
74
74
|
// CONCATENATED MODULE: external "styled-components"
|
|
75
|
-
const
|
|
76
|
-
var s = r.n(
|
|
75
|
+
const l = require("styled-components");
|
|
76
|
+
var s = r.n(l);
|
|
77
77
|
// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
|
|
78
78
|
const c = require("@splunk/react-ui/Clickable");
|
|
79
79
|
var b = r.n(c);
|
|
@@ -93,121 +93,121 @@
|
|
|
93
93
|
function f(r) {
|
|
94
94
|
var e = "transparent";
|
|
95
95
|
var a = "transparent";
|
|
96
|
-
var o = (0,
|
|
96
|
+
var o = (0, n.pick)({
|
|
97
97
|
enterprise: {
|
|
98
|
-
light:
|
|
99
|
-
dark:
|
|
98
|
+
light: n.variables.gray96,
|
|
99
|
+
dark: n.variables.gray30
|
|
100
100
|
},
|
|
101
|
-
prisma:
|
|
101
|
+
prisma: n.variables.interactiveColorBackgroundDisabled
|
|
102
102
|
});
|
|
103
|
-
var i = (0,
|
|
103
|
+
var i = (0, n.pick)({
|
|
104
104
|
enterprise: {
|
|
105
|
-
dark:
|
|
106
|
-
light:
|
|
105
|
+
dark: n.variables.gray22,
|
|
106
|
+
light: n.variables.gray92
|
|
107
107
|
},
|
|
108
|
-
prisma:
|
|
108
|
+
prisma: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
|
|
109
109
|
});
|
|
110
110
|
var t = "transparent";
|
|
111
|
-
var
|
|
111
|
+
var l = "transparent";
|
|
112
112
|
var s;
|
|
113
113
|
var c;
|
|
114
|
-
var b =
|
|
115
|
-
var d =
|
|
114
|
+
var b = n.variables.contentColorActive;
|
|
115
|
+
var d = n.variables.contentColorDisabled;
|
|
116
116
|
switch (r) {
|
|
117
117
|
case "primary":
|
|
118
118
|
{
|
|
119
|
-
e = (0,
|
|
119
|
+
e = (0, n.pick)({
|
|
120
120
|
enterprise: "#1A8929",
|
|
121
|
-
prisma:
|
|
121
|
+
prisma: n.variables.interactiveColorPrimary
|
|
122
122
|
});
|
|
123
|
-
a = (0,
|
|
124
|
-
enterprise:
|
|
125
|
-
prisma:
|
|
123
|
+
a = (0, n.pick)({
|
|
124
|
+
enterprise: n.variables.brandColorD30,
|
|
125
|
+
prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayActive)
|
|
126
126
|
});
|
|
127
|
-
t = (0,
|
|
128
|
-
enterprise:
|
|
129
|
-
prisma:
|
|
127
|
+
t = (0, n.pick)({
|
|
128
|
+
enterprise: n.variables.brandColorD50,
|
|
129
|
+
prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover)
|
|
130
130
|
});
|
|
131
|
-
|
|
131
|
+
l = (0, n.pick)({
|
|
132
132
|
enterprise: "#235823",
|
|
133
|
-
prisma:
|
|
133
|
+
prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlaySelected)
|
|
134
134
|
});
|
|
135
|
-
b =
|
|
135
|
+
b = n.variables.contentColorInverted;
|
|
136
136
|
break;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
case "destructive":
|
|
140
140
|
{
|
|
141
|
-
e =
|
|
142
|
-
a = (0,
|
|
143
|
-
enterprise:
|
|
144
|
-
prisma:
|
|
141
|
+
e = n.variables.accentColorNegative;
|
|
142
|
+
a = (0, n.pick)({
|
|
143
|
+
enterprise: n.variables.errorColorD40,
|
|
144
|
+
prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayActive)
|
|
145
145
|
});
|
|
146
|
-
t = (0,
|
|
147
|
-
enterprise:
|
|
148
|
-
prisma:
|
|
146
|
+
t = (0, n.pick)({
|
|
147
|
+
enterprise: n.variables.errorColorD30,
|
|
148
|
+
prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover)
|
|
149
149
|
});
|
|
150
|
-
|
|
151
|
-
enterprise:
|
|
152
|
-
prisma:
|
|
150
|
+
l = (0, n.pick)({
|
|
151
|
+
enterprise: n.variables.errorColorD30,
|
|
152
|
+
prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlaySelected)
|
|
153
153
|
});
|
|
154
|
-
b =
|
|
154
|
+
b = n.variables.contentColorInverted;
|
|
155
155
|
break;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
case "secondary":
|
|
159
|
-
s =
|
|
160
|
-
c =
|
|
161
|
-
e = (0,
|
|
159
|
+
s = n.variables.interactiveColorBorder;
|
|
160
|
+
c = n.variables.interactiveColorBorderDisabled;
|
|
161
|
+
e = (0, n.pick)({
|
|
162
162
|
enterprise: {
|
|
163
|
-
light:
|
|
164
|
-
dark:
|
|
163
|
+
light: n.variables.gray98,
|
|
164
|
+
dark: n.variables.gray45
|
|
165
165
|
},
|
|
166
|
-
prisma:
|
|
166
|
+
prisma: n.variables.interactiveColorBackground
|
|
167
167
|
});
|
|
168
|
-
a = (0,
|
|
168
|
+
a = (0, n.pick)({
|
|
169
169
|
enterprise: {
|
|
170
|
-
light:
|
|
171
|
-
dark:
|
|
170
|
+
light: n.variables.gray92,
|
|
171
|
+
dark: n.variables.gray22
|
|
172
172
|
},
|
|
173
|
-
prisma:
|
|
173
|
+
prisma: n.variables.interactiveColorOverlayActive
|
|
174
174
|
});
|
|
175
|
-
t = (0,
|
|
175
|
+
t = (0, n.pick)({
|
|
176
176
|
enterprise: {
|
|
177
177
|
light: "#ebeeef",
|
|
178
|
-
dark:
|
|
178
|
+
dark: n.variables.gray30
|
|
179
179
|
},
|
|
180
|
-
prisma:
|
|
180
|
+
prisma: n.variables.interactiveColorOverlayHover
|
|
181
181
|
});
|
|
182
|
-
|
|
182
|
+
l = (0, n.pick)({
|
|
183
183
|
enterprise: {
|
|
184
|
-
light:
|
|
185
|
-
dark:
|
|
184
|
+
light: n.variables.gray92,
|
|
185
|
+
dark: n.variables.gray22
|
|
186
186
|
},
|
|
187
|
-
prisma:
|
|
187
|
+
prisma: n.variables.interactiveColorOverlaySelected
|
|
188
188
|
});
|
|
189
189
|
break;
|
|
190
190
|
|
|
191
191
|
case "subtle":
|
|
192
192
|
// TODO: SUI-6304 this should be interactiveColorAccent once that variable is introduced in SUI 5
|
|
193
|
-
b =
|
|
194
|
-
a = (0,
|
|
193
|
+
b = n.variables.interactiveColorPrimary;
|
|
194
|
+
a = (0, n.pick)({
|
|
195
195
|
enterprise: {
|
|
196
|
-
light:
|
|
197
|
-
dark:
|
|
196
|
+
light: n.variables.gray92,
|
|
197
|
+
dark: n.variables.gray22
|
|
198
198
|
},
|
|
199
|
-
prisma:
|
|
199
|
+
prisma: n.variables.interactiveColorOverlayActive
|
|
200
200
|
});
|
|
201
|
-
t = (0,
|
|
201
|
+
t = (0, n.pick)({
|
|
202
202
|
enterprise: {
|
|
203
|
-
light:
|
|
204
|
-
dark:
|
|
203
|
+
light: n.variables.linkColor,
|
|
204
|
+
dark: n.variables.white
|
|
205
205
|
},
|
|
206
|
-
prisma:
|
|
206
|
+
prisma: n.variables.interactiveColorOverlayHover
|
|
207
207
|
});
|
|
208
|
-
|
|
208
|
+
l = (0, n.pick)({
|
|
209
209
|
enterprise: "transparent",
|
|
210
|
-
prisma:
|
|
210
|
+
prisma: n.variables.interactiveColorOverlaySelected
|
|
211
211
|
});
|
|
212
212
|
break;
|
|
213
213
|
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
backgroundDisabled: o,
|
|
220
220
|
backgroundDisabledSelected: i,
|
|
221
221
|
backgroundHover: t,
|
|
222
|
-
backgroundSelected:
|
|
222
|
+
backgroundSelected: l,
|
|
223
223
|
borderColor: s,
|
|
224
224
|
borderColorDisabled: c,
|
|
225
225
|
color: b,
|
|
@@ -237,216 +237,216 @@
|
|
|
237
237
|
}
|
|
238
238
|
var i = f(a);
|
|
239
239
|
var t = v()(i, o), s = t.background, c = t.backgroundActive, b = t.backgroundDisabled, d = t.backgroundDisabledSelected, g = t.backgroundHover, y = t.backgroundSelected, k = t.borderColor, h = t.borderColorDisabled, m = t.color, C = t.colorDisabled;
|
|
240
|
-
var
|
|
240
|
+
var x = s != null && s !== "transparent";
|
|
241
241
|
return function() {
|
|
242
|
-
return (0,
|
|
243
|
-
return k && (0,
|
|
242
|
+
return (0, l.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], n.variables.borderRadius, (function() {
|
|
243
|
+
return k && (0, l.css)([ "border:1px solid ", ";" ], k);
|
|
244
244
|
}), (function(r) {
|
|
245
245
|
var e = r.$append;
|
|
246
|
-
return e && (0,
|
|
246
|
+
return e && (0, l.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
|
|
247
247
|
}), (function(r) {
|
|
248
248
|
var e = r.$prepend;
|
|
249
|
-
return e && (0,
|
|
249
|
+
return e && (0, l.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
|
|
250
250
|
}), s, m, g, c, (function(r) {
|
|
251
251
|
var e = r.$selected;
|
|
252
|
-
return e && (0,
|
|
253
|
-
}),
|
|
252
|
+
return e && (0, l.css)([ "background-color:", ";" ], y);
|
|
253
|
+
}), n.variables.focusShadow, h, C, (function(r) {
|
|
254
254
|
var e = r.$selected;
|
|
255
|
-
return
|
|
255
|
+
return x && (0, l.css)([ "background-color:", ";" ], e ? d : b);
|
|
256
256
|
}));
|
|
257
257
|
};
|
|
258
258
|
}
|
|
259
259
|
/* harmony default export */ const y = g;
|
|
260
260
|
// CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
|
|
261
|
-
var k = (0,
|
|
262
|
-
|
|
263
|
-
secondary: (0,
|
|
264
|
-
default: (0,
|
|
265
|
-
subtle: (0,
|
|
261
|
+
var k = (0, l.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], n.variables.interactiveColorOverlayHover, n.variables.interactiveColorBorderHover, (0,
|
|
262
|
+
n.pickVariant)("$variant", {
|
|
263
|
+
secondary: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow),
|
|
264
|
+
default: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow),
|
|
265
|
+
subtle: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow)
|
|
266
266
|
}), (function(r) {
|
|
267
267
|
var e = r.$selected;
|
|
268
|
-
return e && (0,
|
|
268
|
+
return e && (0, l.css)([ "border-color:", ";&:hover{background-color:", ";}" ], n.variables.interactiveColorBorderDisabled, n.mixins.overlayColors(n.variables.interactiveColorOverlaySelected, n.variables.interactiveColorOverlayHover));
|
|
269
269
|
}), (function(r) {
|
|
270
270
|
var e = r.$error;
|
|
271
|
-
return e && (0,
|
|
272
|
-
}), (0,
|
|
273
|
-
secondary: (0,
|
|
274
|
-
color:
|
|
275
|
-
}),
|
|
276
|
-
subtle: (0,
|
|
277
|
-
color:
|
|
278
|
-
}),
|
|
279
|
-
default: (0,
|
|
271
|
+
return e && (0, l.css)([ "border-color:", ";&:hover{border-color:", ";}" ], n.variables.accentColorNegative, n.variables.accentColorNegative);
|
|
272
|
+
}), (0, n.pickVariant)("$variant", {
|
|
273
|
+
secondary: (0, l.css)([ "", " font-weight:", ";" ], y("subtle", {
|
|
274
|
+
color: n.variables.contentColorActive
|
|
275
|
+
}), n.variables.fontWeightSemiBold),
|
|
276
|
+
subtle: (0, l.css)([ "", " font-weight:", ";" ], y("subtle", {
|
|
277
|
+
color: n.variables.contentColorActive
|
|
278
|
+
}), n.variables.fontWeightSemiBold),
|
|
279
|
+
default: (0, l.css)([ "", " font-weight:", ";" ], y("secondary", {
|
|
280
280
|
background: "transparent"
|
|
281
|
-
}),
|
|
282
|
-
toggle: (0,
|
|
281
|
+
}), n.variables.fontWeightSemiBold),
|
|
282
|
+
toggle: (0, l.css)([ "", " font-weight:normal;" ], y("secondary", {
|
|
283
283
|
background: "transparent"
|
|
284
284
|
}))
|
|
285
285
|
}), (function(r) {
|
|
286
286
|
var e = r.$selected;
|
|
287
|
-
return e && (0,
|
|
287
|
+
return e && (0, l.css)([ "background-color:", ";" ], n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected));
|
|
288
288
|
}));
|
|
289
|
-
var h = (0,
|
|
290
|
-
|
|
291
|
-
primary:
|
|
292
|
-
destructive:
|
|
293
|
-
flat:
|
|
294
|
-
}),
|
|
289
|
+
var h = (0, l.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0,
|
|
290
|
+
n.pickVariant)("$variant", {
|
|
291
|
+
primary: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover),
|
|
292
|
+
destructive: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover),
|
|
293
|
+
flat: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover)
|
|
294
|
+
}), n.variables.hoverShadow, (0, n.pickVariant)("$variant", {
|
|
295
295
|
primary: y("primary", {
|
|
296
296
|
// this is intentional - the disabled background had always been applying the $selected style
|
|
297
297
|
// since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
|
|
298
|
-
backgroundDisabled:
|
|
298
|
+
backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
|
|
299
299
|
}),
|
|
300
300
|
destructive: y("destructive", {
|
|
301
301
|
// this is intentional - the disabled background had always been applying the $selected style
|
|
302
302
|
// since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
|
|
303
|
-
backgroundDisabled:
|
|
303
|
+
backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
|
|
304
304
|
}),
|
|
305
305
|
flat: y({
|
|
306
306
|
// this is intentional - the background had always been applying the $selected style
|
|
307
307
|
// since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
|
|
308
|
-
background:
|
|
309
|
-
backgroundActive:
|
|
308
|
+
background: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected),
|
|
309
|
+
backgroundActive: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayActive),
|
|
310
310
|
// this is intentional - the disabled background had always been applying the $selected style
|
|
311
311
|
// since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
|
|
312
|
-
backgroundDisabled:
|
|
313
|
-
backgroundHover:
|
|
314
|
-
backgroundSelected:
|
|
312
|
+
backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected),
|
|
313
|
+
backgroundHover: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover),
|
|
314
|
+
backgroundSelected: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected)
|
|
315
315
|
})
|
|
316
|
-
}),
|
|
316
|
+
}), n.variables.fontWeightSemiBold);
|
|
317
317
|
// CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
|
|
318
318
|
var m = "#1A8929";
|
|
319
319
|
// SUI-2439 to meet WCAG AA compliance
|
|
320
320
|
var C = "#235823";
|
|
321
321
|
// SUI-2439 to meet WCAG AA compliance
|
|
322
|
-
var
|
|
323
|
-
var
|
|
322
|
+
var x = (0, l.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], n.variables.borderRadius);
|
|
323
|
+
var w = (0, l.css)([ "", " ", "" ], (function(r) {
|
|
324
324
|
var e = r.$append;
|
|
325
|
-
return e && (0,
|
|
325
|
+
return e && (0, l.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
|
|
326
326
|
}), (function(r) {
|
|
327
327
|
var e = r.$prepend;
|
|
328
|
-
return e && (0,
|
|
328
|
+
return e && (0, l.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
|
|
329
329
|
}));
|
|
330
330
|
var S = "inset 0 -1px 0 rgba(0, 0, 0, 0.1)";
|
|
331
331
|
var O = "inset 0 1px 0 rgba(0, 0, 0, 0.1)";
|
|
332
|
-
var D = (0,
|
|
333
|
-
|
|
334
|
-
light:
|
|
335
|
-
dark:
|
|
336
|
-
}),
|
|
332
|
+
var D = (0, l.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";border-color:", ";", "}" ], x, (0,
|
|
333
|
+
n.pick)({
|
|
334
|
+
light: n.variables.gray60,
|
|
335
|
+
dark: n.variables.borderColor
|
|
336
|
+
}), w, (0, n.pickVariant)("$variant", {
|
|
337
337
|
default: "normal",
|
|
338
|
-
secondary:
|
|
339
|
-
}), (0,
|
|
340
|
-
light:
|
|
341
|
-
dark:
|
|
342
|
-
}), (0,
|
|
343
|
-
light:
|
|
344
|
-
dark:
|
|
345
|
-
}), (0,
|
|
346
|
-
light: (0,
|
|
347
|
-
dark: (0,
|
|
338
|
+
secondary: n.variables.fontWeightSemiBold
|
|
339
|
+
}), (0, n.pick)({
|
|
340
|
+
light: n.variables.gray98,
|
|
341
|
+
dark: n.variables.gray45
|
|
342
|
+
}), (0, n.pick)({
|
|
343
|
+
light: n.variables.gray45,
|
|
344
|
+
dark: n.variables.white
|
|
345
|
+
}), (0, n.pick)({
|
|
346
|
+
light: (0, l.css)([ "box-shadow:", ";" ], S),
|
|
347
|
+
dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray30)
|
|
348
348
|
}), (function(r) {
|
|
349
349
|
var e = r.$selected;
|
|
350
|
-
return e && (0,
|
|
351
|
-
|
|
352
|
-
light: (0,
|
|
353
|
-
dark: (0,
|
|
354
|
-
}), (0,
|
|
355
|
-
light:
|
|
356
|
-
dark:
|
|
357
|
-
}), (0,
|
|
358
|
-
light:
|
|
359
|
-
dark:
|
|
350
|
+
return e && (0, l.css)([ "", ";background-color:", ";border-color:", ";" ], (0,
|
|
351
|
+
n.pick)({
|
|
352
|
+
light: (0, l.css)([ "box-shadow:", ";" ], O),
|
|
353
|
+
dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ";" ], n.variables.black)
|
|
354
|
+
}), (0, n.pick)({
|
|
355
|
+
light: n.variables.gray92,
|
|
356
|
+
dark: n.variables.gray22
|
|
357
|
+
}), (0, n.pick)({
|
|
358
|
+
light: n.variables.gray60,
|
|
359
|
+
dark: n.variables.gray20
|
|
360
360
|
}));
|
|
361
|
-
}), (0,
|
|
361
|
+
}), (0, n.pick)({
|
|
362
362
|
light: "#ebeeef",
|
|
363
|
-
dark:
|
|
364
|
-
}), (0,
|
|
365
|
-
light: (0,
|
|
366
|
-
dark: (0,
|
|
367
|
-
}), (0,
|
|
368
|
-
light:
|
|
369
|
-
dark:
|
|
370
|
-
}), (0,
|
|
371
|
-
light:
|
|
372
|
-
dark:
|
|
373
|
-
}), (0,
|
|
374
|
-
dark: (0,
|
|
363
|
+
dark: n.variables.gray30
|
|
364
|
+
}), (0, n.pick)({
|
|
365
|
+
light: (0, l.css)([ "box-shadow:", ";" ], S),
|
|
366
|
+
dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray25)
|
|
367
|
+
}), (0, n.pick)({
|
|
368
|
+
light: n.variables.gray92,
|
|
369
|
+
dark: n.variables.gray22
|
|
370
|
+
}), (0, n.pick)({
|
|
371
|
+
light: n.variables.gray60,
|
|
372
|
+
dark: n.variables.gray20
|
|
373
|
+
}), (0, n.pick)({
|
|
374
|
+
dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray22)
|
|
375
375
|
}), (function(r) {
|
|
376
376
|
var e = r.$append;
|
|
377
|
-
return e && (0,
|
|
378
|
-
light: (0,
|
|
379
|
-
dark: (0,
|
|
377
|
+
return e && (0, n.pick)({
|
|
378
|
+
light: (0, l.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], S, n.variables.focusShadow, n.variables.borderColor),
|
|
379
|
+
dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], n.variables.gray30, n.variables.focusShadow, n.variables.borderColor)
|
|
380
380
|
});
|
|
381
381
|
}), (function(r) {
|
|
382
382
|
var e = r.$append, a = r.$selected;
|
|
383
|
-
return e && a && (0,
|
|
384
|
-
light: (0,
|
|
385
|
-
dark: (0,
|
|
383
|
+
return e && a && (0, n.pick)({
|
|
384
|
+
light: (0, l.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, n.variables.focusShadow, n.variables.borderColor),
|
|
385
|
+
dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], n.variables.black, n.variables.focusShadow, n.variables.borderColor)
|
|
386
386
|
});
|
|
387
|
-
}), (0,
|
|
388
|
-
light: (0,
|
|
389
|
-
dark: (0,
|
|
390
|
-
}),
|
|
391
|
-
light:
|
|
392
|
-
dark:
|
|
393
|
-
}), (0,
|
|
394
|
-
light:
|
|
395
|
-
dark:
|
|
387
|
+
}), (0, n.pick)({
|
|
388
|
+
light: (0, l.css)([ "box-shadow:", ",", ";" ], S, n.variables.focusShadow),
|
|
389
|
+
dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], n.variables.gray30, n.variables.focusShadow)
|
|
390
|
+
}), n.variables.textDisabledColor, (0, n.pick)({
|
|
391
|
+
light: n.variables.gray96,
|
|
392
|
+
dark: n.variables.gray30
|
|
393
|
+
}), (0, n.pick)({
|
|
394
|
+
light: n.variables.borderLightColor,
|
|
395
|
+
dark: n.variables.gray30
|
|
396
396
|
}), (function(r) {
|
|
397
397
|
var e = r.$selected;
|
|
398
|
-
return e && (0,
|
|
399
|
-
light: (0,
|
|
400
|
-
dark: (0,
|
|
398
|
+
return e && (0, n.pick)({
|
|
399
|
+
light: (0, l.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], O, n.variables.gray92, n.variables.gray80),
|
|
400
|
+
dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], n.variables.black, n.variables.gray22, n.variables.gray20)
|
|
401
401
|
});
|
|
402
402
|
}));
|
|
403
403
|
var $ = "inset 0 -2px 0 rgba(0, 0, 0, 0.1)";
|
|
404
404
|
var j = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
|
|
405
|
-
var B = (0,
|
|
405
|
+
var B = (0, l.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";", "}" ], x, n.variables.fontWeightSemiBold, w, m, n.variables.white, $, (function(r) {
|
|
406
406
|
var e = r.$selected;
|
|
407
|
-
return e && (0,
|
|
407
|
+
return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, C);
|
|
408
408
|
}), (function(r) {
|
|
409
409
|
var e = r.$prepend;
|
|
410
|
-
return e && (0,
|
|
411
|
-
}),
|
|
410
|
+
return e && (0, l.css)([ "border-left:1px solid ", ";" ], m);
|
|
411
|
+
}), n.variables.brandColorD50, n.variables.brandColorD30, n.variables.brandColorD30, $, n.variables.focusShadow, n.variables.brandColorL30, n.variables.brandColorL10, (function(r) {
|
|
412
412
|
var e = r.$selected;
|
|
413
|
-
return e && (0,
|
|
413
|
+
return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.brandColorD20);
|
|
414
414
|
}));
|
|
415
|
-
var P = (0,
|
|
415
|
+
var P = (0, l.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";", "}" ], x, n.variables.fontWeightSemiBold, w, n.variables.errorColorD10, n.variables.white, $, (function(r) {
|
|
416
416
|
var e = r.$selected;
|
|
417
|
-
return e && (0,
|
|
417
|
+
return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.errorColorD30);
|
|
418
418
|
}), (function(r) {
|
|
419
419
|
var e = r.$prepend;
|
|
420
|
-
return e && (0,
|
|
421
|
-
}),
|
|
420
|
+
return e && (0, l.css)([ "border-left:1px solid ", ";" ], n.variables.errorColorD30);
|
|
421
|
+
}), n.variables.errorColorD30, n.variables.errorColorD40, n.variables.errorColorD40, $, n.variables.focusShadow, n.variables.errorColorL10, n.variables.errorColorD10, (function(r) {
|
|
422
422
|
var e = r.$selected;
|
|
423
|
-
return e && (0,
|
|
423
|
+
return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.errorColorD40);
|
|
424
424
|
}));
|
|
425
|
-
var A = (0,
|
|
426
|
-
|
|
427
|
-
light:
|
|
428
|
-
dark:
|
|
425
|
+
var A = (0, l.css)([ "", ";color:", ";border:1px solid transparent;&:not([disabled],[aria-disabled='true']){transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{color:", ";background-color:", ";border-color:", ";}", " &:focus{color:", ";}&:active,&[aria-expanded='true']{background-color:", ";transition:none;}}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{color:", ";", "}" ], x, (0,
|
|
426
|
+
n.pick)({
|
|
427
|
+
light: n.variables.gray45,
|
|
428
|
+
dark: n.variables.white
|
|
429
429
|
}), (function(r) {
|
|
430
430
|
var e = r.$selected;
|
|
431
|
-
return e && (0,
|
|
432
|
-
}), (0,
|
|
433
|
-
light:
|
|
434
|
-
dark:
|
|
435
|
-
}),
|
|
436
|
-
light:
|
|
437
|
-
dark:
|
|
431
|
+
return e && (0, l.css)([ "border-color:", ";" ], n.variables.accentColor);
|
|
432
|
+
}), (0, n.pick)({
|
|
433
|
+
light: n.variables.linkColor,
|
|
434
|
+
dark: n.variables.white
|
|
435
|
+
}), n.variables.backgroundColorHover, (0, n.pick)({
|
|
436
|
+
light: n.variables.gray60,
|
|
437
|
+
dark: n.variables.borderColor
|
|
438
438
|
}), (function(r) {
|
|
439
439
|
var e = r.$error;
|
|
440
|
-
return e && (0,
|
|
441
|
-
}), (0,
|
|
442
|
-
light:
|
|
443
|
-
dark:
|
|
444
|
-
}), (0,
|
|
445
|
-
light:
|
|
446
|
-
dark:
|
|
447
|
-
}),
|
|
440
|
+
return e && (0, l.css)([ "&,&:hover{color:", ";}" ], n.variables.errorColor);
|
|
441
|
+
}), (0, n.pick)({
|
|
442
|
+
light: n.variables.linkColor,
|
|
443
|
+
dark: n.variables.white
|
|
444
|
+
}), (0, n.pick)({
|
|
445
|
+
light: n.variables.gray92,
|
|
446
|
+
dark: n.variables.gray22
|
|
447
|
+
}), n.variables.focusShadow, n.variables.textDisabledColor, (function(r) {
|
|
448
448
|
var e = r.$selected;
|
|
449
|
-
return e && (0,
|
|
449
|
+
return e && (0, l.css)([ "border-color:", ";" ], n.variables.borderLightColor);
|
|
450
450
|
}));
|
|
451
451
|
// CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
|
|
452
452
|
var H = s()(b()).withConfig({
|
|
@@ -454,10 +454,10 @@
|
|
|
454
454
|
componentId: "vlarwe-0"
|
|
455
455
|
})([ "", " ", "" ], (function(r) {
|
|
456
456
|
var e = r.to;
|
|
457
|
-
return e ? (0,
|
|
458
|
-
|
|
459
|
-
}), (0,
|
|
460
|
-
enterprise: (0,
|
|
457
|
+
return e ? (0, l.css)([ "", " align-items:center;justify-content:center;" ], n.mixins.reset("flex")) : (0,
|
|
458
|
+
l.css)([ "", "" ], n.mixins.reset("block"));
|
|
459
|
+
}), (0, n.pick)({
|
|
460
|
+
enterprise: (0, n.pickVariant)("$variant", {
|
|
461
461
|
// the four main styles
|
|
462
462
|
primary: B,
|
|
463
463
|
secondary: D,
|
|
@@ -471,7 +471,7 @@
|
|
|
471
471
|
toggle: D,
|
|
472
472
|
flat: D
|
|
473
473
|
}),
|
|
474
|
-
prisma: (0,
|
|
474
|
+
prisma: (0, n.pickVariant)("$variant", {
|
|
475
475
|
// the four main styles
|
|
476
476
|
primary: h,
|
|
477
477
|
secondary: k,
|
|
@@ -646,7 +646,7 @@
|
|
|
646
646
|
var ir = [].concat(ar, [ "toggle", "flat" ]);
|
|
647
647
|
// Array.from(new Set... is used to de-duplicate the appearances
|
|
648
648
|
var tr = Array.from(new Set([].concat(Q(or), Q(ir))));
|
|
649
|
-
var
|
|
649
|
+
var nr = {
|
|
650
650
|
action: t().string,
|
|
651
651
|
appearance: t().oneOf([ "default", "secondary", "primary", "destructive", "subtle", "pill", "toggle", "flat" ]),
|
|
652
652
|
append: t().bool,
|
|
@@ -661,7 +661,7 @@
|
|
|
661
661
|
splunkTheme: t().object,
|
|
662
662
|
to: t().string
|
|
663
663
|
};
|
|
664
|
-
var
|
|
664
|
+
var lr = {
|
|
665
665
|
appearance: "default",
|
|
666
666
|
append: false,
|
|
667
667
|
disabled: false,
|
|
@@ -716,26 +716,26 @@
|
|
|
716
716
|
}, {
|
|
717
717
|
key: "render",
|
|
718
718
|
value: function r() {
|
|
719
|
-
var e = this.props, a = e.append, i = e.children, t = e.error,
|
|
719
|
+
var e = this.props, a = e.append, i = e.children, t = e.error, n = e.prepend, l = e.selected, s = N(e, [ "append", "children", "error", "prepend", "selected" ]);
|
|
720
720
|
|
|
721
721
|
return o().createElement(H, _({
|
|
722
722
|
"aria-invalid": t,
|
|
723
|
-
"aria-pressed":
|
|
723
|
+
"aria-pressed": l,
|
|
724
724
|
"data-test": "button-simple",
|
|
725
725
|
ref: this.handleMount,
|
|
726
726
|
$variant: this.getVariant(),
|
|
727
727
|
$append: a,
|
|
728
|
-
$prepend:
|
|
729
|
-
$selected:
|
|
728
|
+
$prepend: n,
|
|
729
|
+
$selected: l || false,
|
|
730
730
|
$error: t
|
|
731
731
|
}, s), i);
|
|
732
732
|
}
|
|
733
733
|
} ]);
|
|
734
734
|
return a;
|
|
735
735
|
}(a.Component);
|
|
736
|
-
G(sr, "defaultProps",
|
|
737
|
-
G(sr, "propTypes",
|
|
738
|
-
var cr = (0,
|
|
736
|
+
G(sr, "defaultProps", lr);
|
|
737
|
+
G(sr, "propTypes", nr);
|
|
738
|
+
var cr = (0, n.withSplunkTheme)(sr);
|
|
739
739
|
cr.propTypes = sr.propTypes;
|
|
740
740
|
/* harmony default export */ const br = cr;
|
|
741
741
|
// only for styled-components that wrap ButtonSimple
|