@workday/canvas-kit-docs 11.0.0-alpha.796-next.0 → 11.0.0-alpha.798-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.
|
@@ -522,7 +522,8 @@ variant prop.
|
|
|
522
522
|
|
|
523
523
|
### Form Field (Preview)
|
|
524
524
|
|
|
525
|
-
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
|
|
525
|
+
**PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472),
|
|
526
|
+
[#2746](https://github.com/Workday/canvas-kit/pull/2746)
|
|
526
527
|
|
|
527
528
|
`FormField` in [Preview](#preview) is a compound component and we intend to promote it in a future
|
|
528
529
|
version to replace the `FormField` in [Main](#main). Because of this, we've refactored how errors
|
|
@@ -536,6 +537,26 @@ are applied to `FormField` in [Preview](#preview) in order to match the API from
|
|
|
536
537
|
- `FormField` does **not** support the `useFieldSet` prop that the `FormField` in [Main](#main)
|
|
537
538
|
does. In order to achieve the same behavior, set the `as` prop on the `FormField` element to
|
|
538
539
|
`fieldset` and the `as` prop of `FormField.Label` to `legend`.
|
|
540
|
+
- The required asterisk is now a pseudo element. While the asterisk was never read out loud by
|
|
541
|
+
screen readers, Testing Library required it in the `*ByLabelText` query. `*ByRole` uses the w3c
|
|
542
|
+
[accessible name calculation specification](https://www.w3.org/TR/accname-1.2/), but
|
|
543
|
+
`*ByLabelText` uses
|
|
544
|
+
[textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). Additional
|
|
545
|
+
information: https://github.com/testing-library/dom-testing-library/issues/929
|
|
546
|
+
|
|
547
|
+
v10:
|
|
548
|
+
|
|
549
|
+
```ts
|
|
550
|
+
screen.getByLabelText('Email*'); // Email is a required field and asterisk is included in name
|
|
551
|
+
screen.getByRole('textbox', {name: 'Email'}); // correctly ignores the `*`
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
v11:
|
|
555
|
+
|
|
556
|
+
```ts
|
|
557
|
+
screen.getByLabelText('Email');
|
|
558
|
+
screen.getByRole('textbox', {name: 'Email'});
|
|
559
|
+
```
|
|
539
560
|
|
|
540
561
|
```tsx
|
|
541
562
|
// v10 FormField in Preview
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
useFormFieldInput,
|
|
5
5
|
useFormFieldLabel,
|
|
6
6
|
useFormFieldModel,
|
|
7
|
-
|
|
7
|
+
formFieldStencil,
|
|
8
8
|
} from '@workday/canvas-kit-preview-react/form-field';
|
|
9
9
|
import {useModelContext} from '@workday/canvas-kit-react/common';
|
|
10
10
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
@@ -44,10 +44,8 @@ export default () => {
|
|
|
44
44
|
|
|
45
45
|
const model = useFormFieldModel({isRequired: true});
|
|
46
46
|
|
|
47
|
-
const layoutProps = useFormFieldOrientation('vertical');
|
|
48
|
-
|
|
49
47
|
return (
|
|
50
|
-
<Flex {
|
|
48
|
+
<Flex cs={formFieldStencil({orientation: 'horizontal'})}>
|
|
51
49
|
<Label model={model}>My Custom Field</Label>
|
|
52
50
|
<Input model={model} value={value} onChange={handleChange} />
|
|
53
51
|
<Hint model={model}>You can be anything</Hint>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.798-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",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^11.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.798-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.798-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.798-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.798-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.3.1",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "d3ed48908566d8ef153d8992c5c4de11b18f9970"
|
|
63
63
|
}
|