@fluentui/react-field - npm Package Compare versions

Comparing version 9.0.0-alpha.15 to 9.0.0-alpha.16

CHANGELOG.json

@@ -5,3 +5,36 @@ {
     {
-      "date": "Mon, 16 Jan 2023 08:35:37 GMT",
+      "date": "Mon, 23 Jan 2023 16:41:42 GMT",
+      "tag": "@fluentui/react-field_v9.0.0-alpha.16",
+      "version": "9.0.0-alpha.16",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "1f145044a1ef3707e0724d75f9b70e7d2af69375",
+            "comment": "chore: Simplify Field layout styles"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "b04b2f0c02f2ccd7960905a886ce27f2321fee72",
+            "comment": "fix: Stretch Field components to full width"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "48a6fc95e6eb7530c162390fb70db7fac88b15ab",
+            "comment": "fix: Update Field label padding to match spec"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "014041b7447b02856ae50638de71bdb829b0a759",
+            "comment": "fix: Field sets role=\"alert\" on its error message so it is announced by screen readers"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 16 Jan 2023 08:39:01 GMT",
       "tag": "@fluentui/react-field_v9.0.0-alpha.15",
@@ -8,0 +41,0 @@ "version": "9.0.0-alpha.15",

CHANGELOG.md

 # Change Log - @fluentui/react-field
 
-This log was last generated on Mon, 16 Jan 2023 08:35:37 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Jan 2023 16:41:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.16)
+
+Mon, 23 Jan 2023 16:41:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v9.0.0-alpha.16)
+
+### Changes
+
+- chore: Simplify Field layout styles ([PR #26352](https://github.com/microsoft/fluentui/pull/26352) by [e-mail])
+- fix: Stretch Field components to full width ([PR #26412](https://github.com/microsoft/fluentui/pull/26412) by [e-mail])
+- fix: Update Field label padding to match spec ([PR #26413](https://github.com/microsoft/fluentui/pull/26413) by [e-mail])
+- fix: Field sets role="alert" on its error message so it is announced by screen readers ([PR #26414](https://github.com/microsoft/fluentui/pull/26414) by [e-mail])
+
 ## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
 
-Mon, 16 Jan 2023 08:35:37 GMT 
+Mon, 16 Jan 2023 08:39:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.14..@fluentui/react-field_v9.0.0-alpha.15)
@@ -11,0 +23,0 @@

lib-amd/components/Field/renderField.js

@@ -13,4 +13,5 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
             slots.control && React.createElement(slots.control, tslib_1.__assign({}, slotProps.control)),
-            slots.validationMessage && slots.validationMessageIcon && (React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon))),
-            slots.validationMessage && React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage)),
+            slots.validationMessage && (React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage),
+                slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon)),
+                slotProps.validationMessage.children)),
             slots.hint && React.createElement(slots.hint, tslib_1.__assign({}, slotProps.hint))));
@@ -17,0 +18,0 @@ };

lib-amd/components/Field/useField.js

@@ -61,2 +61,3 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-icons", "@fluentui/react-label", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_icons_1, react_label_1, react_utilities_1) {
                 id: baseId + '__validationMessage',
+                role: validationState === 'error' ? 'alert' : undefined,
             },
@@ -63,0 +64,0 @@ });

lib-amd/components/Field/useFieldStyles.js

@@ -14,2 +14,4 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
     exports.getFieldClassNames = getFieldClassNames;
+    // Size of the icon in the validation message
+    var iconSize = '12px';
     /**
@@ -21,60 +23,59 @@ * Styles for the root slot
             display: 'grid',
-            gridAutoFlow: 'row',
-            gridTemplateColumns: 'auto 1fr',
-            gridTemplateAreas: "\n      \"label label\"\n      \"control control\"\n      \"validationIcon validationMessage\"\n      \"hint hint\"\n    ",
-            justifyItems: 'start',
         },
+        // In horizontal layout, the field is a grid with the label taking up the entire first column.
+        // The last row is slack space in case the label is taller than the rest of the content.
         horizontal: {
-            gridTemplateColumns: '33% auto 1fr',
-            gridTemplateAreas: "\n      \"label control control\"\n      \"label validationIcon validationMessage\"\n      \"label hint hint\"\n      \"label . .\"\n    ",
+            gridTemplateColumns: '33% 1fr',
+            gridTemplateRows: 'auto auto auto 1fr',
         },
-        label: {
-            gridColumnStart: 'label',
-            gridColumnEnd: 'label',
-            gridRowStart: 'label',
-            gridRowEnd: 'label',
+        // In horizontal layout without a label, replace the label's column with padding.
+        // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.
+        horizontalNoLabel: {
+            paddingLeft: '33%',
+            gridTemplateColumns: '1fr',
         },
-        control: {
-            gridColumnStart: 'control',
-            gridColumnEnd: 'control',
-        },
-        validationIcon: {
-            gridColumnStart: 'validationIcon',
-            gridColumnEnd: 'validationIcon',
-        },
-        validationMessage: {
-            gridColumnStart: 'validationMessage',
-            gridColumnEnd: 'validationMessage',
-        },
-        hint: {
-            gridColumnStart: 'hint',
-            gridColumnEnd: 'hint',
-        },
     });
     var useLabelStyles = react_1.makeStyles({
         base: {
-            marginTop: react_theme_1.tokens.spacingVerticalXXS,
+            paddingTop: react_theme_1.tokens.spacingVerticalXXS,
+            paddingBottom: react_theme_1.tokens.spacingVerticalXXS,
+        },
+        large: {
+            paddingTop: '1px',
+            paddingBottom: '1px',
+        },
+        vertical: {
             marginBottom: react_theme_1.tokens.spacingVerticalXXS,
         },
+        verticalLarge: {
+            marginBottom: react_theme_1.tokens.spacingVerticalXS,
+        },
         horizontal: {
             marginRight: react_theme_1.tokens.spacingHorizontalM,
-            alignSelf: 'start',
-            justifySelf: 'stretch',
+            gridRowStart: '1',
+            gridRowEnd: '-1',
         },
     });
+    var useSecondaryTextBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1));
     var useSecondaryTextStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ marginTop: react_theme_1.tokens.spacingVerticalXXS, color: react_theme_1.tokens.colorNeutralForeground3 }, react_theme_1.typographyStyles.caption1),
         error: {
             color: react_theme_1.tokens.colorPaletteRedForeground1,
         },
+        withIcon: {
+            // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.
+            paddingLeft: "calc(" + iconSize + " + " + react_theme_1.tokens.spacingHorizontalXS + ")",
+        },
     });
+    var useValidationMessageIconBaseClassName = react_1.makeResetStyles({
+        display: 'inline-block',
+        fontSize: iconSize,
+        // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.
+        marginLeft: "calc(-" + iconSize + " - " + react_theme_1.tokens.spacingHorizontalXS + ")",
+        marginRight: react_theme_1.tokens.spacingHorizontalXS,
+        // Line height of 0 prevents the verticalAlign from affecting the line height of the text.
+        lineHeight: '0',
+        // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).
+        verticalAlign: '-1px',
+    });
     var useValidationMessageIconStyles = react_1.makeStyles({
-        base: {
-            display: 'block',
-            alignSelf: 'start',
-            fontSize: '12px',
-            lineHeight: '12px',
-            marginRight: react_theme_1.tokens.spacingHorizontalXS,
-            marginTop: react_theme_1.tokens.spacingVerticalXS,
-        },
         error: {
@@ -98,20 +99,22 @@ color: react_theme_1.tokens.colorPaletteRedForeground1,
         var rootStyles = useRootStyles();
-        state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
+        state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
         if (state.control) {
-            state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
+            state.control.className = react_1.mergeClasses(classNames.control, state.control.className);
         }
         var labelStyles = useLabelStyles();
         if (state.label) {
-            state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
+            state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
         }
+        var validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
         var validationMessageIconStyles = useValidationMessageIconStyles();
         if (state.validationMessageIcon) {
-            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
         }
+        var secondaryTextBaseClassName = useSecondaryTextBaseClassName();
         var secondaryTextStyles = useSecondaryTextStyles();
         if (state.validationMessage) {
-            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
         }
         if (state.hint) {
-            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
+            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
         }
@@ -118,0 +121,0 @@ };

lib-commonjs/components/Field/renderField.js

@@ -23,7 +23,7 @@ "use strict";
     ...slotProps.control
-  }), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
-    ...slotProps.validationMessageIcon
   }), slots.validationMessage && React.createElement(slots.validationMessage, {
     ...slotProps.validationMessage
-  }), slots.hint && React.createElement(slots.hint, {
+  }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
+    ...slotProps.validationMessageIcon
+  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
     ...slotProps.hint
@@ -30,0 +30,0 @@ }));

lib-commonjs/components/Field/useField.js

@@ -85,3 +85,4 @@ "use strict";
     defaultProps: {
-      id: baseId + '__validationMessage'
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' ? 'alert' : undefined
     }
@@ -88,0 +89,0 @@ });

lib-commonjs/components/Field/useFieldStyles.js

@@ -18,2 +18,4 @@ "use strict";
 exports.getFieldClassNames = getFieldClassNames;
+// Size of the icon in the validation message
+const iconSize = '12px';
 /**
@@ -24,74 +26,51 @@ * Styles for the root slot
   base: {
-    mc9l5x: "f13qh94s",
-    Bxotwcr: "f14np9u9",
-    Budl1dq: "fjxzuw",
-    zoa1oz: "f6nraym",
-    B7hvi0a: "f1m2n5bn"
+    mc9l5x: "f13qh94s"
   },
   horizontal: {
-    Budl1dq: "fwibhjm",
-    zoa1oz: "f7bqb3c"
+    Budl1dq: "f2wwaib",
+    wkccdc: "f1645dqt"
   },
-  label: {
-    Br312pm: "f150pcdf",
-    Bw0ie65: "fwm4whi",
-    Ijaq50: "f1tty21m",
-    nk6f5a: "f19648ye"
-  },
-  control: {
-    Br312pm: "f1bfa6ju",
-    Bw0ie65: "fl3lap4"
-  },
-  validationIcon: {
-    Br312pm: "ftfzah7",
-    Bw0ie65: "f1fih8f9"
-  },
-  validationMessage: {
-    Br312pm: "f1n69xcw",
-    Bw0ie65: "f1hw1m5m"
-  },
-  hint: {
-    Br312pm: "fbug73u",
-    Bw0ie65: "fbtgo1w"
+  horizontalNoLabel: {
+    uwmqm3: ["f15jqgz8", "fggqkej"],
+    Budl1dq: "f1c2z91y"
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
+  d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
 });
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   base: {
-    B6of3ja: "fg30ohd",
+    z8tnut: "fclwglc",
+    Byoj8tv: "fywfov9"
+  },
+  large: {
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1brlhvm"
+  },
+  vertical: {
     jrapky: "fyacil5"
   },
+  verticalLarge: {
+    jrapky: "f8l5zjj"
+  },
   horizontal: {
     t21cq0: ["fkujibs", "f199hnxi"],
-    qb2dma: "f9h729m",
-    Bdqf98w: "fhb5wj7"
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z"
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
+  d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
 });
+const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
 const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    B6of3ja: "fg30ohd",
-    sj55zd: "f11d4kpn",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
-  },
   error: {
     sj55zd: "f1hcrxcs"
+  },
+  withIcon: {
+    uwmqm3: ["frawy03", "fg4c52"]
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
 });
+const useValidationMessageIconBaseClassName = /*#__PURE__*/react_1.__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
 const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "ftgm304",
-    qb2dma: "f9h729m",
-    Be2twd7: "f1ugzwwg",
-    Bg96gwp: "fp4gqsa",
-    t21cq0: ["fm0x6gh", "fbyavb5"],
-    B6of3ja: "fww94b8"
-  },
   error: {
@@ -107,3 +86,3 @@ sj55zd: "f1hcrxcs"
 }, {
-  d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
 });
@@ -118,20 +97,22 @@ /**
   const rootStyles = useRootStyles();
-  state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
+  state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
   if (state.control) {
-    state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
+    state.control.className = react_1.mergeClasses(classNames.control, state.control.className);
   }
   const labelStyles = useLabelStyles();
   if (state.label) {
-    state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
+    state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
   }
+  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
-    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
   }
   if (state.hint) {
-    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
+    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
   }
@@ -138,0 +119,0 @@ };

lib/components/Field/renderField.js

@@ -17,7 +17,7 @@ import * as React from 'react';
     ...slotProps.control
-  }), slots.validationMessage && slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
-    ...slotProps.validationMessageIcon
   }), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
     ...slotProps.validationMessage
-  }), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
+  }, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
+    ...slotProps.validationMessageIcon
+  }), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
     ...slotProps.hint
@@ -24,0 +24,0 @@ }));

lib/components/Field/useField.js

@@ -78,3 +78,4 @@ import * as React from 'react';
     defaultProps: {
-      id: baseId + '__validationMessage'
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' ? 'alert' : undefined
     }
@@ -81,0 +82,0 @@ });

lib/components/Field/useFieldStyles.js

 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 export const getFieldClassNames = name => ({
@@ -11,2 +11,4 @@ root: `fui-${name}`,
 });
+// Size of the icon in the validation message
+const iconSize = '12px';
 /**
@@ -17,74 +19,51 @@ * Styles for the root slot
   base: {
-    mc9l5x: "f13qh94s",
-    Bxotwcr: "f14np9u9",
-    Budl1dq: "fjxzuw",
-    zoa1oz: "f6nraym",
-    B7hvi0a: "f1m2n5bn"
+    mc9l5x: "f13qh94s"
   },
   horizontal: {
-    Budl1dq: "fwibhjm",
-    zoa1oz: "f7bqb3c"
+    Budl1dq: "f2wwaib",
+    wkccdc: "f1645dqt"
   },
-  label: {
-    Br312pm: "f150pcdf",
-    Bw0ie65: "fwm4whi",
-    Ijaq50: "f1tty21m",
-    nk6f5a: "f19648ye"
-  },
-  control: {
-    Br312pm: "f1bfa6ju",
-    Bw0ie65: "fl3lap4"
-  },
-  validationIcon: {
-    Br312pm: "ftfzah7",
-    Bw0ie65: "f1fih8f9"
-  },
-  validationMessage: {
-    Br312pm: "f1n69xcw",
-    Bw0ie65: "f1hw1m5m"
-  },
-  hint: {
-    Br312pm: "fbug73u",
-    Bw0ie65: "fbtgo1w"
+  horizontalNoLabel: {
+    uwmqm3: ["f15jqgz8", "fggqkej"],
+    Budl1dq: "f1c2z91y"
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".fjxzuw{grid-template-columns:auto 1fr;}", ".f6nraym{grid-template-areas:\"label label\" \"control control\" \"validationIcon validationMessage\" \"hint hint\";}", ".f1m2n5bn{justify-items:start;}", ".fwibhjm{grid-template-columns:33% auto 1fr;}", ".f7bqb3c{grid-template-areas:\"label control control\" \"label validationIcon validationMessage\" \"label hint hint\" \"label . .\";}", ".f150pcdf{grid-column-start:label;}", ".fwm4whi{grid-column-end:label;}", ".f1tty21m{grid-row-start:label;}", ".f19648ye{grid-row-end:label;}", ".f1bfa6ju{grid-column-start:control;}", ".fl3lap4{grid-column-end:control;}", ".ftfzah7{grid-column-start:validationIcon;}", ".f1fih8f9{grid-column-end:validationIcon;}", ".f1n69xcw{grid-column-start:validationMessage;}", ".f1hw1m5m{grid-column-end:validationMessage;}", ".fbug73u{grid-column-start:hint;}", ".fbtgo1w{grid-column-end:hint;}"]
+  d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
 });
 const useLabelStyles = /*#__PURE__*/__styles({
   base: {
-    B6of3ja: "fg30ohd",
+    z8tnut: "fclwglc",
+    Byoj8tv: "fywfov9"
+  },
+  large: {
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1brlhvm"
+  },
+  vertical: {
     jrapky: "fyacil5"
   },
+  verticalLarge: {
+    jrapky: "f8l5zjj"
+  },
   horizontal: {
     t21cq0: ["fkujibs", "f199hnxi"],
-    qb2dma: "f9h729m",
-    Bdqf98w: "fhb5wj7"
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z"
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
+  d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}"]
 });
+const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
 const useSecondaryTextStyles = /*#__PURE__*/__styles({
-  base: {
-    B6of3ja: "fg30ohd",
-    sj55zd: "f11d4kpn",
-    Bahqtrf: "fk6fouc",
-    Be2twd7: "fy9rknc",
-    Bhrd7zp: "figsok6",
-    Bg96gwp: "fwrc4pm"
-  },
   error: {
     sj55zd: "f1hcrxcs"
+  },
+  withIcon: {
+    uwmqm3: ["frawy03", "fg4c52"]
   }
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
 });
+const useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
 const useValidationMessageIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "ftgm304",
-    qb2dma: "f9h729m",
-    Be2twd7: "f1ugzwwg",
-    Bg96gwp: "fp4gqsa",
-    t21cq0: ["fm0x6gh", "fbyavb5"],
-    B6of3ja: "fww94b8"
-  },
   error: {
@@ -100,3 +79,3 @@ sj55zd: "f1hcrxcs"
 }, {
-  d: [".ftgm304{display:block;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fww94b8{margin-top:var(--spacingVerticalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
 });
@@ -111,22 +90,24 @@ /**
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
+  state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
   if (state.control) {
-    state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);
+    state.control.className = mergeClasses(classNames.control, state.control.className);
   }
   const labelStyles = useLabelStyles();
   if (state.label) {
-    state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
+    state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
   }
+  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
-    state.validationMessage.className = mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+    state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
   }
   if (state.hint) {
-    state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
+    state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
   }
 };
 //# sourceMappingURL=useFieldStyles.js.map

package.json

 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.15",
+  "version": "9.0.0-alpha.16",
   "description": "Fluent UI Field components",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

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

180149

increased by4.19%

Lines of code

2025

increased by0.05%

No dependency changes