@fluentui/react-field 9.0.0-alpha.18 → 9.0.0-alpha.19
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
},
|