@workday/canvas-kit-docs 14.0.0-alpha.1127-next.0 → 14.0.0-alpha.1133-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/index.d.ts +1 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -0
- package/dist/es6/lib/docs.js +617 -14050
- 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/dist/mdx/style-props/STYLE_PROPS.mdx +10 -0
- package/index.ts +1 -0
- package/package.json +6 -6
|
@@ -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
|
+
};
|
|
@@ -15,6 +15,8 @@ import {
|
|
|
15
15
|
spaceStyleFnConfigs,
|
|
16
16
|
textStyleFnConfigs,
|
|
17
17
|
} from '@workday/canvas-kit-react/layout';
|
|
18
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight'
|
|
19
|
+
import {Hyperlink} from '@workday/canvas-kit-react/button';
|
|
18
20
|
|
|
19
21
|
import Background from './examples/Background';
|
|
20
22
|
import Border from './examples/Border';
|
|
@@ -36,6 +38,14 @@ import Text from './examples/Text';
|
|
|
36
38
|
Style props provide a common, ergonomic API for modifying a component's styles by passing styles
|
|
37
39
|
with props.
|
|
38
40
|
|
|
41
|
+
<InformationHighlight className="sb-unstyled" variant="caution">
|
|
42
|
+
<InformationHighlight.Icon />
|
|
43
|
+
<InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
|
|
44
|
+
<InformationHighlight.Body>
|
|
45
|
+
As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
|
|
46
|
+
</InformationHighlight.Body>
|
|
47
|
+
</InformationHighlight>
|
|
48
|
+
|
|
39
49
|
## System Prop Values
|
|
40
50
|
|
|
41
51
|
Many style props are design-system-aware and translate `SystemPropValues` for you automatically. In
|
package/index.ts
CHANGED
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.1133-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.1133-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1133-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1133-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1133-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": "eb3759bc235f1a76edeae94e6e09d4395bcb90a4"
|
|
65
65
|
}
|