@fluentui/react-field - npm Package Compare versions

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

CHANGELOG.json

@@ -5,3 +5,32 @@ {
     {
-      "date": "Mon, 09 Jan 2023 14:31:49 GMT",
+      "date": "Mon, 16 Jan 2023 08:35:37 GMT",
+      "tag": "@fluentui/react-field_v9.0.0-alpha.15",
+      "version": "9.0.0-alpha.15",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "64bb45980d68de1219c6b36a7db5363f0a9cff9f",
+            "comment": "chore: migrate to packaged scripts"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-field",
+            "commit": "5b35bf93f6634324e8651ec29640353edd11178b",
+            "comment": "fix: Field styles do not wrap SVG status icon in inline parent to avoid layout bugs"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-field",
+            "comment": "Bump @fluentui/react-label to v9.0.17",
+            "commit": "a870d8360e47f3ea03358c4e75e89e08a74845d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 09 Jan 2023 14:35:02 GMT",
       "tag": "@fluentui/react-field_v9.0.0-alpha.14",
@@ -15,3 +44,3 @@ "version": "9.0.0-alpha.14",
             "comment": "Bump @fluentui/react-context-selector to v9.1.5",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
@@ -22,3 +51,3 @@ {
             "comment": "Bump @fluentui/react-label to v9.0.16",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           },
@@ -29,3 +58,3 @@ {
             "comment": "Bump @fluentui/react-utilities to v9.4.0",
-            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+            "commit": "d246e70eba59a37ec311dbf933b0745d34cb700d"
           }
@@ -32,0 +61,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-field
 
-This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
+This log was last generated on Mon, 16 Jan 2023 08:35:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [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 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.14..@fluentui/react-field_v9.0.0-alpha.15)
+
+### Changes
+
+- fix: Field styles do not wrap SVG status icon in inline parent to avoid layout bugs ([PR #26150](https://github.com/microsoft/fluentui/pull/26150) by [e-mail])
+- Bump @fluentui/react-label to v9.0.17 ([commit](https://github.com/microsoft/fluentui/commit/a870d8360e47f3ea03358c4e75e89e08a74845d7) by beachball)
+
 ## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.14)
 
-Mon, 09 Jan 2023 14:31:49 GMT 
+Mon, 09 Jan 2023 14:35:02 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.13..@fluentui/react-field_v9.0.0-alpha.14)
@@ -14,5 +24,5 @@
 
-- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-label to v9.0.16 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
-- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-label to v9.0.16 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26255](https://github.com/microsoft/fluentui/pull/26255) by beachball)
 
@@ -19,0 +29,0 @@ ## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.13)

lib-amd/components/Field/renderField.js

@@ -13,5 +13,4 @@ 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 && (React.createElement(slots.validationMessage, tslib_1.__assign({}, slotProps.validationMessage),
-                slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, tslib_1.__assign({}, slotProps.validationMessageIcon)),
-                slotProps.validationMessage.children)),
+            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.hint && React.createElement(slots.hint, tslib_1.__assign({}, slotProps.hint))));
@@ -18,0 +17,0 @@ };

lib-amd/components/Field/useFieldStyles.js

@@ -21,11 +21,32 @@ define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
             gridAutoFlow: 'row',
+            gridTemplateColumns: 'auto 1fr',
+            gridTemplateAreas: "\n      \"label label\"\n      \"control control\"\n      \"validationIcon validationMessage\"\n      \"hint hint\"\n    ",
             justifyItems: 'start',
         },
         horizontal: {
-            gridTemplateRows: 'auto auto auto auto',
-            gridTemplateColumns: '1fr 2fr',
+            gridTemplateColumns: '33% auto 1fr',
+            gridTemplateAreas: "\n      \"label control control\"\n      \"label validationIcon validationMessage\"\n      \"label hint hint\"\n      \"label . .\"\n    ",
         },
-        secondColumn: {
-            gridColumnStart: '2',
+        label: {
+            gridColumnStart: 'label',
+            gridColumnEnd: 'label',
+            gridRowStart: 'label',
+            gridRowEnd: 'label',
         },
+        control: {
+            gridColumnStart: 'control',
+            gridColumnEnd: 'control',
+        },
+        validationIcon: {
+            gridColumnStart: 'validationIcon',
+            gridColumnEnd: 'validationIcon',
+        },
+        validationMessage: {
+            gridColumnStart: 'validationMessage',
+            gridColumnEnd: 'validationMessage',
+        },
+        hint: {
+            gridColumnStart: 'hint',
+            gridColumnEnd: 'hint',
+        },
     });
@@ -38,4 +59,2 @@ var useLabelStyles = react_1.makeStyles({
         horizontal: {
-            gridRowStart: '1',
-            gridRowEnd: '-1',
             marginRight: react_theme_1.tokens.spacingHorizontalM,
@@ -54,6 +73,8 @@ alignSelf: 'start',
         base: {
+            display: 'block',
+            alignSelf: 'start',
             fontSize: '12px',
             lineHeight: '12px',
-            verticalAlign: 'middle',
             marginRight: react_theme_1.tokens.spacingHorizontalXS,
+            marginTop: react_theme_1.tokens.spacingVerticalXS,
         },
@@ -80,18 +101,18 @@ error: {
         if (state.control) {
-            state.control.className = react_1.mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
+            state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
         }
         var labelStyles = useLabelStyles();
         if (state.label) {
-            state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
+            state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
         }
         var validationMessageIconStyles = useValidationMessageIconStyles();
         if (state.validationMessageIcon) {
-            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+            state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
         }
         var secondaryTextStyles = useSecondaryTextStyles();
         if (state.validationMessage) {
-            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+            state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
         }
         if (state.hint) {
-            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
+            state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
         }
@@ -98,0 +119,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.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
-    ...slotProps.validationMessageIcon
-  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
+  }), slots.hint && React.createElement(slots.hint, {
     ...slotProps.hint
@@ -30,0 +30,0 @@ }));

lib-commonjs/components/Field/useFieldStyles.js

@@ -25,13 +25,34 @@ "use strict";
     Bxotwcr: "f14np9u9",
+    Budl1dq: "fjxzuw",
+    zoa1oz: "f6nraym",
     B7hvi0a: "f1m2n5bn"
   },
   horizontal: {
-    wkccdc: "fai812u",
-    Budl1dq: "fckz59x"
+    Budl1dq: "fwibhjm",
+    zoa1oz: "f7bqb3c"
   },
-  secondColumn: {
-    Br312pm: "fd46tj4"
+  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"
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
+  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;}"]
 });
@@ -44,4 +65,2 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
   horizontal: {
-    Ijaq50: "f16hsg94",
-    nk6f5a: "f1nzqi2z",
     t21cq0: ["fkujibs", "f199hnxi"],
@@ -52,3 +71,3 @@ qb2dma: "f9h729m",
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".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: [".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;}"]
 });
@@ -72,6 +91,8 @@ const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
   base: {
+    mc9l5x: "ftgm304",
+    qb2dma: "f9h729m",
     Be2twd7: "f1ugzwwg",
     Bg96gwp: "fp4gqsa",
-    ha4doy: "fmrv4ls",
-    t21cq0: ["fm0x6gh", "fbyavb5"]
+    t21cq0: ["fm0x6gh", "fbyavb5"],
+    B6of3ja: "fww94b8"
   },
@@ -88,3 +109,3 @@ error: {
 }, {
-  d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+  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);}"]
 });
@@ -101,18 +122,18 @@ /**
   if (state.control) {
-    state.control.className = react_1.mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
+    state.control.className = react_1.mergeClasses(classNames.control, rootStyles.control, state.control.className);
   }
   const labelStyles = useLabelStyles();
   if (state.label) {
-    state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
+    state.label.className = react_1.mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
   }
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
-    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
   }
   if (state.hint) {
-    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
+    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
   }
@@ -119,0 +140,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.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
-    ...slotProps.validationMessageIcon
-  }), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
+  }), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
     ...slotProps.hint
@@ -24,0 +24,0 @@ }));

lib/components/Field/useFieldStyles.js

@@ -18,13 +18,34 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
     Bxotwcr: "f14np9u9",
+    Budl1dq: "fjxzuw",
+    zoa1oz: "f6nraym",
     B7hvi0a: "f1m2n5bn"
   },
   horizontal: {
-    wkccdc: "fai812u",
-    Budl1dq: "fckz59x"
+    Budl1dq: "fwibhjm",
+    zoa1oz: "f7bqb3c"
   },
-  secondColumn: {
-    Br312pm: "fd46tj4"
+  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"
   }
 }, {
-  d: [".f13qh94s{display:grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
+  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;}"]
 });
@@ -37,4 +58,2 @@ const useLabelStyles = /*#__PURE__*/__styles({
   horizontal: {
-    Ijaq50: "f16hsg94",
-    nk6f5a: "f1nzqi2z",
     t21cq0: ["fkujibs", "f199hnxi"],
@@ -45,3 +64,3 @@ qb2dma: "f9h729m",
 }, {
-  d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".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: [".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;}"]
 });
@@ -65,6 +84,8 @@ const useSecondaryTextStyles = /*#__PURE__*/__styles({
   base: {
+    mc9l5x: "ftgm304",
+    qb2dma: "f9h729m",
     Be2twd7: "f1ugzwwg",
     Bg96gwp: "fp4gqsa",
-    ha4doy: "fmrv4ls",
-    t21cq0: ["fm0x6gh", "fbyavb5"]
+    t21cq0: ["fm0x6gh", "fbyavb5"],
+    B6of3ja: "fww94b8"
   },
@@ -81,3 +102,3 @@ error: {
 }, {
-  d: [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+  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);}"]
 });
@@ -94,20 +115,20 @@ /**
   if (state.control) {
-    state.control.className = mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
+    state.control.className = mergeClasses(classNames.control, rootStyles.control, state.control.className);
   }
   const labelStyles = useLabelStyles();
   if (state.label) {
-    state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
+    state.label.className = mergeClasses(classNames.label, rootStyles.label, labelStyles.base, state.label.className);
   }
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
-    state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+    state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, rootStyles.validationIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
-    state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+    state.validationMessage.className = mergeClasses(classNames.validationMessage, rootStyles.validationMessage, secondaryTextStyles.base, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
   }
   if (state.hint) {
-    state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
+    state.hint.className = mergeClasses(classNames.hint, secondaryTextStyles.base, rootStyles.hint, state.hint.className);
   }
 };
 //# sourceMappingURL=useFieldStyles.js.map

package.json

 {
   "name": "@fluentui/react-field",
-  "version": "9.0.0-alpha.14",
+  "version": "9.0.0-alpha.15",
   "description": "Fluent UI Field components",
@@ -30,3 +30,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
-    "@fluentui/scripts": "*"
+    "@fluentui/scripts-api-extractor": "*",
+    "@fluentui/scripts-tasks": "*"
   },
@@ -36,3 +37,3 @@ "dependencies": {
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.16",
+    "@fluentui/react-label": "^9.0.17",
     "@fluentui/react-theme": "^9.1.5",
@@ -39,0 +40,0 @@ "@fluentui/react-utilities": "^9.4.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

172912

increased by4.28%

Lines of code

2024

increased by5.03%

Worsened metrics

Dev dependency count

5

increased by25%

Number of downloads

108331

decreased by-5.33%

Published versions last months

22

decreased by-4.35%

Published versions last two months

38

decreased by-5%

Published versions last year

300

decreased by-0.33%

Dependency changes

• Updated@fluentui/react-label@^9.0.17