@fluentui/react-field - npm Package Compare versions

Comparing version 0.0.0-nightly-20230127-0417.1 to 0.0.0-nightly-20230130-0422.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Fri, 27 Jan 2023 04:24:28 GMT",
-      "tag": "@fluentui/react-field_v0.0.0-nightly-20230127-0417.1",
-      "version": "0.0.0-nightly-20230127-0417.1",
+      "date": "Mon, 30 Jan 2023 04:29:55 GMT",
+      "tag": "@fluentui/react-field_v0.0.0-nightly-20230130-0422.1",
+      "version": "0.0.0-nightly-20230130-0422.1",
       "comments": {
@@ -20,4 +20,4 @@ "prerelease": [
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230127-0417.1",
-            "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230130-0422.1",
+            "commit": "448f83795601876827935e9f49637383ade73cc9"
           },
@@ -27,4 +27,4 @@ {
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230127-0417.1",
-            "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230130-0422.1",
+            "commit": "448f83795601876827935e9f49637383ade73cc9"
           },
@@ -34,4 +34,4 @@ {
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230127-0417.1",
-            "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230130-0422.1",
+            "commit": "448f83795601876827935e9f49637383ade73cc9"
           },
@@ -41,4 +41,4 @@ {
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230127-0417.1",
-            "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230130-0422.1",
+            "commit": "448f83795601876827935e9f49637383ade73cc9"
           },
@@ -48,4 +48,4 @@ {
             "package": "@fluentui/react-field",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230127-0417.1",
-            "commit": "5512c8f181263f8f51c0f89f8e750f27e1de4f57"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230130-0422.1",
+            "commit": "448f83795601876827935e9f49637383ade73cc9"
           }
@@ -52,0 +52,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-field
 
-This log was last generated on Fri, 27 Jan 2023 04:24:28 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Jan 2023 04:29:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20230127-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230127-0417.1)
+## [0.0.0-nightly-20230130-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230130-0422.1)
 
-Fri, 27 Jan 2023 04:24:28 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.17..@fluentui/react-field_v0.0.0-nightly-20230127-0417.1)
+Mon, 30 Jan 2023 04:29:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.17..@fluentui/react-field_v0.0.0-nightly-20230130-0422.1)
 
@@ -15,7 +15,7 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230127-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/5512c8f181263f8f51c0f89f8e750f27e1de4f57) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230130-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/448f83795601876827935e9f49637383ade73cc9) by beachball)
 
@@ -22,0 +22,0 @@ ## [9.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.17)

dist/index.d.ts

@@ -52,8 +52,14 @@ /// <reference types="react" />
     /**
-     * The `validationState` affects the color of the `validationMessage`, the `validationMessageIcon`
+     * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.
      *
-     * Setting `validationState` to `error` will also set `aria-invalid` to `true` on the Field's child,
-     * `role="alert"` on the `validationMessage`, and for some field components, causes the border to become red.
+     * * `error` - (default) The validation message has a red error icon and red text, with `role="alert"` so it is
+     *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a
+     *     red border to some field components (such as `Input`).
+     * * `success` - The validation message has a green checkmark icon and gray text.
+     * * `warning` - The validation message has a yellow exclamation icon and gray text.
+     * * `none` - The validation message has no icon and gray text.
+     *
+     * @default error when `validationMessage` is set; none otherwise.
      */
-    validationState?: 'error' | 'warning' | 'success';
+    validationState?: 'error' | 'warning' | 'success' | 'none';
     /**
@@ -82,10 +88,14 @@ * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set
     /**
-     * A message about the validation state. The appearance of the `validationMessage` depends on `validationState`.
+     * A message about the validation state. By default, this is an error message, but it can be a success, warning,
+     * or custom message by setting `validationState`.
      */
     validationMessage?: Slot<'div'>;
     /**
-     * The icon associated with the `validationMessage`. If the `validationState` prop is set, this will default to an
-     * icon corresponding to that state.
+     * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.
      *
-     * This will only be displayed if `validationMessage` is set.
+     * The default depends on `validationState`:
+     * * `error` - `<ErrorCircle12Filled />`
+     * * `warning` - `<Warning12Filled />`
+     * * `success` - `<CheckmarkCircle12Filled />`
+     * * `none` - `null`
      */
@@ -102,3 +112,3 @@ validationMessageIcon?: Slot<'span'>;
  */
-export declare type FieldState = ComponentState<Required<FieldSlots>> & Pick<FieldProps, 'orientation' | 'validationState'>;
+export declare type FieldState = ComponentState<Required<FieldSlots>> & Required<Pick<FieldProps, 'orientation' | 'validationState'>>;
 
@@ -105,0 +115,0 @@ /**

lib-commonjs/components/Field/useField.js

@@ -14,3 +14,4 @@ "use strict";
   warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
-  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
+  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null),
+  none: undefined
 };
@@ -32,3 +33,3 @@ /**
     required,
-    validationState,
+    validationState = props.validationMessage ? 'error' : 'none',
     size
@@ -61,6 +62,7 @@ } = props;
   });
+  const defaultIcon = validationMessageIcons[validationState];
   const validationMessageIcon = react_utilities_1.resolveShorthand(props.validationMessageIcon, {
-    required: !!validationState,
+    required: !!defaultIcon,
     defaultProps: {
-      children: validationState ? validationMessageIcons[validationState] : undefined
+      children: defaultIcon
     }
@@ -67,0 +69,0 @@ });

lib-commonjs/components/Field/useFieldStyles.js

@@ -101,3 +101,3 @@ "use strict";
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = react_1.mergeClasses(exports.fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
@@ -104,0 +104,0 @@ const secondaryTextBaseClassName = useSecondaryTextBaseClassName();

lib-commonjs/util/makeDeprecatedField.js

@@ -26,3 +26,3 @@ "use strict";
     validationMessageIcon,
-    validationState,
+    validationState = 'none',
     ...restOfProps
@@ -29,0 +29,0 @@ } = props;

lib/components/Field/useField.js

@@ -8,3 +8,4 @@ import * as React from 'react';
   warning: /*#__PURE__*/React.createElement(Warning12Filled, null),
-  success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null)
+  success: /*#__PURE__*/React.createElement(CheckmarkCircle12Filled, null),
+  none: undefined
 };
@@ -26,3 +27,3 @@ /**
     required,
-    validationState,
+    validationState = props.validationMessage ? 'error' : 'none',
     size
@@ -55,6 +56,7 @@ } = props;
   });
+  const defaultIcon = validationMessageIcons[validationState];
   const validationMessageIcon = resolveShorthand(props.validationMessageIcon, {
-    required: !!validationState,
+    required: !!defaultIcon,
     defaultProps: {
-      children: validationState ? validationMessageIcons[validationState] : undefined
+      children: defaultIcon
     }
@@ -61,0 +63,0 @@ });

lib/components/Field/useFieldStyles.js

@@ -95,3 +95,3 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
@@ -98,0 +98,0 @@ const secondaryTextBaseClassName = useSecondaryTextBaseClassName();

lib/util/makeDeprecatedField.js

@@ -20,3 +20,3 @@ /* eslint-disable deprecation/deprecation */
     validationMessageIcon,
-    validationState,
+    validationState = 'none',
     ...restOfProps
@@ -23,0 +23,0 @@ } = props;

package.json

 {
   "name": "@fluentui/react-field",
-  "version": "0.0.0-nightly-20230127-0417.1",
+  "version": "0.0.0-nightly-20230130-0422.1",
   "description": "Fluent UI Field components",
@@ -30,3 +30,3 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230127-0417.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230130-0422.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -36,7 +36,7 @@ "@fluentui/scripts-tasks": "*"
   "dependencies": {
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230127-0417.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230130-0422.1",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "0.0.0-nightly-20230127-0417.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230127-0417.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230127-0417.1",
+    "@fluentui/react-label": "0.0.0-nightly-20230130-0422.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230130-0422.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230130-0422.1",
     "@griffel/react": "^1.5.2",
@@ -43,0 +43,0 @@ "tslib": "^2.1.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

151305

increased by1.18%

Lines of code

1912

increased by0.74%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20230130-0422.1(transitive)

• + Added@fluentui/react-context-selector@0.0.0-nightly-20230130-0422.1(transitive)

• + Added@fluentui/react-label@0.0.0-nightly-20230130-0422.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20230130-0422.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20230130-0422.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20230130-0422.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20230127-0417.1(transitive)

• - Removed@fluentui/react-context-selector@0.0.0-nightly-20230127-0417.1(transitive)

• - Removed@fluentui/react-label@0.0.0-nightly-20230127-0417.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20230127-0417.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20230127-0417.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20230127-0417.1(transitive)

• Updated@fluentui/react-context-selector@0.0.0-nightly-20230130-0422.1

• Updated@fluentui/react-label@0.0.0-nightly-20230130-0422.1

• Updated@fluentui/react-theme@0.0.0-nightly-20230130-0422.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20230130-0422.1