@workday/canvas-kit-labs-react 14.2.2 → 14.2.4
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.js +5 -5
- package/dist/commonjs/search-form/lib/SearchForm.js +14 -14
- package/dist/commonjs/side-panel/index.d.ts +1 -0
- package/dist/commonjs/side-panel/index.d.ts.map +1 -1
- package/dist/commonjs/side-panel/index.js +1 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +21 -0
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +15 -8
- package/dist/commonjs/side-panel/lib/SidePanelHeading.d.ts +55 -0
- package/dist/commonjs/side-panel/lib/SidePanelHeading.d.ts.map +1 -0
- package/dist/commonjs/side-panel/lib/SidePanelHeading.js +37 -0
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts +2 -2
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +14 -14
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/ai-ingress-button/lib/AIIngressButton.js +5 -5
- package/dist/es6/search-form/lib/SearchForm.js +14 -14
- package/dist/es6/side-panel/index.d.ts +1 -0
- package/dist/es6/side-panel/index.d.ts.map +1 -1
- package/dist/es6/side-panel/index.js +1 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts +21 -0
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +15 -8
- package/dist/es6/side-panel/lib/SidePanelHeading.d.ts +55 -0
- package/dist/es6/side-panel/lib/SidePanelHeading.d.ts.map +1 -0
- package/dist/es6/side-panel/lib/SidePanelHeading.js +34 -0
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts +2 -2
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +14 -14
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
- package/side-panel/index.ts +1 -0
- package/side-panel/lib/SidePanel.tsx +7 -0
- package/side-panel/lib/SidePanelHeading.tsx +52 -0
- package/side-panel/lib/SidePanelToggleButton.tsx +4 -4
|
@@ -26,20 +26,20 @@ const glowHappyHour = canvas_tokens_web_1.base.orange400; //'#FD7E00';
|
|
|
26
26
|
const glowThumbtack = canvas_tokens_web_1.base.coral500; //'#FC5B05';
|
|
27
27
|
exports.AIIngressButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
28
28
|
extends: button_1.buttonStencil,
|
|
29
|
-
base: { name: "
|
|
29
|
+
base: { name: "35qqm3", styles: "box-sizing:border-box;--background-button-85bf0e: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));}" },
|
|
30
30
|
modifiers: {
|
|
31
31
|
variant: {
|
|
32
|
-
inverse: { name: "
|
|
32
|
+
inverse: { name: "1mypq1", styles: "--background-button-85bf0e: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) ;}" }
|
|
33
33
|
},
|
|
34
34
|
toggled: {
|
|
35
|
-
true: { name: "
|
|
36
|
-
false: { name: "
|
|
35
|
+
true: { name: "38wqbh", styles: "--background-button-85bf0e: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) ;}" },
|
|
36
|
+
false: { name: "10zeha", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
39
|
compound: [
|
|
40
40
|
{
|
|
41
41
|
modifiers: { toggled: true, variant: 'inverse' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "3zd0tl", styles: "--background-button-85bf0e: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;}" }
|
|
43
43
|
}
|
|
44
44
|
]
|
|
45
45
|
}, "a-i-ingress-button-ea1953");
|
|
@@ -80,45 +80,45 @@ exports.searchFormStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
80
80
|
searchInput: 'search-form-input',
|
|
81
81
|
closeButtonPart: 'search-form-close-button',
|
|
82
82
|
},
|
|
83
|
-
base: { name: "
|
|
83
|
+
base: { name: "b5mzu", 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);}}}" },
|
|
84
84
|
modifiers: {
|
|
85
85
|
isHiddenSubmitSearchIcon: {
|
|
86
|
-
true: { name: "
|
|
86
|
+
true: { name: "1m3urg", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
87
87
|
},
|
|
88
88
|
isHiddenOpenSeachIcon: {
|
|
89
|
-
true: { name: "
|
|
89
|
+
true: { name: "1fn0ve", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
90
90
|
},
|
|
91
91
|
isCollapsed: {
|
|
92
|
-
true: { name: "
|
|
93
|
-
false: { name: "
|
|
92
|
+
true: { name: "3jgrm1", 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));}" },
|
|
93
|
+
false: { name: "3f532a", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
94
94
|
},
|
|
95
95
|
rightAlign: {
|
|
96
|
-
true: { name: "
|
|
96
|
+
true: { name: "2vnc8r", styles: "text-align:right;" }
|
|
97
97
|
},
|
|
98
98
|
showForm: {
|
|
99
|
-
true: { name: "
|
|
100
|
-
false: { name: "
|
|
99
|
+
true: { name: "2pruap", styles: "" },
|
|
100
|
+
false: { name: "2nwtxg", styles: "" }
|
|
101
101
|
},
|
|
102
102
|
grow: {
|
|
103
|
-
true: { name: "
|
|
103
|
+
true: { name: "1ojfjy", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
|
|
104
104
|
},
|
|
105
105
|
searchTheme: {
|
|
106
106
|
// Light theme
|
|
107
|
-
light: { name: "
|
|
107
|
+
light: { name: "2zp2u9", 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);}}" },
|
|
108
108
|
// Dark theme
|
|
109
|
-
dark: { name: "
|
|
109
|
+
dark: { name: "42qgd8", 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;}}" },
|
|
110
110
|
//Transparent theme
|
|
111
|
-
transparent: { name: "
|
|
111
|
+
transparent: { name: "3dt08l", 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;}" }
|
|
112
112
|
}
|
|
113
113
|
},
|
|
114
114
|
compound: [
|
|
115
115
|
{
|
|
116
116
|
modifiers: { showForm: 'true', isCollapsed: 'true' },
|
|
117
|
-
styles: { name: "
|
|
117
|
+
styles: { name: "39rf4a", 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;}}" }
|
|
118
118
|
},
|
|
119
119
|
{
|
|
120
120
|
modifiers: { isCollapsed: 'true', showForm: 'true' },
|
|
121
|
-
styles: { name: "
|
|
121
|
+
styles: { name: "19a83i", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
122
122
|
}
|
|
123
123
|
]
|
|
124
124
|
}, "search-form-bbb053");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}
|
|
@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
17
|
__exportStar(require("./lib/SidePanel"), exports);
|
|
18
|
+
__exportStar(require("./lib/SidePanelHeading"), exports);
|
|
18
19
|
__exportStar(require("./lib/SidePanelToggleButton"), exports);
|
|
19
20
|
__exportStar(require("./lib/useSidePanelModel"), exports);
|
|
@@ -201,5 +201,26 @@ export declare const SidePanel: import("@workday/canvas-kit-react/common").Eleme
|
|
|
201
201
|
handleAnimationStart(): undefined;
|
|
202
202
|
};
|
|
203
203
|
}>;
|
|
204
|
+
/**
|
|
205
|
+
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
|
|
206
|
+
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
|
|
207
|
+
* By default, the heading is hidden when the panel is collapsed.
|
|
208
|
+
*/
|
|
209
|
+
Heading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, import("./SidePanelHeading").SidePanelHeadingProps, {
|
|
210
|
+
state: {
|
|
211
|
+
panelId: string;
|
|
212
|
+
labelId: string;
|
|
213
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
214
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
215
|
+
origin: "end" | "start";
|
|
216
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
217
|
+
};
|
|
218
|
+
events: {
|
|
219
|
+
expand(): void;
|
|
220
|
+
collapse(): void;
|
|
221
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
222
|
+
handleAnimationStart(): undefined;
|
|
223
|
+
};
|
|
224
|
+
}>;
|
|
204
225
|
};
|
|
205
226
|
//# sourceMappingURL=SidePanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
|
|
@@ -7,6 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
|
7
7
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
8
8
|
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
9
9
|
const SidePanelToggleButton_1 = require("./SidePanelToggleButton");
|
|
10
|
+
const SidePanelHeading_1 = require("./SidePanelHeading");
|
|
10
11
|
/**
|
|
11
12
|
* Adds the necessary props to the SidePanel container element.
|
|
12
13
|
* This includes the `id` and `aria-labelledby` attributes for accessibility.
|
|
@@ -23,20 +24,20 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
23
24
|
expandedWidth: '',
|
|
24
25
|
collapsedWidth: '',
|
|
25
26
|
},
|
|
26
|
-
base: { name: "
|
|
27
|
+
base: { name: "p0gms", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
|
|
27
28
|
modifiers: {
|
|
28
29
|
variant: {
|
|
29
|
-
alternate: { name: "
|
|
30
|
-
standard: { name: "
|
|
30
|
+
alternate: { name: "3tq923", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
31
|
+
standard: { name: "2piv55", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
31
32
|
},
|
|
32
33
|
expanded: {
|
|
33
|
-
expanded: { name: "
|
|
34
|
-
collapsed: { name: "
|
|
35
|
-
expanding: { name: "
|
|
36
|
-
collapsing: { name: "
|
|
34
|
+
expanded: { name: "q3a3s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
|
|
35
|
+
collapsed: { name: "48553m", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" },
|
|
36
|
+
expanding: { name: "37367s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
|
|
37
|
+
collapsing: { name: "207jie", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" }
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
|
-
}, "panel-
|
|
40
|
+
}, "panel-dc50a6");
|
|
40
41
|
exports.SidePanel = (0, common_1.createContainer)('section')({
|
|
41
42
|
displayName: 'SidePanel',
|
|
42
43
|
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
@@ -51,6 +52,12 @@ exports.SidePanel = (0, common_1.createContainer)('section')({
|
|
|
51
52
|
* attributes from the model.
|
|
52
53
|
*/
|
|
53
54
|
ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
|
|
55
|
+
/**
|
|
56
|
+
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
|
|
57
|
+
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
|
|
58
|
+
* By default, the heading is hidden when the panel is collapsed.
|
|
59
|
+
*/
|
|
60
|
+
Heading: SidePanelHeading_1.SidePanelHeading,
|
|
54
61
|
},
|
|
55
62
|
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
|
|
56
63
|
return ((0, jsx_runtime_1.jsx)(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { Heading } from '@workday/canvas-kit-react/text';
|
|
4
|
+
export interface SidePanelHeadingProps extends ExtractProps<typeof Heading, never> {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const sidePanelHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
|
|
8
|
+
/**
|
|
9
|
+
* Adds the necessary props to the SidePanelHeading subcomponent.
|
|
10
|
+
* This sets the `id` to the `labelId` from the model for accessibility purposes,
|
|
11
|
+
* and hides the heading when the panel is not expanded.
|
|
12
|
+
*/
|
|
13
|
+
export declare const useSidePanelHeading: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
14
|
+
state: {
|
|
15
|
+
panelId: string;
|
|
16
|
+
labelId: string;
|
|
17
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
18
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
19
|
+
origin: "end" | "start";
|
|
20
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
expand(): void;
|
|
24
|
+
collapse(): void;
|
|
25
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
26
|
+
handleAnimationStart(): undefined;
|
|
27
|
+
};
|
|
28
|
+
}, {
|
|
29
|
+
readonly id: string;
|
|
30
|
+
readonly hidden: boolean;
|
|
31
|
+
}>;
|
|
32
|
+
/**
|
|
33
|
+
* `SidePanel.Heading` is a styled heading component that provides the accessible name
|
|
34
|
+
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
|
|
35
|
+
* which is used by the panel's `aria-labelledby` attribute.
|
|
36
|
+
*
|
|
37
|
+
* The heading is automatically hidden when the panel is collapsed.
|
|
38
|
+
*/
|
|
39
|
+
export declare const SidePanelHeading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, SidePanelHeadingProps, {
|
|
40
|
+
state: {
|
|
41
|
+
panelId: string;
|
|
42
|
+
labelId: string;
|
|
43
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
44
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
45
|
+
origin: "end" | "start";
|
|
46
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
47
|
+
};
|
|
48
|
+
events: {
|
|
49
|
+
expand(): void;
|
|
50
|
+
collapse(): void;
|
|
51
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
52
|
+
handleAnimationStart(): undefined;
|
|
53
|
+
};
|
|
54
|
+
}>;
|
|
55
|
+
//# sourceMappingURL=SidePanelHeading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAKvD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,iJAIlC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAU3B,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SidePanelHeading = exports.useSidePanelHeading = exports.sidePanelHeadingStencil = void 0;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const common_1 = require("@workday/canvas-kit-react/common");
|
|
6
|
+
const text_1 = require("@workday/canvas-kit-react/text");
|
|
7
|
+
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
8
|
+
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
9
|
+
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
10
|
+
exports.sidePanelHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
|
+
base: { name: "2dqo73", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x4);" }
|
|
12
|
+
}, "side-panel-heading-f83bea");
|
|
13
|
+
/**
|
|
14
|
+
* Adds the necessary props to the SidePanelHeading subcomponent.
|
|
15
|
+
* This sets the `id` to the `labelId` from the model for accessibility purposes,
|
|
16
|
+
* and hides the heading when the panel is not expanded.
|
|
17
|
+
*/
|
|
18
|
+
exports.useSidePanelHeading = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
|
|
19
|
+
return {
|
|
20
|
+
id: state.labelId,
|
|
21
|
+
hidden: state.transitionState !== 'expanded',
|
|
22
|
+
};
|
|
23
|
+
});
|
|
24
|
+
/**
|
|
25
|
+
* `SidePanel.Heading` is a styled heading component that provides the accessible name
|
|
26
|
+
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
|
|
27
|
+
* which is used by the panel's `aria-labelledby` attribute.
|
|
28
|
+
*
|
|
29
|
+
* The heading is automatically hidden when the panel is collapsed.
|
|
30
|
+
*/
|
|
31
|
+
exports.SidePanelHeading = (0, common_1.createSubcomponent)(text_1.Heading)({
|
|
32
|
+
displayName: 'SidePanel.Heading',
|
|
33
|
+
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
34
|
+
elemPropsHook: exports.useSidePanelHeading,
|
|
35
|
+
})(({ size = 'small', children, ...elemProps }, Element) => {
|
|
36
|
+
return ((0, jsx_runtime_1.jsx)(Element, { size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelHeadingStencil)()), children: children }));
|
|
37
|
+
});
|
|
@@ -73,8 +73,8 @@ export declare const useSidePanelToggleButtonElemProps: import("@workday/canvas-
|
|
|
73
73
|
};
|
|
74
74
|
}, {
|
|
75
75
|
readonly 'aria-controls': string;
|
|
76
|
-
readonly 'aria-
|
|
77
|
-
readonly 'aria-
|
|
76
|
+
readonly 'aria-pressed': boolean;
|
|
77
|
+
readonly 'aria-describedby': string;
|
|
78
78
|
}>;
|
|
79
79
|
export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SidePanelToggleButtonProps, {
|
|
80
80
|
state: {
|
|
@@ -10,50 +10,50 @@ const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
|
10
10
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
11
11
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
12
12
|
exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "40w5gu", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
state: {
|
|
16
|
-
collapsing: { name: "
|
|
17
|
-
collapsed: { name: "
|
|
18
|
-
expanded: { name: "
|
|
19
|
-
expanding: { name: "
|
|
16
|
+
collapsing: { name: "1fzr8f", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
17
|
+
collapsed: { name: "t442a", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
18
|
+
expanded: { name: "gnbbu", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
19
|
+
expanding: { name: "dyp52", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
20
20
|
},
|
|
21
21
|
origin: {
|
|
22
|
-
start: { name: "
|
|
23
|
-
end: { name: "
|
|
22
|
+
start: { name: "15w1xg", styles: "" },
|
|
23
|
+
end: { name: "4t11b", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
compound: [
|
|
27
27
|
{
|
|
28
28
|
modifiers: { state: 'collapsed', origin: 'end' },
|
|
29
|
-
styles: { name: "
|
|
29
|
+
styles: { name: "3rariv", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
modifiers: { state: 'collapsing', origin: 'end' },
|
|
33
|
-
styles: { name: "
|
|
33
|
+
styles: { name: "1cebq0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
modifiers: { state: 'expanded', origin: 'end' },
|
|
37
|
-
styles: { name: "
|
|
37
|
+
styles: { name: "3nz6ql", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
modifiers: { state: 'expanding', origin: 'end' },
|
|
41
|
-
styles: { name: "
|
|
41
|
+
styles: { name: "26ll91", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
42
42
|
}
|
|
43
43
|
]
|
|
44
44
|
}, "side-panel-toggle-button-2c790f");
|
|
45
45
|
exports.useSidePanelToggleButtonElemProps = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
|
|
46
46
|
return {
|
|
47
47
|
'aria-controls': state.panelId,
|
|
48
|
-
'aria-
|
|
49
|
-
'aria-
|
|
48
|
+
'aria-pressed': state.transitionState === 'collapsed',
|
|
49
|
+
'aria-describedby': state.labelId,
|
|
50
50
|
};
|
|
51
51
|
});
|
|
52
52
|
exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
|
|
53
53
|
displayName: 'SidePanel.ToggleButton',
|
|
54
54
|
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
55
55
|
elemPropsHook: exports.useSidePanelToggleButtonElemProps,
|
|
56
|
-
})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
|
|
56
|
+
})(({ variant = undefined, icon = canvas_system_icons_web_1.transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, ...elemProps }, Element, model) => {
|
|
57
57
|
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: icon, as: Element, variant: variant, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
|
|
58
58
|
state: model.state.transitionState,
|
|
59
59
|
origin: model.state.origin,
|
|
@@ -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: "35qqm3", styles: "box-sizing:border-box;--background-button-85bf0e: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: "1mypq1", styles: "--background-button-85bf0e: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: "38wqbh", styles: "--background-button-85bf0e: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: "10zeha", 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: "3zd0tl", styles: "--background-button-85bf0e: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-ea1953");
|
|
@@ -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: "b5mzu", 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: "1m3urg", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
|
|
58
58
|
},
|
|
59
59
|
isHiddenOpenSeachIcon: {
|
|
60
|
-
true: { name: "
|
|
60
|
+
true: { name: "1fn0ve", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
|
|
61
61
|
},
|
|
62
62
|
isCollapsed: {
|
|
63
|
-
true: { name: "
|
|
64
|
-
false: { name: "
|
|
63
|
+
true: { name: "3jgrm1", 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: "3f532a", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
65
65
|
},
|
|
66
66
|
rightAlign: {
|
|
67
|
-
true: { name: "
|
|
67
|
+
true: { name: "2vnc8r", styles: "text-align:right;" }
|
|
68
68
|
},
|
|
69
69
|
showForm: {
|
|
70
|
-
true: { name: "
|
|
71
|
-
false: { name: "
|
|
70
|
+
true: { name: "2pruap", styles: "" },
|
|
71
|
+
false: { name: "2nwtxg", styles: "" }
|
|
72
72
|
},
|
|
73
73
|
grow: {
|
|
74
|
-
true: { name: "
|
|
74
|
+
true: { name: "1ojfjy", 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: "2zp2u9", 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: "42qgd8", 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: "3dt08l", 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: "39rf4a", 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: "19a83i", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
|
|
93
93
|
}
|
|
94
94
|
]
|
|
95
95
|
}, "search-form-bbb053");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../side-panel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC"}
|
|
@@ -201,5 +201,26 @@ export declare const SidePanel: import("@workday/canvas-kit-react/common").Eleme
|
|
|
201
201
|
handleAnimationStart(): undefined;
|
|
202
202
|
};
|
|
203
203
|
}>;
|
|
204
|
+
/**
|
|
205
|
+
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
|
|
206
|
+
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
|
|
207
|
+
* By default, the heading is hidden when the panel is collapsed.
|
|
208
|
+
*/
|
|
209
|
+
Heading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, import("./SidePanelHeading").SidePanelHeadingProps, {
|
|
210
|
+
state: {
|
|
211
|
+
panelId: string;
|
|
212
|
+
labelId: string;
|
|
213
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
214
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
215
|
+
origin: "end" | "start";
|
|
216
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
217
|
+
};
|
|
218
|
+
events: {
|
|
219
|
+
expand(): void;
|
|
220
|
+
collapse(): void;
|
|
221
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
222
|
+
handleAnimationStart(): undefined;
|
|
223
|
+
};
|
|
224
|
+
}>;
|
|
204
225
|
};
|
|
205
226
|
//# sourceMappingURL=SidePanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AAExD,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAyCvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;OAOG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
|
|
@@ -4,6 +4,7 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
|
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
import { useSidePanelModel } from './useSidePanelModel';
|
|
6
6
|
import { SidePanelToggleButton } from './SidePanelToggleButton';
|
|
7
|
+
import { SidePanelHeading } from './SidePanelHeading';
|
|
7
8
|
/**
|
|
8
9
|
* Adds the necessary props to the SidePanel container element.
|
|
9
10
|
* This includes the `id` and `aria-labelledby` attributes for accessibility.
|
|
@@ -20,20 +21,20 @@ export const panelStencil = createStencil({
|
|
|
20
21
|
expandedWidth: '',
|
|
21
22
|
collapsedWidth: '',
|
|
22
23
|
},
|
|
23
|
-
base: { name: "
|
|
24
|
+
base: { name: "p0gms", styles: "box-sizing:border-box;overflow:hidden;position:relative;height:100%;outline:0.0625rem solid transparent;transition:width ease-out 200ms, max-width ease-out 200ms;" },
|
|
24
25
|
modifiers: {
|
|
25
26
|
variant: {
|
|
26
|
-
alternate: { name: "
|
|
27
|
-
standard: { name: "
|
|
27
|
+
alternate: { name: "3tq923", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
28
|
+
standard: { name: "2piv55", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
28
29
|
},
|
|
29
30
|
expanded: {
|
|
30
|
-
expanded: { name: "
|
|
31
|
-
collapsed: { name: "
|
|
32
|
-
expanding: { name: "
|
|
33
|
-
collapsing: { name: "
|
|
31
|
+
expanded: { name: "q3a3s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
|
|
32
|
+
collapsed: { name: "48553m", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" },
|
|
33
|
+
expanding: { name: "37367s", styles: "width:var(--expandedWidth-panel-dc50a6);max-width:var(--expandedWidth-panel-dc50a6);" },
|
|
34
|
+
collapsing: { name: "207jie", styles: "width:var(--collapsedWidth-panel-dc50a6);max-width:var(--collapsedWidth-panel-dc50a6);" }
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
|
-
}, "panel-
|
|
37
|
+
}, "panel-dc50a6");
|
|
37
38
|
export const SidePanel = createContainer('section')({
|
|
38
39
|
displayName: 'SidePanel',
|
|
39
40
|
modelHook: useSidePanelModel,
|
|
@@ -48,6 +49,12 @@ export const SidePanel = createContainer('section')({
|
|
|
48
49
|
* attributes from the model.
|
|
49
50
|
*/
|
|
50
51
|
ToggleButton: SidePanelToggleButton,
|
|
52
|
+
/**
|
|
53
|
+
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
|
|
54
|
+
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
|
|
55
|
+
* By default, the heading is hidden when the panel is collapsed.
|
|
56
|
+
*/
|
|
57
|
+
Heading: SidePanelHeading,
|
|
51
58
|
},
|
|
52
59
|
})(({ collapsedWidth = 64, expandedWidth = 320, variant = 'standard', children, ...elemProps }, Element, model) => {
|
|
53
60
|
return (_jsx(Element, { ...handleCsProp(elemProps, [
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { Heading } from '@workday/canvas-kit-react/text';
|
|
4
|
+
export interface SidePanelHeadingProps extends ExtractProps<typeof Heading, never> {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const sidePanelHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
|
|
8
|
+
/**
|
|
9
|
+
* Adds the necessary props to the SidePanelHeading subcomponent.
|
|
10
|
+
* This sets the `id` to the `labelId` from the model for accessibility purposes,
|
|
11
|
+
* and hides the heading when the panel is not expanded.
|
|
12
|
+
*/
|
|
13
|
+
export declare const useSidePanelHeading: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
14
|
+
state: {
|
|
15
|
+
panelId: string;
|
|
16
|
+
labelId: string;
|
|
17
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
18
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
19
|
+
origin: "end" | "start";
|
|
20
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
expand(): void;
|
|
24
|
+
collapse(): void;
|
|
25
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
26
|
+
handleAnimationStart(): undefined;
|
|
27
|
+
};
|
|
28
|
+
}, {
|
|
29
|
+
readonly id: string;
|
|
30
|
+
readonly hidden: boolean;
|
|
31
|
+
}>;
|
|
32
|
+
/**
|
|
33
|
+
* `SidePanel.Heading` is a styled heading component that provides the accessible name
|
|
34
|
+
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
|
|
35
|
+
* which is used by the panel's `aria-labelledby` attribute.
|
|
36
|
+
*
|
|
37
|
+
* The heading is automatically hidden when the panel is collapsed.
|
|
38
|
+
*/
|
|
39
|
+
export declare const SidePanelHeading: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"h2", import("@workday/canvas-kit-react/text").TypeLevelProps>, SidePanelHeadingProps, {
|
|
40
|
+
state: {
|
|
41
|
+
panelId: string;
|
|
42
|
+
labelId: string;
|
|
43
|
+
transitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
44
|
+
initialTransitionState: import("./useSidePanelModel").SidePanelTransitionStates;
|
|
45
|
+
origin: "end" | "start";
|
|
46
|
+
onStateTransition(state: import("./useSidePanelModel").SidePanelTransitionStates): void;
|
|
47
|
+
};
|
|
48
|
+
events: {
|
|
49
|
+
expand(): void;
|
|
50
|
+
collapse(): void;
|
|
51
|
+
handleAnimationEnd(event: React.TransitionEvent<HTMLDivElement>): React.TransitionEvent<HTMLDivElement>;
|
|
52
|
+
handleAnimationStart(): undefined;
|
|
53
|
+
};
|
|
54
|
+
}>;
|
|
55
|
+
//# sourceMappingURL=SidePanelHeading.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SidePanelHeading.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAKvD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB,iJAIlC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAU3B,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { Heading } from '@workday/canvas-kit-react/text';
|
|
4
|
+
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
5
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
import { useSidePanelModel } from './useSidePanelModel';
|
|
7
|
+
export const sidePanelHeadingStencil = createStencil({
|
|
8
|
+
base: { name: "2dqo73", styles: "box-sizing:border-box;padding:var(--cnvs-sys-space-x4);" }
|
|
9
|
+
}, "side-panel-heading-f83bea");
|
|
10
|
+
/**
|
|
11
|
+
* Adds the necessary props to the SidePanelHeading subcomponent.
|
|
12
|
+
* This sets the `id` to the `labelId` from the model for accessibility purposes,
|
|
13
|
+
* and hides the heading when the panel is not expanded.
|
|
14
|
+
*/
|
|
15
|
+
export const useSidePanelHeading = createElemPropsHook(useSidePanelModel)(({ state }) => {
|
|
16
|
+
return {
|
|
17
|
+
id: state.labelId,
|
|
18
|
+
hidden: state.transitionState !== 'expanded',
|
|
19
|
+
};
|
|
20
|
+
});
|
|
21
|
+
/**
|
|
22
|
+
* `SidePanel.Heading` is a styled heading component that provides the accessible name
|
|
23
|
+
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
|
|
24
|
+
* which is used by the panel's `aria-labelledby` attribute.
|
|
25
|
+
*
|
|
26
|
+
* The heading is automatically hidden when the panel is collapsed.
|
|
27
|
+
*/
|
|
28
|
+
export const SidePanelHeading = createSubcomponent(Heading)({
|
|
29
|
+
displayName: 'SidePanel.Heading',
|
|
30
|
+
modelHook: useSidePanelModel,
|
|
31
|
+
elemPropsHook: useSidePanelHeading,
|
|
32
|
+
})(({ size = 'small', children, ...elemProps }, Element) => {
|
|
33
|
+
return (_jsx(Element, { size: size, ...handleCsProp(elemProps, sidePanelHeadingStencil()), children: children }));
|
|
34
|
+
});
|
|
@@ -73,8 +73,8 @@ export declare const useSidePanelToggleButtonElemProps: import("@workday/canvas-
|
|
|
73
73
|
};
|
|
74
74
|
}, {
|
|
75
75
|
readonly 'aria-controls': string;
|
|
76
|
-
readonly 'aria-
|
|
77
|
-
readonly 'aria-
|
|
76
|
+
readonly 'aria-pressed': boolean;
|
|
77
|
+
readonly 'aria-describedby': string;
|
|
78
78
|
}>;
|
|
79
79
|
export declare const SidePanelToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", SidePanelToggleButtonProps, {
|
|
80
80
|
state: {
|
|
@@ -7,50 +7,50 @@ import { useSidePanelModel } from './useSidePanelModel';
|
|
|
7
7
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
8
8
|
import { system } from '@workday/canvas-tokens-web';
|
|
9
9
|
export const sidePanelToggleButtonStencil = createStencil({
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "40w5gu", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
state: {
|
|
13
|
-
collapsing: { name: "
|
|
14
|
-
collapsed: { name: "
|
|
15
|
-
expanded: { name: "
|
|
16
|
-
expanding: { name: "
|
|
13
|
+
collapsing: { name: "1fzr8f", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
14
|
+
collapsed: { name: "t442a", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
expanded: { name: "gnbbu", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
16
|
+
expanding: { name: "dyp52", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
17
17
|
},
|
|
18
18
|
origin: {
|
|
19
|
-
start: { name: "
|
|
20
|
-
end: { name: "
|
|
19
|
+
start: { name: "15w1xg", styles: "" },
|
|
20
|
+
end: { name: "4t11b", styles: "transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" }
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
compound: [
|
|
24
24
|
{
|
|
25
25
|
modifiers: { state: 'collapsed', origin: 'end' },
|
|
26
|
-
styles: { name: "
|
|
26
|
+
styles: { name: "3rariv", styles: "transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
modifiers: { state: 'collapsing', origin: 'end' },
|
|
30
|
-
styles: { name: "
|
|
30
|
+
styles: { name: "1cebq0", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
modifiers: { state: 'expanded', origin: 'end' },
|
|
34
|
-
styles: { name: "
|
|
34
|
+
styles: { name: "3nz6ql", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
modifiers: { state: 'expanding', origin: 'end' },
|
|
38
|
-
styles: { name: "
|
|
38
|
+
styles: { name: "26ll91", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-sys-space-x4);}" }
|
|
39
39
|
}
|
|
40
40
|
]
|
|
41
41
|
}, "side-panel-toggle-button-2c790f");
|
|
42
42
|
export const useSidePanelToggleButtonElemProps = createElemPropsHook(useSidePanelModel)(({ state }) => {
|
|
43
43
|
return {
|
|
44
44
|
'aria-controls': state.panelId,
|
|
45
|
-
'aria-
|
|
46
|
-
'aria-
|
|
45
|
+
'aria-pressed': state.transitionState === 'collapsed',
|
|
46
|
+
'aria-describedby': state.labelId,
|
|
47
47
|
};
|
|
48
48
|
});
|
|
49
49
|
export const SidePanelToggleButton = createSubcomponent('button')({
|
|
50
50
|
displayName: 'SidePanel.ToggleButton',
|
|
51
51
|
modelHook: useSidePanelModel,
|
|
52
52
|
elemPropsHook: useSidePanelToggleButtonElemProps,
|
|
53
|
-
})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', tooltipProps, ...elemProps }, Element, model) => {
|
|
53
|
+
})(({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, ...elemProps }, Element, model) => {
|
|
54
54
|
return (_jsx(Tooltip, { type: "muted", ...tooltipProps, title: model.state.transitionState === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, children: _jsx(TertiaryButton, { icon: icon, as: Element, variant: variant, ...handleCsProp(elemProps, sidePanelToggleButtonStencil({
|
|
55
55
|
state: model.state.transitionState,
|
|
56
56
|
origin: model.state.origin,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '14.2.
|
|
1
|
+
export const version = '14.2.4';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-labs-react",
|
|
3
|
-
"version": "14.2.
|
|
3
|
+
"version": "14.2.4",
|
|
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.2.
|
|
52
|
-
"@workday/canvas-kit-styling": "^14.2.
|
|
51
|
+
"@workday/canvas-kit-react": "^14.2.4",
|
|
52
|
+
"@workday/canvas-kit-styling": "^14.2.4",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
54
54
|
"@workday/canvas-tokens-web": "^3.1.1",
|
|
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": "039da83fef34eac26de361fc512d548760ec1ee8"
|
|
64
64
|
}
|
package/side-panel/index.ts
CHANGED
|
@@ -4,6 +4,7 @@ import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
|
|
|
4
4
|
import {system} from '@workday/canvas-tokens-web';
|
|
5
5
|
import {useSidePanelModel} from './useSidePanelModel';
|
|
6
6
|
import {SidePanelToggleButton} from './SidePanelToggleButton';
|
|
7
|
+
import {SidePanelHeading} from './SidePanelHeading';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Adds the necessary props to the SidePanel container element.
|
|
@@ -98,6 +99,12 @@ export const SidePanel = createContainer('section')({
|
|
|
98
99
|
* attributes from the model.
|
|
99
100
|
*/
|
|
100
101
|
ToggleButton: SidePanelToggleButton,
|
|
102
|
+
/**
|
|
103
|
+
* `SidePanel.Heading` is a styled heading that provides the accessible name for the SidePanel.
|
|
104
|
+
* The heading's `id` is automatically linked to the panel's `aria-labelledby` attribute.
|
|
105
|
+
* By default, the heading is hidden when the panel is collapsed.
|
|
106
|
+
*/
|
|
107
|
+
Heading: SidePanelHeading,
|
|
101
108
|
},
|
|
102
109
|
})<SidePanelProps>(
|
|
103
110
|
(
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
createElemPropsHook,
|
|
5
|
+
createSubcomponent,
|
|
6
|
+
ExtractProps,
|
|
7
|
+
} from '@workday/canvas-kit-react/common';
|
|
8
|
+
import {Heading} from '@workday/canvas-kit-react/text';
|
|
9
|
+
import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
|
|
10
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
11
|
+
import {useSidePanelModel} from './useSidePanelModel';
|
|
12
|
+
|
|
13
|
+
export interface SidePanelHeadingProps extends ExtractProps<typeof Heading, never> {
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const sidePanelHeadingStencil = createStencil({
|
|
18
|
+
base: {
|
|
19
|
+
padding: system.space.x4,
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Adds the necessary props to the SidePanelHeading subcomponent.
|
|
25
|
+
* This sets the `id` to the `labelId` from the model for accessibility purposes,
|
|
26
|
+
* and hides the heading when the panel is not expanded.
|
|
27
|
+
*/
|
|
28
|
+
export const useSidePanelHeading = createElemPropsHook(useSidePanelModel)(({state}) => {
|
|
29
|
+
return {
|
|
30
|
+
id: state.labelId,
|
|
31
|
+
hidden: state.transitionState !== 'expanded',
|
|
32
|
+
};
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* `SidePanel.Heading` is a styled heading component that provides the accessible name
|
|
37
|
+
* for the SidePanel. The heading's `id` is automatically set to the model's `labelId`,
|
|
38
|
+
* which is used by the panel's `aria-labelledby` attribute.
|
|
39
|
+
*
|
|
40
|
+
* The heading is automatically hidden when the panel is collapsed.
|
|
41
|
+
*/
|
|
42
|
+
export const SidePanelHeading = createSubcomponent(Heading)({
|
|
43
|
+
displayName: 'SidePanel.Heading',
|
|
44
|
+
modelHook: useSidePanelModel,
|
|
45
|
+
elemPropsHook: useSidePanelHeading,
|
|
46
|
+
})<SidePanelHeadingProps>(({size = 'small', children, ...elemProps}, Element) => {
|
|
47
|
+
return (
|
|
48
|
+
<Element size={size} {...handleCsProp(elemProps, sidePanelHeadingStencil())}>
|
|
49
|
+
{children}
|
|
50
|
+
</Element>
|
|
51
|
+
);
|
|
52
|
+
});
|
|
@@ -124,8 +124,8 @@ export const useSidePanelToggleButtonElemProps = createElemPropsHook(useSidePane
|
|
|
124
124
|
({state}) => {
|
|
125
125
|
return {
|
|
126
126
|
'aria-controls': state.panelId,
|
|
127
|
-
'aria-
|
|
128
|
-
'aria-
|
|
127
|
+
'aria-pressed': state.transitionState === 'collapsed',
|
|
128
|
+
'aria-describedby': state.labelId,
|
|
129
129
|
};
|
|
130
130
|
}
|
|
131
131
|
);
|
|
@@ -139,8 +139,8 @@ export const SidePanelToggleButton = createSubcomponent('button')({
|
|
|
139
139
|
{
|
|
140
140
|
variant = undefined,
|
|
141
141
|
icon = transformationImportIcon,
|
|
142
|
-
tooltipTextExpand = 'Expand',
|
|
143
|
-
tooltipTextCollapse = 'Collapse',
|
|
142
|
+
tooltipTextExpand = 'Expand View',
|
|
143
|
+
tooltipTextCollapse = 'Collapse View',
|
|
144
144
|
tooltipProps,
|
|
145
145
|
...elemProps
|
|
146
146
|
}: SidePanelToggleButtonProps,
|