@workday/canvas-kit-labs-react 14.0.0-alpha.1238-next.0 → 14.0.0-alpha.1246-next.0
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/dist/commonjs/ai-ingress-button/lib/AIIngressButton.d.ts +2838 -2838
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/commonjs/search-form/lib/SearchForm.d.ts +100 -100
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/commonjs/version.js +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.d.ts +2838 -2838
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/es6/search-form/lib/SearchForm.d.ts +100 -100
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/version.js +1 -1
- package/package.json +4 -4
|
@@ -23,20 +23,20 @@ const glowHappyHour = base.orange400; //'#FD7E00';
|
|
|
23
23
|
const glowThumbtack = base.coral500; //'#FC5B05';
|
|
24
24
|
export const AIIngressButtonStencil = createStencil({
|
|
25
25
|
extends: buttonStencil,
|
|
26
|
-
base: { name: "
|
|
26
|
+
base: { name: "44mt0l", styles: "box-sizing:border-box;--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
|
|
27
27
|
modifiers: {
|
|
28
28
|
variant: {
|
|
29
|
-
inverse: { name: "
|
|
29
|
+
inverse: { name: "10orx0", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
|
|
30
30
|
},
|
|
31
31
|
toggled: {
|
|
32
|
-
true: { name: "
|
|
33
|
-
false: { name: "
|
|
32
|
+
true: { name: "44hec5", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
|
|
33
|
+
false: { name: "an99d", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
compound: [
|
|
37
37
|
{
|
|
38
38
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "2y8vhi", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "a-i-ingress-button-523614");
|
|
@@ -102,18 +102,18 @@ export interface SearchFormState {
|
|
|
102
102
|
export declare const searchFormStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
103
103
|
isHiddenSubmitSearchIcon: {
|
|
104
104
|
true: ({ submitSearchIconPart }: {
|
|
105
|
-
minWidth: string
|
|
106
|
-
maxWidth: string
|
|
107
|
-
height: string
|
|
108
|
-
background: string
|
|
109
|
-
backgroundFocus: string
|
|
110
|
-
backgroundHover: string
|
|
111
|
-
color: string
|
|
112
|
-
colorFocus: string
|
|
113
|
-
placeholderColor: string
|
|
114
|
-
placeholderColorFocus: string
|
|
115
|
-
boxShadow: string
|
|
116
|
-
boxShadowFocus: string
|
|
105
|
+
minWidth: `--${string}`;
|
|
106
|
+
maxWidth: `--${string}`;
|
|
107
|
+
height: `--${string}`;
|
|
108
|
+
background: `--${string}`;
|
|
109
|
+
backgroundFocus: `--${string}`;
|
|
110
|
+
backgroundHover: `--${string}`;
|
|
111
|
+
color: `--${string}`;
|
|
112
|
+
colorFocus: `--${string}`;
|
|
113
|
+
placeholderColor: `--${string}`;
|
|
114
|
+
placeholderColorFocus: `--${string}`;
|
|
115
|
+
boxShadow: `--${string}`;
|
|
116
|
+
boxShadowFocus: `--${string}`;
|
|
117
117
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
118
118
|
readonly searchContainer: "search-form-container";
|
|
119
119
|
readonly combobox: "search-form-combobox";
|
|
@@ -125,24 +125,24 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
125
125
|
readonly closeButtonPart: "search-form-close-button";
|
|
126
126
|
}>) => {
|
|
127
127
|
"[data-part=\"search-form-submit-search-icon\"]": {
|
|
128
|
-
display:
|
|
128
|
+
display: string;
|
|
129
129
|
};
|
|
130
130
|
};
|
|
131
131
|
};
|
|
132
132
|
isHiddenOpenSeachIcon: {
|
|
133
133
|
true: ({ openSearchIconPart }: {
|
|
134
|
-
minWidth: string
|
|
135
|
-
maxWidth: string
|
|
136
|
-
height: string
|
|
137
|
-
background: string
|
|
138
|
-
backgroundFocus: string
|
|
139
|
-
backgroundHover: string
|
|
140
|
-
color: string
|
|
141
|
-
colorFocus: string
|
|
142
|
-
placeholderColor: string
|
|
143
|
-
placeholderColorFocus: string
|
|
144
|
-
boxShadow: string
|
|
145
|
-
boxShadowFocus: string
|
|
134
|
+
minWidth: `--${string}`;
|
|
135
|
+
maxWidth: `--${string}`;
|
|
136
|
+
height: `--${string}`;
|
|
137
|
+
background: `--${string}`;
|
|
138
|
+
backgroundFocus: `--${string}`;
|
|
139
|
+
backgroundHover: `--${string}`;
|
|
140
|
+
color: `--${string}`;
|
|
141
|
+
colorFocus: `--${string}`;
|
|
142
|
+
placeholderColor: `--${string}`;
|
|
143
|
+
placeholderColorFocus: `--${string}`;
|
|
144
|
+
boxShadow: `--${string}`;
|
|
145
|
+
boxShadowFocus: `--${string}`;
|
|
146
146
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
147
147
|
readonly searchContainer: "search-form-container";
|
|
148
148
|
readonly combobox: "search-form-combobox";
|
|
@@ -154,24 +154,24 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
154
154
|
readonly closeButtonPart: "search-form-close-button";
|
|
155
155
|
}>) => {
|
|
156
156
|
"[data-part=\"search-form-open-search-icon\"]": {
|
|
157
|
-
display:
|
|
157
|
+
display: string;
|
|
158
158
|
};
|
|
159
159
|
};
|
|
160
160
|
};
|
|
161
161
|
isCollapsed: {
|
|
162
162
|
true: ({ searchFieldPart, submitSearchIconPart, openSearchIconPart, searchInputPart, height, }: {
|
|
163
|
-
minWidth: string
|
|
164
|
-
maxWidth: string
|
|
165
|
-
height: string
|
|
166
|
-
background: string
|
|
167
|
-
backgroundFocus: string
|
|
168
|
-
backgroundHover: string
|
|
169
|
-
color: string
|
|
170
|
-
colorFocus: string
|
|
171
|
-
placeholderColor: string
|
|
172
|
-
placeholderColorFocus: string
|
|
173
|
-
boxShadow: string
|
|
174
|
-
boxShadowFocus: string
|
|
163
|
+
minWidth: `--${string}`;
|
|
164
|
+
maxWidth: `--${string}`;
|
|
165
|
+
height: `--${string}`;
|
|
166
|
+
background: `--${string}`;
|
|
167
|
+
backgroundFocus: `--${string}`;
|
|
168
|
+
backgroundHover: `--${string}`;
|
|
169
|
+
color: `--${string}`;
|
|
170
|
+
colorFocus: `--${string}`;
|
|
171
|
+
placeholderColor: `--${string}`;
|
|
172
|
+
placeholderColorFocus: `--${string}`;
|
|
173
|
+
boxShadow: `--${string}`;
|
|
174
|
+
boxShadowFocus: `--${string}`;
|
|
175
175
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
176
176
|
readonly searchContainer: "search-form-container";
|
|
177
177
|
readonly combobox: "search-form-combobox";
|
|
@@ -183,7 +183,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
183
183
|
readonly closeButtonPart: "search-form-close-button";
|
|
184
184
|
}>) => {
|
|
185
185
|
[x: string]: string | number | {
|
|
186
|
-
display:
|
|
186
|
+
display: string;
|
|
187
187
|
maxWidth: string;
|
|
188
188
|
margin?: undefined;
|
|
189
189
|
fontSize?: undefined;
|
|
@@ -209,7 +209,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
209
209
|
maxWidth: string;
|
|
210
210
|
minWidth: number;
|
|
211
211
|
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
212
|
-
height: string
|
|
212
|
+
height: `var(--${string}, var(--cnvs-sys-space-x10))`;
|
|
213
213
|
display?: undefined;
|
|
214
214
|
margin?: undefined;
|
|
215
215
|
};
|
|
@@ -218,15 +218,15 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
218
218
|
left: number;
|
|
219
219
|
bottom: number;
|
|
220
220
|
margin: number;
|
|
221
|
-
position:
|
|
221
|
+
position: string;
|
|
222
222
|
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
223
|
-
transition:
|
|
223
|
+
transition: string;
|
|
224
224
|
maxWidth: string;
|
|
225
225
|
minWidth: string;
|
|
226
|
-
overflow:
|
|
226
|
+
overflow: string;
|
|
227
227
|
zIndex: number;
|
|
228
228
|
"[data-part=\"search-form-field\"]": {
|
|
229
|
-
display:
|
|
229
|
+
display: string;
|
|
230
230
|
maxWidth: string;
|
|
231
231
|
};
|
|
232
232
|
"[data-part=\"search-form-input\"]": {
|
|
@@ -236,22 +236,22 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
236
236
|
maxWidth: string;
|
|
237
237
|
minWidth: number;
|
|
238
238
|
backgroundColor: "--cnvs-sys-color-bg-transparent-default";
|
|
239
|
-
height: string
|
|
239
|
+
height: `var(--${string}, var(--cnvs-sys-space-x10))`;
|
|
240
240
|
};
|
|
241
241
|
};
|
|
242
242
|
false: ({ searchFieldPart }: {
|
|
243
|
-
minWidth: string
|
|
244
|
-
maxWidth: string
|
|
245
|
-
height: string
|
|
246
|
-
background: string
|
|
247
|
-
backgroundFocus: string
|
|
248
|
-
backgroundHover: string
|
|
249
|
-
color: string
|
|
250
|
-
colorFocus: string
|
|
251
|
-
placeholderColor: string
|
|
252
|
-
placeholderColorFocus: string
|
|
253
|
-
boxShadow: string
|
|
254
|
-
boxShadowFocus: string
|
|
243
|
+
minWidth: `--${string}`;
|
|
244
|
+
maxWidth: `--${string}`;
|
|
245
|
+
height: `--${string}`;
|
|
246
|
+
background: `--${string}`;
|
|
247
|
+
backgroundFocus: `--${string}`;
|
|
248
|
+
backgroundHover: `--${string}`;
|
|
249
|
+
color: `--${string}`;
|
|
250
|
+
colorFocus: `--${string}`;
|
|
251
|
+
placeholderColor: `--${string}`;
|
|
252
|
+
placeholderColorFocus: `--${string}`;
|
|
253
|
+
boxShadow: `--${string}`;
|
|
254
|
+
boxShadowFocus: `--${string}`;
|
|
255
255
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
256
256
|
readonly searchContainer: "search-form-container";
|
|
257
257
|
readonly combobox: "search-form-combobox";
|
|
@@ -263,13 +263,13 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
263
263
|
readonly closeButtonPart: "search-form-close-button";
|
|
264
264
|
}>) => {
|
|
265
265
|
"[data-part=\"search-form-field\"]": {
|
|
266
|
-
display:
|
|
266
|
+
display: string;
|
|
267
267
|
};
|
|
268
268
|
};
|
|
269
269
|
};
|
|
270
270
|
rightAlign: {
|
|
271
271
|
true: {
|
|
272
|
-
textAlign:
|
|
272
|
+
textAlign: string;
|
|
273
273
|
};
|
|
274
274
|
};
|
|
275
275
|
showForm: {
|
|
@@ -286,18 +286,18 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
286
286
|
};
|
|
287
287
|
searchTheme: {
|
|
288
288
|
light: ({ searchInputPart }: {
|
|
289
|
-
minWidth: string
|
|
290
|
-
maxWidth: string
|
|
291
|
-
height: string
|
|
292
|
-
background: string
|
|
293
|
-
backgroundFocus: string
|
|
294
|
-
backgroundHover: string
|
|
295
|
-
color: string
|
|
296
|
-
colorFocus: string
|
|
297
|
-
placeholderColor: string
|
|
298
|
-
placeholderColorFocus: string
|
|
299
|
-
boxShadow: string
|
|
300
|
-
boxShadowFocus: string
|
|
289
|
+
minWidth: `--${string}`;
|
|
290
|
+
maxWidth: `--${string}`;
|
|
291
|
+
height: `--${string}`;
|
|
292
|
+
background: `--${string}`;
|
|
293
|
+
backgroundFocus: `--${string}`;
|
|
294
|
+
backgroundHover: `--${string}`;
|
|
295
|
+
color: `--${string}`;
|
|
296
|
+
colorFocus: `--${string}`;
|
|
297
|
+
placeholderColor: `--${string}`;
|
|
298
|
+
placeholderColorFocus: `--${string}`;
|
|
299
|
+
boxShadow: `--${string}`;
|
|
300
|
+
boxShadowFocus: `--${string}`;
|
|
301
301
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
302
302
|
readonly searchContainer: "search-form-container";
|
|
303
303
|
readonly combobox: "search-form-combobox";
|
|
@@ -319,23 +319,23 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
319
319
|
};
|
|
320
320
|
'&:is(:focus-visible, &.focus):where(:not([disabled]))': {
|
|
321
321
|
background: "--cnvs-sys-color-bg-alt-soft";
|
|
322
|
-
boxShadow:
|
|
322
|
+
boxShadow: string;
|
|
323
323
|
};
|
|
324
324
|
};
|
|
325
325
|
};
|
|
326
326
|
dark: ({ searchInputPart }: {
|
|
327
|
-
minWidth: string
|
|
328
|
-
maxWidth: string
|
|
329
|
-
height: string
|
|
330
|
-
background: string
|
|
331
|
-
backgroundFocus: string
|
|
332
|
-
backgroundHover: string
|
|
333
|
-
color: string
|
|
334
|
-
colorFocus: string
|
|
335
|
-
placeholderColor: string
|
|
336
|
-
placeholderColorFocus: string
|
|
337
|
-
boxShadow: string
|
|
338
|
-
boxShadowFocus: string
|
|
327
|
+
minWidth: `--${string}`;
|
|
328
|
+
maxWidth: `--${string}`;
|
|
329
|
+
height: `--${string}`;
|
|
330
|
+
background: `--${string}`;
|
|
331
|
+
backgroundFocus: `--${string}`;
|
|
332
|
+
backgroundHover: `--${string}`;
|
|
333
|
+
color: `--${string}`;
|
|
334
|
+
colorFocus: `--${string}`;
|
|
335
|
+
placeholderColor: `--${string}`;
|
|
336
|
+
placeholderColorFocus: `--${string}`;
|
|
337
|
+
boxShadow: `--${string}`;
|
|
338
|
+
boxShadowFocus: `--${string}`;
|
|
339
339
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
340
340
|
readonly searchContainer: "search-form-container";
|
|
341
341
|
readonly combobox: "search-form-combobox";
|
|
@@ -347,9 +347,9 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
347
347
|
readonly closeButtonPart: "search-form-close-button";
|
|
348
348
|
}>) => {
|
|
349
349
|
"[data-part=\"search-form-input\"]": {
|
|
350
|
-
backgroundColor:
|
|
350
|
+
backgroundColor: string;
|
|
351
351
|
color: "--cnvs-sys-color-text-inverse";
|
|
352
|
-
boxShadow:
|
|
352
|
+
boxShadow: string;
|
|
353
353
|
'::placeholder': {
|
|
354
354
|
color: "--cnvs-sys-color-text-inverse";
|
|
355
355
|
};
|
|
@@ -362,23 +362,23 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
362
362
|
'::placeholder': {
|
|
363
363
|
color: "--cnvs-sys-color-text-hint";
|
|
364
364
|
};
|
|
365
|
-
boxShadow:
|
|
365
|
+
boxShadow: string;
|
|
366
366
|
};
|
|
367
367
|
};
|
|
368
368
|
};
|
|
369
369
|
transparent: ({ searchInputPart }: {
|
|
370
|
-
minWidth: string
|
|
371
|
-
maxWidth: string
|
|
372
|
-
height: string
|
|
373
|
-
background: string
|
|
374
|
-
backgroundFocus: string
|
|
375
|
-
backgroundHover: string
|
|
376
|
-
color: string
|
|
377
|
-
colorFocus: string
|
|
378
|
-
placeholderColor: string
|
|
379
|
-
placeholderColorFocus: string
|
|
380
|
-
boxShadow: string
|
|
381
|
-
boxShadowFocus: string
|
|
370
|
+
minWidth: `--${string}`;
|
|
371
|
+
maxWidth: `--${string}`;
|
|
372
|
+
height: `--${string}`;
|
|
373
|
+
background: `--${string}`;
|
|
374
|
+
backgroundFocus: `--${string}`;
|
|
375
|
+
backgroundHover: `--${string}`;
|
|
376
|
+
color: `--${string}`;
|
|
377
|
+
colorFocus: `--${string}`;
|
|
378
|
+
placeholderColor: `--${string}`;
|
|
379
|
+
placeholderColorFocus: `--${string}`;
|
|
380
|
+
boxShadow: `--${string}`;
|
|
381
|
+
boxShadowFocus: `--${string}`;
|
|
382
382
|
} & import("@workday/canvas-kit-styling").StencilVarsParts<{
|
|
383
383
|
readonly searchContainer: "search-form-container";
|
|
384
384
|
readonly combobox: "search-form-combobox";
|
|
@@ -396,7 +396,7 @@ export declare const searchFormStencil: import("@workday/canvas-kit-styling").St
|
|
|
396
396
|
colorFocus: "--cnvs-sys-color-text-default";
|
|
397
397
|
placeholderColor: "--cnvs-sys-color-text-hint";
|
|
398
398
|
placeholderColorFocus: "--cnvs-sys-color-text-hint";
|
|
399
|
-
boxShadow:
|
|
399
|
+
boxShadow: string;
|
|
400
400
|
boxShadowFocus: string;
|
|
401
401
|
};
|
|
402
402
|
};
|
|
@@ -51,45 +51,45 @@ export const searchFormStencil = createStencil({
|
|
|
51
51
|
searchInput: 'search-form-input',
|
|
52
52
|
closeButtonPart: 'search-form-close-button',
|
|
53
53
|
},
|
|
54
|
-
base: { name: "
|
|
54
|
+
base: { name: "49uh54", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-bbb053, 7.5rem);max-width:var(--maxWidth-search-form-bbb053, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-bbb053, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-bbb053);min-width:var(--minWidth-search-form-bbb053);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-bbb053);color:var(--color-search-form-bbb053, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-bbb053, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-bbb053, var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-bbb053);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-bbb053, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-bbb053);}}}" },
|
|
55
55
|
modifiers: {
|
|
56
56
|
isHiddenSubmitSearchIcon: {
|
|
57
|
-
true: { name: "
|
|
57
|
+
true: { name: "vtjjf", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isHiddenOpenSeachIcon: {
|
|
60
|
-
true: { name: "
|
|
60
|
+
true: { name: "32w082", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
61
61
|
},
|
|
62
62
|
isCollapsed: {
|
|
63
|
-
true: { name: "
|
|
64
|
-
false: { name: "
|
|
63
|
+
true: { name: "3dz2yc", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}" },
|
|
64
|
+
false: { name: "2jlfrz", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
65
65
|
},
|
|
66
66
|
rightAlign: {
|
|
67
|
-
true: { name: "
|
|
67
|
+
true: { name: "3zkrh2", styles: "text-align:right;" }
|
|
68
68
|
},
|
|
69
69
|
showForm: {
|
|
70
|
-
true: { name: "
|
|
71
|
-
false: { name: "
|
|
70
|
+
true: { name: "2976sr", styles: "" },
|
|
71
|
+
false: { name: "2xeu6f", styles: "" }
|
|
72
72
|
},
|
|
73
73
|
grow: {
|
|
74
|
-
true: { name: "
|
|
74
|
+
true: { name: "46m79z", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
75
75
|
},
|
|
76
76
|
searchTheme: {
|
|
77
77
|
// Light theme
|
|
78
|
-
light: { name: "
|
|
78
|
+
light: { name: "402xdt", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
|
|
79
79
|
// Dark theme
|
|
80
|
-
dark: { name: "
|
|
80
|
+
dark: { name: "o6pcp", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
|
|
81
81
|
//Transparent theme
|
|
82
|
-
transparent: { name: "
|
|
82
|
+
transparent: { name: "9471e", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
compound: [
|
|
86
86
|
{
|
|
87
87
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
88
|
-
styles: { name: "
|
|
88
|
+
styles: { name: "3yvnpx", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
91
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
92
|
-
styles: { name: "
|
|
92
|
+
styles: { name: "2mq55s", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
93
93
|
}
|
|
94
94
|
]
|
|
95
95
|
}, "search-form-bbb053");
|
package/dist/es6/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '13.2.
|
|
1
|
+
export const version = '13.2.28';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1246-next.0",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1246-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1246-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
54
54
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
55
55
|
"@workday/design-assets-types": "^0.2.10",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"devDependencies": {
|
|
61
61
|
"@types/lodash.flatten": "^4.4.6"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "28e18db177e94db87e0b0e3465db38ca69d0a964"
|
|
64
64
|
}
|