@fluentui/react-label 9.4.1 → 9.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -4
- package/lib/components/Label/useLabelStyles.styles.js +2 -0
- package/lib/components/Label/useLabelStyles.styles.js.map +1 -1
- package/lib/components/Label/useLabelStyles.styles.raw.js +2 -0
- package/lib/components/Label/useLabelStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.styles.js +2 -0
- package/lib-commonjs/components/Label/useLabelStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js +2 -0
- package/lib-commonjs/components/Label/useLabelStyles.styles.raw.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,28 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-label
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 May 2026 09:33:40 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.2)
|
|
8
|
+
|
|
9
|
+
Tue, 26 May 2026 09:33:40 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.4.1..@fluentui/react-label_v9.4.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.1)
|
|
8
18
|
|
|
9
|
-
Thu, 23 Apr 2026
|
|
19
|
+
Thu, 23 Apr 2026 14:21:12 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.4.0..@fluentui/react-label_v9.4.1)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
13
23
|
|
|
14
|
-
- Bump @fluentui/react-utilities to v9.26.3 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
16
26
|
|
|
17
27
|
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.4.0)
|
|
18
28
|
|
|
@@ -51,8 +51,10 @@ export const useLabelStyles_unstable = state => {
|
|
|
51
51
|
'use no memo';
|
|
52
52
|
|
|
53
53
|
const styles = useStyles();
|
|
54
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
54
55
|
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
55
56
|
if (state.required) {
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
56
58
|
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
57
59
|
}
|
|
58
60
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;IAAAE,OAAA;EAAA;EAAAL,QAAA;IAAAG,MAAA;IAAAG,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAD,MAAA;IAAAE,OAAA;EAAA;EAAAL,QAAA;IAAAG,MAAA;IAAAG,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,KAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAG,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA+BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;EAC1B;EACAgB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,eAAe,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEc,MAAM,CAACD,KAAK,CAACG,IAAI,CAAC,EAAEH,KAAK,CAACI,MAAM,KAAK,UAAU,IAAIH,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACnM,IAAIF,KAAK,CAACjB,QAAQ,EAAE;IAChB;IACAiB,KAAK,CAACjB,QAAQ,CAACmB,SAAS,GAAGvB,YAAY,CAACE,eAAe,CAACE,QAAQ,EAAEkB,MAAM,CAAClB,QAAQ,EAAEiB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAACjB,QAAQ,CAACmB,SAAS,CAAC;EACnJ;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -44,8 +44,10 @@ export const labelClassNames = {
|
|
|
44
44
|
*/ export const useLabelStyles_unstable = (state)=>{
|
|
45
45
|
'use no memo';
|
|
46
46
|
const styles = useStyles();
|
|
47
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
47
48
|
state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
|
|
48
49
|
if (state.required) {
|
|
50
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
49
51
|
state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
50
52
|
}
|
|
51
53
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"AAAA;AAEA,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;
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"AAAA;AAEA,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;IACf,oDAAoD;IACpDyB,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;QAClB,oDAAoD;QACpD0B,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"}
|
|
@@ -84,8 +84,10 @@ const labelClassNames = {
|
|
|
84
84
|
const useLabelStyles_unstable = (state)=>{
|
|
85
85
|
'use no memo';
|
|
86
86
|
const styles = useStyles();
|
|
87
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
87
88
|
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);
|
|
88
89
|
if (state.required) {
|
|
90
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
89
91
|
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
90
92
|
}
|
|
91
93
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,eAAe;;;2BAwCY;eAAvBkB;;;uBA1CwB,gBAAgB;AAElD,wBAAwB;IAC3BjB,IAAI,EAAE,WAAW;IACjBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;IAAAL,QAAA,EAAA;QAAAG,MAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BrB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n // eslint-disable-next-line react-hooks/immutability\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,eAAe;;;2BAwCY;eAAvBkB;;;uBA1CwB,gBAAgB;AAElD,wBAAwB;IAC3BjB,IAAI,EAAE,WAAW;IACjBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;IAAAL,QAAA,EAAA;QAAAG,MAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BrB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAgB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,uBAAY,EAACE,eAAe,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEc,MAAM,CAACD,KAAK,CAACG,IAAI,CAAC,EAAEH,KAAK,CAACI,MAAM,KAAK,UAAU,IAAIH,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACnM,IAAIF,KAAK,CAACjB,QAAQ,EAAE;QAChB,oDAAA;QACAiB,KAAK,CAACjB,QAAQ,CAACmB,SAAS,OAAGvB,mBAAY,EAACE,eAAe,CAACE,QAAQ,EAAEkB,MAAM,CAAClB,QAAQ,EAAEiB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAACjB,QAAQ,CAACmB,SAAS,CAAC;IACnJ;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -60,8 +60,10 @@ const labelClassNames = {
|
|
|
60
60
|
const useLabelStyles_unstable = (state)=>{
|
|
61
61
|
'use no memo';
|
|
62
62
|
const styles = useStyles();
|
|
63
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
63
64
|
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);
|
|
64
65
|
if (state.required) {
|
|
66
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
65
67
|
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
|
|
66
68
|
}
|
|
67
69
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,eAAAA;;;
|
|
1
|
+
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\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"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,eAAAA;;;2BAkDA2B;eAAAA;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;AAIxC,wBAAoD;IACzD1B,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,YAAYL,kBAAAA,CAAOM,cAAc;QACjCC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,kBAAAA,CAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,kBAAAA,CAAOW,0BAA0B;QACxCC,aAAaZ,kBAAAA,CAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,kBAAAA,CAAOgB,eAAe;QAChCC,YAAYjB,kBAAAA,CAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,kBAAAA,CAAOoB,eAAe;QAChCH,YAAYjB,kBAAAA,CAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,kBAAAA,CAAOuB,eAAe;QAChCN,YAAYjB,kBAAAA,CAAOwB,iBAAiB;QACpCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;AACF;AAKO,gCAAgC,CAACG;IACtC;IAEA,MAAMC,SAAS1B;IACf,oDAAoD;IACpDyB,MAAM3B,IAAI,CAAC6B,SAAS,OAAGhC,mBAAAA,EACrBE,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;QAClB,oDAAoD;QACpD0B,MAAM1B,QAAQ,CAAC4B,SAAS,OAAGhC,mBAAAA,EACzBE,gBAAgBE,QAAQ,EACxB2B,OAAO3B,QAAQ,EACf0B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCoB,MAAM1B,QAAQ,CAAC4B,SAAS;IAE5B;IAEA,OAAOF;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-label",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.2",
|
|
4
4
|
"description": "Fluent UI React Label component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
16
16
|
"@fluentui/react-theme": "^9.2.1",
|
|
17
|
-
"@fluentui/react-utilities": "^9.26.
|
|
18
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
+
"@fluentui/react-utilities": "^9.26.4",
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.3",
|
|
19
19
|
"@griffel/react": "^1.5.32",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|