@workday/canvas-kit-preview-react 16.2.0 → 16.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/commonjs/divider/lib/Divider.js +3 -3
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
- package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
- package/dist/commonjs/radio/lib/RadioText.js +3 -3
- package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
- package/dist/commonjs/radio/lib/hooks/useRadioModel.d.ts +38 -42
- package/dist/commonjs/radio/lib/hooks/useRadioModel.d.ts.map +1 -1
- package/dist/commonjs/radio/lib/hooks/useRadioModel.js +19 -21
- package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/commonjs/switch/lib/SwitchBackground.js +1 -1
- package/dist/commonjs/switch/lib/SwitchCircle.js +2 -2
- package/dist/commonjs/switch/lib/SwitchContainer.js +1 -1
- package/dist/commonjs/switch/lib/SwitchIcon.js +2 -2
- package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
- package/dist/commonjs/tabs/lib/TabsItem.js +3 -3
- package/dist/commonjs/tabs/lib/TabsList.js +8 -8
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
- package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/es6/divider/lib/Divider.js +3 -3
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/es6/radio/lib/RadioGroup.js +3 -3
- package/dist/es6/radio/lib/RadioLabel.js +1 -1
- package/dist/es6/radio/lib/RadioText.js +3 -3
- package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
- package/dist/es6/radio/lib/hooks/useRadioModel.d.ts +38 -42
- package/dist/es6/radio/lib/hooks/useRadioModel.d.ts.map +1 -1
- package/dist/es6/radio/lib/hooks/useRadioModel.js +19 -21
- package/dist/es6/side-panel/lib/SidePanel.js +7 -7
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/es6/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/es6/switch/lib/SwitchBackground.js +1 -1
- package/dist/es6/switch/lib/SwitchCircle.js +2 -2
- package/dist/es6/switch/lib/SwitchContainer.js +1 -1
- package/dist/es6/switch/lib/SwitchIcon.js +2 -2
- package/dist/es6/switch/lib/SwitchInput.js +3 -3
- package/dist/es6/tabs/lib/TabsItem.js +3 -3
- package/dist/es6/tabs/lib/TabsList.js +8 -8
- package/dist/es6/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
- package/radio/lib/hooks/useRadioModel.tsx +19 -21
|
@@ -16,7 +16,7 @@ const deprecatedVariantsMap = {
|
|
|
16
16
|
};
|
|
17
17
|
const statusIndicatorStencil = createStencil({
|
|
18
18
|
extends: cornerShapeStencil,
|
|
19
|
-
base: { name: "
|
|
19
|
+
base: { name: "3ywa1w", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));max-width:12.5rem;align-items:center;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));outline:0.0625rem solid transparent;--color-system-icon-c9acc3:currentColor;" },
|
|
20
20
|
modifiers: {
|
|
21
21
|
/**
|
|
22
22
|
* Defines the color of the `StatusIndicator`.
|
|
@@ -31,12 +31,12 @@ const statusIndicatorStencil = createStencil({
|
|
|
31
31
|
* @default 'neutral'
|
|
32
32
|
*/
|
|
33
33
|
variant: {
|
|
34
|
-
info: { name: "
|
|
35
|
-
positive: { name: "
|
|
36
|
-
caution: { name: "
|
|
37
|
-
critical: { name: "
|
|
38
|
-
neutral: { name: "
|
|
39
|
-
transparent: { name: "
|
|
34
|
+
info: { name: "2fk16", styles: "color:var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));background-color:var(--cnvs-sys-color-surface-info-strong, var(--cnvs-sys-color-bg-info-softer, oklch(0.6152 0.2108 256.1 / 0.11)));" },
|
|
35
|
+
positive: { name: "sg7p", styles: "color:var(--cnvs-sys-color-fg-success-strong, oklch(0.4463 0.1422 144.58 / 1));background-color:var(--cnvs-sys-color-surface-success-strong, oklch(0.8685 0.2814 143.77 / 0.15));" },
|
|
36
|
+
caution: { name: "20cz29", styles: "color:var(--cnvs-sys-color-fg-warning-strong, oklch(0.4824 0.1353 46.11 / 1));background-color:var(--cnvs-sys-color-surface-warning-strong, var(--cnvs-sys-color-static-amber-stronger, oklch(0.8864 0.1845 100.28 / 0.22)));" },
|
|
37
|
+
critical: { name: "1vmb4f", styles: "color:var(--cnvs-sys-color-fg-danger-strong, var(--cnvs-sys-color-fg-critical-strong, oklch(0.4517 0.1847 28.2 / 1)));background-color:var(--cnvs-sys-color-surface-danger-strong, oklch(0.6434 0.2428 30.17 / 0.1));" },
|
|
38
|
+
neutral: { name: "43aikx", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09)));" },
|
|
39
|
+
transparent: { name: "3a0v1l", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-surface-contrast-default, var(--cnvs-sys-color-bg-contrast-default, oklch(0.0969 0 0 / 0.84)));" }
|
|
40
40
|
},
|
|
41
41
|
/**
|
|
42
42
|
* Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
|
|
@@ -49,8 +49,8 @@ const statusIndicatorStencil = createStencil({
|
|
|
49
49
|
*
|
|
50
50
|
*/
|
|
51
51
|
emphasis: {
|
|
52
|
-
low: { name: "
|
|
53
|
-
high: { name: "
|
|
52
|
+
low: { name: "zooso", styles: "" },
|
|
53
|
+
high: { name: "1zcohd", styles: "" }
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
compound: [
|
|
@@ -59,35 +59,35 @@ const statusIndicatorStencil = createStencil({
|
|
|
59
59
|
variant: 'info',
|
|
60
60
|
emphasis: 'high',
|
|
61
61
|
},
|
|
62
|
-
styles: { name: "
|
|
62
|
+
styles: { name: "26fak8", styles: "background-color:var(--cnvs-sys-color-accent-info, var(--cnvs-sys-color-bg-info-default, oklch(0.5198 0.1782 256.11 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
modifiers: {
|
|
66
66
|
variant: 'positive',
|
|
67
67
|
emphasis: 'high',
|
|
68
68
|
},
|
|
69
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "3nup98", styles: "background-color:var(--cnvs-sys-color-accent-success, var(--cnvs-sys-color-bg-positive-default, oklch(0.5069 0.1569 145.56 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
72
|
modifiers: {
|
|
73
73
|
variant: 'caution',
|
|
74
74
|
emphasis: 'high',
|
|
75
75
|
},
|
|
76
|
-
styles: { name: "
|
|
76
|
+
styles: { name: "1gsrd8", styles: "background-color:var(--cnvs-sys-color-accent-warning, oklch(0.7909 0.1711 70.15 / 1));color:var(--cnvs-sys-color-fg-contrast-default);" }
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
modifiers: {
|
|
80
80
|
variant: 'critical',
|
|
81
81
|
emphasis: 'high',
|
|
82
82
|
},
|
|
83
|
-
styles: { name: "
|
|
83
|
+
styles: { name: "p0la8", styles: "background-color:var(--cnvs-sys-color-accent-danger, var(--cnvs-sys-color-bg-critical-default, oklch(0.5342 0.2172 29.53 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
86
|
modifiers: {
|
|
87
87
|
variant: 'neutral',
|
|
88
88
|
emphasis: 'high',
|
|
89
89
|
},
|
|
90
|
-
styles: { name: "
|
|
90
|
+
styles: { name: "2cmznl", styles: "background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));color:var(--cnvs-sys-color-fg-inverse);" }
|
|
91
91
|
}
|
|
92
92
|
],
|
|
93
93
|
defaultModifiers: {
|
|
@@ -6,7 +6,7 @@ import { createStencil } from '@workday/canvas-kit-styling';
|
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
export const statusIndicatorLabelStencil = createStencil({
|
|
8
8
|
extends: textStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "42sx9d", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
|
|
10
10
|
defaultModifiers: { typeLevel: 'subtext.medium' }
|
|
11
11
|
}, "status-indicator-label-528f53");
|
|
12
12
|
export const StatusIndicatorLabel = createComponent('span')({
|
|
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchBackgroundStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "knstq", styles: "box-sizing:border-box;position:absolute;display:flex;align-items:center;pointer-events:none;border:0.0625rem solid transparent;height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:0 0.0625rem;transition:background-color 200ms ease;background-color:var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));" }
|
|
7
7
|
}, "switch-background-fbb710");
|
|
8
8
|
export const SwitchBackground = createComponent('div')({
|
|
9
9
|
displayName: 'SwitchBackground',
|
|
@@ -3,10 +3,10 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchCircleStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "95mk6", styles: "box-sizing:border-box;width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid transparent;box-shadow:var(--cnvs-sys-depth-1);transition:transform 150ms ease;pointer-events:none;background-color:var(--cnvs-sys-color-fg-inverse);transform:translateX(0);" },
|
|
7
7
|
modifiers: {
|
|
8
8
|
checked: {
|
|
9
|
-
true: { name: "
|
|
9
|
+
true: { name: "281mh3", styles: "transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" }
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
}, "switch-circle-f808e0");
|
|
@@ -3,7 +3,7 @@ import { createComponent } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchContainerStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "1hsufm", styles: "box-sizing:border-box;position:relative;margin-block-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));height:var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));width:2.125rem;" }
|
|
7
7
|
}, "switch-container-f03251");
|
|
8
8
|
export const SwitchContainer = createComponent('div')({
|
|
9
9
|
displayName: 'SwitchContainer',
|
|
@@ -5,10 +5,10 @@ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling
|
|
|
5
5
|
import { checkSmallIcon, xSmallIcon } from '@workday/canvas-system-icons-web';
|
|
6
6
|
import { component, system } from '@workday/canvas-tokens-web';
|
|
7
7
|
export const switchIconStencil = createStencil({
|
|
8
|
-
base: { name: "
|
|
8
|
+
base: { name: "cqiia", styles: "box-sizing:border-box;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-inverse);--size-svg-bca693:var(--cnvs-component-system-icon-size-sm, 1.125rem);position:absolute;transition:transform 0ms;pointer-events:none;transform:translateX(0.875rem);:dir(rtl){transform:translateX(-0.875rem);}" },
|
|
9
9
|
modifiers: {
|
|
10
10
|
checked: {
|
|
11
|
-
true: { name: "
|
|
11
|
+
true: { name: "3bms19", styles: "transform:translateX(-0.125rem);:dir(rtl){transform:translateX(0.125rem);}" }
|
|
12
12
|
}
|
|
13
13
|
}
|
|
14
14
|
}, "switch-icon-8fcbbf");
|
|
@@ -3,11 +3,11 @@ import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
4
4
|
import { base, system } from '@workday/canvas-tokens-web';
|
|
5
5
|
export const switchInputStencil = createStencil({
|
|
6
|
-
base: { name: "
|
|
6
|
+
base: { name: "29cjo0", styles: "box-sizing:border-box;display:flex;position:absolute;margin:0;height:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));width:2.125rem;border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));opacity:0;cursor:pointer;& ~ div:first-of-type{outline-offset:0.125rem;}&:checked, &.checked{& ~ div:first-of-type{background-color:var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));}&:disabled, &.disabled{& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}}&:disabled, &.disabled{cursor:not-allowed;& ~ div:first-of-type{opacity:var(--cnvs-sys-opacity-disabled);}}&:focus-visible, &:focus, &.focus{outline:none;& ~ div:first-of-type{outline:0.0625rem solid 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-brand-common-focus-outline, rgba(8,117,225,1));}}" },
|
|
7
7
|
modifiers: {
|
|
8
8
|
error: {
|
|
9
|
-
error: { name: "
|
|
10
|
-
caution: { name: "
|
|
9
|
+
error: { name: "w9njs", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),\n 0 0 0 0.3125rem transparent;}" },
|
|
10
|
+
caution: { name: "ta6kw", styles: "& ~ div:first-of-type{box-shadow:\n 0 0 0 var(--cnvs-base-size-25, 0.125rem) var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 var(--cnvs-base-size-50, 0.25rem) var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 0.3125rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}" }
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}, "switch-input-cce660");
|
|
@@ -10,11 +10,11 @@ import { base, component, system } from '@workday/canvas-tokens-web';
|
|
|
10
10
|
import { useTabsModel } from './useTabsModel';
|
|
11
11
|
const tabItemStencil = createStencil({
|
|
12
12
|
extends: cornerShapeStencil,
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "28j3tr", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);position:relative;transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-base-size-75, 0.375rem);}&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color: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-selected=true]{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover, &:focus-visible, &.focus{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
|
-
filled: { name: "
|
|
17
|
-
outlined: { name: "
|
|
16
|
+
filled: { name: "zmbgb", styles: "border:0.0625rem solid transparent;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));border-color:var(--cnvs-sys-color-border-input-default);&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:focus-visible, &.focus{border-width:0.125rem;margin-inline:-0.0625rem;}@media (forced-colors: active){outline:0.125rem solid ButtonBorder;}}" },
|
|
17
|
+
outlined: { name: "35p5ep", 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)));margin-inline:0.0625rem;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));}&:focus-visible, &.focus{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);&:hover, &.hover, &:focus-visible, &.focus{border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}}" }
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
}, "tab-item-619ae4");
|
|
@@ -105,20 +105,20 @@ export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHoo
|
|
|
105
105
|
};
|
|
106
106
|
}), useOverflowListMeasure, useTabsListResetCursorOnBlur);
|
|
107
107
|
export const tabsListStencil = createStencil({
|
|
108
|
-
base: { name: "
|
|
108
|
+
base: { name: "1faums", styles: "box-sizing:border-box;display:flex;position:relative;min-width:0;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
|
|
109
109
|
modifiers: {
|
|
110
110
|
modality: {
|
|
111
|
-
touch: { name: "
|
|
112
|
-
mouse: { name: "
|
|
113
|
-
pen: { name: "
|
|
111
|
+
touch: { name: "2sw18f", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
|
|
112
|
+
mouse: { name: "30yoqx", styles: "" },
|
|
113
|
+
pen: { name: "40h4ao", styles: "" }
|
|
114
114
|
},
|
|
115
115
|
isDragging: {
|
|
116
|
-
true: { name: "
|
|
117
|
-
false: { name: "
|
|
116
|
+
true: { name: "3ye4hq", styles: "" },
|
|
117
|
+
false: { name: "mg25l", styles: "" }
|
|
118
118
|
},
|
|
119
119
|
direction: {
|
|
120
|
-
left: { name: "
|
|
121
|
-
right: { name: "
|
|
120
|
+
left: { name: "q5z9t", styles: "" },
|
|
121
|
+
right: { name: "158c0p", styles: "" }
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
}, "tabs-list-8b7545");
|
|
@@ -11,7 +11,7 @@ import { TABS_OVERFLOW_BUTTON_ID, useTabsModel } from './useTabsModel';
|
|
|
11
11
|
// Re-export for consumers who may need to reference the overflow button ID
|
|
12
12
|
export { TABS_OVERFLOW_BUTTON_ID } from './useTabsModel';
|
|
13
13
|
const tabsOverflowButtonStencil = createStencil({
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "2zg7ic", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
|
|
15
15
|
}, "tabs-overflow-button-5c3573");
|
|
16
16
|
/**
|
|
17
17
|
* Measures the overflow button and reports its size to the model for overflow calculation.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '16.2.
|
|
1
|
+
export const version = '16.2.3';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "16.2.
|
|
3
|
+
"version": "16.2.3",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^16.2.
|
|
52
|
-
"@workday/canvas-kit-styling": "^16.2.
|
|
51
|
+
"@workday/canvas-kit-react": "^16.2.3",
|
|
52
|
+
"@workday/canvas-kit-styling": "^16.2.3",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
54
54
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
55
55
|
"@workday/design-assets-types": "^0.3.0"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react-hook-form": "7.36.1",
|
|
61
61
|
"yup": "^0.32.11"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "dd5a27ab062642ac115722808e063150f7866115"
|
|
64
64
|
}
|
|
@@ -5,29 +5,27 @@ import {createModelHook} from '@workday/canvas-kit-react/common';
|
|
|
5
5
|
export const useRadioModel = createModelHook({
|
|
6
6
|
defaultConfig: {
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
8
|
+
* The id of hint or error text associated with each radio.
|
|
9
|
+
*
|
|
10
|
+
* Do not set this when radios are wrapped in `FormFieldGroup.Input`. `FormFieldGroup.Input`
|
|
11
|
+
* writes `aria-describedby="hint-{id}"` on each radio, and that value overrides
|
|
12
|
+
* `aria-describedby` set on `RadioGroup`. Put the message in `FormFieldGroup.Hint`.
|
|
10
13
|
*
|
|
11
14
|
* ```tsx
|
|
12
|
-
* <
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
|
|
27
|
-
* <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
|
|
28
|
-
* <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
|
|
29
|
-
* </RadioGroup>
|
|
30
|
-
* </FormField>
|
|
15
|
+
* <FormFieldGroup error="caution">
|
|
16
|
+
* <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
|
|
17
|
+
* <FormFieldGroup.Field>
|
|
18
|
+
* <FormFieldGroup.List as={RadioGroup} name="crust" value={value} onChange={handleChange}>
|
|
19
|
+
* <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
|
|
20
|
+
* Deep dish
|
|
21
|
+
* </FormFieldGroup.Input>
|
|
22
|
+
* <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
|
|
23
|
+
* Thin
|
|
24
|
+
* </FormFieldGroup.Input>
|
|
25
|
+
* </FormFieldGroup.List>
|
|
26
|
+
* <FormFieldGroup.Hint>Deep dish is an extra $2.99.</FormFieldGroup.Hint>
|
|
27
|
+
* </FormFieldGroup.Field>
|
|
28
|
+
* </FormFieldGroup>
|
|
31
29
|
* ```
|
|
32
30
|
*/
|
|
33
31
|
'aria-describedby': undefined as string | undefined,
|