@fluentui/react-field 0.0.0-nightly-20221128-0427.1 → 0.0.0-nightly-20221130-0423.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/package.json +6 -6
- package/Spec.md +0 -354
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 30 Nov 2022 04:32:30 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20221130-0423.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221130-0423.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221130-0423.1",
|
|
20
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221130-0423.1",
|
|
26
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221130-0423.1",
|
|
32
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221130-0423.1",
|
|
38
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221130-0423.1",
|
|
44
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 30 Nov 2022 04:32:30 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221130-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20221130-0423.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.9..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Wed, 30 Nov 2022 04:32:30 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.9..@fluentui/react-field_v0.0.0-nightly-20221130-0423.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.9)
|
|
22
22
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221130-0423.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221130-0423.1",
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221130-0423.1",
|
|
34
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-label": "0.0.0-nightly-20221130-0423.1",
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221130-0423.1",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221130-0423.1",
|
|
38
38
|
"@griffel/react": "^1.4.2",
|
|
39
39
|
"tslib": "^2.1.0"
|
|
40
40
|
},
|
package/Spec.md
DELETED
|
@@ -1,354 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-field Spec
|
|
2
|
-
|
|
3
|
-
## Background
|
|
4
|
-
|
|
5
|
-
Field adds a label, validation text, and hint text to form input components. The existing input components (such as `Input` and `Combobox`) are wrapped to create field versions of them (such as `InputField` and `ComboboxField`).
|
|
6
|
-
|
|
7
|
-
Epic issue tracking implementation: https://github.com/microsoft/fluentui/issues/19627
|
|
8
|
-
|
|
9
|
-
## Prior Art
|
|
10
|
-
|
|
11
|
-
Existing libraries tend to take one of the following approaches to field.
|
|
12
|
-
|
|
13
|
-
1. Include support for label, error text, etc. in the base input component. Libraries using this approach include:
|
|
14
|
-
- **FluentUI v8** - [`TextField`](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield), [`Dropdown`](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown), [`ChoiceGroup`](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup), etc.
|
|
15
|
-
- **Spectrum** - [`TextField`](https://react-spectrum.adobe.com/react-spectrum/TextField.html), [`Slider`](https://react-spectrum.adobe.com/react-spectrum/Slider.html), [`RadioGroup`](https://react-spectrum.adobe.com/react-spectrum/RadioGroup.html), etc.
|
|
16
|
-
2. Provide a set of components that are manually constructed into a field. This requires manually hooking up the components using props like `htmlFor` and `aria-describedby`. Libraries using this approach include:
|
|
17
|
-
- **FluentUI v0** - [`FormField`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-field), [`FormLabel`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-label), [`FormMessage`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-message)
|
|
18
|
-
- **Ant** - [`Form.Item`](https://ant.design/components/form/#Form.Item) (uses context to do some of the hooking up between the item and the field component).
|
|
19
|
-
3. Provide base components without a label or descriptive text, and then Field versions of those controls. Libraries using this approach include:
|
|
20
|
-
- **FluentUI v0** - [`Input`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/input/props) and [`FormInput`](https://fluentsite.z22.web.core.windows.net/0.64.0/components/form/props#form-input), for example.
|
|
21
|
-
- **Evergreen UI** - [`TextInput`](https://evergreen.segment.com/components/text-input) and [`TextInputField`](https://evergreen.segment.com/components/text-input#textinputfield), for example.
|
|
22
|
-
|
|
23
|
-
The Field implementation in this spec follows pattern (3). There are Field versions of all components that can be used as form inputs. There are several reasons, including:
|
|
24
|
-
|
|
25
|
-
- **Accessibility**: By combining a base component with the field props into a single component, all of the accessibility props like `htmlFor` and `aria-describedby` are set correctly for "free".
|
|
26
|
-
- **Simplicity**: All props related to the component (such as `label`, `id`, `validationState="error"`, etc.) are on the same component, rather than split between multiple components (like separate `Field` and `Input` components).
|
|
27
|
-
- **Consistency**: All of the Field components share a common set of props for the label, validationState, hint, etc.
|
|
28
|
-
- **Bundle size**: When the label and other field functionality is not needed, it is still possible to use the base components without pulling in unnecessary dependencies (like `Label` and the field styling).
|
|
29
|
-
|
|
30
|
-
## Sample Code
|
|
31
|
-
|
|
32
|
-
Each input component has a field version (such as `InputField`, `ComboboxField`, etc.) that includes the features of Field added to that component.
|
|
33
|
-
|
|
34
|
-
```jsx
|
|
35
|
-
<>
|
|
36
|
-
<InputField
|
|
37
|
-
// Field-specific props
|
|
38
|
-
label="This is the field label"
|
|
39
|
-
orientation="horizontal"
|
|
40
|
-
validationState="error"
|
|
41
|
-
validationMessage="This is error text"
|
|
42
|
-
// All props and slots of the underlying Input component are supported
|
|
43
|
-
required
|
|
44
|
-
size="small"
|
|
45
|
-
contentBefore="$"
|
|
46
|
-
contentAfter=".00"
|
|
47
|
-
/>
|
|
48
|
-
<RadioGroupField label="Radio group field">
|
|
49
|
-
<Radio value="one" label="Option one" />
|
|
50
|
-
<Radio value="two" label="Option two" />
|
|
51
|
-
<Radio value="three" label="Option three" />
|
|
52
|
-
</RadioGroupField>
|
|
53
|
-
<ComboboxField label="Combobox field" validationState="success" validationMessage="Success text">
|
|
54
|
-
<Option value="one">Option one</Option>
|
|
55
|
-
<Option value="two">Option two</Option>
|
|
56
|
-
<Option value="three">Option three</Option>
|
|
57
|
-
</ComboboxField>
|
|
58
|
-
<SliderField label="Slider field" validationState="warning" validationMessage="Warning text" />
|
|
59
|
-
<SpinButtonField label="Spin button field" hint="Hint text" />
|
|
60
|
-
</>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
These field versions of the components use a common set of Field hooks, and can be defined using very little code.
|
|
64
|
-
|
|
65
|
-
```ts
|
|
66
|
-
export type InputFieldProps = FieldProps<typeof Input>;
|
|
67
|
-
|
|
68
|
-
export const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {
|
|
69
|
-
const state = useField_unstable(props, ref, Input);
|
|
70
|
-
useFieldStyles_unstable(state);
|
|
71
|
-
return renderField_unstable(state);
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
InputField.displayName = 'InputField';
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Components
|
|
78
|
-
|
|
79
|
-
The following field components will be defined. If more form components are added in the future, they should also include a Field version.
|
|
80
|
-
|
|
81
|
-
- `CheckboxField`
|
|
82
|
-
- `ComboboxField`
|
|
83
|
-
- `DropdownField`
|
|
84
|
-
- `InputField`
|
|
85
|
-
- `RadioGroupField`
|
|
86
|
-
- `SelectField`
|
|
87
|
-
- `SliderField`
|
|
88
|
-
- `SpinButtonField`
|
|
89
|
-
- `SwitchField`
|
|
90
|
-
- `TextareaField`
|
|
91
|
-
|
|
92
|
-
## Variants
|
|
93
|
-
|
|
94
|
-
- **Orientation**: The `orientation` prop affects the layout of the label and field component:
|
|
95
|
-
- `'vertical'` (default) - label is above the field component
|
|
96
|
-
- `'horizontal'` - label is to the left of the field component, and is 33% the width of the field (this allows multiple stacked fields to all align their labels)
|
|
97
|
-
- **Validation state**: The `validationState` prop affects the icon and color used by the `validationMessage`:
|
|
98
|
-
- `'error'` - Red x icon, red text color
|
|
99
|
-
- `'warning'` - Yellow exclamation icon, neutral color text
|
|
100
|
-
- `'success'` - Green check icon, neutral color text
|
|
101
|
-
- `undefined` (default): No validation message icon, neutral color text
|
|
102
|
-
- **Error**: Some control types (like `Input` and `Combobox`) have a prop that makes the border red. This prop will be set `validationState="error"`.
|
|
103
|
-
|
|
104
|
-
Field also forwards some props from the wrapped component to the label as well:
|
|
105
|
-
|
|
106
|
-
- **Size**: If the wrapped component supports a `size` prop, it will also be applied to the field's label.
|
|
107
|
-
- **Required**: If set, the Label will get a required asterisk: `*`
|
|
108
|
-
|
|
109
|
-
## API
|
|
110
|
-
|
|
111
|
-
### FieldComponent
|
|
112
|
-
|
|
113
|
-
The `FieldComponent` type defines the minimum set of props that the wrapped component must support. This is used for the generic types as the requirement for the type parameter: `FieldProps<T extends FieldComponent>`
|
|
114
|
-
|
|
115
|
-
```ts
|
|
116
|
-
/**
|
|
117
|
-
* The minimum requirement for a component used by Field.
|
|
118
|
-
*
|
|
119
|
-
* Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop,
|
|
120
|
-
* but it is still allowed to have a children prop.
|
|
121
|
-
*/
|
|
122
|
-
export type FieldComponent = React.VoidFunctionComponent<
|
|
123
|
-
Pick<
|
|
124
|
-
React.HTMLAttributes<HTMLElement>,
|
|
125
|
-
'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'
|
|
126
|
-
>
|
|
127
|
-
>;
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### Slots
|
|
131
|
-
|
|
132
|
-
_Note: TypeScript crashes if the `Slot` type is used with a template type parameter. The `SlotComponent` type is a simplified version of that type, which only supports `React.ComponentType`/`React.VoidFunctionComponent`._
|
|
133
|
-
|
|
134
|
-
```ts
|
|
135
|
-
export type FieldSlots<T extends FieldComponent> = {
|
|
136
|
-
root: NonNullable<Slot<'div'>>;
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* The underlying component wrapped by this field.
|
|
140
|
-
*
|
|
141
|
-
* This is the PRIMARY slot: all intrinsic HTML properties will be applied to this slot,
|
|
142
|
-
* except `className` and `style`, which remain on the root slot.
|
|
143
|
-
*/
|
|
144
|
-
control: SlotComponent<T>;
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* The label associated with the field.
|
|
148
|
-
*/
|
|
149
|
-
label?: Slot<typeof Label>;
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
|
|
153
|
-
*/
|
|
154
|
-
validationMessage?: Slot<'span'>;
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
|
|
158
|
-
* icon corresponding to that state.
|
|
159
|
-
*
|
|
160
|
-
* This will only be displayed if `validationMessage` is set.
|
|
161
|
-
*/
|
|
162
|
-
validationMessageIcon?: Slot<'span'>;
|
|
163
|
-
|
|
164
|
-
/**
|
|
165
|
-
* Additional hint text below the field.
|
|
166
|
-
*/
|
|
167
|
-
hint?: Slot<'span'>;
|
|
168
|
-
};
|
|
169
|
-
```
|
|
170
|
-
|
|
171
|
-
### Props
|
|
172
|
-
|
|
173
|
-
```ts
|
|
174
|
-
export type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
|
|
175
|
-
/**
|
|
176
|
-
* The orientation of the label relative to the field component.
|
|
177
|
-
* This only affects the label, and not the validationMessage or hint (which always appear below the field component).
|
|
178
|
-
*
|
|
179
|
-
* @default vertical
|
|
180
|
-
*/
|
|
181
|
-
orientation?: 'vertical' | 'horizontal';
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`, and for some
|
|
185
|
-
* field components, an `validationState="error"` causes the border to become red.
|
|
186
|
-
*
|
|
187
|
-
* @default undefined
|
|
188
|
-
*/
|
|
189
|
-
validationState?: 'error' | 'warning' | 'success';
|
|
190
|
-
};
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
Field also reads some props from the underlying component. These are not part of `FieldProps` because they are not added to the components that don't support them. However, they are accepted by `useField`:
|
|
194
|
-
|
|
195
|
-
```ts
|
|
196
|
-
/**
|
|
197
|
-
* Props that are supported by Field, but not required to be supported by the component that implements field.
|
|
198
|
-
*/
|
|
199
|
-
export type OptionalFieldComponentProps = {
|
|
200
|
-
/**
|
|
201
|
-
* Whether the field label should be marked as required.
|
|
202
|
-
*/
|
|
203
|
-
required?: boolean;
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* Size of the field label.
|
|
207
|
-
*
|
|
208
|
-
* Number sizes will be ignored, but are allowed because the HTML <input> element has a `size` prop of type `number`.
|
|
209
|
-
*/
|
|
210
|
-
size?: 'small' | 'medium' | 'large' | number;
|
|
211
|
-
};
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### State
|
|
215
|
-
|
|
216
|
-
```ts
|
|
217
|
-
export type FieldState<T extends FieldComponent> = ComponentState<Required<FieldSlots<T>>> &
|
|
218
|
-
Pick<FieldProps<T>, 'orientation' | 'validationState'> & {
|
|
219
|
-
classNames: SlotClassNames<FieldSlots<T>>;
|
|
220
|
-
};
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
### Label for Checkbox and Switch
|
|
224
|
-
|
|
225
|
-
The Checkbox and Switch components already have a `label` prop, which conflicts with the Field's `label`.
|
|
226
|
-
|
|
227
|
-
#### `CheckboxField`
|
|
228
|
-
|
|
229
|
-
- The `label` prop will go to the Checkbox and NOT the Field
|
|
230
|
-
- New `fieldLabel` prop for the label of the Field
|
|
231
|
-
|
|
232
|
-
#### `SwitchField`
|
|
233
|
-
|
|
234
|
-
- The `label` prop will go to the Field and NOT the Switch
|
|
235
|
-
- The Switch's `labelPosition` prop is therefore not supported, and is omitted from SwitchField.
|
|
236
|
-
|
|
237
|
-
## Structure
|
|
238
|
-
|
|
239
|
-
### Public API
|
|
240
|
-
|
|
241
|
-
```jsx
|
|
242
|
-
<InputField
|
|
243
|
-
label="This is the field label"
|
|
244
|
-
orientation="horizontal"
|
|
245
|
-
validationState="error"
|
|
246
|
-
validationMessage="This is a validation message"
|
|
247
|
-
hint="This is a hint message"
|
|
248
|
-
/>
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
(similar API for other Field components)
|
|
252
|
-
|
|
253
|
-
### Slot structure
|
|
254
|
-
|
|
255
|
-
```jsx
|
|
256
|
-
<slots.root>
|
|
257
|
-
<slots.label {...slotProps.label} />
|
|
258
|
-
<slots.control {...slotProps.control} />
|
|
259
|
-
<slots.validationMessage {...slotProps.validationMessage}>
|
|
260
|
-
<slots.validationMessageIcon {...slotProps.validationMessageIcon} />
|
|
261
|
-
{slotProps.validationMessage.children}
|
|
262
|
-
</slots.validationMessage>
|
|
263
|
-
<slots.hint {...slotProps.hint} />
|
|
264
|
-
</slots.root>
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
### DOM structure
|
|
268
|
-
|
|
269
|
-
```html
|
|
270
|
-
<div className="fui-Field">
|
|
271
|
-
<label className="fui-Field__label fui-Label">This is the field label</label>
|
|
272
|
-
<!-- wrapped field component goes here -->
|
|
273
|
-
<span className="fui-Field__validationMessage">
|
|
274
|
-
<span className="fui-Field__validationMessageIcon"><svg>...</svg></span>
|
|
275
|
-
This is a validation message
|
|
276
|
-
</span>
|
|
277
|
-
<span className="fui-Field__hint">This is a hint message</span>
|
|
278
|
-
</div>
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
## Migration
|
|
282
|
-
|
|
283
|
-
### Migration from v8
|
|
284
|
-
|
|
285
|
-
Migration from v8 will require picking between the normal and `Field` version of an input control, depending on whether the field-specific features are required: (`label`, `validationState="error"`, `validationMessage`, `hint`)
|
|
286
|
-
|
|
287
|
-
See individual input components for more detailed migration guides.
|
|
288
|
-
|
|
289
|
-
| v8 Control | v9 Base control | v9 Field control | Notes |
|
|
290
|
-
| ------------- | --------------------- | ------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
291
|
-
| `Checkbox` | `Checkbox` | `CheckboxField` | Only use `CheckboxField` if an error message is needed, or if required for layout in a form. |
|
|
292
|
-
| `ChoiceGroup` | `RadioGroup` | `RadioGroupField` | |
|
|
293
|
-
| `ComboBox` | `Combobox` | `ComboboxField` | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."` |
|
|
294
|
-
| `Dropdown` | `Dropdown` | `DropdownField` | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."` |
|
|
295
|
-
| `Slider` | `Slider` | `SliderField` | |
|
|
296
|
-
| `SpinButton` | `SpinButton` | `SpinButtonField` | |
|
|
297
|
-
| `TextField` | `Input` OR `Textarea` | `InputField` OR `TextareaField` | `errorMessage="..."` is replaced by `validationState="error" validationMessage="..."` |
|
|
298
|
-
| `Toggle` | `Switch` | `SwitchField` | |
|
|
299
|
-
|
|
300
|
-
### Migration from v0
|
|
301
|
-
|
|
302
|
-
Many components in v0 have `Form___` versions (such as `FormInput`). Those are replaced by the `___Field` equivalent. See the underlying component's migration guides for more detailed migration information.
|
|
303
|
-
|
|
304
|
-
Component mapping:
|
|
305
|
-
|
|
306
|
-
- `FormButton` => Not supported
|
|
307
|
-
- `FormCheckbox` => `CheckboxField` OR `SwitchField`
|
|
308
|
-
- `FormDatepicker` => _(Not yet implemented)_
|
|
309
|
-
- `FormDropdown` => `DropdownField`
|
|
310
|
-
- `FormField` => Not supported
|
|
311
|
-
- `FormFieldCustom` => Not supported
|
|
312
|
-
- `FormLabel` => The `label` prop of the field component
|
|
313
|
-
- `FormMessage` => Either the `validationMessage` or `hint` prop of the field component
|
|
314
|
-
- `FormRadioGroup` => `RadioGroupField`
|
|
315
|
-
- `FormSlider` => `SliderField`
|
|
316
|
-
- `FormTextArea` => `TextareaField`
|
|
317
|
-
|
|
318
|
-
The following props are common to each of the `Form___` components:
|
|
319
|
-
|
|
320
|
-
- `label` => `label`
|
|
321
|
-
- `message` => either `validationMessage` or `hint`
|
|
322
|
-
- `errorMessage` => `validationMessage` with `validationState="error"`
|
|
323
|
-
|
|
324
|
-
## Behaviors
|
|
325
|
-
|
|
326
|
-
### Form validation
|
|
327
|
-
|
|
328
|
-
Field has no logic to perform input validation. It is expected that the validation will be done externally (possibly using a third party form validation library like Formik).
|
|
329
|
-
|
|
330
|
-
### Interaction
|
|
331
|
-
|
|
332
|
-
The Field itself is not interactive. The wrapped component has the same interactions as it does outside of a field.
|
|
333
|
-
|
|
334
|
-
## Accessibility
|
|
335
|
-
|
|
336
|
-
- **ARIA pattern**
|
|
337
|
-
- Field itself does not implement a defined ARIA pattern. It has no role applied to the root element.
|
|
338
|
-
- **Attributes**
|
|
339
|
-
- The following are applied on the wrapped component:
|
|
340
|
-
- `aria-labelledby={label.id}`, if the label is present.
|
|
341
|
-
- `aria-describedby` is set to one of:
|
|
342
|
-
- `aria-describedby={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState !== 'error'`
|
|
343
|
-
- `aria-describedby={hint.id}`, if hint is present
|
|
344
|
-
- `aria-describedby={validationMessage.id + ' ' + hint.id}`, if both conditions above apply
|
|
345
|
-
- `aria-errormessage={validationMessage.id}`, if validationMessage is present, and _only if_ `validationState === 'error'`
|
|
346
|
-
- `aria-invalid={true}`, _only if_ `validationState === 'error'`
|
|
347
|
-
- On the `label` slot:
|
|
348
|
-
- `htmlFor={control.id}` - the wrapped component's `id` (an ID is generated if not supplied via props).
|
|
349
|
-
- **Live regions** (state change announcements)
|
|
350
|
-
- TBD: Need to determine if the validation message should be an aria live region.
|
|
351
|
-
- **UI parts appearing on hover or focus**
|
|
352
|
-
- None.
|
|
353
|
-
- **Focus behavior**
|
|
354
|
-
- No special focus behavior: no focus trapping or programmatic focus moving.
|