@workday/canvas-kit-docs 14.0.0-alpha.1127-next.0 → 14.0.0-alpha.1129-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/es6/lib/docs.js +57 -2
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/preview-react/multi-select/MultiSelect.mdx +9 -0
- package/dist/mdx/preview-react/multi-select/examples/Error.tsx +55 -0
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -8120,12 +8120,12 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8120
8120
|
}
|
|
8121
8121
|
},
|
|
8122
8122
|
{
|
|
8123
|
-
"name": "
|
|
8123
|
+
"name": "multiSelectInputStencil",
|
|
8124
8124
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
|
|
8125
8125
|
"description": "",
|
|
8126
8126
|
"declarations": [
|
|
8127
8127
|
{
|
|
8128
|
-
"name": "
|
|
8128
|
+
"name": "multiSelectInputStencil",
|
|
8129
8129
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
|
|
8130
8130
|
}
|
|
8131
8131
|
],
|
|
@@ -8808,6 +8808,25 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8808
8808
|
}
|
|
8809
8809
|
}
|
|
8810
8810
|
},
|
|
8811
|
+
{
|
|
8812
|
+
"name": "multiSelectStencil",
|
|
8813
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
|
|
8814
|
+
"description": "",
|
|
8815
|
+
"declarations": [
|
|
8816
|
+
{
|
|
8817
|
+
"name": "multiSelectStencil",
|
|
8818
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
|
|
8819
|
+
}
|
|
8820
|
+
],
|
|
8821
|
+
"tags": {
|
|
8822
|
+
"deprecated": "use `multiSelectInputStencil` instead. This will be removed in a future version."
|
|
8823
|
+
},
|
|
8824
|
+
"type": {
|
|
8825
|
+
"kind": "symbol",
|
|
8826
|
+
"name": "multiSelectInputStencil",
|
|
8827
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
|
|
8828
|
+
}
|
|
8829
|
+
},
|
|
8811
8830
|
{
|
|
8812
8831
|
"name": "useMultiSelectInput",
|
|
8813
8832
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
|
|
@@ -8961,6 +8980,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
8961
8980
|
"componentType": "subcomponent",
|
|
8962
8981
|
"elemPropsHook": "useMultiSelectInput",
|
|
8963
8982
|
"props": [
|
|
8983
|
+
{
|
|
8984
|
+
"kind": "property",
|
|
8985
|
+
"name": "error",
|
|
8986
|
+
"required": false,
|
|
8987
|
+
"type": {
|
|
8988
|
+
"kind": "symbol",
|
|
8989
|
+
"name": "ErrorType",
|
|
8990
|
+
"value": "ErrorType"
|
|
8991
|
+
},
|
|
8992
|
+
"description": "",
|
|
8993
|
+
"declarations": [
|
|
8994
|
+
{
|
|
8995
|
+
"name": "error",
|
|
8996
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
|
|
8997
|
+
}
|
|
8998
|
+
],
|
|
8999
|
+
"tags": {}
|
|
9000
|
+
},
|
|
8964
9001
|
{
|
|
8965
9002
|
"kind": "property",
|
|
8966
9003
|
"name": "cs",
|
|
@@ -9128,6 +9165,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
9128
9165
|
"componentType": "subcomponent",
|
|
9129
9166
|
"elemPropsHook": "useMultiSelectInput",
|
|
9130
9167
|
"props": [
|
|
9168
|
+
{
|
|
9169
|
+
"kind": "property",
|
|
9170
|
+
"name": "error",
|
|
9171
|
+
"required": false,
|
|
9172
|
+
"type": {
|
|
9173
|
+
"kind": "symbol",
|
|
9174
|
+
"name": "ErrorType",
|
|
9175
|
+
"value": "ErrorType"
|
|
9176
|
+
},
|
|
9177
|
+
"description": "",
|
|
9178
|
+
"declarations": [
|
|
9179
|
+
{
|
|
9180
|
+
"name": "error",
|
|
9181
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
|
|
9182
|
+
}
|
|
9183
|
+
],
|
|
9184
|
+
"tags": {}
|
|
9185
|
+
},
|
|
9131
9186
|
{
|
|
9132
9187
|
"kind": "property",
|
|
9133
9188
|
"name": "cs",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.0.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.0.
|
|
23
|
-
"@workday/canvas-kit-react": "13.0.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.0.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.0.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.0.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.0.5",
|
|
23
|
+
"@workday/canvas-kit-react": "13.0.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.0.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.0.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.0.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.0.
|
|
23
|
-
"@workday/canvas-kit-react": "13.0.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.0.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.0.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.0.5",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.0.5",
|
|
23
|
+
"@workday/canvas-kit-react": "13.0.5",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.0.5",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.0.5",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
|
|
8
8
|
import Basic from './examples/Basic';
|
|
9
9
|
import Disabled from './examples/Disabled';
|
|
10
|
+
import Error from './examples/Error';
|
|
10
11
|
import Complex from './examples/Complex';
|
|
11
12
|
import Icons from './examples/Icons';
|
|
12
13
|
import Controlled from './examples/Controlled';
|
|
@@ -60,6 +61,14 @@ Disabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect
|
|
|
60
61
|
|
|
61
62
|
<ExampleCodeBlock code={Disabled} />
|
|
62
63
|
|
|
64
|
+
### Error States
|
|
65
|
+
|
|
66
|
+
The `MultiSelect.Input` and `MultiSelect.SearchInput` support the `ErrorType` from the Common
|
|
67
|
+
package. The error styling is identical to the `TextInput` error styling. The `error` prop is
|
|
68
|
+
typically passed from the `FormField` component.
|
|
69
|
+
|
|
70
|
+
<ExampleCodeBlock code={Error} />
|
|
71
|
+
|
|
63
72
|
### Complex
|
|
64
73
|
|
|
65
74
|
When registering items in an array of objects, it's common to have the text that is displayed to the
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
4
|
+
import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
|
|
5
|
+
|
|
6
|
+
const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
|
|
7
|
+
|
|
8
|
+
export default () => {
|
|
9
|
+
const model = useMultiSelectModel({
|
|
10
|
+
items,
|
|
11
|
+
initialSelectedIds: [],
|
|
12
|
+
});
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<MultiSelect model={model}>
|
|
16
|
+
<FormField
|
|
17
|
+
orientation="horizontalStart"
|
|
18
|
+
error={
|
|
19
|
+
model.state.selectedIds.length < 1
|
|
20
|
+
? 'error'
|
|
21
|
+
: model.state.selectedIds.length > 3
|
|
22
|
+
? 'alert'
|
|
23
|
+
: undefined
|
|
24
|
+
}
|
|
25
|
+
>
|
|
26
|
+
<FormField.Label>Toppings</FormField.Label>
|
|
27
|
+
<FormField.Input
|
|
28
|
+
as={MultiSelect.Input}
|
|
29
|
+
placeholder="Select Multiple"
|
|
30
|
+
removeLabel="Remove"
|
|
31
|
+
/>
|
|
32
|
+
<MultiSelect.Popper>
|
|
33
|
+
<MultiSelect.Card>
|
|
34
|
+
<MultiSelect.List>
|
|
35
|
+
{item => (
|
|
36
|
+
<MultiSelect.Item data-id={item}>
|
|
37
|
+
<MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
|
|
38
|
+
</MultiSelect.Item>
|
|
39
|
+
)}
|
|
40
|
+
</MultiSelect.List>
|
|
41
|
+
</MultiSelect.Card>
|
|
42
|
+
</MultiSelect.Popper>
|
|
43
|
+
|
|
44
|
+
<FormField.Hint>
|
|
45
|
+
{model.state.selectedIds.length < 1
|
|
46
|
+
? 'Select at least one topping.'
|
|
47
|
+
: model.state.selectedIds.length > 3
|
|
48
|
+
? 'More than 3 toppings cost extra.'
|
|
49
|
+
: undefined}
|
|
50
|
+
</FormField.Hint>
|
|
51
|
+
</FormField>
|
|
52
|
+
</MultiSelect>
|
|
53
|
+
</>
|
|
54
|
+
);
|
|
55
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1129-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1129-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1129-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1129-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1129-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
53
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "27f7b4b0b968875921295a1640e043018e8a0716"
|
|
65
65
|
}
|