@fluentui/react-select 0.0.0-nightly-20221026-0422.1 → 0.0.0-nightly-20221028-0425.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 +9 -9
- package/CHANGELOG.md +7 -7
- package/lib/components/Select/useSelectStyles.js +58 -24
- package/lib/components/Select/useSelectStyles.js.map +1 -1
- package/lib-commonjs/components/Select/useSelectStyles.js +58 -24
- package/lib-commonjs/components/Select/useSelectStyles.js.map +1 -1
- package/package.json +4 -4
- package/Spec.md +0 -238
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-select_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 28 Oct 2022 04:32:10 GMT",
|
|
6
|
+
"tag": "@fluentui/react-select_v0.0.0-nightly-20221028-0425.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221028-0425.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-select",
|
|
19
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221028-0425.1",
|
|
20
|
+
"commit": "138bd8f8e50bbba2e256c39c9bd76991366e8857"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-select",
|
|
25
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221028-0425.1",
|
|
26
|
+
"commit": "138bd8f8e50bbba2e256c39c9bd76991366e8857"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-select",
|
|
31
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221028-0425.1",
|
|
32
|
+
"commit": "138bd8f8e50bbba2e256c39c9bd76991366e8857"
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-select
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 28 Oct 2022 04:32:10 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-20221028-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v0.0.0-nightly-20221028-0425.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.12..@fluentui/react-select_v0.0.0-nightly-
|
|
9
|
+
Fri, 28 Oct 2022 04:32:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.0.0-beta.12..@fluentui/react-select_v0.0.0-nightly-20221028-0425.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-theme to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221028-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/138bd8f8e50bbba2e256c39c9bd76991366e8857) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221028-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/138bd8f8e50bbba2e256c39c9bd76991366e8857) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221028-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/138bd8f8e50bbba2e256c39c9bd76991366e8857) by beachball)
|
|
18
18
|
|
|
19
19
|
## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.0.0-beta.12)
|
|
20
20
|
|
|
@@ -9,7 +9,7 @@ const iconSizes = {
|
|
|
9
9
|
small: '16px',
|
|
10
10
|
medium: '20px',
|
|
11
11
|
large: '24px'
|
|
12
|
-
}; //
|
|
12
|
+
}; // This 400 style is not in the typography styles.
|
|
13
13
|
// May need a design change
|
|
14
14
|
|
|
15
15
|
const contentSizes = {
|
|
@@ -24,6 +24,36 @@ const fieldHeights = {
|
|
|
24
24
|
medium: '32px',
|
|
25
25
|
large: '40px'
|
|
26
26
|
};
|
|
27
|
+
/* Since the <select> element must span the full width and cannot have children,
|
|
28
|
+
* the right padding needs to be calculated from the sum of the following:
|
|
29
|
+
* 1. Field padding-right
|
|
30
|
+
* 2. Icon width
|
|
31
|
+
* 3. Content-icon spacing
|
|
32
|
+
* 4. Content inner padding
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
const paddingRight = {
|
|
36
|
+
small: `calc(${tokens.spacingHorizontalSNudge}
|
|
37
|
+
+ ${iconSizes.small}
|
|
38
|
+
+ ${tokens.spacingHorizontalXXS}
|
|
39
|
+
+ ${tokens.spacingHorizontalXXS})`,
|
|
40
|
+
medium: `calc(${tokens.spacingHorizontalMNudge}
|
|
41
|
+
+ ${iconSizes.medium}
|
|
42
|
+
+ ${tokens.spacingHorizontalXXS}
|
|
43
|
+
+ ${tokens.spacingHorizontalXXS})`,
|
|
44
|
+
large: `calc(${tokens.spacingHorizontalM}
|
|
45
|
+
+ ${iconSizes.large}
|
|
46
|
+
+ ${tokens.spacingHorizontalSNudge}
|
|
47
|
+
+ ${tokens.spacingHorizontalSNudge})`
|
|
48
|
+
};
|
|
49
|
+
/* Left padding is calculated from the outer padding + inner content padding values
|
|
50
|
+
* since <select> can't have additional child content or custom inner layout */
|
|
51
|
+
|
|
52
|
+
const paddingLeft = {
|
|
53
|
+
small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
54
|
+
medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,
|
|
55
|
+
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
|
|
56
|
+
};
|
|
27
57
|
/* end of shared values */
|
|
28
58
|
|
|
29
59
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
@@ -95,7 +125,11 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
95
125
|
"E5pizo": "f1couhl3",
|
|
96
126
|
"B7ck84d": "f1ewtqcl",
|
|
97
127
|
"sj55zd": "f19n0e5",
|
|
128
|
+
"Bceei9c": "f1k6fduh",
|
|
98
129
|
"Bh6795r": "fqerorx",
|
|
130
|
+
"B2u0y6b": "f6dzj5z",
|
|
131
|
+
"Byoj8tv": "f1qch9an",
|
|
132
|
+
"z8tnut": "f1g0x7ka",
|
|
99
133
|
"B3aqqti": "fatbyko",
|
|
100
134
|
"Brovlpu": "f1grzc83",
|
|
101
135
|
"Bxa1mx5": "f19shzzi"
|
|
@@ -123,10 +157,8 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
123
157
|
},
|
|
124
158
|
"small": {
|
|
125
159
|
"Bqenvij": "frvgh55",
|
|
126
|
-
"
|
|
127
|
-
"z189sj": ["
|
|
128
|
-
"Byoj8tv": "f1qch9an",
|
|
129
|
-
"uwmqm3": ["fk8j09s", "fdw0yi8"],
|
|
160
|
+
"uwmqm3": ["f1xile11", "fqznh8f"],
|
|
161
|
+
"z189sj": ["fiqd4sw", "f11fkzut"],
|
|
130
162
|
"Bahqtrf": "fk6fouc",
|
|
131
163
|
"Be2twd7": "fy9rknc",
|
|
132
164
|
"Bhrd7zp": "figsok6",
|
|
@@ -134,10 +166,8 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
134
166
|
},
|
|
135
167
|
"medium": {
|
|
136
168
|
"Bqenvij": "f1d2rq10",
|
|
137
|
-
"
|
|
138
|
-
"z189sj": ["
|
|
139
|
-
"Byoj8tv": "f1qch9an",
|
|
140
|
-
"uwmqm3": ["f1ng84yb", "f11gcy0p"],
|
|
169
|
+
"uwmqm3": ["f1e60jzv", "f135dnwl"],
|
|
170
|
+
"z189sj": ["f154vowv", "flqamny"],
|
|
141
171
|
"Bahqtrf": "fk6fouc",
|
|
142
172
|
"Be2twd7": "fkhj508",
|
|
143
173
|
"Bhrd7zp": "figsok6",
|
|
@@ -145,10 +175,8 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
145
175
|
},
|
|
146
176
|
"large": {
|
|
147
177
|
"Bqenvij": "fbhnoac",
|
|
148
|
-
"
|
|
149
|
-
"z189sj": ["
|
|
150
|
-
"Byoj8tv": "f1qch9an",
|
|
151
|
-
"uwmqm3": ["f1uw59to", "fw5db7e"],
|
|
178
|
+
"uwmqm3": ["fnphzt9", "flt1dlf"],
|
|
179
|
+
"z189sj": ["f1xi5ia2", "f1xi1l47"],
|
|
152
180
|
"Be2twd7": "fod5ikn",
|
|
153
181
|
"Bg96gwp": "faaz57k"
|
|
154
182
|
},
|
|
@@ -165,7 +193,15 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
165
193
|
"g2u3we": "fj3muxo",
|
|
166
194
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
167
195
|
"B9xav0g": "f1c1zstj",
|
|
168
|
-
"zhjwy3": ["f1lxtadh", "f1akhkt"]
|
|
196
|
+
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
197
|
+
"Bgoe8wy": "fvcxoqz",
|
|
198
|
+
"Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
|
|
199
|
+
"oetu4i": "flmw63s",
|
|
200
|
+
"gg5e9n": ["f1m52nbi", "f1ub3y4t"],
|
|
201
|
+
"B6oc9vd": "fvs00aa",
|
|
202
|
+
"ak43y8": ["f1assf6x", "f4ruux4"],
|
|
203
|
+
"wmxk5l": "fqhmt4z",
|
|
204
|
+
"B50zh58": ["f4ruux4", "f1assf6x"]
|
|
169
205
|
},
|
|
170
206
|
"underline": {
|
|
171
207
|
"De3pzq": "f1c21dwh",
|
|
@@ -193,7 +229,7 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
193
229
|
"hhx65j": "f1fgmyf4"
|
|
194
230
|
}
|
|
195
231
|
}, {
|
|
196
|
-
"d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".
|
|
232
|
+
"d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
|
|
197
233
|
"f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
198
234
|
"m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
|
|
199
235
|
"m": "(forced-colors: active)"
|
|
@@ -203,7 +239,9 @@ const useSelectStyles = /*#__PURE__*/__styles({
|
|
|
203
239
|
"m": "(forced-colors: active)"
|
|
204
240
|
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
|
|
205
241
|
"m": "(forced-colors: active)"
|
|
206
|
-
}]]
|
|
242
|
+
}]],
|
|
243
|
+
"h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
|
|
244
|
+
"a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
|
|
207
245
|
});
|
|
208
246
|
|
|
209
247
|
const useIconStyles = /*#__PURE__*/__styles({
|
|
@@ -212,7 +250,6 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
212
250
|
"sj55zd": "fxkbij4",
|
|
213
251
|
"mc9l5x": "ftgm304",
|
|
214
252
|
"qhf8xq": "f1euv43f",
|
|
215
|
-
"j35jbq": ["fnyteob", "f1enpzzf"],
|
|
216
253
|
"Bkecrkj": "f1aehjj5",
|
|
217
254
|
"Bo70h7d": "fvc9v3g"
|
|
218
255
|
},
|
|
@@ -223,26 +260,23 @@ const useIconStyles = /*#__PURE__*/__styles({
|
|
|
223
260
|
"small": {
|
|
224
261
|
"Be2twd7": "f4ybsrx",
|
|
225
262
|
"Bqenvij": "fd461yt",
|
|
226
|
-
"
|
|
227
|
-
"uwmqm3": ["fgiv446", "ffczdla"],
|
|
263
|
+
"j35jbq": ["f13lnp83", "f1i5nn0v"],
|
|
228
264
|
"a9b677": "fjw5fx7"
|
|
229
265
|
},
|
|
230
266
|
"medium": {
|
|
231
267
|
"Be2twd7": "fe5j1ua",
|
|
232
268
|
"Bqenvij": "fjamq6b",
|
|
233
|
-
"
|
|
234
|
-
"uwmqm3": ["fgiv446", "ffczdla"],
|
|
269
|
+
"j35jbq": ["fnyteob", "f1enpzzf"],
|
|
235
270
|
"a9b677": "f64fuq3"
|
|
236
271
|
},
|
|
237
272
|
"large": {
|
|
238
273
|
"Be2twd7": "f1rt2boy",
|
|
239
274
|
"Bqenvij": "frvgh55",
|
|
240
|
-
"
|
|
241
|
-
"uwmqm3": ["fk8j09s", "fdw0yi8"],
|
|
275
|
+
"j35jbq": ["f8b87gs", "fedtrts"],
|
|
242
276
|
"a9b677": "fq4mcun"
|
|
243
277
|
}
|
|
244
278
|
}, {
|
|
245
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".
|
|
279
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
|
|
246
280
|
"m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
247
281
|
"m": "(forced-colors: active)"
|
|
248
282
|
}]]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,MAAM,EAAE,oBAFmD;EAG3D,IAAI,EAAE;AAHqD,CAAtD;AAMP,MAAM,SAAS,GAAG;EAChB,KAAK,EAAE,MADS;EAEhB,MAAM,EAAE,MAFQ;EAGhB,KAAK,EAAE;AAHS,CAAlB,C,CAMA;AACA;;AACA,MAAM,YAAY,GAAG;EACnB,KAAK;IACH,QAAQ,EAAE,MAAM,CAAC,eADd;IAEH,UAAU,EAAE,MAAM,CAAC;EAFhB;AADc,CAArB,C,CAOA;;AACA,MAAM,YAAY,GAAG;EACnB,KAAK,EAAE,MADY;EAEnB,MAAM,EAAE,MAFW;EAGnB,KAAK,EAAE;AAHY,CAArB;AAMA;;AAEA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAAtB;;AAkDA,MAAM,eAAe,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAxB;;AAoEA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AA4CA;;AAEG;;;AACH,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;EAC1E,MAAM;IAAE,IAAF;IAAQ;EAAR,IAAuB,KAA7B;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,CAAa,QAA9B;EACA,MAAM,OAAO,GAAG,GAAG,KAAK,CAAC,MAAN,CAAa,cAAb,CAA4B,EAA/B,KAAsC,MAAtD;EAEA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,YAAY,GAAG,eAAe,EAApC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,gBAAgB,CAAC,IAAlB,EAAwB,UAAU,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC;EAEA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,gBAAgB,CAAC,MADkB,EAEnC,YAAY,CAAC,IAFsB,EAGnC,YAAY,CAAC,IAAD,CAHuB,EAInC,YAAY,CAAC,UAAD,CAJuB,EAKnC,CAAC,QAAD,IAAa,OAAb,IAAwB,UAAU,KAAK,WAAvC,IAAsD,YAAY,CAAC,OALhC,EAMnC,CAAC,QAAD,IAAa,OAAb,IAAwB,UAAU,KAAK,WAAvC,IAAsD,YAAY,CAAC,gBANhC,EAOnC,QAAQ,IAAI,YAAY,CAAC,QAPU,EAQnC,KAAK,CAAC,MAAN,CAAa,SARsB,CAArC;;EAWA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,QAAQ,IAAI,UAAU,CAAC,QAHU,EAIjC,UAAU,CAAC,IAAD,CAJuB,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOD;;EAED,OAAO,KAAP;AACD,CAjCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
@@ -18,7 +18,7 @@ const iconSizes = {
|
|
|
18
18
|
small: '16px',
|
|
19
19
|
medium: '20px',
|
|
20
20
|
large: '24px'
|
|
21
|
-
}; //
|
|
21
|
+
}; // This 400 style is not in the typography styles.
|
|
22
22
|
// May need a design change
|
|
23
23
|
|
|
24
24
|
const contentSizes = {
|
|
@@ -33,6 +33,36 @@ const fieldHeights = {
|
|
|
33
33
|
medium: '32px',
|
|
34
34
|
large: '40px'
|
|
35
35
|
};
|
|
36
|
+
/* Since the <select> element must span the full width and cannot have children,
|
|
37
|
+
* the right padding needs to be calculated from the sum of the following:
|
|
38
|
+
* 1. Field padding-right
|
|
39
|
+
* 2. Icon width
|
|
40
|
+
* 3. Content-icon spacing
|
|
41
|
+
* 4. Content inner padding
|
|
42
|
+
*/
|
|
43
|
+
|
|
44
|
+
const paddingRight = {
|
|
45
|
+
small: `calc(${react_theme_1.tokens.spacingHorizontalSNudge}
|
|
46
|
+
+ ${iconSizes.small}
|
|
47
|
+
+ ${react_theme_1.tokens.spacingHorizontalXXS}
|
|
48
|
+
+ ${react_theme_1.tokens.spacingHorizontalXXS})`,
|
|
49
|
+
medium: `calc(${react_theme_1.tokens.spacingHorizontalMNudge}
|
|
50
|
+
+ ${iconSizes.medium}
|
|
51
|
+
+ ${react_theme_1.tokens.spacingHorizontalXXS}
|
|
52
|
+
+ ${react_theme_1.tokens.spacingHorizontalXXS})`,
|
|
53
|
+
large: `calc(${react_theme_1.tokens.spacingHorizontalM}
|
|
54
|
+
+ ${iconSizes.large}
|
|
55
|
+
+ ${react_theme_1.tokens.spacingHorizontalSNudge}
|
|
56
|
+
+ ${react_theme_1.tokens.spacingHorizontalSNudge})`
|
|
57
|
+
};
|
|
58
|
+
/* Left padding is calculated from the outer padding + inner content padding values
|
|
59
|
+
* since <select> can't have additional child content or custom inner layout */
|
|
60
|
+
|
|
61
|
+
const paddingLeft = {
|
|
62
|
+
small: `calc(${react_theme_1.tokens.spacingHorizontalSNudge} + ${react_theme_1.tokens.spacingHorizontalXXS})`,
|
|
63
|
+
medium: `calc(${react_theme_1.tokens.spacingHorizontalMNudge} + ${react_theme_1.tokens.spacingHorizontalXXS})`,
|
|
64
|
+
large: `calc(${react_theme_1.tokens.spacingHorizontalM} + ${react_theme_1.tokens.spacingHorizontalSNudge})`
|
|
65
|
+
};
|
|
36
66
|
/* end of shared values */
|
|
37
67
|
|
|
38
68
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -104,7 +134,11 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
104
134
|
"E5pizo": "f1couhl3",
|
|
105
135
|
"B7ck84d": "f1ewtqcl",
|
|
106
136
|
"sj55zd": "f19n0e5",
|
|
137
|
+
"Bceei9c": "f1k6fduh",
|
|
107
138
|
"Bh6795r": "fqerorx",
|
|
139
|
+
"B2u0y6b": "f6dzj5z",
|
|
140
|
+
"Byoj8tv": "f1qch9an",
|
|
141
|
+
"z8tnut": "f1g0x7ka",
|
|
108
142
|
"B3aqqti": "fatbyko",
|
|
109
143
|
"Brovlpu": "f1grzc83",
|
|
110
144
|
"Bxa1mx5": "f19shzzi"
|
|
@@ -132,10 +166,8 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
132
166
|
},
|
|
133
167
|
"small": {
|
|
134
168
|
"Bqenvij": "frvgh55",
|
|
135
|
-
"
|
|
136
|
-
"z189sj": ["
|
|
137
|
-
"Byoj8tv": "f1qch9an",
|
|
138
|
-
"uwmqm3": ["fk8j09s", "fdw0yi8"],
|
|
169
|
+
"uwmqm3": ["f1xile11", "fqznh8f"],
|
|
170
|
+
"z189sj": ["fiqd4sw", "f11fkzut"],
|
|
139
171
|
"Bahqtrf": "fk6fouc",
|
|
140
172
|
"Be2twd7": "fy9rknc",
|
|
141
173
|
"Bhrd7zp": "figsok6",
|
|
@@ -143,10 +175,8 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
143
175
|
},
|
|
144
176
|
"medium": {
|
|
145
177
|
"Bqenvij": "f1d2rq10",
|
|
146
|
-
"
|
|
147
|
-
"z189sj": ["
|
|
148
|
-
"Byoj8tv": "f1qch9an",
|
|
149
|
-
"uwmqm3": ["f1ng84yb", "f11gcy0p"],
|
|
178
|
+
"uwmqm3": ["f1e60jzv", "f135dnwl"],
|
|
179
|
+
"z189sj": ["f154vowv", "flqamny"],
|
|
150
180
|
"Bahqtrf": "fk6fouc",
|
|
151
181
|
"Be2twd7": "fkhj508",
|
|
152
182
|
"Bhrd7zp": "figsok6",
|
|
@@ -154,10 +184,8 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
154
184
|
},
|
|
155
185
|
"large": {
|
|
156
186
|
"Bqenvij": "fbhnoac",
|
|
157
|
-
"
|
|
158
|
-
"z189sj": ["
|
|
159
|
-
"Byoj8tv": "f1qch9an",
|
|
160
|
-
"uwmqm3": ["f1uw59to", "fw5db7e"],
|
|
187
|
+
"uwmqm3": ["fnphzt9", "flt1dlf"],
|
|
188
|
+
"z189sj": ["f1xi5ia2", "f1xi1l47"],
|
|
161
189
|
"Be2twd7": "fod5ikn",
|
|
162
190
|
"Bg96gwp": "faaz57k"
|
|
163
191
|
},
|
|
@@ -174,7 +202,15 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
174
202
|
"g2u3we": "fj3muxo",
|
|
175
203
|
"h3c5rm": ["f1akhkt", "f1lxtadh"],
|
|
176
204
|
"B9xav0g": "f1c1zstj",
|
|
177
|
-
"zhjwy3": ["f1lxtadh", "f1akhkt"]
|
|
205
|
+
"zhjwy3": ["f1lxtadh", "f1akhkt"],
|
|
206
|
+
"Bgoe8wy": "fvcxoqz",
|
|
207
|
+
"Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
|
|
208
|
+
"oetu4i": "flmw63s",
|
|
209
|
+
"gg5e9n": ["f1m52nbi", "f1ub3y4t"],
|
|
210
|
+
"B6oc9vd": "fvs00aa",
|
|
211
|
+
"ak43y8": ["f1assf6x", "f4ruux4"],
|
|
212
|
+
"wmxk5l": "fqhmt4z",
|
|
213
|
+
"B50zh58": ["f4ruux4", "f1assf6x"]
|
|
178
214
|
},
|
|
179
215
|
"underline": {
|
|
180
216
|
"De3pzq": "f1c21dwh",
|
|
@@ -202,7 +238,7 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
202
238
|
"hhx65j": "f1fgmyf4"
|
|
203
239
|
}
|
|
204
240
|
}, {
|
|
205
|
-
"d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".
|
|
241
|
+
"d": [".fqrijq1{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1couhl3{box-shadow:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1k6fduh{cursor:pointer;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f6dzj5z{max-width:100%;}", ".f1qch9an{padding-bottom:0;}", ".f1g0x7ka{padding-top:0;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".frvgh55{height:24px;}", ".f1xile11{padding-left:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fqznh8f{padding-right:calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", ".fiqd4sw{padding-right:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".f11fkzut{padding-left:calc(var(--spacingHorizontalSNudge)\n + 16px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1d2rq10{height:32px;}", ".f1e60jzv{padding-left:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f135dnwl{padding-right:calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}", ".f154vowv{padding-right:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".flqamny{padding-left:calc(var(--spacingHorizontalMNudge)\n + 20px\n + var(--spacingHorizontalXXS)\n + var(--spacingHorizontalXXS));}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".f1xi5ia2{padding-right:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".f1xi1l47{padding-left:calc(var(--spacingHorizontalM)\n + 24px\n + var(--spacingHorizontalSNudge)\n + var(--spacingHorizontalSNudge));}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}"],
|
|
206
242
|
"f": [".fatbyko:focus{outline-width:2px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
|
|
207
243
|
"m": [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
|
|
208
244
|
"m": "(forced-colors: active)"
|
|
@@ -212,7 +248,9 @@ const useSelectStyles = /*#__PURE__*/react_1.__styles({
|
|
|
212
248
|
"m": "(forced-colors: active)"
|
|
213
249
|
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
|
|
214
250
|
"m": "(forced-colors: active)"
|
|
215
|
-
}]]
|
|
251
|
+
}]],
|
|
252
|
+
"h": [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"],
|
|
253
|
+
"a": [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"]
|
|
216
254
|
});
|
|
217
255
|
|
|
218
256
|
const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -221,7 +259,6 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
221
259
|
"sj55zd": "fxkbij4",
|
|
222
260
|
"mc9l5x": "ftgm304",
|
|
223
261
|
"qhf8xq": "f1euv43f",
|
|
224
|
-
"j35jbq": ["fnyteob", "f1enpzzf"],
|
|
225
262
|
"Bkecrkj": "f1aehjj5",
|
|
226
263
|
"Bo70h7d": "fvc9v3g"
|
|
227
264
|
},
|
|
@@ -232,26 +269,23 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
|
|
|
232
269
|
"small": {
|
|
233
270
|
"Be2twd7": "f4ybsrx",
|
|
234
271
|
"Bqenvij": "fd461yt",
|
|
235
|
-
"
|
|
236
|
-
"uwmqm3": ["fgiv446", "ffczdla"],
|
|
272
|
+
"j35jbq": ["f13lnp83", "f1i5nn0v"],
|
|
237
273
|
"a9b677": "fjw5fx7"
|
|
238
274
|
},
|
|
239
275
|
"medium": {
|
|
240
276
|
"Be2twd7": "fe5j1ua",
|
|
241
277
|
"Bqenvij": "fjamq6b",
|
|
242
|
-
"
|
|
243
|
-
"uwmqm3": ["fgiv446", "ffczdla"],
|
|
278
|
+
"j35jbq": ["fnyteob", "f1enpzzf"],
|
|
244
279
|
"a9b677": "f64fuq3"
|
|
245
280
|
},
|
|
246
281
|
"large": {
|
|
247
282
|
"Be2twd7": "f1rt2boy",
|
|
248
283
|
"Bqenvij": "frvgh55",
|
|
249
|
-
"
|
|
250
|
-
"uwmqm3": ["fk8j09s", "fdw0yi8"],
|
|
284
|
+
"j35jbq": ["f8b87gs", "fedtrts"],
|
|
251
285
|
"a9b677": "fq4mcun"
|
|
252
286
|
}
|
|
253
287
|
}, {
|
|
254
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".
|
|
288
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".fxkbij4{color:var(--colorNeutralStrokeAccessible);}", ".ftgm304{display:block;}", ".f1euv43f{position:absolute;}", ".f1aehjj5{pointer-events:none;}", ".fvc9v3g svg{display:block;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".f13lnp83{right:var(--spacingHorizontalSNudge);}", ".f1i5nn0v{left:var(--spacingHorizontalSNudge);}", ".fjw5fx7{width:16px;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".fnyteob{right:var(--spacingHorizontalMNudge);}", ".f1enpzzf{left:var(--spacingHorizontalMNudge);}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".f8b87gs{right:var(--spacingHorizontalM);}", ".fedtrts{left:var(--spacingHorizontalM);}", ".fq4mcun{width:24px;}"],
|
|
255
289
|
"m": [["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
|
|
256
290
|
"m": "(forced-colors: active)"
|
|
257
291
|
}]]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// TODO: This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n flexGrow: 1,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n small: {\n height: fieldHeights.small,\n ...shorthands.padding('0', tokens.spacingHorizontalSNudge),\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n ...shorthands.padding('0', tokens.spacingHorizontalMNudge),\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n ...shorthands.padding('0', tokens.spacingHorizontalM),\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n right: tokens.spacingHorizontalMNudge,\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n paddingRight: tokens.spacingHorizontalSNudge,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalXXS,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n paddingRight: tokens.spacingHorizontalM,\n paddingLeft: tokens.spacingHorizontalSNudge,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n\n// This 400 style is not in the typography styles.\n// May need a design change\nconst contentSizes = {\n 400: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n small: `calc(${tokens.spacingHorizontalSNudge}\n + ${iconSizes.small}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge}\n + ${iconSizes.medium}\n + ${tokens.spacingHorizontalXXS}\n + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM}\n + ${iconSizes.large}\n + ${tokens.spacingHorizontalSNudge}\n + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'nowrap',\n fontFamily: tokens.fontFamilyBase,\n position: 'relative',\n\n '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n content: '\"\"',\n height: tokens.borderRadiusMedium,\n position: 'absolute',\n bottom: '0',\n left: '0',\n right: '0',\n transform: 'scaleX(0)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationUltraFast,\n transitionDelay: tokens.curveAccelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms',\n },\n },\n },\n});\n\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n ...shorthands.border('1px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxShadow: 'none',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n cursor: 'pointer',\n flexGrow: 1,\n maxWidth: '100%',\n paddingBottom: 0,\n paddingTop: 0,\n\n ':focus': {\n outlineWidth: '2px',\n outlineStyle: 'solid',\n outlineColor: 'transparent',\n },\n },\n disabled: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'not-allowed',\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n\n small: {\n height: fieldHeights.small,\n paddingLeft: paddingLeft.small,\n paddingRight: paddingRight.small,\n ...typographyStyles.caption1,\n },\n medium: {\n height: fieldHeights.medium,\n paddingLeft: paddingLeft.medium,\n paddingRight: paddingRight.medium,\n ...typographyStyles.body1,\n },\n large: {\n height: fieldHeights.large,\n paddingLeft: paddingLeft.large,\n paddingRight: paddingRight.large,\n ...contentSizes[400],\n },\n outline: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n '&:hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n\n '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(0),\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n invalidUnderline: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n borderBottomColor: tokens.colorPaletteRedBorder2,\n },\n },\n});\n\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\n\n // the SVG must have display: block for accurate positioning\n // otherwise an extra inline space is inserted after the svg element\n '& svg': {\n display: 'block',\n },\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n small: {\n fontSize: iconSizes.small,\n height: iconSizes.small,\n right: tokens.spacingHorizontalSNudge,\n width: iconSizes.small,\n },\n medium: {\n fontSize: iconSizes.medium,\n height: iconSizes.medium,\n right: tokens.spacingHorizontalMNudge,\n width: iconSizes.medium,\n },\n large: {\n fontSize: iconSizes.large,\n height: iconSizes.large,\n right: tokens.spacingHorizontalM,\n width: iconSizes.large,\n },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n state.select.className = mergeClasses(\n selectClassNames.select,\n selectStyles.base,\n selectStyles[size],\n selectStyles[appearance],\n !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n disabled && selectStyles.disabled,\n state.select.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n selectClassNames.icon,\n iconStyles.icon,\n disabled && iconStyles.disabled,\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-select",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221028-0425.1",
|
|
4
4
|
"description": "Fluent UI React Select component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221028-0425.1"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-icons": "^2.0.175",
|
|
35
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221028-0425.1",
|
|
36
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221028-0425.1",
|
|
37
37
|
"@griffel/react": "^1.4.1",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
package/Spec.md
DELETED
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-select Spec
|
|
2
|
-
|
|
3
|
-
## Background
|
|
4
|
-
|
|
5
|
-
The Select component allows users to select one value from a predefined set of values. It does so by providing a styled wrapper around the HTML `<select>` element. This means it inherits the dropdown UI and keyboard functionality from the platform.
|
|
6
|
-
|
|
7
|
-
Select is a more lightweight, accessible, and less feature-rich alternative to Combobox. It has better mobile support, and better cross-platform screen reader support. Unlike Combobox, it does not provide filtering, multiple selection, or virtualization. Select is recommended over Combobox when the following are true:
|
|
8
|
-
|
|
9
|
-
- The control is a basic single-select that matches the functionality of a `<select>`
|
|
10
|
-
- Native-feeling cross platform UX (particularly on mobile) is a primary concern
|
|
11
|
-
- Performance, accessibility, and bundle size are primary concerns
|
|
12
|
-
|
|
13
|
-
Combobox is recommended if any of the following are needed:
|
|
14
|
-
|
|
15
|
-
- Filtering or freeform text input
|
|
16
|
-
- Virtualization
|
|
17
|
-
- Control over styling the dropdown and options
|
|
18
|
-
- Multiple selection
|
|
19
|
-
|
|
20
|
-
## Prior Art
|
|
21
|
-
|
|
22
|
-
The [Open UI research on Select](https://open-ui.org/components/select.research) combines both the ideas of the proposed Fluent Combobox and Select. There is also an [Open UI draft describing the select element](https://open-ui.org/components/select).
|
|
23
|
-
|
|
24
|
-
### Comparison of v8 and v0
|
|
25
|
-
|
|
26
|
-
`@fluentui/react` has three different controls that are different flavors of select/combobox:
|
|
27
|
-
|
|
28
|
-
- [Combobox](https://developer.microsoft.com/en-us/fluentui#/controls/web/combobox): an editable combobox with a textfield and dropdown listbox
|
|
29
|
-
- [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown): a non-editable combobox with dropdown listbox
|
|
30
|
-
- [Pickers](https://developer.microsoft.com/en-us/fluentui#/controls/web/pickers): an editable combobox with greater customization, particularly in displaying selected items
|
|
31
|
-
|
|
32
|
-
`@fluentui/react-northstar` has one combobox control:
|
|
33
|
-
|
|
34
|
-
- [Dropdown](https://fluentsite.z22.web.core.windows.net/0.51.2/components/dropdown/definition): either an editable or non-editable combobox with a tag-like approach to selected items
|
|
35
|
-
|
|
36
|
-
### Functional variations across v8 and v0 components
|
|
37
|
-
|
|
38
|
-
The main functional variants in existing components are as follows:
|
|
39
|
-
|
|
40
|
-
- Editable vs. non-editable: editable comboboxes have a textbox and allow the user to type, which optionally filters the listbox
|
|
41
|
-
- Within editable comboboxes: freeform text input and filtering on input are optional
|
|
42
|
-
- Within editable comboboxes: When a typed value does not match an option, it can be cleared or preserved on blur
|
|
43
|
-
- Single vs. multiselect
|
|
44
|
-
- Within multiselect: selected options may be presented as text within the combobox value, pills, or a custom render.
|
|
45
|
-
|
|
46
|
-
### Dropdown options variations across v8 and v0 Components
|
|
47
|
-
|
|
48
|
-
- Options may have an icon, image, text + description, or entirely custom render
|
|
49
|
-
- Options may be grouped with a group header and divider
|
|
50
|
-
- There may be a "load more results" action
|
|
51
|
-
- Within multiselect: There may be a "Select all" option
|
|
52
|
-
|
|
53
|
-
## Sample Code
|
|
54
|
-
|
|
55
|
-
Default/standard Select:
|
|
56
|
-
|
|
57
|
-
```tsx
|
|
58
|
-
<label htmlFor="selectID">Choose a color</label>
|
|
59
|
-
<Select id="selectID">
|
|
60
|
-
<option>Red</option>
|
|
61
|
-
<option>Green</option>
|
|
62
|
-
<option>Blue</option>
|
|
63
|
-
</Select>
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
Select with grouped options:
|
|
67
|
-
|
|
68
|
-
```tsx
|
|
69
|
-
<label htmlFor="selectID">Choose an animal</label>
|
|
70
|
-
<Select id="selectID">
|
|
71
|
-
<optgroup label="Land">
|
|
72
|
-
<option>Cat</option>
|
|
73
|
-
<option>Dog</option>
|
|
74
|
-
<option>Horse</option>
|
|
75
|
-
</optgroup>
|
|
76
|
-
<optgroup label="Water">
|
|
77
|
-
<option>Dolphin</option>
|
|
78
|
-
<option>Seal</option>
|
|
79
|
-
<option>Shark</option>
|
|
80
|
-
</optgroup>
|
|
81
|
-
</Select>
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
Select with appearance and size set:
|
|
85
|
-
|
|
86
|
-
```tsx
|
|
87
|
-
<label htmlFor="selectID">Choose a color</label>
|
|
88
|
-
<Select id="selectID" appearance="filledDarker" size="small">
|
|
89
|
-
<option>Red</option>
|
|
90
|
-
<option>Green</option>
|
|
91
|
-
<option>Blue</option>
|
|
92
|
-
</Select>
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Disabled Select with second option selected:
|
|
96
|
-
|
|
97
|
-
```tsx
|
|
98
|
-
<label htmlFor="selectID">Choose a color</label>
|
|
99
|
-
<Select id="selectID" disabled>
|
|
100
|
-
<option>Red</option>
|
|
101
|
-
<option selected>Green</option>
|
|
102
|
-
<option>Blue</option>
|
|
103
|
-
</Select>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## Variants
|
|
107
|
-
|
|
108
|
-
### Size
|
|
109
|
-
|
|
110
|
-
- Small
|
|
111
|
-
- Medium (default)
|
|
112
|
-
- Large
|
|
113
|
-
|
|
114
|
-
### Appearance
|
|
115
|
-
|
|
116
|
-
- Filled darker
|
|
117
|
-
- Filled lighter
|
|
118
|
-
- Outline (default)
|
|
119
|
-
- Transparent
|
|
120
|
-
|
|
121
|
-
### Unsupported Select variants
|
|
122
|
-
|
|
123
|
-
#### Multiple Selection
|
|
124
|
-
|
|
125
|
-
The Select component does not support multi-select, and does not support the native `multiselect` attribute. Multiple selection is instead provided through the Combobox component. This is because the native `<select multiple>` has poor accessibility and general UX, and we do not recommend using it. Additionally, because the options are not styleable, there is little benefit to using a wrapped `<Select multiple>` over using the native element directly.
|
|
126
|
-
|
|
127
|
-
#### Size attribute
|
|
128
|
-
|
|
129
|
-
For similar reasons to `multiple`, the native `size` attribute is not supported out of the box. It also has very limited styling support, and therefore also has little benefit over the native `<select size="N">`. The Listbox (TODO: confirm name) component is an alternative to using the `size` attribute on a `<select>`.
|
|
130
|
-
|
|
131
|
-
## API
|
|
132
|
-
|
|
133
|
-
From [Select.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-select/src/components/Select/Select.types.ts)
|
|
134
|
-
|
|
135
|
-
### Slots
|
|
136
|
-
|
|
137
|
-
In this component, `select` is the primary slot. Since `select` is primary, `root` is a separate explicit slot to customize the wrapper.
|
|
138
|
-
|
|
139
|
-
```ts
|
|
140
|
-
export type SelectSlots = {
|
|
141
|
-
/** Root of the component, renders as a `<span>`. */
|
|
142
|
-
root: IntrinsicSlotProps<'span'>;
|
|
143
|
-
/** The actual `<select>` element */
|
|
144
|
-
select: IntrinsicSlotProps<'select'>;
|
|
145
|
-
/** the icon, typically a down arrow */
|
|
146
|
-
icon: IntrinsicSlotProps<'span'>;
|
|
147
|
-
};
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
### Children
|
|
151
|
-
|
|
152
|
-
Children of the `Select` component are rendered as children of the internal `<select>` element. The only children that are supported in practice are the `<optgroup>` and `<option>` elements.
|
|
153
|
-
|
|
154
|
-
## Structure
|
|
155
|
-
|
|
156
|
-
- _**Public**_
|
|
157
|
-
|
|
158
|
-
```tsx
|
|
159
|
-
<label htmlFor="selectID">Choose a color</label>
|
|
160
|
-
<Select id="selectID" className="my-select-class">
|
|
161
|
-
<option>Red</option>
|
|
162
|
-
<option>Green</option>
|
|
163
|
-
<option>Blue</option>
|
|
164
|
-
</Select>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
- _**DOM**_
|
|
168
|
-
|
|
169
|
-
```html
|
|
170
|
-
<label for="selectID">Choose a color</label>
|
|
171
|
-
<span class="my-select-class">
|
|
172
|
-
<select id="selectID">
|
|
173
|
-
<option>Red</option>
|
|
174
|
-
<option>Green</option>
|
|
175
|
-
<option>Blue</option>
|
|
176
|
-
</select>
|
|
177
|
-
<svg><!-- icon --></svg>
|
|
178
|
-
</span>
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
## Migration
|
|
182
|
-
|
|
183
|
-
The Select component is a new approach that was not present in `@fluentui/react` v8, or `@fluentui/react-northstar`. It can be considered if the currently used control is the `@fluentui/react` Dropdown component, or the `@fluentui/react-northstar` Dropdown without `search`.
|
|
184
|
-
|
|
185
|
-
### Props
|
|
186
|
-
|
|
187
|
-
| v8 Dropdown | v0 Dropdown | Proposal |
|
|
188
|
-
| -------------------- | ------------------------- | --------------------------------- |
|
|
189
|
-
| options | items | children |
|
|
190
|
-
| defaultSelectedKey | defaultValue | child with `selected` |
|
|
191
|
-
| selectedKey | value | imperative ref.value |
|
|
192
|
-
| id | n/a | id |
|
|
193
|
-
| disabled | disabled | disabled |
|
|
194
|
-
| required | n/a | required |
|
|
195
|
-
| multiSelect | multiple | use Combobox |
|
|
196
|
-
| placeholder | placeholder | child with `value=""` |
|
|
197
|
-
| ariaLabel | n/a | aria-label |
|
|
198
|
-
| n/a | aria-\* | aria-\* |
|
|
199
|
-
| errorMessage | error | invalid, message handled in Field |
|
|
200
|
-
| label, onRenderLabel | n/a | Handled in Field |
|
|
201
|
-
| componentRef | n/a | ref |
|
|
202
|
-
| n/a | popperRef, popper props | n/a |
|
|
203
|
-
| calloutProps | list | n/a |
|
|
204
|
-
| panelProps | n/a | n/a |
|
|
205
|
-
| openOnKeyboardFocus | n/a | n/a |
|
|
206
|
-
| n/a | a11ySelectedItemsMessage | n/a |
|
|
207
|
-
| n/a | align | n/a |
|
|
208
|
-
| n/a | autosize | n/a |
|
|
209
|
-
| n/a | checkable | n/a |
|
|
210
|
-
| n/a | clearable | n/a |
|
|
211
|
-
| n/a | defaultHighlightedIndex | n/a |
|
|
212
|
-
| n/a | defaultOpen | n/a |
|
|
213
|
-
| n/a | fluid | default style |
|
|
214
|
-
| n/a | headerMessage | optgroup child with `name` |
|
|
215
|
-
| n/a | highlightFirstItemOnOpen | n/a |
|
|
216
|
-
| n/a | highlightedIndex | n/a |
|
|
217
|
-
| n/a | inline | use custom styles |
|
|
218
|
-
| n/a | inverted | n/a |
|
|
219
|
-
| n/a | loading | n/a |
|
|
220
|
-
| n/a | noResultsMessage | use children |
|
|
221
|
-
| n/a | offset | n/a |
|
|
222
|
-
| n/a | open | n/a |
|
|
223
|
-
| n/a | position | n/a |
|
|
224
|
-
| n/a | positionFixed | n/a |
|
|
225
|
-
| n/a | search | use Combobox |
|
|
226
|
-
| styles | styles | style |
|
|
227
|
-
| onRenderCaretDown | toggleIndicator | use icon slot |
|
|
228
|
-
| n/a | triggerButton | n/a |
|
|
229
|
-
| onRenderContainer | n/a | n/a |
|
|
230
|
-
| onRenderItem | renderItem | use children |
|
|
231
|
-
| onRenderList | list slot | n/a |
|
|
232
|
-
| onRenderOption | renderItem, headerMessage | use children |
|
|
233
|
-
| onRenderPlaceholder | n/a | n/a |
|
|
234
|
-
| onRenderTitle | n/a | n/a |
|
|
235
|
-
|
|
236
|
-
## Behaviors and Accessibility
|
|
237
|
-
|
|
238
|
-
This component makes use of the native `<select>` element, and inherits the native semantics and keyboard interactivity.
|