@workday/canvas-kit-preview-react 15.0.0-alpha.0324-next.0 → 15.0.0-alpha.0326-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/color-picker/lib/parts/ColorReset.tsx +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/commonjs/divider/lib/Divider.d.ts +3 -3
- package/dist/commonjs/divider/lib/Divider.js +3 -3
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +3 -3
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +4 -4
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +5 -5
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/es6/divider/lib/Divider.d.ts +3 -3
- package/dist/es6/divider/lib/Divider.js +3 -3
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +3 -3
- package/dist/es6/multi-select/lib/MultiSelectInput.js +4 -4
- package/dist/es6/side-panel/lib/SidePanel.d.ts +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +5 -5
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/divider/lib/Divider.tsx +4 -4
- package/loading-sparkles/lib/LoadingSparkles.tsx +1 -1
- package/multi-select/lib/MultiSelectInput.tsx +5 -5
- package/package.json +4 -4
- package/side-panel/lib/SidePanel.tsx +1 -1
- package/side-panel/lib/SidePanelToggleButton.tsx +6 -6
|
@@ -11,7 +11,7 @@ exports.resetButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
11
11
|
parts: {
|
|
12
12
|
label: 'reset-button-label',
|
|
13
13
|
},
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "u6eu2", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));margin:calc(var(--cnvs-base-size-100, 0.5rem) * -1) calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1) var(--cnvs-base-size-100, 0.5rem);padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}" }
|
|
15
15
|
}, "reset-button-531e85");
|
|
16
16
|
const ResetButton = ({ onClick, resetColor, label }) => {
|
|
17
17
|
const handleResetColor = () => onClick(resetColor);
|
|
@@ -8,7 +8,7 @@ export interface DividerProps extends CSProps {
|
|
|
8
8
|
/**
|
|
9
9
|
* Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
|
|
10
10
|
* E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
|
|
11
|
-
* @default `system.
|
|
11
|
+
* @default `system.gap.md` (1rem)
|
|
12
12
|
*/
|
|
13
13
|
space?: string;
|
|
14
14
|
}
|
|
@@ -19,14 +19,14 @@ export interface DividerProps extends CSProps {
|
|
|
19
19
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
20
20
|
*
|
|
21
21
|
* The `space` prop will equally apply top and bottom margin styles.
|
|
22
|
-
* In the example below, `
|
|
22
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
25
|
* ```tsx
|
|
26
26
|
* import { Divider } from '@workday/canvas-kit-preview-react/divider';
|
|
27
27
|
*
|
|
28
28
|
*
|
|
29
|
-
* <Divider space={system.
|
|
29
|
+
* <Divider space={system.gap.xs} />
|
|
30
30
|
*
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
@@ -9,7 +9,7 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
9
9
|
vars: {
|
|
10
10
|
space: '',
|
|
11
11
|
},
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "2013qi", styles: "box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin:calc(var(--space-divider-a2c50d, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2) 0;" }
|
|
13
13
|
}, "divider-a2c50d");
|
|
14
14
|
/**
|
|
15
15
|
* # Divider
|
|
@@ -18,14 +18,14 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
18
18
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
19
19
|
*
|
|
20
20
|
* The `space` prop will equally apply top and bottom margin styles.
|
|
21
|
-
* In the example below, `
|
|
21
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
22
22
|
*
|
|
23
23
|
* @example
|
|
24
24
|
* ```tsx
|
|
25
25
|
* import { Divider } from '@workday/canvas-kit-preview-react/divider';
|
|
26
26
|
*
|
|
27
27
|
*
|
|
28
|
-
* <Divider space={system.
|
|
28
|
+
* <Divider space={system.gap.xs} />
|
|
29
29
|
*
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
@@ -19,11 +19,11 @@ const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "1gqfuq",
|
|
|
19
19
|
* An individual loading sparkle. ✨
|
|
20
20
|
*/
|
|
21
21
|
const Sparkle = () => {
|
|
22
|
-
return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "data-part": "sparkle", icon: sparkleIcon_1.sparkleIcon, size:
|
|
22
|
+
return (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { "data-part": "sparkle", icon: sparkleIcon_1.sparkleIcon, size: (0, canvas_kit_styling_1.px2rem)(12) });
|
|
23
23
|
};
|
|
24
24
|
exports.loadingSparklesStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
25
|
-
base: { name: "
|
|
26
|
-
}, "loading-sparkles-
|
|
25
|
+
base: { name: "1k5v21", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1gqfuq;animation-timing-function:ease-in-out;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
|
|
26
|
+
}, "loading-sparkles-9c48ef");
|
|
27
27
|
/**
|
|
28
28
|
* A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
|
|
29
29
|
*/
|
|
@@ -13,11 +13,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
13
13
|
const MultiSelectedList_1 = require("./MultiSelectedList");
|
|
14
14
|
const useMultiSelectModel_1 = require("./useMultiSelectModel");
|
|
15
15
|
exports.multiSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
16
|
-
base: { name: "
|
|
16
|
+
base: { name: "fx7f6", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-6e98c5:100%;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:0;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));flex-wrap:wrap;}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
error: {
|
|
19
|
-
error: { name: "
|
|
20
|
-
caution: { name: "
|
|
19
|
+
error: { name: "19e8zq", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
|
|
20
|
+
caution: { name: "21kufj", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:hover, &.hover{border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
}, "multi-select-input-73c93d");
|
|
@@ -57,5 +57,5 @@ exports.MultiSelectSearchInput = (0, common_1.createSubcomponent)(text_input_1.T
|
|
|
57
57
|
modelHook: useMultiSelectModel_1.useMultiSelectModel,
|
|
58
58
|
elemPropsHook: exports.useMultiSelectInput,
|
|
59
59
|
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
|
|
60
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.legacy.size.sm, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: "xs" }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.legacy.size.xxxs, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon, size: "md" }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
|
|
61
61
|
});
|
|
@@ -73,7 +73,7 @@ export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil
|
|
|
73
73
|
boxShadow: "--cnvs-sys-depth-5";
|
|
74
74
|
};
|
|
75
75
|
standard: {
|
|
76
|
-
backgroundColor: "--cnvs-sys-color-bg-
|
|
76
|
+
backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
|
|
77
77
|
};
|
|
78
78
|
};
|
|
79
79
|
expanded: {
|
|
@@ -43,15 +43,15 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
43
43
|
modifiers: {
|
|
44
44
|
variant: {
|
|
45
45
|
alternate: { name: "v6pgt", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
46
|
-
standard: { name: "
|
|
46
|
+
standard: { name: "2zy96z", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
|
|
47
47
|
},
|
|
48
48
|
expanded: {
|
|
49
|
-
true: { name: "
|
|
50
|
-
false: { name: "
|
|
49
|
+
true: { name: "1f2viy", styles: "width:var(--expandedWidth-panel-cea5fb);max-width:var(--expandedWidth-panel-cea5fb);" },
|
|
50
|
+
false: { name: "wejln", styles: "width:var(--collapsedWidth-panel-cea5fb);max-width:var(--collapsedWidth-panel-cea5fb);" }
|
|
51
51
|
},
|
|
52
52
|
touched: {
|
|
53
|
-
true: { name: "
|
|
54
|
-
false: { name: "
|
|
53
|
+
true: { name: "19w5on", styles: "" },
|
|
54
|
+
false: { name: "2wyrcr", styles: "animation:none;" }
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
}, "panel-cea5fb");
|
|
@@ -34,35 +34,35 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
|
34
34
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
35
35
|
const hooks_1 = require("./hooks");
|
|
36
36
|
exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
37
|
-
base: { name: "
|
|
37
|
+
base: { name: "9qm96", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));inset-inline-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
|
|
38
38
|
modifiers: {
|
|
39
39
|
state: {
|
|
40
|
-
collapsing: { name: "
|
|
41
|
-
collapsed: { name: "
|
|
42
|
-
expanded: { name: "
|
|
43
|
-
expanding: { name: "
|
|
40
|
+
collapsing: { name: "2wt8mw", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
41
|
+
collapsed: { name: "4aison", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
42
|
+
expanded: { name: "rcwt8", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
43
|
+
expanding: { name: "wqfhf", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
44
44
|
},
|
|
45
45
|
origin: {
|
|
46
|
-
left: { name: "
|
|
47
|
-
right: { name: "
|
|
46
|
+
left: { name: "vsvce", styles: "" },
|
|
47
|
+
right: { name: "49wz04", styles: "" }
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
50
|
compound: [
|
|
51
51
|
{
|
|
52
52
|
modifiers: { state: 'collapsed', origin: 'right' },
|
|
53
|
-
styles: { name: "
|
|
53
|
+
styles: { name: "39r81", styles: "transform:scaleX(-1);" }
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
56
|
modifiers: { state: 'collapsing', origin: 'right' },
|
|
57
|
-
styles: { name: "
|
|
57
|
+
styles: { name: "2gc3ld", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
modifiers: { state: 'expanded', origin: 'right' },
|
|
61
|
-
styles: { name: "
|
|
61
|
+
styles: { name: "2c6dsz", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
modifiers: { state: 'expanding', origin: 'right' },
|
|
65
|
-
styles: { name: "
|
|
65
|
+
styles: { name: "3ftgb1", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
66
66
|
}
|
|
67
67
|
]
|
|
68
68
|
}, "side-panel-toggle-button-eaff77");
|
|
@@ -8,7 +8,7 @@ export const resetButtonStencil = createStencil({
|
|
|
8
8
|
parts: {
|
|
9
9
|
label: 'reset-button-label',
|
|
10
10
|
},
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "u6eu2", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));margin:calc(var(--cnvs-base-size-100, 0.5rem) * -1) calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1) var(--cnvs-base-size-100, 0.5rem);padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}" }
|
|
12
12
|
}, "reset-button-531e85");
|
|
13
13
|
export const ResetButton = ({ onClick, resetColor, label }) => {
|
|
14
14
|
const handleResetColor = () => onClick(resetColor);
|
|
@@ -8,7 +8,7 @@ export interface DividerProps extends CSProps {
|
|
|
8
8
|
/**
|
|
9
9
|
* Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
|
|
10
10
|
* E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
|
|
11
|
-
* @default `system.
|
|
11
|
+
* @default `system.gap.md` (1rem)
|
|
12
12
|
*/
|
|
13
13
|
space?: string;
|
|
14
14
|
}
|
|
@@ -19,14 +19,14 @@ export interface DividerProps extends CSProps {
|
|
|
19
19
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
20
20
|
*
|
|
21
21
|
* The `space` prop will equally apply top and bottom margin styles.
|
|
22
|
-
* In the example below, `
|
|
22
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
25
|
* ```tsx
|
|
26
26
|
* import { Divider } from '@workday/canvas-kit-preview-react/divider';
|
|
27
27
|
*
|
|
28
28
|
*
|
|
29
|
-
* <Divider space={system.
|
|
29
|
+
* <Divider space={system.gap.xs} />
|
|
30
30
|
*
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
@@ -6,7 +6,7 @@ export const dividerStencil = createStencil({
|
|
|
6
6
|
vars: {
|
|
7
7
|
space: '',
|
|
8
8
|
},
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "2013qi", styles: "box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin:calc(var(--space-divider-a2c50d, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2) 0;" }
|
|
10
10
|
}, "divider-a2c50d");
|
|
11
11
|
/**
|
|
12
12
|
* # Divider
|
|
@@ -15,14 +15,14 @@ export const dividerStencil = createStencil({
|
|
|
15
15
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
16
16
|
*
|
|
17
17
|
* The `space` prop will equally apply top and bottom margin styles.
|
|
18
|
-
* In the example below, `
|
|
18
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
21
|
* ```tsx
|
|
22
22
|
* import { Divider } from '@workday/canvas-kit-preview-react/divider';
|
|
23
23
|
*
|
|
24
24
|
*
|
|
25
|
-
* <Divider space={system.
|
|
25
|
+
* <Divider space={system.gap.xs} />
|
|
26
26
|
*
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
@@ -16,11 +16,11 @@ const LOADING_ANIMATION = keyframes({ name: "1gqfuq", styles: "0%, 79%, 100%{opa
|
|
|
16
16
|
* An individual loading sparkle. ✨
|
|
17
17
|
*/
|
|
18
18
|
const Sparkle = () => {
|
|
19
|
-
return _jsx(SystemIcon, { "data-part": "sparkle", icon: sparkleIcon, size:
|
|
19
|
+
return _jsx(SystemIcon, { "data-part": "sparkle", icon: sparkleIcon, size: px2rem(12) });
|
|
20
20
|
};
|
|
21
21
|
export const loadingSparklesStencil = createStencil({
|
|
22
|
-
base: { name: "
|
|
23
|
-
}, "loading-sparkles-
|
|
22
|
+
base: { name: "1k5v21", styles: "box-sizing:border-box;display:inline-flex;gap:0.0625rem;& [data-part=\"sparkle\"]{animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1gqfuq;animation-timing-function:ease-in-out;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-ai);&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}}" }
|
|
23
|
+
}, "loading-sparkles-9c48ef");
|
|
24
24
|
/**
|
|
25
25
|
* A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
|
|
26
26
|
*/
|
|
@@ -10,11 +10,11 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
10
10
|
import { MultiSelectedList } from './MultiSelectedList';
|
|
11
11
|
import { useMultiSelectModel } from './useMultiSelectModel';
|
|
12
12
|
export const multiSelectInputStencil = createStencil({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "fx7f6", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-6e98c5:100%;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:0;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));flex-wrap:wrap;}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
error: {
|
|
16
|
-
error: { name: "
|
|
17
|
-
caution: { name: "
|
|
16
|
+
error: { name: "19e8zq", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
|
|
17
|
+
caution: { name: "21kufj", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:hover, &.hover{border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
}, "multi-select-input-73c93d");
|
|
@@ -54,5 +54,5 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
54
54
|
modelHook: useMultiSelectModel,
|
|
55
55
|
elemPropsHook: useMultiSelectInput,
|
|
56
56
|
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
|
|
57
|
-
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.
|
|
57
|
+
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.legacy.size.sm, children: _jsx(SystemIcon, { icon: searchIcon, size: "xs" }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.legacy.size.xxxs, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { icon: caretDownSmallIcon, size: "md" }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
|
|
58
58
|
});
|
|
@@ -73,7 +73,7 @@ export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil
|
|
|
73
73
|
boxShadow: "--cnvs-sys-depth-5";
|
|
74
74
|
};
|
|
75
75
|
standard: {
|
|
76
|
-
backgroundColor: "--cnvs-sys-color-bg-
|
|
76
|
+
backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
|
|
77
77
|
};
|
|
78
78
|
};
|
|
79
79
|
expanded: {
|
|
@@ -17,15 +17,15 @@ export const panelStencil = createStencil({
|
|
|
17
17
|
modifiers: {
|
|
18
18
|
variant: {
|
|
19
19
|
alternate: { name: "v6pgt", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
20
|
-
standard: { name: "
|
|
20
|
+
standard: { name: "2zy96z", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
|
|
21
21
|
},
|
|
22
22
|
expanded: {
|
|
23
|
-
true: { name: "
|
|
24
|
-
false: { name: "
|
|
23
|
+
true: { name: "1f2viy", styles: "width:var(--expandedWidth-panel-cea5fb);max-width:var(--expandedWidth-panel-cea5fb);" },
|
|
24
|
+
false: { name: "wejln", styles: "width:var(--collapsedWidth-panel-cea5fb);max-width:var(--collapsedWidth-panel-cea5fb);" }
|
|
25
25
|
},
|
|
26
26
|
touched: {
|
|
27
|
-
true: { name: "
|
|
28
|
-
false: { name: "
|
|
27
|
+
true: { name: "19w5on", styles: "" },
|
|
28
|
+
false: { name: "2wyrcr", styles: "animation:none;" }
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
}, "panel-cea5fb");
|
|
@@ -8,35 +8,35 @@ import { extendIcon } from '@workday/canvas-system-icons-web';
|
|
|
8
8
|
import { system } from '@workday/canvas-tokens-web';
|
|
9
9
|
import { SidePanelContext } from './hooks';
|
|
10
10
|
export const sidePanelToggleButtonStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "9qm96", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));inset-inline-end:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
state: {
|
|
14
|
-
collapsing: { name: "
|
|
15
|
-
collapsed: { name: "
|
|
16
|
-
expanded: { name: "
|
|
17
|
-
expanding: { name: "
|
|
14
|
+
collapsing: { name: "2wt8mw", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
collapsed: { name: "4aison", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
16
|
+
expanded: { name: "rcwt8", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
17
|
+
expanding: { name: "wqfhf", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
18
18
|
},
|
|
19
19
|
origin: {
|
|
20
|
-
left: { name: "
|
|
21
|
-
right: { name: "
|
|
20
|
+
left: { name: "vsvce", styles: "" },
|
|
21
|
+
right: { name: "49wz04", styles: "" }
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
compound: [
|
|
25
25
|
{
|
|
26
26
|
modifiers: { state: 'collapsed', origin: 'right' },
|
|
27
|
-
styles: { name: "
|
|
27
|
+
styles: { name: "39r81", styles: "transform:scaleX(-1);" }
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
modifiers: { state: 'collapsing', origin: 'right' },
|
|
31
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "2gc3ld", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
modifiers: { state: 'expanded', origin: 'right' },
|
|
35
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "2c6dsz", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
modifiers: { state: 'expanding', origin: 'right' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "3ftgb1", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "side-panel-toggle-button-eaff77");
|
package/divider/lib/Divider.tsx
CHANGED
|
@@ -19,7 +19,7 @@ export const dividerStencil = createStencil({
|
|
|
19
19
|
height: px2rem(1),
|
|
20
20
|
border: 'none',
|
|
21
21
|
borderTop: `1px solid ${system.legacy.color.border.default}`,
|
|
22
|
-
margin: `${calc.divide(cssVar(space, system.legacy.
|
|
22
|
+
margin: `${calc.divide(cssVar(space, system.legacy.gap.xs), 2)} 0`,
|
|
23
23
|
};
|
|
24
24
|
},
|
|
25
25
|
});
|
|
@@ -28,7 +28,7 @@ export interface DividerProps extends CSProps {
|
|
|
28
28
|
/**
|
|
29
29
|
* Applies top and bottom margin evenly. It divides the provided value by two and applies half to each end.
|
|
30
30
|
* E.g. `space="2rem"` would apply `1rem` margin to the top, and `1rem` margin to the bottom.
|
|
31
|
-
* @default `system.
|
|
31
|
+
* @default `system.gap.md` (1rem)
|
|
32
32
|
*/
|
|
33
33
|
space?: string;
|
|
34
34
|
}
|
|
@@ -40,14 +40,14 @@ export interface DividerProps extends CSProps {
|
|
|
40
40
|
* [View Docs](https://workday.github.io/canvas-kit/?path=/docs/preview-divider--docs)
|
|
41
41
|
*
|
|
42
42
|
* The `space` prop will equally apply top and bottom margin styles.
|
|
43
|
-
* In the example below, `
|
|
43
|
+
* In the example below, `system.gap.xs` (0.5rem), adds `0.25rem` margin to the top and `0.25rem` to the bottom
|
|
44
44
|
*
|
|
45
45
|
* @example
|
|
46
46
|
* ```tsx
|
|
47
47
|
* import { Divider } from '@workday/canvas-kit-preview-react/divider';
|
|
48
48
|
*
|
|
49
49
|
*
|
|
50
|
-
* <Divider space={system.
|
|
50
|
+
* <Divider space={system.gap.xs} />
|
|
51
51
|
*
|
|
52
52
|
* ```
|
|
53
53
|
*/
|
|
@@ -32,7 +32,7 @@ const LOADING_ANIMATION = keyframes({
|
|
|
32
32
|
* An individual loading sparkle. ✨
|
|
33
33
|
*/
|
|
34
34
|
const Sparkle = () => {
|
|
35
|
-
return <SystemIcon data-part="sparkle" icon={sparkleIcon} size={
|
|
35
|
+
return <SystemIcon data-part="sparkle" icon={sparkleIcon} size={px2rem(12)} />;
|
|
36
36
|
};
|
|
37
37
|
|
|
38
38
|
export const loadingSparklesStencil = createStencil({
|
|
@@ -80,7 +80,7 @@ export const multiSelectInputStencil = createStencil({
|
|
|
80
80
|
},
|
|
81
81
|
|
|
82
82
|
'&:has(:disabled, .disabled) :where([data-part="form-input"])': {
|
|
83
|
-
opacity:
|
|
83
|
+
opacity: 0,
|
|
84
84
|
[systemIconStencil.vars.color]: system.color.fg.disabled,
|
|
85
85
|
},
|
|
86
86
|
|
|
@@ -90,7 +90,7 @@ export const multiSelectInputStencil = createStencil({
|
|
|
90
90
|
bottom: 0,
|
|
91
91
|
left: 0,
|
|
92
92
|
right: 0,
|
|
93
|
-
opacity:
|
|
93
|
+
opacity: 0,
|
|
94
94
|
cursor: 'default',
|
|
95
95
|
pointerEvents: 'none',
|
|
96
96
|
},
|
|
@@ -256,8 +256,8 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
256
256
|
return (
|
|
257
257
|
<div {...handleCsProp({className, cs, style}, multiSelectInputStencil({}))}>
|
|
258
258
|
<InputGroup>
|
|
259
|
-
<InputGroup.InnerStart pointerEvents="none" width={system.
|
|
260
|
-
<SystemIcon icon={searchIcon} size=
|
|
259
|
+
<InputGroup.InnerStart pointerEvents="none" width={system.legacy.size.sm}>
|
|
260
|
+
<SystemIcon icon={searchIcon} size="xs" />
|
|
261
261
|
</InputGroup.InnerStart>
|
|
262
262
|
<InputGroup.Input
|
|
263
263
|
data-part="form-input"
|
|
@@ -272,7 +272,7 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
272
272
|
error={error}
|
|
273
273
|
{...elemProps}
|
|
274
274
|
/>
|
|
275
|
-
<InputGroup.InnerEnd width={system.
|
|
275
|
+
<InputGroup.InnerEnd width={system.legacy.size.xxxs}>
|
|
276
276
|
<InputGroup.ClearButton />
|
|
277
277
|
</InputGroup.InnerEnd>
|
|
278
278
|
<InputGroup.InnerEnd pointerEvents="none">
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.0326-next.0",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
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": "^15.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^15.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^15.0.0-alpha.0326-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^15.0.0-alpha.0326-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
54
54
|
"@workday/canvas-tokens-web": "4.3.0",
|
|
55
55
|
"@workday/design-assets-types": "^0.3.0"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react-hook-form": "7.36.1",
|
|
61
61
|
"yup": "^0.32.11"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "8b883797f41585fc39f9b83c8e37397140cf873e"
|
|
64
64
|
}
|
|
@@ -24,9 +24,9 @@ export interface SidePanelToggleButtonProps extends ExtractProps<typeof Tertiary
|
|
|
24
24
|
export const sidePanelToggleButtonStencil = createStencil({
|
|
25
25
|
base: {
|
|
26
26
|
position: 'absolute',
|
|
27
|
-
top: system.
|
|
28
|
-
width: system.
|
|
29
|
-
insetInlineEnd: system.
|
|
27
|
+
top: system.legacy.gap.lg,
|
|
28
|
+
width: system.legacy.size.sm,
|
|
29
|
+
insetInlineEnd: system.legacy.gap.md,
|
|
30
30
|
},
|
|
31
31
|
modifiers: {
|
|
32
32
|
state: {
|
|
@@ -78,21 +78,21 @@ export const sidePanelToggleButtonStencil = createStencil({
|
|
|
78
78
|
modifiers: {state: 'collapsing', origin: 'right'},
|
|
79
79
|
styles: {
|
|
80
80
|
transform: `scaleX(-1)`,
|
|
81
|
-
insetInlineStart: system.
|
|
81
|
+
insetInlineStart: system.legacy.gap.md,
|
|
82
82
|
},
|
|
83
83
|
},
|
|
84
84
|
{
|
|
85
85
|
modifiers: {state: 'expanded', origin: 'right'},
|
|
86
86
|
styles: {
|
|
87
87
|
transform: `scaleX(1)`,
|
|
88
|
-
insetInlineStart: system.
|
|
88
|
+
insetInlineStart: system.legacy.gap.md,
|
|
89
89
|
},
|
|
90
90
|
},
|
|
91
91
|
{
|
|
92
92
|
modifiers: {state: 'expanding', origin: 'right'},
|
|
93
93
|
styles: {
|
|
94
94
|
transform: `scaleX(1)`,
|
|
95
|
-
insetInlineStart: system.
|
|
95
|
+
insetInlineStart: system.legacy.gap.md,
|
|
96
96
|
},
|
|
97
97
|
},
|
|
98
98
|
],
|