@fluentui/react-field 0.0.0-nightly-20230118-0420.1 → 0.0.0-nightly-20230119-0422.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.
- package/CHANGELOG.json +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/components/Field/renderField.js +3 -3
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.js +27 -53
- package/lib/components/Field/useFieldStyles.js.map +1 -1
- package/lib-commonjs/components/Field/renderField.js +3 -3
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.js +26 -52
- package/lib-commonjs/components/Field/useFieldStyles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-field_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 19 Jan 2023 04:29:55 GMT",
|
|
6
|
+
"tag": "@fluentui/react-field_v0.0.0-nightly-20230119-0422.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230119-0422.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,32 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-field",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230119-0422.1",
|
|
20
|
+
"commit": "5a75e47428063a8ce004349c62041a228a465664"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-field",
|
|
25
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20230119-0422.1",
|
|
26
|
+
"commit": "5a75e47428063a8ce004349c62041a228a465664"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-field",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230119-0422.1",
|
|
32
|
+
"commit": "5a75e47428063a8ce004349c62041a228a465664"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-field",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230119-0422.1",
|
|
38
|
+
"commit": "5a75e47428063a8ce004349c62041a228a465664"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-field",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230119-0422.1",
|
|
44
|
+
"commit": "5a75e47428063a8ce004349c62041a228a465664"
|
|
45
45
|
}
|
|
46
46
|
]
|
|
47
47
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 19 Jan 2023 04:29:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230119-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v0.0.0-nightly-20230119-0422.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v0.0.0-nightly-
|
|
9
|
+
Thu, 19 Jan 2023 04:29:55 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.0.0-alpha.15..@fluentui/react-field_v0.0.0-nightly-20230119-0422.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-
|
|
16
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230119-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/5a75e47428063a8ce004349c62041a228a465664) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.0.0-alpha.15)
|
|
22
22
|
|
|
@@ -14,11 +14,11 @@ export const renderField_unstable = state => {
|
|
|
14
14
|
...slotProps.label
|
|
15
15
|
}), slots.control && /*#__PURE__*/React.createElement(slots.control, {
|
|
16
16
|
...slotProps.control
|
|
17
|
-
}), slots.validationMessage && slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
|
18
|
-
...slotProps.validationMessageIcon
|
|
19
17
|
}), slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, {
|
|
20
18
|
...slotProps.validationMessage
|
|
21
|
-
}
|
|
19
|
+
}, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, {
|
|
20
|
+
...slotProps.validationMessageIcon
|
|
21
|
+
}), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, {
|
|
22
22
|
...slotProps.hint
|
|
23
23
|
}));
|
|
24
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAA2BE,KAAiC,CAAC;EAElG,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,EAAI,EAEnDH,KAAK,CAACI,OAAO,iBAAIR,oBAACI,KAAK,CAACI,OAAO;IAAA,GAAMH,SAAS,CAACG;EAAe,EAAI,EAClEJ,KAAK,CAACK,iBAAiB,iBACtBT,oBAACI,KAAK,CAACK,iBAAiB;IAAA,GAAKJ,SAAS,CAACI;EAAiB,GACrDL,KAAK,CAACM,qBAAqB,iBAAIV,oBAACI,KAAK,CAACM,qBAAqB;IAAA,GAAKL,SAAS,CAACK;EAAqB,EAAI,EACnGL,SAAS,CAACI,iBAAiB,CAACE,QAAQ,CAExC,EACAP,KAAK,CAACQ,IAAI,iBAAIZ,oBAACI,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACtC;AAEjB,CAAC","names":["React","getSlots","renderField_unstable","state","slots","slotProps","root","label","control","validationMessage","validationMessageIcon","children","hint"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
2
|
-
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
|
|
3
3
|
export const getFieldClassNames = name => ({
|
|
4
4
|
root: `fui-${name}`,
|
|
5
5
|
control: `fui-${name}__control`,
|
|
@@ -8,45 +8,26 @@ export const getFieldClassNames = name => ({
|
|
|
8
8
|
validationMessageIcon: `fui-${name}__validationMessageIcon`,
|
|
9
9
|
hint: `fui-${name}__hint`
|
|
10
10
|
});
|
|
11
|
+
// Size of the icon in the validation message
|
|
12
|
+
const iconSize = '12px';
|
|
11
13
|
/**
|
|
12
14
|
* Styles for the root slot
|
|
13
15
|
*/
|
|
14
16
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
15
17
|
base: {
|
|
16
18
|
mc9l5x: "f13qh94s",
|
|
17
|
-
Bxotwcr: "f14np9u9",
|
|
18
|
-
Budl1dq: "fjxzuw",
|
|
19
|
-
zoa1oz: "f6nraym",
|
|
20
19
|
B7hvi0a: "f1m2n5bn"
|
|
21
20
|
},
|
|
22
21
|
horizontal: {
|
|
23
|
-
Budl1dq: "
|
|
24
|
-
|
|
22
|
+
Budl1dq: "f2wwaib",
|
|
23
|
+
wkccdc: "f1645dqt"
|
|
25
24
|
},
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
Ijaq50: "f1tty21m",
|
|
30
|
-
nk6f5a: "f19648ye"
|
|
31
|
-
},
|
|
32
|
-
control: {
|
|
33
|
-
Br312pm: "f1bfa6ju",
|
|
34
|
-
Bw0ie65: "fl3lap4"
|
|
35
|
-
},
|
|
36
|
-
validationIcon: {
|
|
37
|
-
Br312pm: "ftfzah7",
|
|
38
|
-
Bw0ie65: "f1fih8f9"
|
|
39
|
-
},
|
|
40
|
-
validationMessage: {
|
|
41
|
-
Br312pm: "f1n69xcw",
|
|
42
|
-
Bw0ie65: "f1hw1m5m"
|
|
43
|
-
},
|
|
44
|
-
hint: {
|
|
45
|
-
Br312pm: "fbug73u",
|
|
46
|
-
Bw0ie65: "fbtgo1w"
|
|
25
|
+
horizontalNoLabel: {
|
|
26
|
+
uwmqm3: ["f15jqgz8", "fggqkej"],
|
|
27
|
+
Budl1dq: "f1c2z91y"
|
|
47
28
|
}
|
|
48
29
|
}, {
|
|
49
|
-
d: [".f13qh94s{display:grid;}", ".
|
|
30
|
+
d: [".f13qh94s{display:grid;}", ".f1m2n5bn{justify-items:start;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
50
31
|
});
|
|
51
32
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
52
33
|
base: {
|
|
@@ -55,36 +36,27 @@ const useLabelStyles = /*#__PURE__*/__styles({
|
|
|
55
36
|
},
|
|
56
37
|
horizontal: {
|
|
57
38
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
39
|
+
Ijaq50: "f16hsg94",
|
|
40
|
+
nk6f5a: "f1nzqi2z",
|
|
58
41
|
qb2dma: "f9h729m",
|
|
59
42
|
Bdqf98w: "fhb5wj7"
|
|
60
43
|
}
|
|
61
44
|
}, {
|
|
62
|
-
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
45
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
63
46
|
});
|
|
47
|
+
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);}"]);
|
|
64
48
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
65
|
-
base: {
|
|
66
|
-
B6of3ja: "fg30ohd",
|
|
67
|
-
sj55zd: "f11d4kpn",
|
|
68
|
-
Bahqtrf: "fk6fouc",
|
|
69
|
-
Be2twd7: "fy9rknc",
|
|
70
|
-
Bhrd7zp: "figsok6",
|
|
71
|
-
Bg96gwp: "fwrc4pm"
|
|
72
|
-
},
|
|
73
49
|
error: {
|
|
74
50
|
sj55zd: "f1hcrxcs"
|
|
51
|
+
},
|
|
52
|
+
withIcon: {
|
|
53
|
+
uwmqm3: ["frawy03", "fg4c52"]
|
|
75
54
|
}
|
|
76
55
|
}, {
|
|
77
|
-
d: [".
|
|
56
|
+
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
|
|
78
57
|
});
|
|
58
|
+
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;}"]);
|
|
79
59
|
const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
80
|
-
base: {
|
|
81
|
-
mc9l5x: "ftgm304",
|
|
82
|
-
qb2dma: "f9h729m",
|
|
83
|
-
Be2twd7: "f1ugzwwg",
|
|
84
|
-
Bg96gwp: "fp4gqsa",
|
|
85
|
-
t21cq0: ["fm0x6gh", "fbyavb5"],
|
|
86
|
-
B6of3ja: "fww94b8"
|
|
87
|
-
},
|
|
88
60
|
error: {
|
|
89
61
|
sj55zd: "f1hcrxcs"
|
|
90
62
|
},
|
|
@@ -95,7 +67,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
|
95
67
|
sj55zd: "ffmvakt"
|
|
96
68
|
}
|
|
97
69
|
}, {
|
|
98
|
-
d: [".
|
|
70
|
+
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
99
71
|
});
|
|
100
72
|
/**
|
|
101
73
|
* Apply styling to the Field slots based on the state
|
|
@@ -105,24 +77,26 @@ export const useFieldStyles_unstable = state => {
|
|
|
105
77
|
const validationState = state.validationState;
|
|
106
78
|
const horizontal = state.orientation === 'horizontal';
|
|
107
79
|
const rootStyles = useRootStyles();
|
|
108
|
-
state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
80
|
+
state.root.className = mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
109
81
|
if (state.control) {
|
|
110
|
-
state.control.className = mergeClasses(classNames.control,
|
|
82
|
+
state.control.className = mergeClasses(classNames.control, state.control.className);
|
|
111
83
|
}
|
|
112
84
|
const labelStyles = useLabelStyles();
|
|
113
85
|
if (state.label) {
|
|
114
|
-
state.label.className = mergeClasses(classNames.label,
|
|
86
|
+
state.label.className = mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
115
87
|
}
|
|
88
|
+
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
116
89
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
117
90
|
if (state.validationMessageIcon) {
|
|
118
|
-
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon,
|
|
91
|
+
state.validationMessageIcon.className = mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
119
92
|
}
|
|
93
|
+
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
120
94
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
121
95
|
if (state.validationMessage) {
|
|
122
|
-
state.validationMessage.className = mergeClasses(classNames.validationMessage,
|
|
96
|
+
state.validationMessage.className = mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
|
123
97
|
}
|
|
124
98
|
if (state.hint) {
|
|
125
|
-
state.hint.className = mergeClasses(classNames.hint,
|
|
99
|
+
state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
|
|
126
100
|
}
|
|
127
101
|
};
|
|
128
102
|
//# sourceMappingURL=useFieldStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAEhE,
|
|
1
|
+
{"version":3,"mappings":"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","names":["tokens","typographyStyles","mergeClasses","getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n justifyItems: 'start',\n },\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\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});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\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});\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});\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/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
|
|
@@ -20,11 +20,11 @@ const renderField_unstable = state => {
|
|
|
20
20
|
...slotProps.label
|
|
21
21
|
}), slots.control && React.createElement(slots.control, {
|
|
22
22
|
...slotProps.control
|
|
23
|
-
}), slots.validationMessage && slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
|
24
|
-
...slotProps.validationMessageIcon
|
|
25
23
|
}), slots.validationMessage && React.createElement(slots.validationMessage, {
|
|
26
24
|
...slotProps.validationMessage
|
|
27
|
-
}
|
|
25
|
+
}, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, {
|
|
26
|
+
...slotProps.validationMessageIcon
|
|
27
|
+
}), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, {
|
|
28
28
|
...slotProps.hint
|
|
29
29
|
}));
|
|
30
30
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,oBAAoB,GAA4BC,KAAoB,IAAI;EACnF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAA2BH,KAAiC,CAAC;EAElG,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BJ,KAAK,CAACK,KAAK,IAAIF,oBAACH,KAAK,CAACK,KAAK;IAAA,GAAKJ,SAAS,CAACI;EAAK,EAAI,EAEnDL,KAAK,CAACM,OAAO,IAAIH,oBAACH,KAAK,CAACM,OAAO;IAAA,GAAML,SAAS,CAACK;EAAe,EAAI,EAClEN,KAAK,CAACO,iBAAiB,IACtBJ,oBAACH,KAAK,CAACO,iBAAiB;IAAA,GAAKN,SAAS,CAACM;EAAiB,GACrDP,KAAK,CAACQ,qBAAqB,IAAIL,oBAACH,KAAK,CAACQ,qBAAqB;IAAA,GAAKP,SAAS,CAACO;EAAqB,EAAI,EACnGP,SAAS,CAACM,iBAAiB,CAACE,QAAQ,CAExC,EACAT,KAAK,CAACU,IAAI,IAAIP,oBAACH,KAAK,CAACU,IAAI;IAAA,GAAKT,SAAS,CAACS;EAAI,EAAI,CACtC;AAEjB,CAAC;AAjBYC,4BAAoB","names":["renderField_unstable","state","slots","slotProps","react_utilities_1","React","root","label","control","validationMessage","validationMessageIcon","children","hint","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/renderField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label} />}\n {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n {slots.control && <slots.control {...(slotProps.control as any)} />}\n {slots.validationMessage && (\n <slots.validationMessage {...slotProps.validationMessage}>\n {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n {slotProps.validationMessage.children}\n </slots.validationMessage>\n )}\n {slots.hint && <slots.hint {...slotProps.hint} />}\n </slots.root>\n );\n};\n"]}
|
|
@@ -15,45 +15,26 @@ const getFieldClassNames = name => ({
|
|
|
15
15
|
hint: `fui-${name}__hint`
|
|
16
16
|
});
|
|
17
17
|
exports.getFieldClassNames = getFieldClassNames;
|
|
18
|
+
// Size of the icon in the validation message
|
|
19
|
+
const iconSize = '12px';
|
|
18
20
|
/**
|
|
19
21
|
* Styles for the root slot
|
|
20
22
|
*/
|
|
21
23
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
22
24
|
base: {
|
|
23
25
|
mc9l5x: "f13qh94s",
|
|
24
|
-
Bxotwcr: "f14np9u9",
|
|
25
|
-
Budl1dq: "fjxzuw",
|
|
26
|
-
zoa1oz: "f6nraym",
|
|
27
26
|
B7hvi0a: "f1m2n5bn"
|
|
28
27
|
},
|
|
29
28
|
horizontal: {
|
|
30
|
-
Budl1dq: "
|
|
31
|
-
|
|
29
|
+
Budl1dq: "f2wwaib",
|
|
30
|
+
wkccdc: "f1645dqt"
|
|
32
31
|
},
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
Ijaq50: "f1tty21m",
|
|
37
|
-
nk6f5a: "f19648ye"
|
|
38
|
-
},
|
|
39
|
-
control: {
|
|
40
|
-
Br312pm: "f1bfa6ju",
|
|
41
|
-
Bw0ie65: "fl3lap4"
|
|
42
|
-
},
|
|
43
|
-
validationIcon: {
|
|
44
|
-
Br312pm: "ftfzah7",
|
|
45
|
-
Bw0ie65: "f1fih8f9"
|
|
46
|
-
},
|
|
47
|
-
validationMessage: {
|
|
48
|
-
Br312pm: "f1n69xcw",
|
|
49
|
-
Bw0ie65: "f1hw1m5m"
|
|
50
|
-
},
|
|
51
|
-
hint: {
|
|
52
|
-
Br312pm: "fbug73u",
|
|
53
|
-
Bw0ie65: "fbtgo1w"
|
|
32
|
+
horizontalNoLabel: {
|
|
33
|
+
uwmqm3: ["f15jqgz8", "fggqkej"],
|
|
34
|
+
Budl1dq: "f1c2z91y"
|
|
54
35
|
}
|
|
55
36
|
}, {
|
|
56
|
-
d: [".f13qh94s{display:grid;}", ".
|
|
37
|
+
d: [".f13qh94s{display:grid;}", ".f1m2n5bn{justify-items:start;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
57
38
|
});
|
|
58
39
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
59
40
|
base: {
|
|
@@ -62,36 +43,27 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
|
62
43
|
},
|
|
63
44
|
horizontal: {
|
|
64
45
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
46
|
+
Ijaq50: "f16hsg94",
|
|
47
|
+
nk6f5a: "f1nzqi2z",
|
|
65
48
|
qb2dma: "f9h729m",
|
|
66
49
|
Bdqf98w: "fhb5wj7"
|
|
67
50
|
}
|
|
68
51
|
}, {
|
|
69
|
-
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
52
|
+
d: [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
|
|
70
53
|
});
|
|
54
|
+
const useSecondaryTextBaseClassName = /*#__PURE__*/react_1.__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
71
55
|
const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
|
|
72
|
-
base: {
|
|
73
|
-
B6of3ja: "fg30ohd",
|
|
74
|
-
sj55zd: "f11d4kpn",
|
|
75
|
-
Bahqtrf: "fk6fouc",
|
|
76
|
-
Be2twd7: "fy9rknc",
|
|
77
|
-
Bhrd7zp: "figsok6",
|
|
78
|
-
Bg96gwp: "fwrc4pm"
|
|
79
|
-
},
|
|
80
56
|
error: {
|
|
81
57
|
sj55zd: "f1hcrxcs"
|
|
58
|
+
},
|
|
59
|
+
withIcon: {
|
|
60
|
+
uwmqm3: ["frawy03", "fg4c52"]
|
|
82
61
|
}
|
|
83
62
|
}, {
|
|
84
|
-
d: [".
|
|
63
|
+
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
|
|
85
64
|
});
|
|
65
|
+
const useValidationMessageIconBaseClassName = /*#__PURE__*/react_1.__resetStyles("ra7h1uk", "r1rh6bd7", [".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}", ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"]);
|
|
86
66
|
const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
87
|
-
base: {
|
|
88
|
-
mc9l5x: "ftgm304",
|
|
89
|
-
qb2dma: "f9h729m",
|
|
90
|
-
Be2twd7: "f1ugzwwg",
|
|
91
|
-
Bg96gwp: "fp4gqsa",
|
|
92
|
-
t21cq0: ["fm0x6gh", "fbyavb5"],
|
|
93
|
-
B6of3ja: "fww94b8"
|
|
94
|
-
},
|
|
95
67
|
error: {
|
|
96
68
|
sj55zd: "f1hcrxcs"
|
|
97
69
|
},
|
|
@@ -102,7 +74,7 @@ const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
102
74
|
sj55zd: "ffmvakt"
|
|
103
75
|
}
|
|
104
76
|
}, {
|
|
105
|
-
d: [".
|
|
77
|
+
d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
|
|
106
78
|
});
|
|
107
79
|
/**
|
|
108
80
|
* Apply styling to the Field slots based on the state
|
|
@@ -112,24 +84,26 @@ const useFieldStyles_unstable = state => {
|
|
|
112
84
|
const validationState = state.validationState;
|
|
113
85
|
const horizontal = state.orientation === 'horizontal';
|
|
114
86
|
const rootStyles = useRootStyles();
|
|
115
|
-
state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
|
|
87
|
+
state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
116
88
|
if (state.control) {
|
|
117
|
-
state.control.className = react_1.mergeClasses(classNames.control,
|
|
89
|
+
state.control.className = react_1.mergeClasses(classNames.control, state.control.className);
|
|
118
90
|
}
|
|
119
91
|
const labelStyles = useLabelStyles();
|
|
120
92
|
if (state.label) {
|
|
121
|
-
state.label.className = react_1.mergeClasses(classNames.label,
|
|
93
|
+
state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
|
|
122
94
|
}
|
|
95
|
+
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
123
96
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
124
97
|
if (state.validationMessageIcon) {
|
|
125
|
-
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon,
|
|
98
|
+
state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconBaseClassName, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
|
|
126
99
|
}
|
|
100
|
+
const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
|
|
127
101
|
const secondaryTextStyles = useSecondaryTextStyles();
|
|
128
102
|
if (state.validationMessage) {
|
|
129
|
-
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage,
|
|
103
|
+
state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
|
|
130
104
|
}
|
|
131
105
|
if (state.hint) {
|
|
132
|
-
state.hint.className = react_1.mergeClasses(classNames.hint,
|
|
106
|
+
state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);
|
|
133
107
|
}
|
|
134
108
|
};
|
|
135
109
|
exports.useFieldStyles_unstable = useFieldStyles_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGO,MAAMA,kBAAkB,GAAIC,IAAY,KAAgD;EAC7FC,IAAI,EAAE,OAAOD,IAAI,EAAE;EACnBE,OAAO,EAAE,OAAOF,IAAI,WAAW;EAC/BG,KAAK,EAAE,OAAOH,IAAI,SAAS;EAC3BI,iBAAiB,EAAE,OAAOJ,IAAI,qBAAqB;EACnDK,qBAAqB,EAAE,OAAOL,IAAI,yBAAyB;EAC3DM,IAAI,EAAE,OAAON,IAAI;CAClB,CAAC;AAPWO,0BAAkB;AAS/B;;;AAGA,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;
|
|
1
|
+
{"version":3,"mappings":"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","names":["getFieldClassNames","name","root","control","label","validationMessage","validationMessageIcon","hint","exports","iconSize","useRootStyles","react_1","useLabelStyles","useSecondaryTextBaseClassName","useSecondaryTextStyles","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","useFieldStyles_unstable","state","classNames","validationState","horizontal","orientation","rootStyles","className","base","horizontalNoLabel","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles","error","withIcon"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\n root: `fui-${name}`,\n control: `fui-${name}__control`,\n label: `fui-${name}__label`,\n validationMessage: `fui-${name}__validationMessage`,\n validationMessageIcon: `fui-${name}__validationMessageIcon`,\n hint: `fui-${name}__hint`,\n});\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'grid',\n justifyItems: 'start',\n },\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\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});\n\nconst useLabelStyles = makeStyles({\n base: {\n marginTop: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS,\n },\n\n horizontal: {\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1',\n alignSelf: 'start',\n justifySelf: 'stretch',\n },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1,\n },\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});\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});\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/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n const classNames = state.classNames;\n const validationState: FieldProps<FieldControl>['validationState'] = state.validationState;\n const horizontal = state.orientation === 'horizontal';\n\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n classNames.root,\n rootStyles.base,\n horizontal && rootStyles.horizontal,\n horizontal && !state.label && rootStyles.horizontalNoLabel,\n state.root.className,\n );\n\n if (state.control) {\n state.control.className = mergeClasses(classNames.control, state.control.className);\n }\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n classNames.label,\n labelStyles.base,\n horizontal && labelStyles.horizontal,\n state.label.className,\n );\n }\n\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(\n classNames.validationMessageIcon,\n validationMessageIconBaseClassName,\n !!validationState && validationMessageIconStyles[validationState],\n state.validationMessageIcon.className,\n );\n }\n\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(\n classNames.validationMessage,\n secondaryTextBaseClassName,\n validationState === 'error' && secondaryTextStyles.error,\n !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n state.validationMessage.className,\n );\n }\n\n if (state.hint) {\n state.hint.className = mergeClasses(classNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-field",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230119-0422.1",
|
|
4
4
|
"description": "Fluent UI Field components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@fluentui/eslint-plugin": "*",
|
|
28
28
|
"@fluentui/react-conformance": "*",
|
|
29
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
29
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230119-0422.1",
|
|
30
30
|
"@fluentui/scripts-api-extractor": "*",
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230119-0422.1",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20230119-0422.1",
|
|
37
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230119-0422.1",
|
|
38
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230119-0422.1",
|
|
39
39
|
"@griffel/react": "^1.5.2",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|