@workday/canvas-kit-labs-react 15.0.0-alpha.0076-next.0 → 15.0.0-alpha.0090-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/ai-ingress-button/lib/AIIngressButton.js +5 -5
- 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/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-f6d2bd: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-f6d2bd: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-f6d2bd: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-f6d2bd: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");
|
|
@@ -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-f6d2bd: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-f6d2bd: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-f6d2bd: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-f6d2bd: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");
|
|
@@ -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": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.0090-next.0",
|
|
4
4
|
"description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^15.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^15.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^15.0.0-alpha.0090-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^15.0.0-alpha.0090-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
54
54
|
"@workday/canvas-tokens-web": "4.0.0-alpha.3",
|
|
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": "54d08f77d0527af840c9f102ce9a8f44942a5e9d"
|
|
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,
|