@fluentui/react-label 9.2.1 → 9.3.0

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Wed, 18 Jun 2025 17:29:30 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.3.0)
+
+Thu, 17 Jul 2025 13:45:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.2.2..@fluentui/react-label_v9.3.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+
+## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.2.2)
+
+Thu, 26 Jun 2025 14:11:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.2.1..@fluentui/react-label_v9.2.2)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
+
 ## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.2.1)
 
-Wed, 18 Jun 2025 17:29:30 GMT 
+Wed, 18 Jun 2025 17:34:00 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.2.0..@fluentui/react-label_v9.2.1)
 
 ### Patches

package/lib/components/Label/useLabelStyles.styles.raw.js

@@ -0,0 +1,51 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const labelClassNames = {
+    root: 'fui-Label',
+    required: 'fui-Label__required'
+};
+/**
+ * Styles for the label
+ */ const useStyles = makeStyles({
+    root: {
+        fontFamily: tokens.fontFamilyBase,
+        color: tokens.colorNeutralForeground1
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    required: {
+        color: tokens.colorPaletteRedForeground3,
+        paddingLeft: tokens.spacingHorizontalXS
+    },
+    small: {
+        fontSize: tokens.fontSizeBase200,
+        lineHeight: tokens.lineHeightBase200
+    },
+    medium: {
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300
+    },
+    large: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+        fontWeight: tokens.fontWeightSemibold
+    },
+    semibold: {
+        fontWeight: tokens.fontWeightSemibold
+    }
+});
+/**
+ * Apply styling to the Label slots based on the state
+ */ export const useLabelStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
+    if (state.required) {
+        state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
+    }
+    return state;
+};

package/lib/components/Label/useLabelStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n  root: 'fui-Label',\n  required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n  root: {\n    fontFamily: tokens.fontFamilyBase,\n    color: tokens.colorNeutralForeground1,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  required: {\n    color: tokens.colorPaletteRedForeground3,\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  semibold: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    labelClassNames.root,\n    styles.root,\n    state.disabled && styles.disabled,\n    styles[state.size],\n    state.weight === 'semibold' && styles.semibold,\n    state.root.className,\n  );\n\n  if (state.required) {\n    state.required.className = mergeClasses(\n      labelClassNames.required,\n      styles.required,\n      state.disabled && styles.disabled,\n      state.required.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,kBAA8C;IACzDC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,YAAYL,OAAOM,cAAc;QACjCC,OAAOP,OAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,OAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,OAAOW,0BAA0B;QACxCC,aAAaZ,OAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,OAAOgB,eAAe;QAChCC,YAAYjB,OAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,OAAOoB,eAAe;QAChCH,YAAYjB,OAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,OAAOuB,eAAe;QAChCN,YAAYjB,OAAOwB,iBAAiB;QACpCC,YAAYzB,OAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,OAAO0B,kBAAkB;IACvC;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,0BAA0B,CAACC;IACtC;IAEA,MAAMC,SAAS1B;IACfyB,MAAM3B,IAAI,CAAC6B,SAAS,GAAGhC,aACrBE,gBAAgBC,IAAI,EACpB4B,OAAO5B,IAAI,EACX2B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCqB,MAAM,CAACD,MAAMG,IAAI,CAAC,EAClBH,MAAMI,MAAM,KAAK,cAAcH,OAAOH,QAAQ,EAC9CE,MAAM3B,IAAI,CAAC6B,SAAS;IAGtB,IAAIF,MAAM1B,QAAQ,EAAE;QAClB0B,MAAM1B,QAAQ,CAAC4B,SAAS,GAAGhC,aACzBE,gBAAgBE,QAAQ,EACxB2B,OAAO3B,QAAQ,EACf0B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCoB,MAAM1B,QAAQ,CAAC4B,SAAS;IAE5B;IAEA,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    labelClassNames: function() {
+        return labelClassNames;
+    },
+    useLabelStyles_unstable: function() {
+        return useLabelStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const labelClassNames = {
+    root: 'fui-Label',
+    required: 'fui-Label__required'
+};
+/**
+ * Styles for the label
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        color: _reacttheme.tokens.colorNeutralForeground1
+    },
+    disabled: {
+        color: _reacttheme.tokens.colorNeutralForegroundDisabled,
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    },
+    required: {
+        color: _reacttheme.tokens.colorPaletteRedForeground3,
+        paddingLeft: _reacttheme.tokens.spacingHorizontalXS
+    },
+    small: {
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        lineHeight: _reacttheme.tokens.lineHeightBase200
+    },
+    medium: {
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        lineHeight: _reacttheme.tokens.lineHeightBase300
+    },
+    large: {
+        fontSize: _reacttheme.tokens.fontSizeBase400,
+        lineHeight: _reacttheme.tokens.lineHeightBase400,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold
+    },
+    semibold: {
+        fontWeight: _reacttheme.tokens.fontWeightSemibold
+    }
+});
+const useLabelStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
+    if (state.required) {
+        state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n  root: 'fui-Label',\n  required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n  root: {\n    fontFamily: tokens.fontFamilyBase,\n    color: tokens.colorNeutralForeground1,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  required: {\n    color: tokens.colorPaletteRedForeground3,\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n\n  small: {\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n  },\n\n  medium: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n\n  large: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  semibold: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    labelClassNames.root,\n    styles.root,\n    state.disabled && styles.disabled,\n    styles[state.size],\n    state.weight === 'semibold' && styles.semibold,\n    state.root.className,\n  );\n\n  if (state.required) {\n    state.required.className = mergeClasses(\n      labelClassNames.required,\n      styles.required,\n      state.disabled && styles.disabled,\n      state.required.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["labelClassNames","useLabelStyles_unstable","root","required","useStyles","makeStyles","fontFamily","tokens","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","state","styles","className","mergeClasses","size","weight"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKaA,eAAAA;eAAAA;;IAkDAC,uBAAAA;eAAAA;;;uBAvD4B;4BAClB;AAIhB,MAAMD,kBAA8C;IACzDE,MAAM;IACNC,UAAU;AACZ;AAEA;;CAEC,GACD,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJI,YAAYC,kBAAAA,CAAOC,cAAc;QACjCC,OAAOF,kBAAAA,CAAOG,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOF,kBAAAA,CAAOK,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAN,UAAU;QACRM,OAAOF,kBAAAA,CAAOM,0BAA0B;QACxCC,aAAaP,kBAAAA,CAAOQ,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUV,kBAAAA,CAAOW,eAAe;QAChCC,YAAYZ,kBAAAA,CAAOa,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUV,kBAAAA,CAAOe,eAAe;QAChCH,YAAYZ,kBAAAA,CAAOgB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUV,kBAAAA,CAAOkB,eAAe;QAChCN,YAAYZ,kBAAAA,CAAOmB,iBAAiB;QACpCC,YAAYpB,kBAAAA,CAAOqB,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYpB,kBAAAA,CAAOqB,kBAAkB;IACvC;AACF;AAKO,MAAM3B,0BAA0B,CAAC6B;IACtC;IAEA,MAAMC,SAAS3B;IACf0B,MAAM5B,IAAI,CAAC8B,SAAS,GAAGC,IAAAA,mBAAAA,EACrBjC,gBAAgBE,IAAI,EACpB6B,OAAO7B,IAAI,EACX4B,MAAMnB,QAAQ,IAAIoB,OAAOpB,QAAQ,EACjCoB,MAAM,CAACD,MAAMI,IAAI,CAAC,EAClBJ,MAAMK,MAAM,KAAK,cAAcJ,OAAOF,QAAQ,EAC9CC,MAAM5B,IAAI,CAAC8B,SAAS;IAGtB,IAAIF,MAAM3B,QAAQ,EAAE;QAClB2B,MAAM3B,QAAQ,CAAC6B,SAAS,GAAGC,IAAAA,mBAAAA,EACzBjC,gBAAgBG,QAAQ,EACxB4B,OAAO5B,QAAQ,EACf2B,MAAMnB,QAAQ,IAAIoB,OAAOpB,QAAQ,EACjCmB,MAAM3B,QAAQ,CAAC6B,SAAS;IAE5B;IAEA,OAAOF;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "description": "Fluent UI React Label component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,8 +20,8 @@
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.21.1",
-    "@fluentui/react-jsx-runtime": "^9.1.1",
+    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-jsx-runtime": "^9.1.2",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },