@workday/canvas-kit-labs-react 14.0.0-alpha.1153-next.0 → 14.0.0-alpha.1162-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/ai-assistant-ingress-button/index.ts +2 -0
- package/ai-assistant-ingress-button/lib/AiAssistantIngressButton.tsx +179 -0
- package/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.tsx +20 -0
- package/ai-assistant-ingress-button/package.json +6 -0
- package/dist/commonjs/ai-assistant-ingress-button/index.d.ts +3 -0
- package/dist/commonjs/ai-assistant-ingress-button/index.d.ts.map +1 -0
- package/dist/commonjs/ai-assistant-ingress-button/index.js +18 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressButton.d.ts +1993 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressButton.d.ts.map +1 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressButton.js +57 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.d.ts +3 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.d.ts.map +1 -0
- package/dist/commonjs/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.js +23 -0
- package/dist/commonjs/index.d.ts +1 -0
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +1 -0
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/ai-assistant-ingress-button/index.d.ts +3 -0
- package/dist/es6/ai-assistant-ingress-button/index.d.ts.map +1 -0
- package/dist/es6/ai-assistant-ingress-button/index.js +2 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressButton.d.ts +1993 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressButton.d.ts.map +1 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressButton.js +54 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.d.ts +3 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.d.ts.map +1 -0
- package/dist/es6/ai-assistant-ingress-button/lib/AiAssistantIngressIcon.js +19 -0
- package/dist/es6/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/index.ts +1 -0
- package/package.json +6 -6
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AiAssistantIngressButton.d.ts","sourceRoot":"","sources":["../../../../ai-assistant-ingress-button/lib/AiAssistantIngressButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAgB,MAAM,kCAAkC,CAAC;AAK5F,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,GAAG,kBAAkB,CAAC;IAC/F;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAoBD,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyH1C,CAAC;AAEH,eAAO,MAAM,wBAAwB,sGAmBnC,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
|
|
4
|
+
import { createStencil, handleCsProp, calc } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
7
|
+
import { getAiAssistantIngressIcon } from './AiAssistantIngressIcon';
|
|
8
|
+
/**
|
|
9
|
+
* Icon gradient colors
|
|
10
|
+
*/
|
|
11
|
+
const illuminateStopColor1 = '#FFA198';
|
|
12
|
+
const illuminateStopColor2 = '#FFCAA0';
|
|
13
|
+
const illuminateStopColor3 = '#FFCA79';
|
|
14
|
+
const illuminateStopColor4 = '#FDCA44';
|
|
15
|
+
const illuminateStopColor5 = '#FFB74D';
|
|
16
|
+
/**
|
|
17
|
+
* Box shadow glow colors
|
|
18
|
+
*/
|
|
19
|
+
const glowEraser = '#FFC2FD';
|
|
20
|
+
const glowHighlighter = '#FFF3A8';
|
|
21
|
+
const glowLunchBreak = '#FEC10B';
|
|
22
|
+
const glowHappyHour = '#FD7E00';
|
|
23
|
+
const glowThumbtack = '#FC5B05';
|
|
24
|
+
export const aiAssistantIngressButtonStencil = createStencil({
|
|
25
|
+
extends: buttonStencil,
|
|
26
|
+
base: { name: "che7q", 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-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:#FFA198;}linearGradient > stop:nth-child(2){stop-color:#FFCAA0;}linearGradient > stop:nth-child(3){stop-color:#FFCA79;}linearGradient > stop:nth-child(4){stop-color:#FDCA44;}linearGradient > stop:nth-child(5){stop-color:#FFB74D;}}}&: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
|
+
modifiers: {
|
|
28
|
+
variant: {
|
|
29
|
+
inverse: { name: "che7r", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-default);.wd-icon-ai-assistant-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-assistant-ingress-button{linearGradient > stop:first-child{stop-color:#FFA198;}linearGradient > stop:nth-child(2){stop-color:#FFCAA0;}linearGradient > stop:nth-child(3){stop-color:#FFCA79;}linearGradient > stop:nth-child(4){stop-color:#FDCA44;}linearGradient > stop:nth-child(5){stop-color:#FFB74D;}}}" }
|
|
30
|
+
},
|
|
31
|
+
toggled: {
|
|
32
|
+
true: { name: "che7s", 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 #FFC2FD, 0px 0px 0.98px 0px #FFF3A8, 0px 0px 1.96px 0px #FEC10B, 0px 0px 2.94px 0px #FEC10B, 0px 0px 4.9px 0px #FD7E00, 0px 0px 7.36px 0px #FC5B05, 0px 0px 9.81px 0px #FFC2FD, 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-assistant-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(: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: "che7t", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
compound: [
|
|
37
|
+
{
|
|
38
|
+
modifiers: { toggled: 'true', variant: 'inverse' },
|
|
39
|
+
styles: { name: "che7u", styles: "--background-button-65cb05:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-assistant-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}" }
|
|
40
|
+
}
|
|
41
|
+
]
|
|
42
|
+
}, "ai-assistant-ingress-button-be2e1d");
|
|
43
|
+
export const AiAssistantIngressButton = createComponent('button')({
|
|
44
|
+
displayName: 'AiAssistantIngressButton',
|
|
45
|
+
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
|
|
46
|
+
const svgGradientId = useUniqueId();
|
|
47
|
+
return (_jsx(BaseButton, { ref: ref, as: Element, ...handleCsProp(elemProps, [
|
|
48
|
+
aiAssistantIngressButtonStencil({ toggled, variant }),
|
|
49
|
+
{
|
|
50
|
+
[systemIconStencil.vars.color]: `url(#${svgGradientId})`,
|
|
51
|
+
},
|
|
52
|
+
]), children: _jsx(BaseButton.Icon, { size: "large", icon: getAiAssistantIngressIcon(svgGradientId) }) }));
|
|
53
|
+
},
|
|
54
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AiAssistantIngressIcon.d.ts","sourceRoot":"","sources":["../../../../ai-assistant-ingress-button/lib/AiAssistantIngressIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAE/E,eAAO,MAAM,yBAAyB,UAAW,MAAM,KAAG,gBAiBzD,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { CanvasIconTypes } from '@workday/design-assets-types';
|
|
2
|
+
export const getAiAssistantIngressIcon = (svgId) => {
|
|
3
|
+
return {
|
|
4
|
+
name: 'aiAssistantIngressButton',
|
|
5
|
+
type: CanvasIconTypes.System,
|
|
6
|
+
svg: `<svg class="wd-icon-ai-assistant-ingress-button" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
|
|
7
|
+
<linearGradient id="${svgId}" x1="10" y1="0.000195292" x2="10" y2="19.9998" gradientUnits="userSpaceOnUse">
|
|
8
|
+
<stop />
|
|
9
|
+
<stop offset="0.25"/>
|
|
10
|
+
<stop offset="0.5"/>
|
|
11
|
+
<stop offset="0.75"/>
|
|
12
|
+
<stop offset="1"/>
|
|
13
|
+
</linearGradient>
|
|
14
|
+
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-bubble" d="M12 2.50003C12 2.22388 11.7759 1.9987 11.5001 2.01228C6.20948 2.27276 2 6.64479 2 12C2 13.5872 2.37077 15.1224 3.07103 16.507L2.44426 20.1925C2.42673 20.2956 2.42475 20.4007 2.43839 20.5044C2.51377 21.0776 3.03949 21.4811 3.61261 21.4057L7.44041 20.9022C8.83856 21.6197 10.3926 22 12 22C17.3552 22 21.7272 17.7905 21.9877 12.4999C22.0013 12.2241 21.7761 12 21.5 12H20.5C20.2239 12 20.0016 12.2245 19.9846 12.5001C19.7265 16.6854 16.2503 20 12 20C10.6368 20 9.32467 19.6593 8.15684 19.0183L7.92724 18.8923L4.53906 19.3379L5.09721 16.0559L4.96511 15.8128C4.33477 14.6524 4 13.3513 4 12C4 7.74968 7.31459 4.27352 11.4999 4.01538C11.7755 3.99838 12 3.77614 12 3.49999C12 3.1321 12 2.82183 12 2.50003Z" />
|
|
15
|
+
<path class="wd-icon-fill wd-icon-ai-assistant-ingress-button-sparkle" fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C17.6811 2 17.9069 2.1126 17.9555 2.37114C18.1407 3.35885 18.5381 4.1853 19.1401 4.809C19.7409 5.43146 20.5606 5.86796 21.6189 6.05318C22.1279 6.14203 22.1262 6.85808 21.6189 6.94681C20.5606 7.13204 19.7409 7.56853 19.1401 8.191C18.5381 8.8147 18.1408 9.64103 17.9556 10.6287C17.907 10.8873 17.6811 11 17.5 11C17.3189 11 17.0931 10.8874 17.0445 10.6289C16.8593 9.64115 16.4619 8.81474 15.8599 8.19106C15.2592 7.56861 14.4394 7.13211 13.3811 6.94681C12.8721 6.85795 12.8739 6.14192 13.3811 6.05318C14.4394 5.86796 15.2591 5.43146 15.8599 4.809C16.4619 4.1853 16.8592 3.35897 17.0444 2.37126C17.093 2.11272 17.3189 2 17.5 2Z" />
|
|
16
|
+
</svg>`,
|
|
17
|
+
filename: 'wd-icon-ai-assistant-ingress-button.svg',
|
|
18
|
+
};
|
|
19
|
+
};
|
package/dist/es6/index.d.ts
CHANGED
package/dist/es6/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}
|
package/dist/es6/index.js
CHANGED
|
@@ -48,45 +48,45 @@ export const searchFormStencil = createStencil({
|
|
|
48
48
|
searchInput: 'search-form-input',
|
|
49
49
|
closeButtonPart: 'search-form-close-button',
|
|
50
50
|
},
|
|
51
|
-
base: { name: "
|
|
51
|
+
base: { name: "che7v", 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-150181, 7.5rem);max-width:var(--maxWidth-search-form-150181, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-150181, 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-150181, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-150181, 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-150181);min-width:var(--minWidth-search-form-150181);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-150181, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-150181);color:var(--color-search-form-150181, 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-150181, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-150181, var(--background-search-form-150181, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-150181, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-150181);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-150181, 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-150181);}}}" },
|
|
52
52
|
modifiers: {
|
|
53
53
|
isHiddenSubmitSearchIcon: {
|
|
54
|
-
true: { name: "
|
|
54
|
+
true: { name: "che7w", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
55
55
|
},
|
|
56
56
|
isHiddenOpenSeachIcon: {
|
|
57
|
-
true: { name: "
|
|
57
|
+
true: { name: "che7x", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isCollapsed: {
|
|
60
|
-
true: { name: "
|
|
61
|
-
false: { name: "
|
|
60
|
+
true: { name: "che7y", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent);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);height:var(--height-search-form-150181, var(--cnvs-sys-space-x10));}" },
|
|
61
|
+
false: { name: "che7z", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
62
62
|
},
|
|
63
63
|
rightAlign: {
|
|
64
|
-
true: { name: "
|
|
64
|
+
true: { name: "che710", styles: "text-align:right;" }
|
|
65
65
|
},
|
|
66
66
|
showForm: {
|
|
67
|
-
true: { name: "
|
|
68
|
-
false: { name: "
|
|
67
|
+
true: { name: "che711", styles: "" },
|
|
68
|
+
false: { name: "che712", styles: "" }
|
|
69
69
|
},
|
|
70
70
|
grow: {
|
|
71
|
-
true: { name: "
|
|
71
|
+
true: { name: "che713", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
72
72
|
},
|
|
73
73
|
searchTheme: {
|
|
74
74
|
// Light theme
|
|
75
|
-
light: { name: "
|
|
75
|
+
light: { name: "che714", 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);}}" },
|
|
76
76
|
// Dark theme
|
|
77
|
-
dark: { name: "
|
|
77
|
+
dark: { name: "che715", 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;}}" },
|
|
78
78
|
//Transparent theme
|
|
79
|
-
transparent: { name: "
|
|
79
|
+
transparent: { name: "che716", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent);background-focus:var(--cnvs-sys-color-bg-transparent);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;}" }
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
compound: [
|
|
83
83
|
{
|
|
84
84
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
85
|
-
styles: { name: "
|
|
85
|
+
styles: { name: "che717", 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);:hover{background:var(--cnvs-sys-color-bg-transparent);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent);box-shadow:none;}}" }
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
89
|
-
styles: { name: "
|
|
89
|
+
styles: { name: "che718", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
90
90
|
}
|
|
91
91
|
]
|
|
92
92
|
}, "search-form-150181");
|
package/index.ts
CHANGED
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.1162-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",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-system-icons-web": "^3.0.
|
|
49
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1162-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1162-next.0",
|
|
51
|
+
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
52
52
|
"@workday/canvas-tokens-web": "3.0.0-alpha.5",
|
|
53
|
-
"@workday/design-assets-types": "^0.2.
|
|
53
|
+
"@workday/design-assets-types": "^0.2.10",
|
|
54
54
|
"chroma-js": "^2.2.0",
|
|
55
55
|
"lodash.flatten": "^4.4.0",
|
|
56
56
|
"rtl-css-js": "^1.14.1"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"devDependencies": {
|
|
59
59
|
"@types/lodash.flatten": "^4.4.6"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "542377d8b4fcaf4fa3f40e4ef6ef66a8524e8de9"
|
|
62
62
|
}
|