@workday/canvas-kit-preview-react 13.0.3 → 13.0.5
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/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/lib/MultiSelectInput.d.ts +57 -3
- package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts.map +1 -1
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +17 -8
- package/dist/commonjs/multi-select/lib/MultiSelectedItem.d.ts +4 -0
- package/dist/commonjs/multi-select/lib/MultiSelectedItem.d.ts.map +1 -1
- package/dist/commonjs/multi-select/lib/MultiSelectedItem.js +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectedList.d.ts +5 -0
- package/dist/commonjs/multi-select/lib/MultiSelectedList.d.ts.map +1 -1
- package/dist/commonjs/multi-select/lib/MultiSelectedList.js +2 -2
- 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/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 +13 -13
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.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/lib/MultiSelectInput.d.ts +57 -3
- package/dist/es6/multi-select/lib/MultiSelectInput.d.ts.map +1 -1
- package/dist/es6/multi-select/lib/MultiSelectInput.js +19 -10
- package/dist/es6/multi-select/lib/MultiSelectedItem.d.ts +4 -0
- package/dist/es6/multi-select/lib/MultiSelectedItem.d.ts.map +1 -1
- package/dist/es6/multi-select/lib/MultiSelectedItem.js +2 -2
- package/dist/es6/multi-select/lib/MultiSelectedList.d.ts +5 -0
- package/dist/es6/multi-select/lib/MultiSelectedList.d.ts.map +1 -1
- package/dist/es6/multi-select/lib/MultiSelectedList.js +2 -2
- 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/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 +13 -13
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/multi-select/lib/MultiSelectInput.tsx +71 -14
- package/multi-select/lib/MultiSelectedItem.tsx +6 -2
- package/multi-select/lib/MultiSelectedList.tsx +29 -17
- package/package.json +4 -4
|
@@ -8,10 +8,10 @@ import { RadioLabelContext } from './RadioLabel';
|
|
|
8
8
|
const radioWidth = 18;
|
|
9
9
|
const radioHeight = 18;
|
|
10
10
|
const radioInputStencil = createStencil({
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "x49827", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
|
|
12
12
|
modifiers: {
|
|
13
13
|
variant: {
|
|
14
|
-
inverse: { name: "
|
|
14
|
+
inverse: { name: "x49828", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
}, "radio-input-f05aaa");
|
|
@@ -22,13 +22,13 @@ const StyledRadioInput = createComponent('input')({
|
|
|
22
22
|
},
|
|
23
23
|
});
|
|
24
24
|
const radioInputWrapperStyles = createStencil({
|
|
25
|
-
base: { name: "
|
|
25
|
+
base: { name: "x49829", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
|
|
26
26
|
modifiers: {
|
|
27
27
|
variant: {
|
|
28
|
-
inverse: { name: "
|
|
28
|
+
inverse: { name: "x4982a", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
|
|
29
29
|
},
|
|
30
30
|
disabled: {
|
|
31
|
-
true: { name: "
|
|
31
|
+
true: { name: "x4982b", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
}, "radio-input-wrapper-styles-fce2c4");
|
|
@@ -10,19 +10,19 @@ export const panelStencil = createStencil({
|
|
|
10
10
|
expandedWidth: '',
|
|
11
11
|
collapsedWidth: '',
|
|
12
12
|
},
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "x4983b", 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: "x4983c", styles: "background-color:var(--cnvs-sys-color-bg-default);box-shadow:var(--cnvs-sys-depth-5);" },
|
|
17
|
+
standard: { name: "x4983d", styles: "background-color:var(--cnvs-sys-color-bg-alt-softer);" }
|
|
18
18
|
},
|
|
19
19
|
expanded: {
|
|
20
|
-
true: { name: "
|
|
21
|
-
false: { name: "
|
|
20
|
+
true: { name: "x4983e", styles: "width:var(--expandedWidth-panel-bd9477);max-width:var(--expandedWidth-panel-bd9477);" },
|
|
21
|
+
false: { name: "x4983f", 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: "x4983g", styles: "" },
|
|
25
|
+
false: { name: "x4983h", 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: "x49830", 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: "x49831", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
15
|
+
collapsed: { name: "x49832", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
|
|
16
|
+
expanded: { name: "x49833", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
|
|
17
|
+
expanding: { name: "x49834", 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: "x49835", styles: "" },
|
|
21
|
+
right: { name: "x49836", styles: "" }
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
compound: [
|
|
25
25
|
{
|
|
26
26
|
modifiers: { state: 'collapsed', origin: 'right' },
|
|
27
|
-
styles: { name: "
|
|
27
|
+
styles: { name: "x49837", styles: "transform:scaleX(-1);" }
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
modifiers: { state: 'collapsing', origin: 'right' },
|
|
31
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "x49838", 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: "x49839", 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: "x4983a", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "side-panel-toggle-button-da8098");
|
|
@@ -7,31 +7,31 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
|
7
7
|
import { StatusIndicatorIcon } from './StatusIndicatorIcon';
|
|
8
8
|
import { StatusIndicatorLabel } from './StatusIndicatorLabel';
|
|
9
9
|
const statusIndicatorStencil = createStencil({
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "x4983z", 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-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
gray: {
|
|
13
|
-
high: { name: "
|
|
14
|
-
low: { name: "
|
|
13
|
+
high: { name: "x49840", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
|
|
14
|
+
low: { name: "x49841", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
|
|
15
15
|
},
|
|
16
16
|
orange: {
|
|
17
|
-
high: { name: "
|
|
18
|
-
low: { name: "
|
|
17
|
+
high: { name: "x49842", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
|
|
18
|
+
low: { name: "x49843", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
|
|
19
19
|
},
|
|
20
20
|
blue: {
|
|
21
|
-
high: { name: "
|
|
22
|
-
low: { name: "
|
|
21
|
+
high: { name: "x49844", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
|
|
22
|
+
low: { name: "x49845", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
|
|
23
23
|
},
|
|
24
24
|
green: {
|
|
25
|
-
high: { name: "
|
|
26
|
-
low: { name: "
|
|
25
|
+
high: { name: "x49846", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
|
|
26
|
+
low: { name: "x49847", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
|
|
27
27
|
},
|
|
28
28
|
red: {
|
|
29
|
-
high: { name: "
|
|
30
|
-
low: { name: "
|
|
29
|
+
high: { name: "x49848", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
|
|
30
|
+
low: { name: "x49849", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
|
|
31
31
|
},
|
|
32
32
|
transparent: {
|
|
33
|
-
high: { name: "
|
|
34
|
-
low: { name: "
|
|
33
|
+
high: { name: "x4984a", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
|
|
34
|
+
low: { name: "x4984b", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}, "status-indicator-1a565e");
|
|
@@ -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: "x4983y", 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')({
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
3
|
+
import {brand, system} from '@workday/canvas-tokens-web';
|
|
4
4
|
import {caretDownSmallIcon, searchIcon} from '@workday/canvas-system-icons-web';
|
|
5
5
|
|
|
6
6
|
import {
|
|
7
|
+
ErrorType,
|
|
7
8
|
composeHooks,
|
|
8
9
|
createElemPropsHook,
|
|
9
10
|
createSubcomponent,
|
|
10
11
|
} from '@workday/canvas-kit-react/common';
|
|
11
|
-
import {createStencil, CSProps, handleCsProp} from '@workday/canvas-kit-styling';
|
|
12
|
-
import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
|
|
12
|
+
import {createStencil, CSProps, handleCsProp, px2rem, calc} from '@workday/canvas-kit-styling';
|
|
13
|
+
import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
|
|
13
14
|
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
14
15
|
import {getCursor} from '@workday/canvas-kit-react/collection';
|
|
15
16
|
import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit-react/combobox';
|
|
@@ -18,7 +19,8 @@ import {useMultiSelectModel} from './useMultiSelectModel';
|
|
|
18
19
|
import {MultiSelectedItemProps} from './MultiSelectedItem';
|
|
19
20
|
import {MultiSelectedList} from './MultiSelectedList';
|
|
20
21
|
|
|
21
|
-
export const
|
|
22
|
+
export const multiSelectInputStencil = createStencil({
|
|
23
|
+
//@ts-ignore Types don't like defining a variable in `base` and using a variable in a nested selector. One or the other is fine, but not both.
|
|
22
24
|
base: {
|
|
23
25
|
border: `1px solid ${system.color.border.input.default}`,
|
|
24
26
|
display: 'flex',
|
|
@@ -29,12 +31,13 @@ export const multiSelectStencil = createStencil({
|
|
|
29
31
|
minHeight: system.space.x10,
|
|
30
32
|
transition: '0.2s box-shadow, 0.2s border-color',
|
|
31
33
|
margin: 0, // Fix Safari
|
|
34
|
+
[textInputStencil.vars.width]: '100%',
|
|
32
35
|
|
|
33
36
|
'&:hover, &.hover': {
|
|
34
37
|
borderColor: system.color.border.input.strong,
|
|
35
38
|
},
|
|
36
39
|
|
|
37
|
-
'&:focus-
|
|
40
|
+
'&:has(:focus-visible:not([disabled])), &.focus': {
|
|
38
41
|
borderColor: system.color.border.primary.default,
|
|
39
42
|
boxShadow: `inset 0 0 0 1px ${system.color.border.primary.default}`,
|
|
40
43
|
},
|
|
@@ -45,6 +48,12 @@ export const multiSelectStencil = createStencil({
|
|
|
45
48
|
backgroundColor: system.color.bg.transparent,
|
|
46
49
|
borderRadius: system.shape.x1,
|
|
47
50
|
|
|
51
|
+
// collapse the height of the input by the border width so that an empty multi-select
|
|
52
|
+
// is the same height as a `TextInput`
|
|
53
|
+
'&:where([data-part="user-input"], [data-part="form-input"])': {
|
|
54
|
+
height: calc.subtract(system.space.x10, px2rem(2)),
|
|
55
|
+
},
|
|
56
|
+
|
|
48
57
|
// Remove the focus ring - it is handled at the container level
|
|
49
58
|
border: 'none !important',
|
|
50
59
|
boxShadow: 'none !important',
|
|
@@ -59,6 +68,11 @@ export const multiSelectStencil = createStencil({
|
|
|
59
68
|
},
|
|
60
69
|
},
|
|
61
70
|
|
|
71
|
+
'&:has(:disabled, .disabled)': {
|
|
72
|
+
borderColor: system.color.border.input.disabled,
|
|
73
|
+
color: system.color.text.disabled,
|
|
74
|
+
},
|
|
75
|
+
|
|
62
76
|
'& :where([data-part="form-input"])': {
|
|
63
77
|
position: 'absolute',
|
|
64
78
|
top: system.space.zero,
|
|
@@ -83,8 +97,43 @@ export const multiSelectStencil = createStencil({
|
|
|
83
97
|
flexWrap: 'wrap',
|
|
84
98
|
},
|
|
85
99
|
},
|
|
100
|
+
modifiers: {
|
|
101
|
+
error: {
|
|
102
|
+
error: {
|
|
103
|
+
borderColor: brand.error.base,
|
|
104
|
+
boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}`,
|
|
105
|
+
'&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus)': {
|
|
106
|
+
borderColor: brand.error.base,
|
|
107
|
+
},
|
|
108
|
+
'&:has(:focus-visible:not([disabled])), &.focus': {
|
|
109
|
+
boxShadow: `inset 0 0 0 ${px2rem(1)} ${brand.error.base}, 0 0 0 2px ${
|
|
110
|
+
system.color.border.inverse
|
|
111
|
+
}, 0 0 0 4px ${brand.common.focusOutline}`,
|
|
112
|
+
outlineOffset: px2rem(2),
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
alert: {
|
|
116
|
+
borderColor: brand.alert.darkest,
|
|
117
|
+
boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base}`,
|
|
118
|
+
'&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled]))':
|
|
119
|
+
{
|
|
120
|
+
borderColor: brand.alert.darkest,
|
|
121
|
+
},
|
|
122
|
+
|
|
123
|
+
'&:has(:focus-visible, .focus):not(:has([disabled]))': {
|
|
124
|
+
boxShadow: `inset 0 0 0 ${px2rem(2)} ${brand.alert.base},
|
|
125
|
+
0 0 0 2px ${system.color.border.inverse},
|
|
126
|
+
0 0 0 4px ${brand.common.focusOutline}`,
|
|
127
|
+
},
|
|
128
|
+
outlineOffset: px2rem(2),
|
|
129
|
+
},
|
|
130
|
+
},
|
|
131
|
+
},
|
|
86
132
|
});
|
|
87
133
|
|
|
134
|
+
/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
|
|
135
|
+
export const multiSelectStencil = multiSelectInputStencil;
|
|
136
|
+
|
|
88
137
|
export const useMultiSelectInput = composeHooks(
|
|
89
138
|
createElemPropsHook(useMultiSelectModel)((model, ref) => {
|
|
90
139
|
return {
|
|
@@ -123,7 +172,9 @@ export interface MultiSelectInputProps
|
|
|
123
172
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
124
173
|
'disabled' | 'className' | 'style' | 'aria-labelledby'
|
|
125
174
|
>,
|
|
126
|
-
Pick<MultiSelectedItemProps, 'removeLabel'> {
|
|
175
|
+
Pick<MultiSelectedItemProps, 'removeLabel'> {
|
|
176
|
+
error?: ErrorType;
|
|
177
|
+
}
|
|
127
178
|
|
|
128
179
|
export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
129
180
|
modelHook: useMultiSelectModel,
|
|
@@ -134,16 +185,17 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
|
134
185
|
className,
|
|
135
186
|
cs,
|
|
136
187
|
style,
|
|
188
|
+
error,
|
|
137
189
|
'aria-labelledby': ariaLabelledBy,
|
|
138
190
|
removeLabel,
|
|
191
|
+
disabled,
|
|
139
192
|
formInputProps,
|
|
140
193
|
...elemProps
|
|
141
194
|
},
|
|
142
|
-
Element
|
|
143
|
-
model
|
|
195
|
+
Element
|
|
144
196
|
) => {
|
|
145
197
|
return (
|
|
146
|
-
<div {...handleCsProp({className, cs, style},
|
|
198
|
+
<div {...handleCsProp({className, cs, style}, multiSelectInputStencil({error}))}>
|
|
147
199
|
<InputGroup>
|
|
148
200
|
<InputGroup.Input data-part="form-input" {...formInputProps} />
|
|
149
201
|
<InputGroup.Input
|
|
@@ -151,13 +203,15 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
|
151
203
|
as={Element}
|
|
152
204
|
aria-labelledby={ariaLabelledBy}
|
|
153
205
|
readOnly
|
|
206
|
+
disabled={disabled}
|
|
207
|
+
error={error}
|
|
154
208
|
{...elemProps}
|
|
155
209
|
/>
|
|
156
210
|
<InputGroup.InnerEnd pointerEvents="none">
|
|
157
211
|
<SystemIcon icon={caretDownSmallIcon} />
|
|
158
212
|
</InputGroup.InnerEnd>
|
|
159
213
|
</InputGroup>
|
|
160
|
-
<MultiSelectedList removeLabel={removeLabel} />
|
|
214
|
+
<MultiSelectedList disabled={disabled} removeLabel={removeLabel} />
|
|
161
215
|
</div>
|
|
162
216
|
);
|
|
163
217
|
}
|
|
@@ -176,13 +230,14 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
176
230
|
removeLabel,
|
|
177
231
|
formInputProps,
|
|
178
232
|
ref,
|
|
233
|
+
disabled,
|
|
234
|
+
error,
|
|
179
235
|
...elemProps
|
|
180
236
|
},
|
|
181
|
-
Element
|
|
182
|
-
model
|
|
237
|
+
Element
|
|
183
238
|
) => {
|
|
184
239
|
return (
|
|
185
|
-
<div {...handleCsProp({className, cs, style},
|
|
240
|
+
<div {...handleCsProp({className, cs, style}, multiSelectInputStencil({}))}>
|
|
186
241
|
<InputGroup>
|
|
187
242
|
<InputGroup.InnerStart pointerEvents="none" width={system.space.x8}>
|
|
188
243
|
<SystemIcon icon={searchIcon} size={system.space.x4} />
|
|
@@ -196,6 +251,8 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
196
251
|
data-part="user-input"
|
|
197
252
|
as={Element}
|
|
198
253
|
aria-labelledby={ariaLabelledBy}
|
|
254
|
+
disabled={disabled}
|
|
255
|
+
error={error}
|
|
199
256
|
{...elemProps}
|
|
200
257
|
/>
|
|
201
258
|
<InputGroup.InnerEnd width={system.space.x4}>
|
|
@@ -205,7 +262,7 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
205
262
|
<SystemIcon icon={caretDownSmallIcon} />
|
|
206
263
|
</InputGroup.InnerEnd>
|
|
207
264
|
</InputGroup>
|
|
208
|
-
<MultiSelectedList removeLabel={removeLabel} />
|
|
265
|
+
<MultiSelectedList removeLabel={removeLabel} disabled={disabled} />
|
|
209
266
|
</div>
|
|
210
267
|
);
|
|
211
268
|
}
|
|
@@ -11,6 +11,10 @@ import {useMultiSelectItemRemove} from './useMultiSelectItemRemove';
|
|
|
11
11
|
import {useMultiSelectModel} from './useMultiSelectModel';
|
|
12
12
|
|
|
13
13
|
export interface MultiSelectedItemProps {
|
|
14
|
+
/**
|
|
15
|
+
* Disabled on the `Pill` component.
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
14
18
|
/**
|
|
15
19
|
* Remove label on a MultiSelectedItem. In English, the label may be "Remove" and the screen
|
|
16
20
|
* reader will read out "Remove {option}".
|
|
@@ -34,9 +38,9 @@ export const useMultiSelectedItem = composeHooks(
|
|
|
34
38
|
export const MultiSelectedItem = createSubcomponent('span')({
|
|
35
39
|
modelHook: useMultiSelectModel,
|
|
36
40
|
elemPropsHook: useMultiSelectedItem,
|
|
37
|
-
})<MultiSelectedItemProps>(({children, removeLabel, ref, ...elemProps}, Element) => {
|
|
41
|
+
})<MultiSelectedItemProps>(({children, removeLabel, disabled, ref, ...elemProps}, Element) => {
|
|
38
42
|
return (
|
|
39
|
-
<Pill as={Element} variant="removable">
|
|
43
|
+
<Pill as={Element} disabled={disabled} variant="removable">
|
|
40
44
|
<Pill.Label>{children}</Pill.Label>
|
|
41
45
|
<Pill.IconButton aria-label={removeLabel} ref={ref} {...(elemProps as any)} />
|
|
42
46
|
</Pill>
|
|
@@ -8,23 +8,35 @@ import {MultiSelectedItem, MultiSelectedItemProps} from './MultiSelectedItem';
|
|
|
8
8
|
|
|
9
9
|
export interface MultiSelectedListProps
|
|
10
10
|
extends MultiSelectedItemProps,
|
|
11
|
-
React.HTMLAttributes<HTMLDivElement> {
|
|
11
|
+
React.HTMLAttributes<HTMLDivElement> {
|
|
12
|
+
/**
|
|
13
|
+
* Disabled is forwarded to the MultiSelectedItem component to make sure each item is also
|
|
14
|
+
* disabled.
|
|
15
|
+
*/
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
}
|
|
12
18
|
|
|
13
19
|
export const MultiSelectedList = createSubcomponent('div')({
|
|
14
20
|
modelHook: useMultiSelectModel,
|
|
15
|
-
})<MultiSelectedListProps>(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
21
|
+
})<MultiSelectedListProps>(
|
|
22
|
+
({'aria-labelledby': ariaLabelledBy, disabled, removeLabel}, Element, model) => {
|
|
23
|
+
return model.selected.state.items.length ? (
|
|
24
|
+
<>
|
|
25
|
+
<div data-part="separator" />
|
|
26
|
+
<ListBox
|
|
27
|
+
model={model.selected}
|
|
28
|
+
as={Element}
|
|
29
|
+
role="listbox"
|
|
30
|
+
aria-orientation="horizontal"
|
|
31
|
+
aria-labelledby={ariaLabelledBy}
|
|
32
|
+
>
|
|
33
|
+
{item => (
|
|
34
|
+
<MultiSelectedItem disabled={disabled} removeLabel={removeLabel}>
|
|
35
|
+
{item.textValue}
|
|
36
|
+
</MultiSelectedItem>
|
|
37
|
+
)}
|
|
38
|
+
</ListBox>
|
|
39
|
+
</>
|
|
40
|
+
) : null;
|
|
41
|
+
}
|
|
42
|
+
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.5",
|
|
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",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
"dependencies": {
|
|
47
47
|
"@emotion/react": "^11.7.1",
|
|
48
48
|
"@emotion/styled": "^11.6.0",
|
|
49
|
-
"@workday/canvas-kit-react": "^13.0.
|
|
50
|
-
"@workday/canvas-kit-styling": "^13.0.
|
|
49
|
+
"@workday/canvas-kit-react": "^13.0.5",
|
|
50
|
+
"@workday/canvas-kit-styling": "^13.0.5",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
53
|
"@workday/design-assets-types": "^0.2.8"
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react-hook-form": "7.36.1",
|
|
59
59
|
"yup": "^0.32.11"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "ab6af4b56e5da8a029108d119d86aab19645e6c8"
|
|
62
62
|
}
|