@fluentui/react-field 9.0.0-alpha.18 → 9.0.0-alpha.19
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/CHANGELOG.json +45 -4
- package/CHANGELOG.md +16 -5
- package/README.md +66 -1
- package/dist/index.d.ts +9 -9
- package/lib/components/Field/Field.types.js.map +1 -1
- package/lib-amd/components/Field/Field.types.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,48 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 10 Feb 2023 08:46:44 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v9.0.0-alpha.19",
|
|
7
|
+
"version": "9.0.0-alpha.19",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "behowell@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-field",
|
|
13
|
+
"commit": "7db30ce5c8ff56bbcfb01d40e60db382356b6b38",
|
|
14
|
+
"comment": "chore: Update Field spec and migration guide"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "behowell@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-field",
|
|
19
|
+
"commit": "2a4adf399928df00013a1b58eb5dd1ce77141c57",
|
|
20
|
+
"comment": "chore: Update Field documentation and stories"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"prerelease": [
|
|
24
|
+
{
|
|
25
|
+
"author": "beachball",
|
|
26
|
+
"package": "@fluentui/react-field",
|
|
27
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.8",
|
|
28
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "beachball",
|
|
32
|
+
"package": "@fluentui/react-field",
|
|
33
|
+
"comment": "Bump @fluentui/react-label to v9.0.20",
|
|
34
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-field",
|
|
39
|
+
"comment": "Bump @fluentui/react-utilities to v9.5.2",
|
|
40
|
+
"commit": "cc62f050f8231e8f21a2cf7dddf33003e0ba3931"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Tue, 31 Jan 2023 19:53:56 GMT",
|
|
6
47
|
"tag": "@fluentui/react-field_v9.0.0-alpha.18",
|
|
7
48
|
"version": "9.0.0-alpha.18",
|
|
8
49
|
"comments": {
|
|
@@ -17,19 +58,19 @@
|
|
|
17
58
|
"author": "beachball",
|
|
18
59
|
"package": "@fluentui/react-field",
|
|
19
60
|
"comment": "Bump @fluentui/react-context-selector to v9.1.7",
|
|
20
|
-
"commit": "
|
|
61
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
21
62
|
},
|
|
22
63
|
{
|
|
23
64
|
"author": "beachball",
|
|
24
65
|
"package": "@fluentui/react-field",
|
|
25
66
|
"comment": "Bump @fluentui/react-label to v9.0.19",
|
|
26
|
-
"commit": "
|
|
67
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
27
68
|
},
|
|
28
69
|
{
|
|
29
70
|
"author": "beachball",
|
|
30
71
|
"package": "@fluentui/react-field",
|
|
31
72
|
"comment": "Bump @fluentui/react-utilities to v9.5.1",
|
|
32
|
-
"commit": "
|
|
73
|
+
"commit": "794d9e845cb952f597ba786e70cd8d248be62746"
|
|
33
74
|
}
|
|
34
75
|
]
|
|
35
76
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 10 Feb 2023 08:46:44 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.19)
|
|
8
|
+
|
|
9
|
+
Fri, 10 Feb 2023 08:46:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.18..@fluentui/react-field_v9.0.0-alpha.19)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-context-selector to v9.1.8 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
15
|
+
- Bump @fluentui/react-label to v9.0.20 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.5.2 ([commit](https://github.com/microsoft/fluentui/commit/cc62f050f8231e8f21a2cf7dddf33003e0ba3931) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.18)
|
|
8
19
|
|
|
9
|
-
Tue, 31 Jan 2023 19:
|
|
20
|
+
Tue, 31 Jan 2023 19:53:56 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.17..@fluentui/react-field_v9.0.0-alpha.18)
|
|
11
22
|
|
|
12
23
|
### Changes
|
|
13
24
|
|
|
14
25
|
- chore: Change the default value of validationState to error when a validationMessage is set. ([PR #26523](https://github.com/microsoft/fluentui/pull/26523) by behowell@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v9.1.7 ([PR #
|
|
16
|
-
- Bump @fluentui/react-label to v9.0.19 ([PR #
|
|
17
|
-
- Bump @fluentui/react-utilities to v9.5.1 ([PR #
|
|
26
|
+
- Bump @fluentui/react-context-selector to v9.1.7 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
27
|
+
- Bump @fluentui/react-label to v9.0.19 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.5.1 ([PR #26557](https://github.com/microsoft/fluentui/pull/26557) by beachball)
|
|
18
29
|
|
|
19
30
|
## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.17)
|
|
20
31
|
|
package/README.md
CHANGED
|
@@ -1,5 +1,70 @@
|
|
|
1
1
|
# @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
**React Field
|
|
3
|
+
**React Field component for [Fluent UI React](https://react.fluentui.dev/)**
|
|
4
4
|
|
|
5
5
|
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
|
6
|
+
|
|
7
|
+
## Description
|
|
8
|
+
|
|
9
|
+
Field adds a label, validation message, and hint text to a control. Any single form control can be used as the child of the Field.
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
To import Field:
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { Field } from '@fluentui/react-components/unstable';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Examples
|
|
20
|
+
|
|
21
|
+
Works with many form controls, for example:
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
<>
|
|
25
|
+
<Field label="Name">
|
|
26
|
+
<Input />
|
|
27
|
+
</Field>
|
|
28
|
+
<Field label="Description">
|
|
29
|
+
<Textarea />
|
|
30
|
+
</Field>
|
|
31
|
+
<Field label="Size">
|
|
32
|
+
<RadioGroup>
|
|
33
|
+
<Radio label="Small" />
|
|
34
|
+
<Radio label="Medium" />
|
|
35
|
+
<Radio label="Large" />
|
|
36
|
+
</RadioGroup>
|
|
37
|
+
</Field>
|
|
38
|
+
</>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Display hint text:
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
<Field label="Password" hint="Must be at least 8 characters long.">
|
|
45
|
+
<Input type="password" />
|
|
46
|
+
</Field>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Display an error message:
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
<Field label="Re-enter password" validationMessage="Passwords do not match.">
|
|
53
|
+
<Input type="password" />
|
|
54
|
+
</Field>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
|
|
58
|
+
|
|
59
|
+
Alternatively, run Storybook locally with:
|
|
60
|
+
|
|
61
|
+
1. `yarn start`
|
|
62
|
+
2. Select `react-field` from the list.
|
|
63
|
+
|
|
64
|
+
### Specification
|
|
65
|
+
|
|
66
|
+
See [SPEC.md](./SPEC.md).
|
|
67
|
+
|
|
68
|
+
### Migration Guide
|
|
69
|
+
|
|
70
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating the Field component.
|
package/dist/index.d.ts
CHANGED
|
@@ -51,14 +51,14 @@ export declare type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> &
|
|
|
51
51
|
/**
|
|
52
52
|
* The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.
|
|
53
53
|
*
|
|
54
|
-
* *
|
|
54
|
+
* * error: (default) The validation message has a red error icon and red text, with `role="alert"` so it is
|
|
55
55
|
* announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a
|
|
56
56
|
* red border to some field components (such as `Input`).
|
|
57
|
-
* *
|
|
58
|
-
* *
|
|
59
|
-
* *
|
|
57
|
+
* * success: The validation message has a green checkmark icon and gray text.
|
|
58
|
+
* * warning: The validation message has a yellow exclamation icon and gray text.
|
|
59
|
+
* * none: The validation message has no icon and gray text.
|
|
60
60
|
*
|
|
61
|
-
* @default error when
|
|
61
|
+
* @default error when validationMessage is set; none otherwise.
|
|
62
62
|
*/
|
|
63
63
|
validationState?: 'error' | 'warning' | 'success' | 'none';
|
|
64
64
|
/**
|
|
@@ -92,10 +92,10 @@ export declare type FieldSlots = {
|
|
|
92
92
|
* The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.
|
|
93
93
|
*
|
|
94
94
|
* The default depends on `validationState`:
|
|
95
|
-
* *
|
|
96
|
-
* *
|
|
97
|
-
* *
|
|
98
|
-
* *
|
|
95
|
+
* * error: `<ErrorCircle12Filled />`
|
|
96
|
+
* * warning: `<Warning12Filled />`
|
|
97
|
+
* * success: `<CheckmarkCircle12Filled />`
|
|
98
|
+
* * none: `null`
|
|
99
99
|
*/
|
|
100
100
|
validationMessageIcon?: Slot<'span'>;
|
|
101
101
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * *
|
|
1
|
+
{"version":3,"file":"Field.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * *
|
|
1
|
+
{"version":3,"file":"Field.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/Field.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the Field's child element.\n */\nexport type FieldChildProps = Pick<\n React.HTMLAttributes<HTMLElement>,\n 'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The label associated with the field.\n */\n label?: Slot<typeof Label>;\n\n /**\n * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n * or custom message by setting `validationState`.\n */\n validationMessage?: Slot<'div'>;\n\n /**\n * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n *\n * The default depends on `validationState`:\n * * error: `<ErrorCircle12Filled />`\n * * warning: `<Warning12Filled />`\n * * success: `<CheckmarkCircle12Filled />`\n * * none: `null`\n */\n validationMessageIcon?: Slot<'span'>;\n\n /**\n * Additional hint text below the field.\n */\n hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n /**\n * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n * a form control.\n *\n * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`), as well\n * as intrinsic form controls like `<input>` or `<textarea>`. Custom controls can also be used as long as they\n * accept FieldChildProps and spread them on the appropriate element.\n *\n * For more complex scenarios, a render function can be used to pass the FieldChildProps to the appropriate control.\n */\n children?: React.ReactElement<FieldChildProps> | null | ((props: FieldChildProps) => React.ReactNode);\n\n /**\n * The orientation of the label relative to the field component.\n * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n *\n * @default vertical\n */\n orientation?: 'vertical' | 'horizontal';\n\n /**\n * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n *\n * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n * announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n * red border to some field components (such as `Input`).\n * * success: The validation message has a green checkmark icon and gray text.\n * * warning: The validation message has a yellow exclamation icon and gray text.\n * * none: The validation message has no icon and gray text.\n *\n * @default error when validationMessage is set; none otherwise.\n */\n validationState?: 'error' | 'warning' | 'success' | 'none';\n\n /**\n * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n * on the Field's child.\n */\n required?: boolean;\n\n /**\n * The size of the Field's label.\n *\n * @default medium\n */\n size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n Required<Pick<FieldProps, 'orientation' | 'validationState'>>;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.19",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
35
|
+
"@fluentui/react-context-selector": "^9.1.8",
|
|
36
36
|
"@fluentui/react-icons": "^2.0.175",
|
|
37
|
-
"@fluentui/react-label": "^9.0.
|
|
37
|
+
"@fluentui/react-label": "^9.0.20",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.5",
|
|
39
|
-
"@fluentui/react-utilities": "^9.5.
|
|
39
|
+
"@fluentui/react-utilities": "^9.5.2",
|
|
40
40
|
"@griffel/react": "^1.5.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|