@workday/canvas-kit-react 16.0.0-alpha.0493-next.0 → 16.0.0-alpha.0499-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/button/lib/ToolbarDropdownButton.tsx +3 -18
- package/button/lib/ToolbarIconButton.tsx +2 -10
- package/dist/commonjs/banner/lib/Banner.js +2 -2
- package/dist/commonjs/button/lib/DeleteButton.js +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +4 -4
- package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
- package/dist/commonjs/pill/lib/Pill.js +4 -4
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts +14 -6
- package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanel.js +13 -10
- package/dist/commonjs/side-panel/lib/SidePanelHeading.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanelHeading.js +3 -3
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts +9 -21
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +17 -29
- package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts +26 -24
- package/dist/commonjs/side-panel/lib/useSidePanelModel.d.ts.map +1 -1
- package/dist/commonjs/side-panel/lib/useSidePanelModel.js +4 -3
- package/dist/es6/banner/lib/Banner.js +2 -2
- package/dist/es6/button/lib/DeleteButton.js +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/ToolbarDropdownButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarDropdownButton.js +5 -5
- package/dist/es6/button/lib/ToolbarIconButton.d.ts.map +1 -1
- package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
- package/dist/es6/pill/lib/Pill.js +5 -5
- package/dist/es6/side-panel/lib/SidePanel.d.ts +14 -6
- package/dist/es6/side-panel/lib/SidePanel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanel.js +13 -10
- package/dist/es6/side-panel/lib/SidePanelHeading.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanelHeading.js +3 -3
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts +9 -21
- package/dist/es6/side-panel/lib/SidePanelToggleButton.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +19 -31
- package/dist/es6/side-panel/lib/useSidePanelModel.d.ts +26 -24
- package/dist/es6/side-panel/lib/useSidePanelModel.d.ts.map +1 -1
- package/dist/es6/side-panel/lib/useSidePanelModel.js +4 -3
- package/package.json +6 -6
- package/pill/lib/Pill.tsx +5 -5
- package/side-panel/lib/SidePanel.tsx +14 -6
- package/side-panel/lib/SidePanelHeading.tsx +10 -1
- package/side-panel/lib/SidePanelToggleButton.tsx +21 -73
- package/side-panel/lib/useSidePanelModel.ts +4 -3
|
@@ -27,7 +27,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
27
27
|
panelId: string;
|
|
28
28
|
/**
|
|
29
29
|
* The unique ID for the panel's label element. If not provided, a unique ID will be generated.
|
|
30
|
-
* This ID is used for the `aria-labelledby` attribute on
|
|
30
|
+
* This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
|
|
31
|
+
* attribute on the toggle button.
|
|
31
32
|
*/
|
|
32
33
|
labelId: string;
|
|
33
34
|
/**
|
|
@@ -43,8 +44,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
43
44
|
*/
|
|
44
45
|
panelId: string;
|
|
45
46
|
/**
|
|
46
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
47
|
-
* and
|
|
47
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
48
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
48
49
|
*/
|
|
49
50
|
labelId: string;
|
|
50
51
|
/**
|
|
@@ -77,8 +78,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
77
78
|
*/
|
|
78
79
|
panelId: string;
|
|
79
80
|
/**
|
|
80
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
81
|
-
* and
|
|
81
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
82
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
82
83
|
*/
|
|
83
84
|
labelId: string;
|
|
84
85
|
/**
|
|
@@ -111,8 +112,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
111
112
|
*/
|
|
112
113
|
panelId: string;
|
|
113
114
|
/**
|
|
114
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
115
|
-
* and
|
|
115
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
116
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
116
117
|
*/
|
|
117
118
|
labelId: string;
|
|
118
119
|
/**
|
|
@@ -145,8 +146,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
145
146
|
*/
|
|
146
147
|
panelId: string;
|
|
147
148
|
/**
|
|
148
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
149
|
-
* and
|
|
149
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
150
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
150
151
|
*/
|
|
151
152
|
labelId: string;
|
|
152
153
|
/**
|
|
@@ -180,8 +181,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
180
181
|
*/
|
|
181
182
|
panelId: string;
|
|
182
183
|
/**
|
|
183
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
184
|
-
* and
|
|
184
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
185
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
185
186
|
*/
|
|
186
187
|
labelId: string;
|
|
187
188
|
/**
|
|
@@ -214,8 +215,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
214
215
|
*/
|
|
215
216
|
panelId: string;
|
|
216
217
|
/**
|
|
217
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
218
|
-
* and
|
|
218
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
219
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
219
220
|
*/
|
|
220
221
|
labelId: string;
|
|
221
222
|
/**
|
|
@@ -248,8 +249,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
248
249
|
*/
|
|
249
250
|
panelId: string;
|
|
250
251
|
/**
|
|
251
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
252
|
-
* and
|
|
252
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
253
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
253
254
|
*/
|
|
254
255
|
labelId: string;
|
|
255
256
|
/**
|
|
@@ -282,8 +283,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
282
283
|
*/
|
|
283
284
|
panelId: string;
|
|
284
285
|
/**
|
|
285
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
286
|
-
* and
|
|
286
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
287
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
287
288
|
*/
|
|
288
289
|
labelId: string;
|
|
289
290
|
/**
|
|
@@ -317,8 +318,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
317
318
|
*/
|
|
318
319
|
panelId: string;
|
|
319
320
|
/**
|
|
320
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
321
|
-
* and
|
|
321
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
322
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
322
323
|
*/
|
|
323
324
|
labelId: string;
|
|
324
325
|
/**
|
|
@@ -388,7 +389,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
388
389
|
panelId: string;
|
|
389
390
|
/**
|
|
390
391
|
* The unique ID for the panel's label element. If not provided, a unique ID will be generated.
|
|
391
|
-
* This ID is used for the `aria-labelledby` attribute on
|
|
392
|
+
* This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
|
|
393
|
+
* attribute on the toggle button.
|
|
392
394
|
*/
|
|
393
395
|
labelId: string;
|
|
394
396
|
/**
|
|
@@ -403,8 +405,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
403
405
|
*/
|
|
404
406
|
panelId: string;
|
|
405
407
|
/**
|
|
406
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
407
|
-
* and
|
|
408
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
409
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
408
410
|
*/
|
|
409
411
|
labelId: string;
|
|
410
412
|
/**
|
|
@@ -459,8 +461,8 @@ export declare const useSidePanelModel: (<TT_Special_Generic>(config?: (Partial<
|
|
|
459
461
|
*/
|
|
460
462
|
panelId: string;
|
|
461
463
|
/**
|
|
462
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
463
|
-
* and
|
|
464
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
465
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
464
466
|
*/
|
|
465
467
|
labelId: string;
|
|
466
468
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH
|
|
1
|
+
{"version":3,"file":"useSidePanelModel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/useSidePanelModel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;GAMG;AACH,MAAM,MAAM,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;;QAsBlD;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;;IAtGH;;;OAGG;;IAEH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;;OAIG;6BACsB,yBAAyB;;IAsBlD;;OAEG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IA9DH;;;OAGG;;IAEH;;;;;OAKG;;IAaH;;;;OAIG;6BACsB,yBAAyB;;IAuClD;;;OAGG;;IAKH;;;OAGG;;IAKH;;;;OAIG;8BACuB,qBAAqB,CAAC,cAAc,CAAC;IAW/D;;;OAGG;;;;QApDH;;WAEG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QA9DH;;;WAGG;;QAEH;;;;;WAKG;;QAaH;;;;WAIG;iCACsB,yBAAyB;;;QAuClD;;;WAGG;;QAKH;;;WAGG;;QAKH;;;;WAIG;kCACuB,qBAAqB,CAAC,cAAc,CAAC;QAW/D;;;WAGG;;;EAYL,CAAC"}
|
|
@@ -47,7 +47,8 @@ exports.useSidePanelModel = (0, common_1.createModelHook)({
|
|
|
47
47
|
panelId: '',
|
|
48
48
|
/**
|
|
49
49
|
* The unique ID for the panel's label element. If not provided, a unique ID will be generated.
|
|
50
|
-
* This ID is used for the `aria-labelledby` attribute on
|
|
50
|
+
* This ID is used for the `aria-labelledby` attribute on the panel and the `aria-describedby`
|
|
51
|
+
* attribute on the toggle button.
|
|
51
52
|
*/
|
|
52
53
|
labelId: '',
|
|
53
54
|
/**
|
|
@@ -75,8 +76,8 @@ exports.useSidePanelModel = (0, common_1.createModelHook)({
|
|
|
75
76
|
*/
|
|
76
77
|
panelId,
|
|
77
78
|
/**
|
|
78
|
-
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel
|
|
79
|
-
* and
|
|
79
|
+
* The unique ID for the panel's label element. Used for `aria-labelledby` on the panel to
|
|
80
|
+
* provide its accessible name, and for `aria-describedby` on the toggle button.
|
|
80
81
|
*/
|
|
81
82
|
labelId,
|
|
82
83
|
/**
|
|
@@ -13,8 +13,8 @@ export const bannerStencil = createStencil({
|
|
|
13
13
|
base: { name: "2md52q", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));padding-inline:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem)) var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));padding-block:0.625rem;border:0;display:flex;align-items:center;text-align:left;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;transition:background-color 120ms linear;outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) solid transparent;box-shadow:var(--cnvs-sys-depth-5);&:focus-visible, &.focus{outline:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) double transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
hasErrors: {
|
|
16
|
-
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
17
|
-
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-
|
|
16
|
+
true: { name: "17py5t", styles: "background-color:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-circle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);}" },
|
|
17
|
+
false: { name: "3cdi5a", styles: "background-color:var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);&:hover, &.hover{background:color-mix(in srgb, var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1)) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));}& [data-part=\"exclamation-triangle-icon\"]{--accentColor-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse, currentColor);--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));--backgroundColor-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1));}" }
|
|
18
18
|
},
|
|
19
19
|
isSticky: {
|
|
20
20
|
true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
@@ -7,7 +7,7 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
|
7
7
|
import { Button } from './Button';
|
|
8
8
|
const deleteButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-
|
|
10
|
+
base: { name: "2y1qky", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-critical-800, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
variant: {
|
|
13
13
|
outline: { name: "2r7qts", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
|
|
@@ -7,11 +7,11 @@ import { buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
|
7
7
|
import { Button } from './Button';
|
|
8
8
|
const primaryButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-
|
|
10
|
+
base: { name: "qdj2q", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-darkest, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
variant: {
|
|
13
13
|
// Inverse Styles
|
|
14
|
-
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-
|
|
14
|
+
inverse: { name: "wcd4a", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-light, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
}, "primary-button-821491");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC;CAAG;AAEvE,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0FvC,CAAC;AAEH,eAAO,MAAM,qBAAqB,mGA4ChC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
4
|
-
import { calc,
|
|
4
|
+
import { calc, createStencil, cssVar, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { BaseButton, buttonColorPropVars, buttonStencil } from './BaseButton';
|
|
@@ -11,16 +11,16 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
11
11
|
chevron: 'toolbar-dropdown-btn-arrow',
|
|
12
12
|
customIcon: 'toolbar-dropdown-btn-custom-icon',
|
|
13
13
|
},
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "4dn69v", styles: "box-sizing:border-box;padding:0;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));gap:0;--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-default));--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-strong));box-shadow:0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-default));}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-strong));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-default));}[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));margin-inline-end:calc(0.125rem * -1);}[data-part=\"toolbar-dropdown-btn-arrow\"]{margin:0;margin-inline-end:0.125rem;}" },
|
|
15
15
|
modifiers: {
|
|
16
16
|
shouldMirrorIcon: {
|
|
17
|
-
true: { name: "
|
|
17
|
+
true: { name: "2bny6s", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
18
18
|
},
|
|
19
19
|
shouldMirrorIconInRTL: {
|
|
20
|
-
true: { name: "
|
|
20
|
+
true: { name: "28w59b", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
|
-
}, "toolbar-dropdown-button-
|
|
23
|
+
}, "toolbar-dropdown-button-71fd2f");
|
|
24
24
|
export const ToolbarDropdownButton = createComponent('button')({
|
|
25
25
|
displayName: 'ToolbarDropdownButton',
|
|
26
26
|
Component: ({ icon, shouldMirrorIcon = false, shouldMirrorIconInRTL = false, children, ...elemProps }, ref, Element) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3F,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAgEnC,CAAC;AAEH,eAAO,MAAM,iBAAiB,+FA+C5B,CAAC"}
|
|
@@ -7,7 +7,7 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
7
7
|
import { BaseButton, buttonStencil } from './BaseButton';
|
|
8
8
|
export const toolbarIconButtonStencil = createStencil({
|
|
9
9
|
extends: buttonStencil,
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "1oxsp1", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));padding:0;height:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));--borderRadius-button-a19f67:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&[aria-pressed='true']{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));--background-button-a19f67:var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08));&:focus-visible, &.focus{--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));--color-system-icon-c9acc3:var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));}}" }
|
|
11
11
|
}, "toolbar-icon-button-8c40d9");
|
|
12
12
|
export const ToolbarIconButton = createComponent('button')({
|
|
13
13
|
displayName: 'ToolbarIconButton',
|
|
@@ -4,7 +4,7 @@ import { createContainer, focusRing } from '@workday/canvas-kit-react/common';
|
|
|
4
4
|
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
5
5
|
import { Box, mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { colorSpace, createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
7
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
+
import { base, system } from '@workday/canvas-tokens-web';
|
|
8
8
|
import { PillAvatar } from './PillAvatar';
|
|
9
9
|
import { PillCount, pillCountStencil } from './PillCount';
|
|
10
10
|
import { PillIcon } from './PillIcon';
|
|
@@ -16,14 +16,14 @@ export const pillStencil = createStencil({
|
|
|
16
16
|
vars: {
|
|
17
17
|
maxWidth: '',
|
|
18
18
|
},
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "48hkcj", styles: "box-sizing:border-box;display:initial;flex-direction:row;align-items:center;border-radius:var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-md, 1rem);font-size:var(--cnvs-sys-font-size-subtext-md, 0.75rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-md, 0.02rem);box-shadow:none;outline:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:fit-content;padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));position:relative;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:var(--maxWidth-pill-089441);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;&:has(span){display:flex;line-height:var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--border-button-a19f67:var(--cnvs-sys-color-border-transparent);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:currentColor;--borderColor-pill-count-d41635:transparent;}&:focus-visible, &.focus{--border-button-a19f67:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));--color-system-icon-c9acc3:currentColor;box-shadow:0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), 0 0 0 1px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:currentColor;--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));--borderColor-pill-count-d41635:transparent;}" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
variant: {
|
|
22
|
-
readOnly: { name: "
|
|
23
|
-
removable: { name: "
|
|
22
|
+
readOnly: { name: "8htfg", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));cursor:default;--background-button-a19f67:var(--cnvs-sys-color-bg-default);--label-button-a19f67:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-default);}" },
|
|
23
|
+
removable: { name: "25wdpe", styles: "&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--border-button-a19f67:var(--cnvs-sys-color-border-input-default);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);box-shadow:none;}&:hover, &.hover{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0392 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:active, &.active{--background-button-a19f67:color-mix(in srgb, var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05))) , var(--cnvs-base-palette-neutral-1000, oklch(0 0 0 / 1)) calc(0.0745 * 100%));--backgroundColor-pill-count-d41635:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));}&:disabled, &.disabled{--background-button-a19f67:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-c9acc3:currentColor;}cursor:default;overflow:revert;position:relative;" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
}, "pill-
|
|
26
|
+
}, "pill-089441");
|
|
27
27
|
/**
|
|
28
28
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
29
29
|
* we mean that the Pill container is a focusable element (a `<button>`). All leading elements
|
|
@@ -24,7 +24,7 @@ export declare const useSidePanelContainer: import("@workday/canvas-kit-react/co
|
|
|
24
24
|
readonly 'aria-labelledby': string;
|
|
25
25
|
readonly onTransitionEnd: (event: React.TransitionEvent<HTMLDivElement>) => React.TransitionEvent<HTMLDivElement>;
|
|
26
26
|
}>;
|
|
27
|
-
export type SidePanelVariant = 'standard' | '
|
|
27
|
+
export type SidePanelVariant = 'standard' | 'alternative' | 'overlay';
|
|
28
28
|
export interface SidePanelProps extends CSProps {
|
|
29
29
|
/**
|
|
30
30
|
* The width of the component (in `px` if it's a `number`) when it is collapsed.
|
|
@@ -39,7 +39,10 @@ export interface SidePanelProps extends CSProps {
|
|
|
39
39
|
*/
|
|
40
40
|
expandedWidth?: number | string;
|
|
41
41
|
/**
|
|
42
|
-
* The style variant of the side panel.
|
|
42
|
+
* The style variant of the side panel.
|
|
43
|
+
* - `'standard'`: navigation surface background (`system.legacy.color.surface.navigation`), no depth.
|
|
44
|
+
* - `'alternative'`: raised surface background (`system.legacy.color.surface.raised`), no depth.
|
|
45
|
+
* - `'overlay'`: default surface background (`system.legacy.color.surface.default`) with level 6 depth, for panels that need to look lifted off the page. This is a visual treatment only — it adds no dialog semantics, focus trapping, or backdrop.
|
|
43
46
|
*
|
|
44
47
|
* @default 'standard'
|
|
45
48
|
*/
|
|
@@ -48,9 +51,12 @@ export interface SidePanelProps extends CSProps {
|
|
|
48
51
|
}
|
|
49
52
|
export declare const panelStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
50
53
|
variant: {
|
|
51
|
-
|
|
54
|
+
overlay: {
|
|
52
55
|
backgroundColor: "var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))";
|
|
53
|
-
boxShadow: "--cnvs-sys-depth-
|
|
56
|
+
boxShadow: "--cnvs-sys-depth-6";
|
|
57
|
+
};
|
|
58
|
+
alternative: {
|
|
59
|
+
backgroundColor: "var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)))";
|
|
54
60
|
};
|
|
55
61
|
standard: {
|
|
56
62
|
backgroundColor: "var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1))";
|
|
@@ -183,8 +189,10 @@ export declare const SidePanel: import("@workday/canvas-kit-react/common").Eleme
|
|
|
183
189
|
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
184
190
|
* it should be the first focusable element in the panel.
|
|
185
191
|
*
|
|
186
|
-
* The button automatically receives `aria-controls
|
|
187
|
-
*
|
|
192
|
+
* The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
|
|
193
|
+
* when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
|
|
194
|
+
* Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
|
|
195
|
+
* conveys the state, so the label should not change between states.
|
|
188
196
|
*/
|
|
189
197
|
ToggleButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./SidePanelToggleButton").SidePanelToggleButtonProps, {
|
|
190
198
|
state: {
|
|
@@ -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;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAOzF;;;GAGG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;EAMhC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC7C;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA4CvB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKlB;;;;;;;;;OASG;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;CAgCN,CAAC"}
|
|
@@ -21,20 +21,21 @@ export const panelStencil = createStencil({
|
|
|
21
21
|
expandedWidth: '',
|
|
22
22
|
collapsedWidth: '',
|
|
23
23
|
},
|
|
24
|
-
base: { name: "
|
|
24
|
+
base: { name: "266imo", 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;" },
|
|
25
25
|
modifiers: {
|
|
26
26
|
variant: {
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
overlay: { name: "3jhjbz", styles: "background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-6);" },
|
|
28
|
+
alternative: { name: "zloh7", styles: "background-color:var(--cnvs-sys-color-surface-raised, var(--cnvs-sys-color-bg-alt-softer, oklch(0.4688 0.0781 250.43 / 0.03)));" },
|
|
29
|
+
standard: { name: "1ujtij", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
|
|
29
30
|
},
|
|
30
31
|
expanded: {
|
|
31
|
-
expanded: { name: "
|
|
32
|
-
collapsed: { name: "
|
|
33
|
-
expanding: { name: "
|
|
34
|
-
collapsing: { name: "
|
|
32
|
+
expanded: { name: "2ii7mh", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
|
|
33
|
+
collapsed: { name: "31yo9a", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" },
|
|
34
|
+
expanding: { name: "3i6sk2", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
|
|
35
|
+
collapsing: { name: "fh1bz", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" }
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
|
-
}, "panel-
|
|
38
|
+
}, "panel-bd0abc");
|
|
38
39
|
export const SidePanel = createContainer('section')({
|
|
39
40
|
displayName: 'SidePanel',
|
|
40
41
|
modelHook: useSidePanelModel,
|
|
@@ -45,8 +46,10 @@ export const SidePanel = createContainer('section')({
|
|
|
45
46
|
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
46
47
|
* it should be the first focusable element in the panel.
|
|
47
48
|
*
|
|
48
|
-
* The button automatically receives `aria-controls
|
|
49
|
-
*
|
|
49
|
+
* The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
|
|
50
|
+
* when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
|
|
51
|
+
* Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
|
|
52
|
+
* conveys the state, so the label should not change between states.
|
|
50
53
|
*/
|
|
51
54
|
ToggleButton: SidePanelToggleButton,
|
|
52
55
|
/**
|
|
@@ -1 +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,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,cAAc,EAAiB,MAAM,gCAAgC,CAAC;AAMvF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9F;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAsBlC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;EAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;EAa3B,CAAC"}
|
|
@@ -6,11 +6,11 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { useSidePanelModel } from './useSidePanelModel';
|
|
7
7
|
export const sidePanelHeadingStencil = createStencil({
|
|
8
8
|
extends: headingStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "1ywp21", styles: "box-sizing:border-box;display:flex;align-items:center;padding:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-start:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));min-height:var(--cnvs-sys-size-xxl, var(--cnvs-sys-space-x16, 4rem));margin:0;&:where([hidden]){display:none;}" },
|
|
10
10
|
modifiers: {
|
|
11
11
|
origin: {
|
|
12
|
-
end: { name: "
|
|
13
|
-
start: { name: "
|
|
12
|
+
end: { name: "397xkx", styles: "padding-inline-start:4.25rem;" },
|
|
13
|
+
start: { name: "y9ngj", styles: "" }
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
}, "side-panel-heading-9d38c2");
|
|
@@ -22,43 +22,31 @@ export declare const sidePanelToggleButtonStencil: import("@workday/canvas-kit-s
|
|
|
22
22
|
state: {
|
|
23
23
|
collapsing: {
|
|
24
24
|
margin: number;
|
|
25
|
-
transform: string;
|
|
26
|
-
':dir(rtl)': {
|
|
27
|
-
transform: string;
|
|
28
|
-
};
|
|
29
25
|
};
|
|
30
26
|
collapsed: {
|
|
31
27
|
margin: string;
|
|
32
|
-
transform: string;
|
|
33
|
-
':dir(rtl)': {
|
|
34
|
-
transform: string;
|
|
35
|
-
};
|
|
36
28
|
};
|
|
37
29
|
expanded: {
|
|
38
30
|
margin: number;
|
|
39
|
-
transform: string;
|
|
40
|
-
':dir(rtl)': {
|
|
41
|
-
transform: string;
|
|
42
|
-
};
|
|
43
31
|
};
|
|
44
32
|
expanding: {
|
|
45
33
|
margin: number;
|
|
46
|
-
transform: string;
|
|
47
|
-
':dir(rtl)': {
|
|
48
|
-
transform: string;
|
|
49
|
-
};
|
|
50
34
|
};
|
|
51
35
|
};
|
|
52
36
|
origin: {
|
|
53
|
-
start: {
|
|
37
|
+
start: {
|
|
38
|
+
insetInlineEnd: "var(--cnvs-base-size-150, 0.75rem)";
|
|
39
|
+
};
|
|
54
40
|
end: {
|
|
55
|
-
|
|
56
|
-
':dir(rtl)': {
|
|
57
|
-
transform: string;
|
|
58
|
-
};
|
|
41
|
+
insetInlineStart: "var(--cnvs-base-size-150, 0.75rem)";
|
|
59
42
|
};
|
|
60
43
|
};
|
|
61
44
|
}, {}, {}, never, never>;
|
|
45
|
+
/**
|
|
46
|
+
* Adds the necessary ARIA attributes to the SidePanel's toggle button.
|
|
47
|
+
* This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
|
|
48
|
+
* state, and `aria-describedby` pointing at the panel's heading.
|
|
49
|
+
*/
|
|
62
50
|
export declare const useSidePanelToggleButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
63
51
|
state: {
|
|
64
52
|
panelId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B
|
|
1
|
+
{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAChE,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAU,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAOxE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,CAAC;IACrF;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;wBAiCvC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;EAMnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;EAkDjC,CAAC"}
|