@workday/canvas-kit-preview-react 14.0.0-alpha.1225-next.0 → 14.0.0-alpha.1229-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/avatar/lib/Avatar.js +12 -12
- package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
- package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
- package/dist/commonjs/avatar/lib/BaseAvatar.js +12 -12
- 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 +1 -1
- package/dist/commonjs/information-highlight/lib/InformationHighlight.js +7 -7
- package/dist/commonjs/information-highlight/lib/parts/Body.js +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Heading.js +1 -1
- package/dist/commonjs/information-highlight/lib/parts/Link.js +1 -1
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/commonjs/multi-select/index.d.ts +3 -3
- package/dist/commonjs/multi-select/index.d.ts.map +1 -1
- package/dist/commonjs/multi-select/index.js +17 -7
- package/dist/commonjs/multi-select/lib/MultiSelect.d.ts +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/commonjs/multi-select/lib/MultiSelectItem.d.ts +1 -1
- package/dist/commonjs/pill/index.d.ts +5 -5
- package/dist/commonjs/pill/index.d.ts.map +1 -1
- package/dist/commonjs/pill/index.js +5 -11
- package/dist/commonjs/pill/lib/Pill.js +3 -3
- package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
- package/dist/commonjs/pill/lib/PillCount.js +1 -1
- package/dist/commonjs/pill/lib/PillIcon.js +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
- package/dist/commonjs/pill/lib/PillLabel.js +1 -1
- 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 +4 -4
- package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
- package/dist/commonjs/segmented-control/index.d.ts +1 -0
- package/dist/commonjs/segmented-control/index.d.ts.map +1 -1
- package/dist/commonjs/segmented-control/index.js +1 -0
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +16 -16
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +4 -4
- 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/index.d.ts +1 -1
- package/dist/commonjs/status-indicator/index.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/index.js +15 -3
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +0 -4
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +15 -19
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/commonjs/text-area/lib/TextArea.d.ts +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/commonjs/text-area/lib/TextAreaField.js +4 -36
- package/dist/commonjs/text-input/lib/TextInput.d.ts +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +7 -16
- package/dist/commonjs/version.js +1 -1
- package/dist/es6/avatar/lib/Avatar.js +12 -12
- package/dist/es6/avatar/lib/AvatarImage.js +1 -1
- package/dist/es6/avatar/lib/AvatarName.js +1 -1
- package/dist/es6/avatar/lib/BaseAvatar.js +12 -12
- 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 +1 -1
- package/dist/es6/information-highlight/lib/InformationHighlight.js +7 -7
- package/dist/es6/information-highlight/lib/parts/Body.js +1 -1
- package/dist/es6/information-highlight/lib/parts/Heading.js +1 -1
- package/dist/es6/information-highlight/lib/parts/Link.js +1 -1
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/es6/multi-select/index.d.ts +3 -3
- package/dist/es6/multi-select/index.d.ts.map +1 -1
- package/dist/es6/multi-select/index.js +3 -3
- package/dist/es6/multi-select/lib/MultiSelect.d.ts +2 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/es6/multi-select/lib/MultiSelectItem.d.ts +1 -1
- package/dist/es6/pill/index.d.ts +5 -5
- package/dist/es6/pill/index.d.ts.map +1 -1
- package/dist/es6/pill/index.js +5 -5
- package/dist/es6/pill/lib/Pill.js +3 -3
- package/dist/es6/pill/lib/PillAvatar.js +1 -1
- package/dist/es6/pill/lib/PillCount.js +1 -1
- package/dist/es6/pill/lib/PillIcon.js +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +1 -1
- package/dist/es6/pill/lib/PillLabel.js +1 -1
- 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 +4 -4
- package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
- package/dist/es6/segmented-control/index.d.ts +1 -0
- package/dist/es6/segmented-control/index.d.ts.map +1 -1
- package/dist/es6/segmented-control/index.js +1 -0
- package/dist/es6/segmented-control/lib/SegmentedControlItem.js +16 -16
- package/dist/es6/segmented-control/lib/SegmentedControlList.js +4 -4
- 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/index.d.ts +1 -1
- package/dist/es6/status-indicator/index.d.ts.map +1 -1
- package/dist/es6/status-indicator/index.js +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +0 -4
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicator.js +15 -19
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/es6/text-area/lib/TextArea.d.ts +1 -1
- package/dist/es6/text-area/lib/TextAreaField.d.ts.map +1 -1
- package/dist/es6/text-area/lib/TextAreaField.js +5 -37
- package/dist/es6/text-input/lib/TextInput.d.ts +1 -1
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +1 -1
- package/dist/es6/text-input/lib/TextInputField.js +10 -19
- package/dist/es6/version.js +1 -1
- package/multi-select/index.ts +3 -3
- package/package.json +4 -4
- package/pill/index.ts +5 -5
- package/segmented-control/index.ts +1 -0
- package/status-indicator/index.ts +1 -5
- package/status-indicator/lib/StatusIndicator.tsx +0 -4
- package/text-area/lib/TextAreaField.tsx +7 -60
- package/text-input/lib/TextInputField.tsx +8 -55
|
@@ -11,55 +11,55 @@ import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
|
|
|
11
11
|
import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
|
|
12
12
|
export const segmentedControlItemStencil = createStencil({
|
|
13
13
|
extends: buttonStencil,
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "3679ke", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-65cb05:var(--cnvs-sys-shape-x1);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-65cb05:var(--cnvs-sys-color-bg-default);--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-input-default);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
|
|
15
15
|
modifiers: {
|
|
16
16
|
size: {
|
|
17
|
-
large: { name: "
|
|
18
|
-
medium: { name: "
|
|
19
|
-
small: { name: "
|
|
17
|
+
large: { name: "180y6p", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
|
|
18
|
+
medium: { name: "1jlqn9", styles: "height:var(--cnvs-sys-space-x8);" },
|
|
19
|
+
small: { name: "2vlzex", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
|
|
20
20
|
},
|
|
21
21
|
variant: {
|
|
22
|
-
iconOnly: { name: "
|
|
23
|
-
textOnly: { name: "
|
|
24
|
-
iconWithText: { name: "
|
|
22
|
+
iconOnly: { name: "wns38", styles: "" },
|
|
23
|
+
textOnly: { name: "4arglb", styles: "" },
|
|
24
|
+
iconWithText: { name: "2bhroa", styles: "" }
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
compound: [
|
|
28
28
|
{
|
|
29
29
|
modifiers: { size: 'large', variant: 'iconOnly' },
|
|
30
|
-
styles: { name: "
|
|
30
|
+
styles: { name: "1i51ri", styles: "min-width:var(--cnvs-sys-space-x10);" }
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
modifiers: { size: 'large', variant: 'iconWithText' },
|
|
34
|
-
styles: { name: "
|
|
34
|
+
styles: { name: "1cey44", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
modifiers: { size: 'large', variant: 'textOnly' },
|
|
38
|
-
styles: { name: "
|
|
38
|
+
styles: { name: "16bgxe", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
modifiers: { size: 'medium', variant: 'iconOnly' },
|
|
42
|
-
styles: { name: "
|
|
42
|
+
styles: { name: "3r1yyk", styles: "min-width:var(--cnvs-sys-space-x8);" }
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
modifiers: { size: 'medium', variant: 'iconWithText' },
|
|
46
|
-
styles: { name: "
|
|
46
|
+
styles: { name: "4ewdci", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
modifiers: { size: 'medium', variant: 'textOnly' },
|
|
50
|
-
styles: { name: "
|
|
50
|
+
styles: { name: "6xu5u", styles: "padding-inline:1.25rem;" }
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
modifiers: { size: 'small', variant: 'iconOnly' },
|
|
54
|
-
styles: { name: "
|
|
54
|
+
styles: { name: "2onoi6", styles: "min-width:var(--cnvs-sys-space-x6);" }
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
modifiers: { size: 'small', variant: 'iconWithText' },
|
|
58
|
-
styles: { name: "
|
|
58
|
+
styles: { name: "r0qh6", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
modifiers: { size: 'small', variant: 'textOnly' },
|
|
62
|
-
styles: { name: "
|
|
62
|
+
styles: { name: "2n3r2j", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
|
|
63
63
|
}
|
|
64
64
|
]
|
|
65
65
|
}, "segmented-control-item-bc271f");
|
|
@@ -8,14 +8,14 @@ export const segmentedControlListStencil = createStencil({
|
|
|
8
8
|
vars: {
|
|
9
9
|
items: '',
|
|
10
10
|
},
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "2k83lh", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-bg-alt-soft);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);border-radius:var(--cnvs-sys-shape-x2);padding:0.1875rem;grid-gap:var(--cnvs-sys-space-x2);" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
disabled: {
|
|
14
|
-
true: { name: "
|
|
14
|
+
true: { name: "3a4jg9", styles: "opacity:var(--cnvs-sys-opacity-disabled);" }
|
|
15
15
|
},
|
|
16
16
|
orientation: {
|
|
17
|
-
vertical: { name: "
|
|
18
|
-
horizontal: { name: "
|
|
17
|
+
vertical: { name: "2kdz8e", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-0a747c), 1fr);" },
|
|
18
|
+
horizontal: { name: "w1wlk", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-0a747c), 1fr);" }
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}, "segmented-control-list-0a747c");
|
|
@@ -10,19 +10,19 @@ export const panelStencil = createStencil({
|
|
|
10
10
|
expandedWidth: '',
|
|
11
11
|
collapsedWidth: '',
|
|
12
12
|
},
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "1c8dwt", 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;" },
|
|
14
14
|
modifiers: {
|
|
15
15
|
variant: {
|
|
16
|
-
alternate: { name: "
|
|
17
|
-
standard: { name: "
|
|
16
|
+
alternate: { name: "1w7bbb", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
17
|
+
standard: { name: "2mxhta", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
18
18
|
},
|
|
19
19
|
expanded: {
|
|
20
|
-
true: { name: "
|
|
21
|
-
false: { name: "
|
|
20
|
+
true: { name: "1qelug", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
|
|
21
|
+
false: { name: "5cf5l", styles: "width:var(--collapsedWidth-panel-bd9477);max-width:var(--collapsedWidth-panel-bd9477);" }
|
|
22
22
|
},
|
|
23
23
|
touched: {
|
|
24
|
-
true: { name: "
|
|
25
|
-
false: { name: "
|
|
24
|
+
true: { name: "35vtxo", styles: "" },
|
|
25
|
+
false: { name: "1ny4j1", styles: "animation:none;" }
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
}, "panel-bd9477");
|
|
@@ -8,35 +8,35 @@ import { SidePanelContext } from './hooks';
|
|
|
8
8
|
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
9
9
|
import { system } from '@workday/canvas-tokens-web';
|
|
10
10
|
export const sidePanelToggleButtonStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "3dzorg", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
state: {
|
|
14
|
-
collapsing: { name: "
|
|
15
|
-
collapsed: { name: "
|
|
16
|
-
expanded: { name: "
|
|
17
|
-
expanding: { name: "
|
|
14
|
+
collapsing: { name: "2pr9cr", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
collapsed: { name: "16lvbe", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
16
|
+
expanded: { name: "zof2j", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
17
|
+
expanding: { name: "2c1h9e", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
|
|
18
18
|
},
|
|
19
19
|
origin: {
|
|
20
|
-
left: { name: "
|
|
21
|
-
right: { name: "
|
|
20
|
+
left: { name: "4eauxi", styles: "" },
|
|
21
|
+
right: { name: "3g9ptg", styles: "" }
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
compound: [
|
|
25
25
|
{
|
|
26
26
|
modifiers: { state: 'collapsed', origin: 'right' },
|
|
27
|
-
styles: { name: "
|
|
27
|
+
styles: { name: "1929f1", styles: "transform:scaleX(-1);" }
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
modifiers: { state: 'collapsing', origin: 'right' },
|
|
31
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "tm0zx", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
modifiers: { state: 'expanded', origin: 'right' },
|
|
35
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "3xlary", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
modifiers: { state: 'expanding', origin: 'right' },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "2ksv40", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "side-panel-toggle-button-da8098");
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './lib/StatusIndicator';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './lib/StatusIndicator';
|
|
@@ -78,13 +78,9 @@ declare const statusIndicatorStencil: import("@workday/canvas-kit-styling").Sten
|
|
|
78
78
|
*
|
|
79
79
|
* @default 'low'
|
|
80
80
|
*
|
|
81
|
-
* @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
|
|
82
81
|
*/
|
|
83
82
|
emphasis: {
|
|
84
83
|
low: {};
|
|
85
|
-
/**
|
|
86
|
-
* @deprecated This is being deprecated and will be removed in a future release.
|
|
87
|
-
*/
|
|
88
84
|
high: {};
|
|
89
85
|
};
|
|
90
86
|
}, {}, {}, never, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAEvF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,IAAI,GACJ,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BH
|
|
1
|
+
{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAEvF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,IAAI,GACJ,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BH;;;;;;;;;OASG;;;;;wBA8DL,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}
|
|
@@ -15,7 +15,7 @@ const deprecatedVariantsMap = {
|
|
|
15
15
|
gray: 'neutral',
|
|
16
16
|
};
|
|
17
17
|
const statusIndicatorStencil = createStencil({
|
|
18
|
-
base: { name: "
|
|
18
|
+
base: { name: "3730bh", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-round);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);outline:0.0625rem solid transparent;--color-system-icon-3a4847:currentColor;" },
|
|
19
19
|
modifiers: {
|
|
20
20
|
/**
|
|
21
21
|
* Defines the color of the `StatusIndicator`.
|
|
@@ -30,13 +30,13 @@ const statusIndicatorStencil = createStencil({
|
|
|
30
30
|
* @default 'neutral'
|
|
31
31
|
*/
|
|
32
32
|
variant: {
|
|
33
|
-
info: { name: "
|
|
34
|
-
positive: { name: "
|
|
35
|
-
caution: { name: "
|
|
36
|
-
critical: { name: "
|
|
37
|
-
neutral: { name: "
|
|
38
|
-
ai: { name: "
|
|
39
|
-
transparent: { name: "
|
|
33
|
+
info: { name: "153dpf", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
|
|
34
|
+
positive: { name: "1fd89f", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
|
|
35
|
+
caution: { name: "3vr36r", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
|
|
36
|
+
critical: { name: "36oht4", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
|
|
37
|
+
neutral: { name: "3bs07z", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
|
|
38
|
+
ai: { name: "3qkt1t", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
|
|
39
|
+
transparent: { name: "49stu6", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
|
|
40
40
|
},
|
|
41
41
|
/**
|
|
42
42
|
* Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
|
|
@@ -47,14 +47,10 @@ const statusIndicatorStencil = createStencil({
|
|
|
47
47
|
*
|
|
48
48
|
* @default 'low'
|
|
49
49
|
*
|
|
50
|
-
* @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
|
|
51
50
|
*/
|
|
52
51
|
emphasis: {
|
|
53
|
-
low: { name: "
|
|
54
|
-
|
|
55
|
-
* @deprecated This is being deprecated and will be removed in a future release.
|
|
56
|
-
*/
|
|
57
|
-
high: { name: "3jd99", styles: "" }
|
|
52
|
+
low: { name: "1812pz", styles: "" },
|
|
53
|
+
high: { name: "3xqsz5", styles: "" }
|
|
58
54
|
}
|
|
59
55
|
},
|
|
60
56
|
compound: [
|
|
@@ -63,35 +59,35 @@ const statusIndicatorStencil = createStencil({
|
|
|
63
59
|
variant: 'info',
|
|
64
60
|
emphasis: 'high',
|
|
65
61
|
},
|
|
66
|
-
styles: { name: "
|
|
62
|
+
styles: { name: "hdp3c", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
|
|
67
63
|
},
|
|
68
64
|
{
|
|
69
65
|
modifiers: {
|
|
70
66
|
variant: 'positive',
|
|
71
67
|
emphasis: 'high',
|
|
72
68
|
},
|
|
73
|
-
styles: { name: "
|
|
69
|
+
styles: { name: "39m3l1", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
|
|
74
70
|
},
|
|
75
71
|
{
|
|
76
72
|
modifiers: {
|
|
77
73
|
variant: 'caution',
|
|
78
74
|
emphasis: 'high',
|
|
79
75
|
},
|
|
80
|
-
styles: { name: "
|
|
76
|
+
styles: { name: "1ftcta", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
|
|
81
77
|
},
|
|
82
78
|
{
|
|
83
79
|
modifiers: {
|
|
84
80
|
variant: 'critical',
|
|
85
81
|
emphasis: 'high',
|
|
86
82
|
},
|
|
87
|
-
styles: { name: "
|
|
83
|
+
styles: { name: "2rbgb", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
|
|
88
84
|
},
|
|
89
85
|
{
|
|
90
86
|
modifiers: {
|
|
91
87
|
variant: 'neutral',
|
|
92
88
|
emphasis: 'high',
|
|
93
89
|
},
|
|
94
|
-
styles: { name: "
|
|
90
|
+
styles: { name: "1rudfa", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
|
|
95
91
|
}
|
|
96
92
|
],
|
|
97
93
|
defaultModifiers: {
|
|
@@ -6,7 +6,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
const statusIndicatorLabelStencil = createStencil({
|
|
8
8
|
extends: textStencil,
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "npx9v", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
|
|
10
10
|
defaultModifiers: { typeLevel: 'subtext.large' }
|
|
11
11
|
}, "status-indicator-label-63258e");
|
|
12
12
|
export const StatusIndicatorLabel = createComponent('span')({
|
|
@@ -45,7 +45,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
|
|
|
45
45
|
};
|
|
46
46
|
events: {};
|
|
47
47
|
}>;
|
|
48
|
-
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("@workday/canvas-kit-react/form-field
|
|
48
|
+
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("@workday/canvas-kit-react/form-field").FormFieldLabelProps, {
|
|
49
49
|
state: {
|
|
50
50
|
id: string;
|
|
51
51
|
error: "error" | "alert" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;EAexB,CAAC"}
|
|
@@ -1,32 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
4
3
|
import { FormField } from '@workday/canvas-kit-react/form-field';
|
|
5
4
|
import { useTextInputModel } from '@workday/canvas-kit-preview-react/text-input';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
'&::webkit-resizer': {
|
|
10
|
-
display: 'none',
|
|
11
|
-
},
|
|
12
|
-
'&::placeholder': {
|
|
13
|
-
color: inputColors.placeholder,
|
|
14
|
-
},
|
|
15
|
-
'&:hover': {
|
|
16
|
-
borderColor: inputColors.hoverBorder,
|
|
17
|
-
},
|
|
18
|
-
'&:focus:not([disabled])': {
|
|
19
|
-
outline: 'none',
|
|
20
|
-
},
|
|
21
|
-
'&:disabled': {
|
|
22
|
-
backgroundColor: inputColors.disabled.background,
|
|
23
|
-
borderColor: colors.licorice100,
|
|
24
|
-
color: inputColors.disabled.text,
|
|
25
|
-
'&::placeholder': {
|
|
26
|
-
color: inputColors.disabled.text,
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
};
|
|
5
|
+
import { TextArea } from '@workday/canvas-kit-react/text-area';
|
|
6
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
7
|
+
import { cssVar } from '@workday/canvas-kit-styling';
|
|
30
8
|
/**
|
|
31
9
|
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead.
|
|
32
10
|
*/
|
|
@@ -34,15 +12,5 @@ export const TextAreaField = createSubcomponent('textarea')({
|
|
|
34
12
|
displayName: 'TextArea.Field',
|
|
35
13
|
modelHook: useTextInputModel,
|
|
36
14
|
})(({ ...elemProps }, Element, model) => {
|
|
37
|
-
|
|
38
|
-
const errorRing = useThemedRing('error');
|
|
39
|
-
const focusStyles = model.state.error === 'error'
|
|
40
|
-
? errorRing
|
|
41
|
-
: {
|
|
42
|
-
'&:focus:not([disabled])': {
|
|
43
|
-
borderColor: theme.canvas.palette.common.focusOutline,
|
|
44
|
-
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
return (_jsx(FormField.Input, { as: Element, ...type.levels.subtext.large, cs: [baseStyles, focusStyles], ...elemProps, border: `1px solid ${inputColors.border}`, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: space.xxs, margin: 0 }));
|
|
15
|
+
return (_jsx(FormField.Input, { as: TextArea, display: "block", minHeight: 64, minWidth: 280, padding: cssVar(system.space.x2), margin: 0, ...elemProps }));
|
|
48
16
|
});
|
|
@@ -53,7 +53,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
|
|
|
53
53
|
};
|
|
54
54
|
events: {};
|
|
55
55
|
}>;
|
|
56
|
-
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("@workday/canvas-kit-react/form-field
|
|
56
|
+
Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("@workday/canvas-kit-react/form-field").FormFieldLabelProps, {
|
|
57
57
|
state: {
|
|
58
58
|
id: string;
|
|
59
59
|
error: "error" | "alert" | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAwBA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;EAWzB,CAAC"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createSubcomponent
|
|
2
|
+
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { FormField } from '@workday/canvas-kit-react/form-field';
|
|
4
|
-
import { brand
|
|
5
|
-
import { createStencil
|
|
4
|
+
import { brand } from '@workday/canvas-tokens-web';
|
|
5
|
+
import { createStencil } from '@workday/canvas-kit-styling';
|
|
6
6
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
7
7
|
import { useTextInputField, useTextInputModel } from './hooks';
|
|
8
|
+
import { TextInput, textInputStencil } from '@workday/canvas-kit-react/text-input';
|
|
8
9
|
const textInputFieldStencil = createStencil({
|
|
9
|
-
|
|
10
|
+
extends: textInputStencil,
|
|
11
|
+
base: { name: "1h6l82", styles: "box-sizing:border-box;" },
|
|
10
12
|
modifiers: {
|
|
11
13
|
error: {
|
|
12
|
-
error: { name: "
|
|
13
|
-
alert: { name: "
|
|
14
|
+
error: { name: "1y589u", styles: "background-color:var(--cnvs-brand-error-lightest);" },
|
|
15
|
+
alert: { name: "vll5z", styles: "background-color:var(--cnvs-brand-alert-lightest);" }
|
|
14
16
|
}
|
|
15
17
|
}
|
|
16
|
-
}, "text-input-field-
|
|
18
|
+
}, "text-input-field-ef9db8");
|
|
17
19
|
/**
|
|
18
20
|
* @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) instead.
|
|
19
21
|
*/
|
|
@@ -22,16 +24,5 @@ export const TextInputField = createSubcomponent('input')({
|
|
|
22
24
|
modelHook: useTextInputModel,
|
|
23
25
|
elemPropsHook: useTextInputField,
|
|
24
26
|
})((elemProps, Element, model) => {
|
|
25
|
-
|
|
26
|
-
const errorRing = useThemedRing('error');
|
|
27
|
-
const focusStyles = model.state.error === 'error'
|
|
28
|
-
? errorRing
|
|
29
|
-
: {
|
|
30
|
-
'&:focus:not([disabled])': {
|
|
31
|
-
borderColor: theme.canvas.palette.common.focusOutline,
|
|
32
|
-
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
console.log(model.state.error);
|
|
36
|
-
return (_jsx(FormField.Input, { as: "input", ...mergeStyles(elemProps, [textInputFieldStencil({ error: model.state.error }), focusStyles]) }));
|
|
27
|
+
return (_jsx(FormField.Input, { as: TextInput, ...mergeStyles(elemProps, [textInputFieldStencil({ error: model.state.error })]) }));
|
|
37
28
|
});
|
package/dist/es6/version.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const version = '13.2.
|
|
1
|
+
export const version = '13.2.24';
|
package/multi-select/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export * from './lib/MultiSelectInput';
|
|
2
|
+
export * from './lib/useMultiSelectModel';
|
|
3
3
|
|
|
4
|
-
export
|
|
4
|
+
export * from './lib/MultiSelect';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1229-next.0",
|
|
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": "^14.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1229-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1229-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
54
54
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
55
55
|
"@workday/design-assets-types": "^0.2.10"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react-hook-form": "7.36.1",
|
|
61
61
|
"yup": "^0.32.11"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "9058e7f2709a2212664672616bf6c8222f3e6eba"
|
|
64
64
|
}
|
package/pill/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from './lib/Pill';
|
|
2
2
|
export * from './lib/usePillModel';
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
3
|
+
export * from './lib/PillCount';
|
|
4
|
+
export * from './lib/PillIconButton';
|
|
5
|
+
export * from './lib/PillIcon';
|
|
6
|
+
export * from './lib/PillLabel';
|
|
7
|
+
export * from './lib/Pill';
|
|
@@ -121,13 +121,9 @@ const statusIndicatorStencil = createStencil({
|
|
|
121
121
|
*
|
|
122
122
|
* @default 'low'
|
|
123
123
|
*
|
|
124
|
-
* @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
|
|
125
124
|
*/
|
|
126
125
|
emphasis: {
|
|
127
126
|
low: {},
|
|
128
|
-
/**
|
|
129
|
-
* @deprecated This is being deprecated and will be removed in a future release.
|
|
130
|
-
*/
|
|
131
127
|
high: {},
|
|
132
128
|
},
|
|
133
129
|
},
|
|
@@ -1,44 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
borderRadius,
|
|
3
|
-
colors,
|
|
4
|
-
CSSProperties,
|
|
5
|
-
inputColors,
|
|
6
|
-
space,
|
|
7
|
-
type,
|
|
8
|
-
} from '@workday/canvas-kit-react/tokens';
|
|
9
|
-
import {
|
|
10
|
-
createSubcomponent,
|
|
11
|
-
ExtractProps,
|
|
12
|
-
useTheme,
|
|
13
|
-
useThemedRing,
|
|
14
|
-
} from '@workday/canvas-kit-react/common';
|
|
1
|
+
import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
|
|
15
2
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
16
3
|
import {useTextInputModel} from '@workday/canvas-kit-preview-react/text-input';
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
resize: 'both',
|
|
21
|
-
'&::webkit-resizer': {
|
|
22
|
-
display: 'none',
|
|
23
|
-
},
|
|
24
|
-
'&::placeholder': {
|
|
25
|
-
color: inputColors.placeholder,
|
|
26
|
-
},
|
|
27
|
-
'&:hover': {
|
|
28
|
-
borderColor: inputColors.hoverBorder,
|
|
29
|
-
},
|
|
30
|
-
'&:focus:not([disabled])': {
|
|
31
|
-
outline: 'none',
|
|
32
|
-
},
|
|
33
|
-
'&:disabled': {
|
|
34
|
-
backgroundColor: inputColors.disabled.background,
|
|
35
|
-
borderColor: colors.licorice100,
|
|
36
|
-
color: inputColors.disabled.text,
|
|
37
|
-
'&::placeholder': {
|
|
38
|
-
color: inputColors.disabled.text,
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
};
|
|
4
|
+
import {TextArea} from '@workday/canvas-kit-react/text-area';
|
|
5
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
6
|
+
import {cssVar} from '@workday/canvas-kit-styling';
|
|
42
7
|
|
|
43
8
|
/**
|
|
44
9
|
* @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead.
|
|
@@ -47,33 +12,15 @@ export const TextAreaField = createSubcomponent('textarea')({
|
|
|
47
12
|
displayName: 'TextArea.Field',
|
|
48
13
|
modelHook: useTextInputModel,
|
|
49
14
|
})<ExtractProps<typeof FormField.Input, never>>(({...elemProps}, Element, model) => {
|
|
50
|
-
const theme = useTheme();
|
|
51
|
-
const errorRing = useThemedRing('error');
|
|
52
|
-
|
|
53
|
-
const focusStyles =
|
|
54
|
-
model.state.error === 'error'
|
|
55
|
-
? errorRing
|
|
56
|
-
: {
|
|
57
|
-
'&:focus:not([disabled])': {
|
|
58
|
-
borderColor: theme.canvas.palette.common.focusOutline,
|
|
59
|
-
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
60
|
-
},
|
|
61
|
-
};
|
|
62
|
-
|
|
63
15
|
return (
|
|
64
16
|
<FormField.Input
|
|
65
|
-
as={
|
|
66
|
-
{...type.levels.subtext.large}
|
|
67
|
-
cs={[baseStyles, focusStyles]}
|
|
68
|
-
{...elemProps}
|
|
69
|
-
border={`1px solid ${inputColors.border}`}
|
|
17
|
+
as={TextArea}
|
|
70
18
|
display="block"
|
|
71
|
-
backgroundColor={inputColors.background}
|
|
72
|
-
borderRadius={borderRadius.m}
|
|
73
19
|
minHeight={64}
|
|
74
20
|
minWidth={280}
|
|
75
|
-
padding={space.
|
|
21
|
+
padding={cssVar(system.space.x2)} // Compensate for border
|
|
76
22
|
margin={0} // Fix Safari
|
|
23
|
+
{...elemProps}
|
|
77
24
|
/>
|
|
78
25
|
);
|
|
79
26
|
});
|