@fluentui/react-field 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240816-2133.1

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -12
  2. package/lib/components/Field/useFieldStyles.styles.js +18 -18
  3. package/lib/components/Field/useFieldStyles.styles.js.map +1 -1
  4. package/lib-commonjs/components/Field/useFieldStyles.styles.js +33 -33
  5. package/lib-commonjs/components/Field/useFieldStyles.styles.js.map +1 -1
  6. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,25 +1,25 @@
1
1
  # Change Log - @fluentui/react-field
2
2
 
3
- This log was last generated on Wed, 31 Jul 2024 04:18:06 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 16 Aug 2024 21:44:03 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20240731-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20240731-0407.1)
7
+ ## [0.0.0-nightly-20240816-2133.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20240816-2133.1)
8
8
 
9
- Wed, 31 Jul 2024 04:18:06 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.71..@fluentui/react-field_v0.0.0-nightly-20240731-0407.1)
9
+ Fri, 16 Aug 2024 21:44:03 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.71..@fluentui/react-field_v0.0.0-nightly-20240816-2133.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
17
- - Bump @fluentui/react-label to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
18
- - Bump @fluentui/react-theme to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
19
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
20
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
21
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
22
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240731-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/85947bd0979efeeddb849c91c07c547e8d562781) by beachball)
15
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
17
+ - Bump @fluentui/react-label to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
18
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
19
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
20
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
21
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240816-2133.1 ([commit](https://github.com/microsoft/fluentui/commit/7d70de62d1ba4ce393c9c6839e67ecb3f1c3d7f4) by beachball)
23
23
 
24
24
  ## [9.1.71](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.71)
25
25
 
package/lib/components/Field/useFieldStyles.styles.js CHANGED
@@ -29,57 +29,57 @@ const useRootStyles = /*#__PURE__*/__styles({
29
29
  });
30
30
  const useLabelStyles = /*#__PURE__*/__styles({
31
31
  vertical: {
32
- z8tnut: "fclwglc",
33
- Byoj8tv: "fywfov9",
34
- jrapky: "fyacil5"
32
+ z8tnut: "fh8nav3",
33
+ Byoj8tv: "f1usewit",
34
+ jrapky: "ffz6qdv"
35
35
  },
36
36
  verticalLarge: {
37
37
  z8tnut: "f1sl3k7w",
38
38
  Byoj8tv: "f1brlhvm",
39
- jrapky: "f8l5zjj"
39
+ jrapky: "f9c6mxk"
40
40
  },
41
41
  horizontal: {
42
- z8tnut: "fp2oml8",
43
- Byoj8tv: "f1tdddsa",
44
- t21cq0: ["fkujibs", "f199hnxi"],
42
+ z8tnut: "forh5k",
43
+ Byoj8tv: "f6kmjjc",
44
+ t21cq0: ["f1nk2aep", "ft1x1ik"],
45
45
  Ijaq50: "f16hsg94",
46
46
  nk6f5a: "f1nzqi2z"
47
47
  },
48
48
  horizontalSmall: {
49
- z8tnut: "f1ywm7hm",
50
- Byoj8tv: "f14wxoun"
49
+ z8tnut: "f6zghdy",
50
+ Byoj8tv: "f17vit9g"
51
51
  },
52
52
  horizontalLarge: {
53
53
  z8tnut: "f1hqyr95",
54
54
  Byoj8tv: "fm4hlj0"
55
55
  }
56
56
  }, {
57
- d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
57
+ d: [".fh8nav3{padding-top:var(--ctrl-token-Field-1103, var(--semantic-token-Field-1104, var(--spacingVerticalXXS)));}", ".f1usewit{padding-bottom:var(--ctrl-token-Field-1105, var(--semantic-token-Field-1106, var(--spacingVerticalXXS)));}", ".ffz6qdv{margin-bottom:var(--ctrl-token-Field-1107, var(--semantic-token-Field-1108, var(--spacingVerticalXXS)));}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f9c6mxk{margin-bottom:var(--ctrl-token-Field-1109, var(--semantic-token-Field-1110, var(--spacingVerticalXS)));}", ".forh5k{padding-top:var(--ctrl-token-Field-1111, var(--semantic-token-Field-1112, var(--spacingVerticalSNudge)));}", ".f6kmjjc{padding-bottom:var(--ctrl-token-Field-1113, var(--semantic-token-Field-1114, var(--spacingVerticalSNudge)));}", ".f1nk2aep{margin-right:var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, var(--spacingHorizontalM)));}", ".ft1x1ik{margin-left:var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, var(--spacingHorizontalM)));}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f6zghdy{padding-top:var(--ctrl-token-Field-1117, var(--semantic-token-Field-1118, var(--spacingVerticalXS)));}", ".f17vit9g{padding-bottom:var(--ctrl-token-Field-1119, var(--semantic-token-Field-1120, var(--spacingVerticalXS)));}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
58
58
  });
59
- 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);}"]);
59
+ const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("rv16jcs", null, [".rv16jcs{margin-top:var(--ctrl-token-Field-1121, var(--semantic-token-Field-1122, var(--spacingVerticalXXS)));color:var(--ctrl-token-Field-1123, var(--semantic-token-Field-1124, var(--colorNeutralForeground3)));font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
60
60
  const useSecondaryTextStyles = /*#__PURE__*/__styles({
61
61
  error: {
62
- sj55zd: "f1hcrxcs"
62
+ sj55zd: "f1jop3zj"
63
63
  },
64
64
  withIcon: {
65
65
  uwmqm3: ["frawy03", "fg4c52"]
66
66
  }
67
67
  }, {
68
- d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
68
+ d: [".f1jop3zj{color:var(--ctrl-token-Field-1125, var(--semantic-token-Field-1126, var(--colorPaletteRedForeground1)));}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
69
69
  });
70
- 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;}"]);
70
+ const useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles("rc0jclx", "r9fpddc", [".rc0jclx{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, var(--spacingHorizontalXS)));line-height:0;vertical-align:-1px;}", ".r9fpddc{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, var(--spacingHorizontalXS)));line-height:0;vertical-align:-1px;}"]);
71
71
  const useValidationMessageIconStyles = /*#__PURE__*/__styles({
72
72
  error: {
73
- sj55zd: "f1hcrxcs"
73
+ sj55zd: "f6szvnh"
74
74
  },
75
75
  warning: {
76
- sj55zd: "f1k5f75o"
76
+ sj55zd: "f1gwyfg5"
77
77
  },
78
78
  success: {
79
- sj55zd: "ffmvakt"
79
+ sj55zd: "fhj12rj"
80
80
  }
81
81
  }, {
82
- d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
82
+ d: [".f6szvnh{color:var(--ctrl-token-Field-1129, var(--semantic-token-Field-1130, var(--colorPaletteRedForeground1)));}", ".f1gwyfg5{color:var(--ctrl-token-Field-1131, var(--semantic-token-Field-1132, var(--colorPaletteDarkOrangeForeground1)));}", ".fhj12rj{color:var(--ctrl-token-Field-1133, var(--semantic-token-Field-1134, var(--colorPaletteGreenForeground1)));}"]
83
83
  });
84
84
  /**
85
85
  * Apply styling to the Field slots based on the state
package/lib/components/Field/useFieldStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: tokens.spacingVerticalXS\n },\n horizontal: {\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1\n },\n success: {\n color: tokens.colorPaletteGreenForeground1\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n 'use no memo';\n const { validationState, size } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: `var(--ctrl-token-Field-1103, var(--semantic-token-Field-1104, ${tokens.spacingVerticalXXS}))`,\n paddingBottom: `var(--ctrl-token-Field-1105, var(--semantic-token-Field-1106, ${tokens.spacingVerticalXXS}))`,\n marginBottom: `var(--ctrl-token-Field-1107, var(--semantic-token-Field-1108, ${tokens.spacingVerticalXXS}))`\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: `var(--ctrl-token-Field-1109, var(--semantic-token-Field-1110, ${tokens.spacingVerticalXS}))`\n },\n horizontal: {\n paddingTop: `var(--ctrl-token-Field-1111, var(--semantic-token-Field-1112, ${tokens.spacingVerticalSNudge}))`,\n paddingBottom: `var(--ctrl-token-Field-1113, var(--semantic-token-Field-1114, ${tokens.spacingVerticalSNudge}))`,\n marginRight: `var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, ${tokens.spacingHorizontalM}))`,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: `var(--ctrl-token-Field-1117, var(--semantic-token-Field-1118, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--ctrl-token-Field-1119, var(--semantic-token-Field-1120, ${tokens.spacingVerticalXS}))`\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: `var(--ctrl-token-Field-1121, var(--semantic-token-Field-1122, ${tokens.spacingVerticalXXS}))`,\n color: `var(--ctrl-token-Field-1123, var(--semantic-token-Field-1124, ${tokens.colorNeutralForeground3}))`,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: `var(--ctrl-token-Field-1125, var(--semantic-token-Field-1126, ${tokens.colorPaletteRedForeground1}))`\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: `var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, ${tokens.spacingHorizontalXS}))`,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: `var(--ctrl-token-Field-1129, var(--semantic-token-Field-1130, ${tokens.colorPaletteRedForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-Field-1131, var(--semantic-token-Field-1132, ${tokens.colorPaletteDarkOrangeForeground1}))`\n },\n success: {\n color: `var(--ctrl-token-Field-1133, var(--semantic-token-Field-1134, ${tokens.colorPaletteGreenForeground1}))`\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n 'use no memo';\n const { validationState, size } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
package/lib-commonjs/components/Field/useFieldStyles.styles.js CHANGED
@@ -55,28 +55,28 @@ const iconSize = '12px';
55
55
  });
56
56
  const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
57
57
  vertical: {
58
- z8tnut: "fclwglc",
59
- Byoj8tv: "fywfov9",
60
- jrapky: "fyacil5"
58
+ z8tnut: "fh8nav3",
59
+ Byoj8tv: "f1usewit",
60
+ jrapky: "ffz6qdv"
61
61
  },
62
62
  verticalLarge: {
63
63
  z8tnut: "f1sl3k7w",
64
64
  Byoj8tv: "f1brlhvm",
65
- jrapky: "f8l5zjj"
65
+ jrapky: "f9c6mxk"
66
66
  },
67
67
  horizontal: {
68
- z8tnut: "fp2oml8",
69
- Byoj8tv: "f1tdddsa",
68
+ z8tnut: "forh5k",
69
+ Byoj8tv: "f6kmjjc",
70
70
  t21cq0: [
71
- "fkujibs",
72
- "f199hnxi"
71
+ "f1nk2aep",
72
+ "ft1x1ik"
73
73
  ],
74
74
  Ijaq50: "f16hsg94",
75
75
  nk6f5a: "f1nzqi2z"
76
76
  },
77
77
  horizontalSmall: {
78
- z8tnut: "f1ywm7hm",
79
- Byoj8tv: "f14wxoun"
78
+ z8tnut: "f6zghdy",
79
+ Byoj8tv: "f17vit9g"
80
80
  },
81
81
  horizontalLarge: {
82
82
  z8tnut: "f1hqyr95",
@@ -84,30 +84,30 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
84
84
  }
85
85
  }, {
86
86
  d: [
87
- ".fclwglc{padding-top:var(--spacingVerticalXXS);}",
88
- ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
89
- ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
87
+ ".fh8nav3{padding-top:var(--ctrl-token-Field-1103, var(--semantic-token-Field-1104, var(--spacingVerticalXXS)));}",
88
+ ".f1usewit{padding-bottom:var(--ctrl-token-Field-1105, var(--semantic-token-Field-1106, var(--spacingVerticalXXS)));}",
89
+ ".ffz6qdv{margin-bottom:var(--ctrl-token-Field-1107, var(--semantic-token-Field-1108, var(--spacingVerticalXXS)));}",
90
90
  ".f1sl3k7w{padding-top:1px;}",
91
91
  ".f1brlhvm{padding-bottom:1px;}",
92
- ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
93
- ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
94
- ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
95
- ".fkujibs{margin-right:var(--spacingHorizontalM);}",
96
- ".f199hnxi{margin-left:var(--spacingHorizontalM);}",
92
+ ".f9c6mxk{margin-bottom:var(--ctrl-token-Field-1109, var(--semantic-token-Field-1110, var(--spacingVerticalXS)));}",
93
+ ".forh5k{padding-top:var(--ctrl-token-Field-1111, var(--semantic-token-Field-1112, var(--spacingVerticalSNudge)));}",
94
+ ".f6kmjjc{padding-bottom:var(--ctrl-token-Field-1113, var(--semantic-token-Field-1114, var(--spacingVerticalSNudge)));}",
95
+ ".f1nk2aep{margin-right:var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, var(--spacingHorizontalM)));}",
96
+ ".ft1x1ik{margin-left:var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, var(--spacingHorizontalM)));}",
97
97
  ".f16hsg94{grid-row-start:1;}",
98
98
  ".f1nzqi2z{grid-row-end:-1;}",
99
- ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
100
- ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
99
+ ".f6zghdy{padding-top:var(--ctrl-token-Field-1117, var(--semantic-token-Field-1118, var(--spacingVerticalXS)));}",
100
+ ".f17vit9g{padding-bottom:var(--ctrl-token-Field-1119, var(--semantic-token-Field-1120, var(--spacingVerticalXS)));}",
101
101
  ".f1hqyr95{padding-top:9px;}",
102
102
  ".fm4hlj0{padding-bottom:9px;}"
103
103
  ]
104
104
  });
105
- const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [
106
- ".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
105
+ const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rv16jcs", null, [
106
+ ".rv16jcs{margin-top:var(--ctrl-token-Field-1121, var(--semantic-token-Field-1122, var(--spacingVerticalXXS)));color:var(--ctrl-token-Field-1123, var(--semantic-token-Field-1124, var(--colorNeutralForeground3)));font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
107
107
  ]);
108
108
  const useSecondaryTextStyles = /*#__PURE__*/ (0, _react.__styles)({
109
109
  error: {
110
- sj55zd: "f1hcrxcs"
110
+ sj55zd: "f1jop3zj"
111
111
  },
112
112
  withIcon: {
113
113
  uwmqm3: [
@@ -117,30 +117,30 @@ const useSecondaryTextStyles = /*#__PURE__*/ (0, _react.__styles)({
117
117
  }
118
118
  }, {
119
119
  d: [
120
- ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
120
+ ".f1jop3zj{color:var(--ctrl-token-Field-1125, var(--semantic-token-Field-1126, var(--colorPaletteRedForeground1)));}",
121
121
  ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}",
122
122
  ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"
123
123
  ]
124
124
  });
125
- const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("ra7h1uk", "r1rh6bd7", [
126
- ".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}",
127
- ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"
125
+ const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rc0jclx", "r9fpddc", [
126
+ ".rc0jclx{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, var(--spacingHorizontalXS)));line-height:0;vertical-align:-1px;}",
127
+ ".r9fpddc{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, var(--spacingHorizontalXS)));line-height:0;vertical-align:-1px;}"
128
128
  ]);
129
129
  const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
130
130
  error: {
131
- sj55zd: "f1hcrxcs"
131
+ sj55zd: "f6szvnh"
132
132
  },
133
133
  warning: {
134
- sj55zd: "f1k5f75o"
134
+ sj55zd: "f1gwyfg5"
135
135
  },
136
136
  success: {
137
- sj55zd: "ffmvakt"
137
+ sj55zd: "fhj12rj"
138
138
  }
139
139
  }, {
140
140
  d: [
141
- ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
142
- ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}",
143
- ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"
141
+ ".f6szvnh{color:var(--ctrl-token-Field-1129, var(--semantic-token-Field-1130, var(--colorPaletteRedForeground1)));}",
142
+ ".f1gwyfg5{color:var(--ctrl-token-Field-1131, var(--semantic-token-Field-1132, var(--colorPaletteDarkOrangeForeground1)));}",
143
+ ".fhj12rj{color:var(--ctrl-token-Field-1133, var(--semantic-token-Field-1134, var(--colorPaletteGreenForeground1)));}"
144
144
  ]
145
145
  });
146
146
  const useFieldStyles_unstable = (state)=>{
package/lib-commonjs/components/Field/useFieldStyles.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: tokens.spacingVerticalXS\n },\n horizontal: {\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1\n },\n success: {\n color: tokens.colorPaletteGreenForeground1\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n 'use no memo';\n const { validationState, size } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","size","orientation","rootStyles","className","mergeClasses","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: `var(--ctrl-token-Field-1103, var(--semantic-token-Field-1104, ${tokens.spacingVerticalXXS}))`,\n paddingBottom: `var(--ctrl-token-Field-1105, var(--semantic-token-Field-1106, ${tokens.spacingVerticalXXS}))`,\n marginBottom: `var(--ctrl-token-Field-1107, var(--semantic-token-Field-1108, ${tokens.spacingVerticalXXS}))`\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: `var(--ctrl-token-Field-1109, var(--semantic-token-Field-1110, ${tokens.spacingVerticalXS}))`\n },\n horizontal: {\n paddingTop: `var(--ctrl-token-Field-1111, var(--semantic-token-Field-1112, ${tokens.spacingVerticalSNudge}))`,\n paddingBottom: `var(--ctrl-token-Field-1113, var(--semantic-token-Field-1114, ${tokens.spacingVerticalSNudge}))`,\n marginRight: `var(--ctrl-token-Field-1115, var(--semantic-token-Field-1116, ${tokens.spacingHorizontalM}))`,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: `var(--ctrl-token-Field-1117, var(--semantic-token-Field-1118, ${tokens.spacingVerticalXS}))`,\n paddingBottom: `var(--ctrl-token-Field-1119, var(--semantic-token-Field-1120, ${tokens.spacingVerticalXS}))`\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: `var(--ctrl-token-Field-1121, var(--semantic-token-Field-1122, ${tokens.spacingVerticalXXS}))`,\n color: `var(--ctrl-token-Field-1123, var(--semantic-token-Field-1124, ${tokens.colorNeutralForeground3}))`,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: `var(--ctrl-token-Field-1125, var(--semantic-token-Field-1126, ${tokens.colorPaletteRedForeground1}))`\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: `var(--ctrl-token-Field-1127, var(--semantic-token-Field-1128, ${tokens.spacingHorizontalXS}))`,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: `var(--ctrl-token-Field-1129, var(--semantic-token-Field-1130, ${tokens.colorPaletteRedForeground1}))`\n },\n warning: {\n color: `var(--ctrl-token-Field-1131, var(--semantic-token-Field-1132, ${tokens.colorPaletteDarkOrangeForeground1}))`\n },\n success: {\n color: `var(--ctrl-token-Field-1133, var(--semantic-token-Field-1134, ${tokens.colorPaletteGreenForeground1}))`\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n 'use no memo';\n const { validationState, size } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","size","orientation","rootStyles","className","mergeClasses","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-field",
3
- "version": "0.0.0-nightly-20240731-0407.1",
3
+ "version": "0.0.0-nightly-20240816-2133.1",
4
4
  "description": "Fluent UI Field components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -25,20 +25,20 @@
25
25
  "generate-api": "just-scripts generate-api"
26
26
  },
27
27
  "devDependencies": {
28
- "@fluentui/react-tooltip": "0.0.0-nightly-20240731-0407.1",
28
+ "@fluentui/react-tooltip": "0.0.0-nightly-20240816-2133.1",
29
29
  "@fluentui/eslint-plugin": "*",
30
- "@fluentui/react-conformance": "0.0.0-nightly-20240731-0407.1",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240731-0407.1",
30
+ "@fluentui/react-conformance": "0.0.0-nightly-20240816-2133.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240816-2133.1",
32
32
  "@fluentui/scripts-api-extractor": "*",
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/react-context-selector": "0.0.0-nightly-20240731-0407.1",
36
+ "@fluentui/react-context-selector": "0.0.0-nightly-20240816-2133.1",
37
37
  "@fluentui/react-icons": "^2.0.245",
38
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240731-0407.1",
39
- "@fluentui/react-label": "0.0.0-nightly-20240731-0407.1",
40
- "@fluentui/react-theme": "0.0.0-nightly-20240731-0407.1",
41
- "@fluentui/react-utilities": "0.0.0-nightly-20240731-0407.1",
38
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20240816-2133.1",
39
+ "@fluentui/react-label": "0.0.0-nightly-20240816-2133.1",
40
+ "@fluentui/react-theme": "0.0.0-nightly-20240816-2133.1",
41
+ "@fluentui/react-utilities": "0.0.0-nightly-20240816-2133.1",
42
42
  "@griffel/react": "^1.5.22",
43
43
  "@swc/helpers": "^0.5.1"
44
44
  },