@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
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
|
|
2
2
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
3
|
-
import {
|
|
4
|
-
calc,
|
|
5
|
-
colorSpace,
|
|
6
|
-
createStencil,
|
|
7
|
-
cssVar,
|
|
8
|
-
handleCsProp,
|
|
9
|
-
px2rem,
|
|
10
|
-
} from '@workday/canvas-kit-styling';
|
|
3
|
+
import {calc, createStencil, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
|
|
11
4
|
import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
|
|
12
5
|
import {system} from '@workday/canvas-tokens-web';
|
|
13
6
|
|
|
@@ -51,11 +44,7 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
51
44
|
},
|
|
52
45
|
|
|
53
46
|
'&:hover, &.hover': {
|
|
54
|
-
[buttonStencil.vars.background]:
|
|
55
|
-
color: system.legacy.color.surface.transparent,
|
|
56
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
57
|
-
mixinValue: system.legacy.opacity.surface.hover,
|
|
58
|
-
}),
|
|
47
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
|
|
59
48
|
[systemIconStencil.vars.color]: cssVar(
|
|
60
49
|
buttonColorPropVars.hover.icon,
|
|
61
50
|
system.color.fg.default
|
|
@@ -63,11 +52,7 @@ export const toolbarDropdownButtonStencil = createStencil({
|
|
|
63
52
|
},
|
|
64
53
|
|
|
65
54
|
'&:active, &.active': {
|
|
66
|
-
[buttonStencil.vars.background]:
|
|
67
|
-
color: system.legacy.color.surface.transparent,
|
|
68
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
69
|
-
mixinValue: system.legacy.opacity.surface.pressed,
|
|
70
|
-
}),
|
|
55
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
|
|
71
56
|
[systemIconStencil.vars.color]: cssVar(
|
|
72
57
|
buttonColorPropVars.active.icon,
|
|
73
58
|
system.color.fg.strong
|
|
@@ -36,20 +36,12 @@ export const toolbarIconButtonStencil = createStencil({
|
|
|
36
36
|
},
|
|
37
37
|
|
|
38
38
|
'&:hover, &.hover': {
|
|
39
|
-
[buttonStencil.vars.background]:
|
|
40
|
-
color: system.legacy.color.surface.transparent,
|
|
41
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
42
|
-
mixinValue: system.legacy.opacity.surface.hover,
|
|
43
|
-
}),
|
|
39
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.hover.default,
|
|
44
40
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
45
41
|
},
|
|
46
42
|
|
|
47
43
|
'&:active, &.active': {
|
|
48
|
-
[buttonStencil.vars.background]:
|
|
49
|
-
color: system.legacy.color.surface.transparent,
|
|
50
|
-
mixinColor: system.legacy.color.surface.overlay.mixin,
|
|
51
|
-
mixinValue: system.legacy.opacity.surface.pressed,
|
|
52
|
-
}),
|
|
44
|
+
[buttonStencil.vars.background]: system.legacy.color.surface.overlay.pressed.default,
|
|
53
45
|
[systemIconStencil.vars.color]: system.color.fg.strong,
|
|
54
46
|
},
|
|
55
47
|
|
|
@@ -16,8 +16,8 @@ exports.bannerStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
16
16
|
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));}" },
|
|
17
17
|
modifiers: {
|
|
18
18
|
hasErrors: {
|
|
19
|
-
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-
|
|
20
|
-
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-
|
|
19
|
+
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);}" },
|
|
20
|
+
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));}" }
|
|
21
21
|
},
|
|
22
22
|
isSticky: {
|
|
23
23
|
true: { name: "3wgdf7", styles: "width:13.875rem;border-start-end-radius:0;border-end-end-radius:0;" },
|
|
@@ -10,7 +10,7 @@ const BaseButton_1 = require("./BaseButton");
|
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
11
|
const deleteButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: BaseButton_1.buttonStencil,
|
|
13
|
-
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-
|
|
13
|
+
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);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
16
|
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);}" }
|
|
@@ -10,11 +10,11 @@ const BaseButton_1 = require("./BaseButton");
|
|
|
10
10
|
const Button_1 = require("./Button");
|
|
11
11
|
const primaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
12
12
|
extends: BaseButton_1.buttonStencil,
|
|
13
|
-
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-
|
|
13
|
+
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);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
16
|
// Inverse Styles
|
|
17
|
-
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-
|
|
17
|
+
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);}" }
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
}, "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"}
|
|
@@ -14,16 +14,16 @@ exports.toolbarDropdownButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
14
14
|
chevron: 'toolbar-dropdown-btn-arrow',
|
|
15
15
|
customIcon: 'toolbar-dropdown-btn-custom-icon',
|
|
16
16
|
},
|
|
17
|
-
base: { name: "
|
|
17
|
+
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;}" },
|
|
18
18
|
modifiers: {
|
|
19
19
|
shouldMirrorIcon: {
|
|
20
|
-
true: { name: "
|
|
20
|
+
true: { name: "2bny6s", styles: "[data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
21
21
|
},
|
|
22
22
|
shouldMirrorIconInRTL: {
|
|
23
|
-
true: { name: "
|
|
23
|
+
true: { name: "28w59b", styles: "&:dir(rtl) [data-part=\"toolbar-dropdown-btn-custom-icon\"]{margin-inline-end:0;margin-inline-start:0.125rem;}" }
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
}, "toolbar-dropdown-button-
|
|
26
|
+
}, "toolbar-dropdown-button-71fd2f");
|
|
27
27
|
exports.ToolbarDropdownButton = (0, common_1.createComponent)('button')({
|
|
28
28
|
displayName: 'ToolbarDropdownButton',
|
|
29
29
|
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"}
|
|
@@ -33,7 +33,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
33
33
|
const BaseButton_1 = require("./BaseButton");
|
|
34
34
|
exports.toolbarIconButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
35
35
|
extends: BaseButton_1.buttonStencil,
|
|
36
|
-
base: { name: "
|
|
36
|
+
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)));}}" }
|
|
37
37
|
}, "toolbar-icon-button-8c40d9");
|
|
38
38
|
exports.ToolbarIconButton = (0, common_1.createComponent)('button')({
|
|
39
39
|
displayName: 'ToolbarIconButton',
|
|
@@ -19,14 +19,14 @@ exports.pillStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
19
19
|
vars: {
|
|
20
20
|
maxWidth: '',
|
|
21
21
|
},
|
|
22
|
-
base: { name: "
|
|
22
|
+
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;}" },
|
|
23
23
|
modifiers: {
|
|
24
24
|
variant: {
|
|
25
|
-
readOnly: { name: "
|
|
26
|
-
removable: { name: "
|
|
25
|
+
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);}" },
|
|
26
|
+
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;" }
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
}, "pill-
|
|
29
|
+
}, "pill-089441");
|
|
30
30
|
/**
|
|
31
31
|
* By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
|
|
32
32
|
* 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"}
|
|
@@ -24,20 +24,21 @@ exports.panelStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
|
24
24
|
expandedWidth: '',
|
|
25
25
|
collapsedWidth: '',
|
|
26
26
|
},
|
|
27
|
-
base: { name: "
|
|
27
|
+
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;" },
|
|
28
28
|
modifiers: {
|
|
29
29
|
variant: {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
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);" },
|
|
31
|
+
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)));" },
|
|
32
|
+
standard: { name: "1ujtij", styles: "background-color:var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));" }
|
|
32
33
|
},
|
|
33
34
|
expanded: {
|
|
34
|
-
expanded: { name: "
|
|
35
|
-
collapsed: { name: "
|
|
36
|
-
expanding: { name: "
|
|
37
|
-
collapsing: { name: "
|
|
35
|
+
expanded: { name: "2ii7mh", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
|
|
36
|
+
collapsed: { name: "31yo9a", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" },
|
|
37
|
+
expanding: { name: "3i6sk2", styles: "width:var(--expandedWidth-panel-bd0abc);max-width:var(--expandedWidth-panel-bd0abc);" },
|
|
38
|
+
collapsing: { name: "fh1bz", styles: "width:var(--collapsedWidth-panel-bd0abc);max-width:var(--collapsedWidth-panel-bd0abc);" }
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
|
-
}, "panel-
|
|
41
|
+
}, "panel-bd0abc");
|
|
41
42
|
exports.SidePanel = (0, common_1.createContainer)('section')({
|
|
42
43
|
displayName: 'SidePanel',
|
|
43
44
|
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
@@ -48,8 +49,10 @@ exports.SidePanel = (0, common_1.createContainer)('section')({
|
|
|
48
49
|
* It must be used within the `SidePanel` component as a child. For accessibility purposes,
|
|
49
50
|
* it should be the first focusable element in the panel.
|
|
50
51
|
*
|
|
51
|
-
* The button automatically receives `aria-controls
|
|
52
|
-
*
|
|
52
|
+
* The button automatically receives `aria-controls` (the panel's `id`), `aria-pressed` (`true`
|
|
53
|
+
* when the panel is collapsed), and `aria-describedby` (the heading's `id`) from the model.
|
|
54
|
+
* Provide a static `aria-label` for the button's accessible name — `aria-pressed` already
|
|
55
|
+
* conveys the state, so the label should not change between states.
|
|
53
56
|
*/
|
|
54
57
|
ToggleButton: SidePanelToggleButton_1.SidePanelToggleButton,
|
|
55
58
|
/**
|
|
@@ -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"}
|
|
@@ -9,11 +9,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
9
9
|
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
10
10
|
exports.sidePanelHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
11
11
|
extends: text_1.headingStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
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;}" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
origin: {
|
|
15
|
-
end: { name: "
|
|
16
|
-
start: { name: "
|
|
15
|
+
end: { name: "397xkx", styles: "padding-inline-start:4.25rem;" },
|
|
16
|
+
start: { name: "y9ngj", styles: "" }
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}, "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"}
|
|
@@ -10,38 +10,25 @@ const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
|
10
10
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
11
11
|
const useSidePanelModel_1 = require("./useSidePanelModel");
|
|
12
12
|
exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "1tc2s5", styles: "box-sizing:border-box;position:absolute;top:0.75rem;width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));:dir(rtl){transform:scaleX(-1);}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
state: {
|
|
16
|
-
collapsing: { name: "
|
|
17
|
-
collapsed: { name: "
|
|
18
|
-
expanded: { name: "
|
|
19
|
-
expanding: { name: "
|
|
16
|
+
collapsing: { name: "188d5g", styles: "margin:0;" },
|
|
17
|
+
collapsed: { name: "32hqvm", styles: "margin:auto;" },
|
|
18
|
+
expanded: { name: "1k9rz5", styles: "margin:0;" },
|
|
19
|
+
expanding: { name: "2joyzc", styles: "margin:0;" }
|
|
20
20
|
},
|
|
21
21
|
origin: {
|
|
22
|
-
start: { name: "
|
|
23
|
-
end: { name: "
|
|
22
|
+
start: { name: "2j8xn2", styles: "inset-inline-end:var(--cnvs-base-size-150, 0.75rem);" },
|
|
23
|
+
end: { name: "1pjclt", styles: "inset-inline-start:var(--cnvs-base-size-150, 0.75rem);" }
|
|
24
24
|
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
modifiers: { state: 'collapsing', origin: 'end' },
|
|
33
|
-
styles: { name: "1xw2ag", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
modifiers: { state: 'expanded', origin: 'end' },
|
|
37
|
-
styles: { name: "jlmhn", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
modifiers: { state: 'expanding', origin: 'end' },
|
|
41
|
-
styles: { name: "385gh9", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-base-size-150, 0.75rem);:dir(rtl){transform:scaleX(-1);inset-inline-end:var(--cnvs-base-size-150, 0.75rem);}" }
|
|
42
|
-
}
|
|
43
|
-
]
|
|
44
|
-
}, "side-panel-toggle-button-e78d70");
|
|
25
|
+
}
|
|
26
|
+
}, "side-panel-toggle-button-61b45f");
|
|
27
|
+
/**
|
|
28
|
+
* Adds the necessary ARIA attributes to the SidePanel's toggle button.
|
|
29
|
+
* This includes `aria-controls` pointing at the panel, `aria-pressed` to convey the collapsed
|
|
30
|
+
* state, and `aria-describedby` pointing at the panel's heading.
|
|
31
|
+
*/
|
|
45
32
|
exports.useSidePanelToggleButton = (0, common_1.createElemPropsHook)(useSidePanelModel_1.useSidePanelModel)(({ state }) => {
|
|
46
33
|
return {
|
|
47
34
|
'aria-controls': state.panelId,
|
|
@@ -53,9 +40,10 @@ exports.SidePanelToggleButton = (0, common_1.createSubcomponent)('button')({
|
|
|
53
40
|
displayName: 'SidePanel.ToggleButton',
|
|
54
41
|
modelHook: useSidePanelModel_1.useSidePanelModel,
|
|
55
42
|
elemPropsHook: exports.useSidePanelToggleButton,
|
|
56
|
-
})(({ variant = undefined, icon
|
|
43
|
+
})(({ variant = undefined, icon, tooltipTextExpand = 'Expand View', tooltipTextCollapse = 'Collapse View', tooltipProps, tooltipText, ...elemProps }, Element, model) => {
|
|
44
|
+
const sidePanelIcon = icon || (model.state.origin === 'start' ? canvas_system_icons_web_1.sidebarLeftIcon : canvas_system_icons_web_1.sidebarRightIcon);
|
|
57
45
|
return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { type: "muted", ...tooltipProps, title: tooltipText ||
|
|
58
|
-
(model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon:
|
|
46
|
+
(model.state.transitionState === 'expanded' ? tooltipTextCollapse : tooltipTextExpand), children: (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: sidePanelIcon, as: Element, variant: variant, "aria-label": tooltipText, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.sidePanelToggleButtonStencil)({
|
|
59
47
|
state: model.state.transitionState,
|
|
60
48
|
origin: model.state.origin,
|
|
61
49
|
})), onClick: (event) => {
|