@workday/canvas-kit-docs 6.3.3 → 6.3.4
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/mdx/preview-react/form-field/examples/Custom.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/Alert.tsx +8 -3
- package/dist/mdx/preview-react/text-area/examples/Basic.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/Disabled.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/Error.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/Grow.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx +3 -3
- package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/LabelPositionVertical.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/Placeholder.tsx +2 -6
- package/dist/mdx/preview-react/text-area/examples/RefForwarding.tsx +3 -3
- package/dist/mdx/preview-react/text-area/examples/Required.tsx +1 -1
- package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/Alert.tsx +2 -7
- package/dist/mdx/preview-react/text-input/examples/Basic.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/Disabled.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/Error.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/Grow.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx +3 -3
- package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/LoginForm.tsx +3 -3
- package/dist/mdx/preview-react/text-input/examples/Password.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/RefForwarding.tsx +3 -3
- package/dist/mdx/preview-react/text-input/examples/Required.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx +1 -1
- package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx +2 -4
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import {
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
5
5
|
import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
|
|
@@ -16,10 +16,15 @@ export default () => {
|
|
|
16
16
|
value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
|
|
17
17
|
);
|
|
18
18
|
|
|
19
|
-
const hintColor =
|
|
19
|
+
const hintColor =
|
|
20
|
+
value.length < 3
|
|
21
|
+
? colors.greenApple600
|
|
22
|
+
: value.length < 7
|
|
23
|
+
? colors.cantaloupe600
|
|
24
|
+
: colors.cinnamon500;
|
|
20
25
|
|
|
21
26
|
return (
|
|
22
|
-
<TextArea orientation=
|
|
27
|
+
<TextArea orientation="vertical">
|
|
23
28
|
<TextArea.Label>Add a comment</TextArea.Label>
|
|
24
29
|
<TextArea.Field css={alertStyles} onChange={handleChange} value={value} />
|
|
25
30
|
<TextArea.Hint paddingTop={space.xxs}>
|
|
@@ -31,7 +31,7 @@ export default () => {
|
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
return (
|
|
34
|
-
<TextArea hasError={hasError} orientation=
|
|
34
|
+
<TextArea hasError={hasError} orientation="vertical">
|
|
35
35
|
<TextArea.Label>A three letter word</TextArea.Label>
|
|
36
36
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
37
37
|
<TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextArea orientation=
|
|
12
|
+
<TextArea orientation="vertical" alignItems="stretch">
|
|
13
13
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
14
14
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextArea>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import {
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
5
|
-
import {
|
|
5
|
+
import {accessibleHide} from '@workday/canvas-kit-react/common';
|
|
6
6
|
|
|
7
7
|
export default () => {
|
|
8
8
|
const [value, setValue] = React.useState('');
|
|
@@ -12,7 +12,7 @@ export default () => {
|
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
return (
|
|
15
|
-
<TextArea orientation=
|
|
15
|
+
<TextArea orientation="vertical" spacing="zero">
|
|
16
16
|
<TextArea.Label css={{...accessibleHide}}>Email</TextArea.Label>
|
|
17
17
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
18
18
|
</TextArea>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextArea orientation=
|
|
12
|
+
<TextArea orientation="vertical" spacing="xxxs">
|
|
13
13
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
14
14
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextArea>
|
|
@@ -9,13 +9,9 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextArea orientation=
|
|
12
|
+
<TextArea orientation="vertical">
|
|
13
13
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
14
|
-
<TextArea.Field
|
|
15
|
-
placeholder="Let us know how we did!"
|
|
16
|
-
onChange={handleChange}
|
|
17
|
-
value={value}
|
|
18
|
-
/>
|
|
14
|
+
<TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
|
|
19
15
|
</TextArea>
|
|
20
16
|
);
|
|
21
17
|
};
|
|
@@ -13,12 +13,12 @@ export default () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
const handleClick = () => {
|
|
16
|
-
changeFocus(ref.current)
|
|
16
|
+
changeFocus(ref.current);
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
return (
|
|
20
|
-
<VStack spacing=
|
|
21
|
-
<TextArea orientation=
|
|
20
|
+
<VStack spacing="xxxs" alignItems="flex-start">
|
|
21
|
+
<TextArea orientation="vertical">
|
|
22
22
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
23
23
|
<TextArea.Field onChange={handleChange} value={value} ref={ref} />
|
|
24
24
|
</TextArea>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextArea isRequired={true} orientation=
|
|
12
|
+
<TextArea isRequired={true} orientation="vertical">
|
|
13
13
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
14
14
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextArea>
|
|
@@ -17,14 +17,9 @@ export default () => {
|
|
|
17
17
|
);
|
|
18
18
|
|
|
19
19
|
return (
|
|
20
|
-
<TextInput orientation=
|
|
20
|
+
<TextInput orientation="vertical">
|
|
21
21
|
<TextInput.Label>Password</TextInput.Label>
|
|
22
|
-
<TextInput.Field
|
|
23
|
-
css={alertStyles}
|
|
24
|
-
onChange={handleChange}
|
|
25
|
-
value={value}
|
|
26
|
-
type="password"
|
|
27
|
-
/>
|
|
22
|
+
<TextInput.Field css={alertStyles} onChange={handleChange} value={value} type="password" />
|
|
28
23
|
<TextInput.Hint paddingTop={space.xxs}>
|
|
29
24
|
<strong>Password Strength: </strong>
|
|
30
25
|
{value.length < 3 ? (
|
|
@@ -31,7 +31,7 @@ export default () => {
|
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
return (
|
|
34
|
-
<TextInput hasError={hasError} orientation=
|
|
34
|
+
<TextInput hasError={hasError} orientation="vertical">
|
|
35
35
|
<TextInput.Label>A three letter word</TextInput.Label>
|
|
36
36
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
37
37
|
<TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextInput orientation=
|
|
12
|
+
<TextInput orientation="vertical" alignItems="stretch">
|
|
13
13
|
<TextInput.Label>Street Address</TextInput.Label>
|
|
14
14
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextInput>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import {
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
5
|
-
import {
|
|
5
|
+
import {accessibleHide} from '@workday/canvas-kit-react/common';
|
|
6
6
|
|
|
7
7
|
export default () => {
|
|
8
8
|
const [value, setValue] = React.useState('');
|
|
@@ -12,7 +12,7 @@ export default () => {
|
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
return (
|
|
15
|
-
<TextInput orientation=
|
|
15
|
+
<TextInput orientation="vertical" spacing="zero">
|
|
16
16
|
<TextInput.Label css={{...accessibleHide}}>Email</TextInput.Label>
|
|
17
17
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
18
18
|
</TextInput>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextInput orientation=
|
|
12
|
+
<TextInput orientation="vertical" spacing="xxxs">
|
|
13
13
|
<TextInput.Label>Email</TextInput.Label>
|
|
14
14
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextInput>
|
|
@@ -48,9 +48,9 @@ export default () => {
|
|
|
48
48
|
|
|
49
49
|
return (
|
|
50
50
|
<form onSubmit={formik.handleSubmit} action=".">
|
|
51
|
-
<VStack spacing=
|
|
51
|
+
<VStack spacing="xs" alignItems="flex-start">
|
|
52
52
|
<TextInput
|
|
53
|
-
orientation=
|
|
53
|
+
orientation="vertical"
|
|
54
54
|
isRequired={true}
|
|
55
55
|
hasError={formik.touched.email && !!formik.errors.email}
|
|
56
56
|
>
|
|
@@ -66,7 +66,7 @@ export default () => {
|
|
|
66
66
|
<TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
|
|
67
67
|
</TextInput>
|
|
68
68
|
<TextInput
|
|
69
|
-
orientation=
|
|
69
|
+
orientation="vertical"
|
|
70
70
|
id={passwordId}
|
|
71
71
|
hasError={formik.touched.password && !!formik.errors.password}
|
|
72
72
|
isRequired={true}
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextInput orientation=
|
|
12
|
+
<TextInput orientation="vertical">
|
|
13
13
|
<TextInput.Label>Email</TextInput.Label>
|
|
14
14
|
<TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
|
|
15
15
|
</TextInput>
|
|
@@ -13,12 +13,12 @@ export default () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
const handleClick = () => {
|
|
16
|
-
changeFocus(ref.current)
|
|
16
|
+
changeFocus(ref.current);
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
return (
|
|
20
|
-
<VStack spacing=
|
|
21
|
-
<TextInput orientation=
|
|
20
|
+
<VStack spacing="xxxs" alignItems="flex-start">
|
|
21
|
+
<TextInput orientation="vertical">
|
|
22
22
|
<TextInput.Label>Email</TextInput.Label>
|
|
23
23
|
<TextInput.Field onChange={handleChange} value={value} ref={ref} />
|
|
24
24
|
</TextInput>
|
|
@@ -9,7 +9,7 @@ export default () => {
|
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
|
-
<TextInput isRequired={true} orientation=
|
|
12
|
+
<TextInput isRequired={true} orientation="vertical">
|
|
13
13
|
<TextInput.Label>Email</TextInput.Label>
|
|
14
14
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
15
15
|
</TextInput>
|
|
@@ -37,7 +37,7 @@ const AlertInput = () => {
|
|
|
37
37
|
const alertStyles = useThemedRing('alert');
|
|
38
38
|
|
|
39
39
|
return (
|
|
40
|
-
<TextInput orientation=
|
|
40
|
+
<TextInput orientation="vertical">
|
|
41
41
|
<TextInput.Label>Email</TextInput.Label>
|
|
42
42
|
<TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
|
|
43
43
|
<TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
|
|
@@ -25,12 +25,10 @@ export default () => {
|
|
|
25
25
|
|
|
26
26
|
return (
|
|
27
27
|
<CanvasProvider theme={theme}>
|
|
28
|
-
<TextInput hasError={!value} isRequired={true} orientation=
|
|
28
|
+
<TextInput hasError={!value} isRequired={true} orientation="vertical">
|
|
29
29
|
<TextInput.Label>Email</TextInput.Label>
|
|
30
30
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
31
|
-
<TextInput.Hint paddingTop={space.xxs}>
|
|
32
|
-
{!value && 'Please enter an email.'}
|
|
33
|
-
</TextInput.Hint>
|
|
31
|
+
<TextInput.Hint paddingTop={space.xxs}>{!value && 'Please enter an email.'}</TextInput.Hint>
|
|
34
32
|
</TextInput>
|
|
35
33
|
</CanvasProvider>
|
|
36
34
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "6.3.
|
|
3
|
+
"version": "6.3.4",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@storybook/csf": "0.0.1",
|
|
53
|
-
"@workday/canvas-kit-react": "^6.3.
|
|
53
|
+
"@workday/canvas-kit-react": "^6.3.4"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"fs-extra": "^10.0.0",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"mkdirp": "^1.0.3",
|
|
59
59
|
"typescript": "^3.8.3"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "43759dac29aaa53f6f794a739bc9913f1aade55b"
|
|
62
62
|
}
|