@fluentui/react-radio 0.0.0-nightly-20221213-0427.1 → 0.0.0-nightly-20221215-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 +17 -17
- package/CHANGELOG.md +11 -11
- package/lib/components/Radio/useRadioStyles.js +16 -139
- package/lib/components/Radio/useRadioStyles.js.map +1 -1
- package/lib-commonjs/components/Radio/useRadioStyles.js +15 -138
- package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-radio_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 15 Dec 2022 04:33:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v0.0.0-nightly-20221215-0425.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221215-0425.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,44 +16,44 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-radio",
|
|
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-20221215-0425.1",
|
|
20
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-radio",
|
|
25
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20221215-0425.1",
|
|
26
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-radio",
|
|
31
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221215-0425.1",
|
|
32
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-radio",
|
|
37
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221215-0425.1",
|
|
38
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-radio",
|
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221215-0425.1",
|
|
44
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-radio",
|
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221215-0425.1",
|
|
50
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-radio",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221215-0425.1",
|
|
56
|
+
"commit": "3d0804ecb5f17d1a0e8623ac1952880f768aa5fb"
|
|
57
57
|
}
|
|
58
58
|
]
|
|
59
59
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 15 Dec 2022 04:33:17 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-20221215-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20221215-0425.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.13..@fluentui/react-radio_v0.0.0-nightly-
|
|
9
|
+
Thu, 15 Dec 2022 04:33:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.13..@fluentui/react-radio_v0.0.0-nightly-20221215-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-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
16
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221215-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3d0804ecb5f17d1a0e8623ac1952880f768aa5fb) by beachball)
|
|
22
22
|
|
|
23
23
|
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.13)
|
|
24
24
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
-
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
3
|
+
import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
4
4
|
export const radioClassNames = {
|
|
5
5
|
root: 'fui-Radio',
|
|
6
6
|
indicator: 'fui-Radio__indicator',
|
|
@@ -9,156 +9,31 @@ export const radioClassNames = {
|
|
|
9
9
|
}; // The indicator size is used by the indicator and label styles
|
|
10
10
|
|
|
11
11
|
const indicatorSize = '16px';
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
12
|
+
|
|
13
|
+
const useRootBaseClassName = /*#__PURE__*/__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
|
|
15
14
|
|
|
16
15
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
17
|
-
"base": {
|
|
18
|
-
"mc9l5x": "ftuwxu6",
|
|
19
|
-
"qhf8xq": "f10pi13n"
|
|
20
|
-
},
|
|
21
16
|
"vertical": {
|
|
22
17
|
"Beiy3e4": "f1vx9l62",
|
|
23
18
|
"Bt984gj": "f122n59"
|
|
24
|
-
},
|
|
25
|
-
"focusIndicator": {
|
|
26
|
-
"Brovlpu": "ftqa4ok",
|
|
27
|
-
"B486eqv": "f2hkw1w",
|
|
28
|
-
"Bssx7fj": "f1b1k54r",
|
|
29
|
-
"uh7if5": ["f4ne723", "fqqcjud"],
|
|
30
|
-
"clntm0": "fh7aioi",
|
|
31
|
-
"Dlk2r6": ["fqqcjud", "f4ne723"],
|
|
32
|
-
"B2j2mmj": "ffht0p2",
|
|
33
|
-
"wigs8": "f1p0ul1q",
|
|
34
|
-
"pbfy6t": "f1c901ms",
|
|
35
|
-
"B0v4ure": "f1alokd7",
|
|
36
|
-
"ghq09": "f78i1la",
|
|
37
|
-
"B24cy0v": ["f1kvsw7t", "f1bw8brt"],
|
|
38
|
-
"Bwckmig": "f8k7e5g",
|
|
39
|
-
"Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
|
|
40
|
-
"Bbgo44z": "f1pmxfrl",
|
|
41
|
-
"Bil7v7r": ["fszkfcr", "f1ap5ily"],
|
|
42
|
-
"skfxo0": "f57dp0y",
|
|
43
|
-
"jo1ztg": ["f1ap5ily", "fszkfcr"],
|
|
44
|
-
"Ba3ybja": ["f11dm2qb", "f136rfnd"],
|
|
45
|
-
"az1dzo": ["f136rfnd", "f11dm2qb"],
|
|
46
|
-
"vppk2z": ["fdsq1qd", "f1khssms"],
|
|
47
|
-
"B6352mv": ["f1khssms", "fdsq1qd"],
|
|
48
|
-
"nr063g": "fq4eyks",
|
|
49
|
-
"Blmvk6g": ["f1ya6x16", "ftuszwa"],
|
|
50
|
-
"Bsiemmq": "f1e2iu44",
|
|
51
|
-
"B98u21t": ["ftuszwa", "f1ya6x16"],
|
|
52
|
-
"B2pnrqr": "f1xkdug0",
|
|
53
|
-
"Bhhzhcn": "f1m1ywml",
|
|
54
|
-
"Bec0n69": ["f7u4kgv", "f1a36mvi"],
|
|
55
|
-
"B29w5g4": ["f1a36mvi", "f7u4kgv"]
|
|
56
19
|
}
|
|
57
20
|
}, {
|
|
58
|
-
"d": [".
|
|
59
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
60
|
-
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
21
|
+
"d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
|
|
61
22
|
});
|
|
62
23
|
|
|
24
|
+
const useInputBaseClassName = /*#__PURE__*/__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
|
|
25
|
+
|
|
63
26
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
64
|
-
"base": {
|
|
65
|
-
"qhf8xq": "f1euv43f",
|
|
66
|
-
"oyh7mz": ["f1vgc2s3", "f1e31b4d"],
|
|
67
|
-
"Bhzewxz": "f15twtuk",
|
|
68
|
-
"a9b677": "fly5x3f",
|
|
69
|
-
"Bqenvij": "f1l02sjl",
|
|
70
|
-
"B7ck84d": "f1ewtqcl",
|
|
71
|
-
"B6of3ja": "f1hu3pq6",
|
|
72
|
-
"t21cq0": ["f11qmguv", "f1tyq0we"],
|
|
73
|
-
"jrapky": "f19f4twv",
|
|
74
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"],
|
|
75
|
-
"abs64n": "fk73vx1",
|
|
76
|
-
"By9lhj9": "fg45n87",
|
|
77
|
-
"G3n25n": "flqpbns",
|
|
78
|
-
"Bojc29n": "fhb1dn5",
|
|
79
|
-
"p8xby4": "fiegpko",
|
|
80
|
-
"Bmzgt9v": "fdi60kf",
|
|
81
|
-
"un08vv": ["fz3jc1r", "f1fwo01y"],
|
|
82
|
-
"Bluxpkm": "f1m2gv5u",
|
|
83
|
-
"upm9ap": ["f1fwo01y", "fz3jc1r"],
|
|
84
|
-
"Bv6ccmg": "ft7ju8s",
|
|
85
|
-
"w6pjei": "f1ofw0le",
|
|
86
|
-
"drfev3": ["fothmfx", "f13qgzgl"],
|
|
87
|
-
"ujr3xk": "fp5vmb3",
|
|
88
|
-
"Bib2mth": ["f13qgzgl", "fothmfx"],
|
|
89
|
-
"za2ojl": "f1snis2b",
|
|
90
|
-
"Bu1fve0": "ff9psms",
|
|
91
|
-
"B42z6en": ["f1fg9ko4", "fqj7xkg"],
|
|
92
|
-
"mosl6v": "f1vebft2",
|
|
93
|
-
"e3wlmb": ["fqj7xkg", "f1fg9ko4"],
|
|
94
|
-
"swj8lc": "f1vtc7ej",
|
|
95
|
-
"kbzjta": "f1fj62aq",
|
|
96
|
-
"Bnazurh": ["fc4i2ph", "f137d5x6"],
|
|
97
|
-
"Enz1qu": "f1v2xs8c",
|
|
98
|
-
"B4rl0r3": ["f137d5x6", "fc4i2ph"],
|
|
99
|
-
"oi7lcb": "f14bpgh5",
|
|
100
|
-
"bwebxt": "f1ariq71",
|
|
101
|
-
"ax4tcq": ["fu58av6", "f1qj5h2v"],
|
|
102
|
-
"z2by79": "fptcwjq",
|
|
103
|
-
"Bpz2hdf": ["f1qj5h2v", "fu58av6"],
|
|
104
|
-
"Btliz3o": "filss48",
|
|
105
|
-
"Bre5bwy": "frtrqgn",
|
|
106
|
-
"Bayw8dt": ["f1v1lrlm", "fapcpph"],
|
|
107
|
-
"lb5vkw": "f49ptgb",
|
|
108
|
-
"yhmu5n": ["fapcpph", "f1v1lrlm"],
|
|
109
|
-
"Blcfbx4": "fgnwcez",
|
|
110
|
-
"yksgid": "f1l3wt4b",
|
|
111
|
-
"B59a1ph": "f16lpvpn",
|
|
112
|
-
"B78hamy": "fdubm5j",
|
|
113
|
-
"t61w4e": ["f11to73e", "f9u8p8h"],
|
|
114
|
-
"Dvncu9": "fw62pkm",
|
|
115
|
-
"qbflri": ["f9u8p8h", "f11to73e"],
|
|
116
|
-
"Byzt4r9": "fqaqzd4"
|
|
117
|
-
},
|
|
118
|
-
"after": {
|
|
119
|
-
"a9b677": "fwr58v7"
|
|
120
|
-
},
|
|
121
27
|
"below": {
|
|
28
|
+
"a9b677": "fly5x3f",
|
|
122
29
|
"Bqenvij": "f1je6zif"
|
|
123
30
|
}
|
|
124
31
|
}, {
|
|
125
|
-
"d": [".
|
|
32
|
+
"d": [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
|
|
126
33
|
});
|
|
127
34
|
|
|
128
|
-
const
|
|
129
|
-
|
|
130
|
-
"a9b677": "fjw5fx7",
|
|
131
|
-
"Bqenvij": "fd461yt",
|
|
132
|
-
"Be2twd7": "f1ugzwwg",
|
|
133
|
-
"B7ck84d": "f1ewtqcl",
|
|
134
|
-
"Bnnss6s": "fi64zpg",
|
|
135
|
-
"mc9l5x": "f22iagw",
|
|
136
|
-
"Bt984gj": "f122n59",
|
|
137
|
-
"Brf1p80": "f4d9j23",
|
|
138
|
-
"B68tc82": "f1p9o1ba",
|
|
139
|
-
"Bmxbyg5": "f1sil6mw",
|
|
140
|
-
"B4j52fo": "f192inf7",
|
|
141
|
-
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
142
|
-
"Bn0qgzm": "f1vxd6vx",
|
|
143
|
-
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
144
|
-
"icvyot": "fzkkow9",
|
|
145
|
-
"vrafjx": ["fcdblym", "fjik90z"],
|
|
146
|
-
"oivjwe": "fg706s2",
|
|
147
|
-
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
148
|
-
"Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
|
|
149
|
-
"Beyfa6y": ["f1nfllo7", "f8fbkgy"],
|
|
150
|
-
"B7oj6ja": ["f1djnp8u", "f1s8kh49"],
|
|
151
|
-
"Btl43ni": ["f1s8kh49", "f1djnp8u"],
|
|
152
|
-
"B6of3ja": "frnwi6n",
|
|
153
|
-
"t21cq0": ["f1vcna3q", "foyynoy"],
|
|
154
|
-
"jrapky": "fqcjy3b",
|
|
155
|
-
"Frg6f3": ["foyynoy", "f1vcna3q"],
|
|
156
|
-
"Bkfmm31": "f1w9h62z",
|
|
157
|
-
"Bkecrkj": "f1aehjj5"
|
|
158
|
-
}
|
|
159
|
-
}, {
|
|
160
|
-
"d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
|
|
161
|
-
});
|
|
35
|
+
const useIndicatorBaseClassName = /*#__PURE__*/__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
36
|
+
|
|
162
37
|
|
|
163
38
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
164
39
|
"base": {
|
|
@@ -189,12 +64,14 @@ export const useRadioStyles_unstable = state => {
|
|
|
189
64
|
const {
|
|
190
65
|
labelPosition
|
|
191
66
|
} = state;
|
|
67
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
192
68
|
const rootStyles = useRootStyles();
|
|
193
|
-
state.root.className = mergeClasses(radioClassNames.root,
|
|
69
|
+
state.root.className = mergeClasses(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
70
|
+
const inputBaseClassName = useInputBaseClassName();
|
|
194
71
|
const inputStyles = useInputStyles();
|
|
195
|
-
state.input.className = mergeClasses(radioClassNames.input,
|
|
196
|
-
const
|
|
197
|
-
state.indicator.className = mergeClasses(radioClassNames.indicator,
|
|
72
|
+
state.input.className = mergeClasses(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
|
|
73
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
74
|
+
state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
|
198
75
|
const labelStyles = useLabelStyles();
|
|
199
76
|
|
|
200
77
|
if (state.label) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,kCAAsC,YAAtC,EAAoD,UAApD,QAAsE,gBAAtE;AAIA,OAAO,MAAM,eAAe,GAA+B;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;;AAEA,MAAM,oBAAoB,gBAAG,6uEAA7B;;AAMA,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAOA,MAAM,qBAAqB,gBAAG,y7GAA9B;;AAwFA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAOA,MAAM,yBAAyB,gBAAG,ymBAAlC,C,CAmBA;;;AACA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,iBAFiC,EAGjC,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHP,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,kBAFkC,EAGlC,aAAa,KAAK,OAAlB,IAA6B,WAAW,CAAC,KAHP,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAOA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,eAAe,CAAC,SADsB,EAEtC,sBAFsC,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;EAMA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,aAAD,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;EAMD;AACF,CArCM","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":""}
|
|
@@ -19,156 +19,31 @@ exports.radioClassNames = {
|
|
|
19
19
|
}; // The indicator size is used by the indicator and label styles
|
|
20
20
|
|
|
21
21
|
const indicatorSize = '16px';
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
*/
|
|
22
|
+
|
|
23
|
+
const useRootBaseClassName = /*#__PURE__*/react_1.__resetStyles("r18vxbm9", "r1631i6s", [".r18vxbm9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r18vxbm9:focus{outline-style:none;}", ".r18vxbm9:focus-visible{outline-style:none;}", ".r18vxbm9[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r18vxbm9[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;left:-2px;right:-2px;}", ".r1631i6s{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;}", ".r1631i6s:focus{outline-style:none;}", ".r1631i6s:focus-visible{outline-style:none;}", ".r1631i6s[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1631i6s[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:-2px;bottom:-2px;right:-2px;left:-2px;}"]);
|
|
25
24
|
|
|
26
25
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
27
|
-
"base": {
|
|
28
|
-
"mc9l5x": "ftuwxu6",
|
|
29
|
-
"qhf8xq": "f10pi13n"
|
|
30
|
-
},
|
|
31
26
|
"vertical": {
|
|
32
27
|
"Beiy3e4": "f1vx9l62",
|
|
33
28
|
"Bt984gj": "f122n59"
|
|
34
|
-
},
|
|
35
|
-
"focusIndicator": {
|
|
36
|
-
"Brovlpu": "ftqa4ok",
|
|
37
|
-
"B486eqv": "f2hkw1w",
|
|
38
|
-
"Bssx7fj": "f1b1k54r",
|
|
39
|
-
"uh7if5": ["f4ne723", "fqqcjud"],
|
|
40
|
-
"clntm0": "fh7aioi",
|
|
41
|
-
"Dlk2r6": ["fqqcjud", "f4ne723"],
|
|
42
|
-
"B2j2mmj": "ffht0p2",
|
|
43
|
-
"wigs8": "f1p0ul1q",
|
|
44
|
-
"pbfy6t": "f1c901ms",
|
|
45
|
-
"B0v4ure": "f1alokd7",
|
|
46
|
-
"ghq09": "f78i1la",
|
|
47
|
-
"B24cy0v": ["f1kvsw7t", "f1bw8brt"],
|
|
48
|
-
"Bwckmig": "f8k7e5g",
|
|
49
|
-
"Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
|
|
50
|
-
"Bbgo44z": "f1pmxfrl",
|
|
51
|
-
"Bil7v7r": ["fszkfcr", "f1ap5ily"],
|
|
52
|
-
"skfxo0": "f57dp0y",
|
|
53
|
-
"jo1ztg": ["f1ap5ily", "fszkfcr"],
|
|
54
|
-
"Ba3ybja": ["f11dm2qb", "f136rfnd"],
|
|
55
|
-
"az1dzo": ["f136rfnd", "f11dm2qb"],
|
|
56
|
-
"vppk2z": ["fdsq1qd", "f1khssms"],
|
|
57
|
-
"B6352mv": ["f1khssms", "fdsq1qd"],
|
|
58
|
-
"nr063g": "fq4eyks",
|
|
59
|
-
"Blmvk6g": ["f1ya6x16", "ftuszwa"],
|
|
60
|
-
"Bsiemmq": "f1e2iu44",
|
|
61
|
-
"B98u21t": ["ftuszwa", "f1ya6x16"],
|
|
62
|
-
"B2pnrqr": "f1xkdug0",
|
|
63
|
-
"Bhhzhcn": "f1m1ywml",
|
|
64
|
-
"Bec0n69": ["f7u4kgv", "f1a36mvi"],
|
|
65
|
-
"B29w5g4": ["f1a36mvi", "f7u4kgv"]
|
|
66
29
|
}
|
|
67
30
|
}, {
|
|
68
|
-
"d": [".
|
|
69
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
70
|
-
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
31
|
+
"d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
|
|
71
32
|
});
|
|
72
33
|
|
|
34
|
+
const useInputBaseClassName = /*#__PURE__*/react_1.__resetStyles("r9gx1vl", "r1uk1i2c", [".r9gx1vl{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r9gx1vl:enabled{cursor:pointer;}", ".r9gx1vl:enabled~.fui-Radio__label{cursor:pointer;}", ".r9gx1vl:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r9gx1vl:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r9gx1vl:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r9gx1vl:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r9gx1vl:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r9gx1vl:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r9gx1vl:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r9gx1vl:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r9gx1vl:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}", ".r1uk1i2c{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}", ".r1uk1i2c:enabled{cursor:pointer;}", ".r1uk1i2c:enabled~.fui-Radio__label{cursor:pointer;}", ".r1uk1i2c:not(:checked)~.fui-Radio__indicator>*{opacity:0;}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}", ".r1uk1i2c:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}", ".r1uk1i2c:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}", ".r1uk1i2c:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}", ".r1uk1i2c:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}", ".r1uk1i2c:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}", ".r1uk1i2c:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}", ".r1uk1i2c:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}", ".r1uk1i2c:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"]);
|
|
35
|
+
|
|
73
36
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
74
|
-
"base": {
|
|
75
|
-
"qhf8xq": "f1euv43f",
|
|
76
|
-
"oyh7mz": ["f1vgc2s3", "f1e31b4d"],
|
|
77
|
-
"Bhzewxz": "f15twtuk",
|
|
78
|
-
"a9b677": "fly5x3f",
|
|
79
|
-
"Bqenvij": "f1l02sjl",
|
|
80
|
-
"B7ck84d": "f1ewtqcl",
|
|
81
|
-
"B6of3ja": "f1hu3pq6",
|
|
82
|
-
"t21cq0": ["f11qmguv", "f1tyq0we"],
|
|
83
|
-
"jrapky": "f19f4twv",
|
|
84
|
-
"Frg6f3": ["f1tyq0we", "f11qmguv"],
|
|
85
|
-
"abs64n": "fk73vx1",
|
|
86
|
-
"By9lhj9": "fg45n87",
|
|
87
|
-
"G3n25n": "flqpbns",
|
|
88
|
-
"Bojc29n": "fhb1dn5",
|
|
89
|
-
"p8xby4": "fiegpko",
|
|
90
|
-
"Bmzgt9v": "fdi60kf",
|
|
91
|
-
"un08vv": ["fz3jc1r", "f1fwo01y"],
|
|
92
|
-
"Bluxpkm": "f1m2gv5u",
|
|
93
|
-
"upm9ap": ["f1fwo01y", "fz3jc1r"],
|
|
94
|
-
"Bv6ccmg": "ft7ju8s",
|
|
95
|
-
"w6pjei": "f1ofw0le",
|
|
96
|
-
"drfev3": ["fothmfx", "f13qgzgl"],
|
|
97
|
-
"ujr3xk": "fp5vmb3",
|
|
98
|
-
"Bib2mth": ["f13qgzgl", "fothmfx"],
|
|
99
|
-
"za2ojl": "f1snis2b",
|
|
100
|
-
"Bu1fve0": "ff9psms",
|
|
101
|
-
"B42z6en": ["f1fg9ko4", "fqj7xkg"],
|
|
102
|
-
"mosl6v": "f1vebft2",
|
|
103
|
-
"e3wlmb": ["fqj7xkg", "f1fg9ko4"],
|
|
104
|
-
"swj8lc": "f1vtc7ej",
|
|
105
|
-
"kbzjta": "f1fj62aq",
|
|
106
|
-
"Bnazurh": ["fc4i2ph", "f137d5x6"],
|
|
107
|
-
"Enz1qu": "f1v2xs8c",
|
|
108
|
-
"B4rl0r3": ["f137d5x6", "fc4i2ph"],
|
|
109
|
-
"oi7lcb": "f14bpgh5",
|
|
110
|
-
"bwebxt": "f1ariq71",
|
|
111
|
-
"ax4tcq": ["fu58av6", "f1qj5h2v"],
|
|
112
|
-
"z2by79": "fptcwjq",
|
|
113
|
-
"Bpz2hdf": ["f1qj5h2v", "fu58av6"],
|
|
114
|
-
"Btliz3o": "filss48",
|
|
115
|
-
"Bre5bwy": "frtrqgn",
|
|
116
|
-
"Bayw8dt": ["f1v1lrlm", "fapcpph"],
|
|
117
|
-
"lb5vkw": "f49ptgb",
|
|
118
|
-
"yhmu5n": ["fapcpph", "f1v1lrlm"],
|
|
119
|
-
"Blcfbx4": "fgnwcez",
|
|
120
|
-
"yksgid": "f1l3wt4b",
|
|
121
|
-
"B59a1ph": "f16lpvpn",
|
|
122
|
-
"B78hamy": "fdubm5j",
|
|
123
|
-
"t61w4e": ["f11to73e", "f9u8p8h"],
|
|
124
|
-
"Dvncu9": "fw62pkm",
|
|
125
|
-
"qbflri": ["f9u8p8h", "f11to73e"],
|
|
126
|
-
"Byzt4r9": "fqaqzd4"
|
|
127
|
-
},
|
|
128
|
-
"after": {
|
|
129
|
-
"a9b677": "fwr58v7"
|
|
130
|
-
},
|
|
131
37
|
"below": {
|
|
38
|
+
"a9b677": "fly5x3f",
|
|
132
39
|
"Bqenvij": "f1je6zif"
|
|
133
40
|
}
|
|
134
41
|
}, {
|
|
135
|
-
"d": [".
|
|
42
|
+
"d": [".fly5x3f{width:100%;}", ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}"]
|
|
136
43
|
});
|
|
137
44
|
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
-
"a9b677": "fjw5fx7",
|
|
141
|
-
"Bqenvij": "fd461yt",
|
|
142
|
-
"Be2twd7": "f1ugzwwg",
|
|
143
|
-
"B7ck84d": "f1ewtqcl",
|
|
144
|
-
"Bnnss6s": "fi64zpg",
|
|
145
|
-
"mc9l5x": "f22iagw",
|
|
146
|
-
"Bt984gj": "f122n59",
|
|
147
|
-
"Brf1p80": "f4d9j23",
|
|
148
|
-
"B68tc82": "f1p9o1ba",
|
|
149
|
-
"Bmxbyg5": "f1sil6mw",
|
|
150
|
-
"B4j52fo": "f192inf7",
|
|
151
|
-
"Bekrc4i": ["f5tn483", "f1ojsxk5"],
|
|
152
|
-
"Bn0qgzm": "f1vxd6vx",
|
|
153
|
-
"ibv6hh": ["f1ojsxk5", "f5tn483"],
|
|
154
|
-
"icvyot": "fzkkow9",
|
|
155
|
-
"vrafjx": ["fcdblym", "fjik90z"],
|
|
156
|
-
"oivjwe": "fg706s2",
|
|
157
|
-
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
158
|
-
"Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
|
|
159
|
-
"Beyfa6y": ["f1nfllo7", "f8fbkgy"],
|
|
160
|
-
"B7oj6ja": ["f1djnp8u", "f1s8kh49"],
|
|
161
|
-
"Btl43ni": ["f1s8kh49", "f1djnp8u"],
|
|
162
|
-
"B6of3ja": "frnwi6n",
|
|
163
|
-
"t21cq0": ["f1vcna3q", "foyynoy"],
|
|
164
|
-
"jrapky": "fqcjy3b",
|
|
165
|
-
"Frg6f3": ["foyynoy", "f1vcna3q"],
|
|
166
|
-
"Bkfmm31": "f1w9h62z",
|
|
167
|
-
"Bkecrkj": "f1aehjj5"
|
|
168
|
-
}
|
|
169
|
-
}, {
|
|
170
|
-
"d": [".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f1ugzwwg{font-size:12px;}", ".f1ewtqcl{box-sizing:border-box;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fqcjy3b{margin-bottom:var(--spacingVerticalS);}", ".f1w9h62z{fill:currentColor;}", ".f1aehjj5{pointer-events:none;}"]
|
|
171
|
-
});
|
|
45
|
+
const useIndicatorBaseClassName = /*#__PURE__*/react_1.__resetStyles("rid4516", null, [".rid4516{width:16px;height:16px;font-size:12px;box-sizing:border-box;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}"]); // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
|
|
46
|
+
|
|
172
47
|
|
|
173
48
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
174
49
|
"base": {
|
|
@@ -199,12 +74,14 @@ const useRadioStyles_unstable = state => {
|
|
|
199
74
|
const {
|
|
200
75
|
labelPosition
|
|
201
76
|
} = state;
|
|
77
|
+
const rootBaseClassName = useRootBaseClassName();
|
|
202
78
|
const rootStyles = useRootStyles();
|
|
203
|
-
state.root.className = react_1.mergeClasses(exports.radioClassNames.root,
|
|
79
|
+
state.root.className = react_1.mergeClasses(exports.radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
|
|
80
|
+
const inputBaseClassName = useInputBaseClassName();
|
|
204
81
|
const inputStyles = useInputStyles();
|
|
205
|
-
state.input.className = react_1.mergeClasses(exports.radioClassNames.input,
|
|
206
|
-
const
|
|
207
|
-
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator,
|
|
82
|
+
state.input.className = react_1.mergeClasses(exports.radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.input.className);
|
|
83
|
+
const indicatorBaseClassName = useIndicatorBaseClassName();
|
|
84
|
+
state.indicator.className = react_1.mergeClasses(exports.radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
|
|
208
85
|
const labelStyles = useLabelStyles();
|
|
209
86
|
|
|
210
87
|
if (state.label) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,aAAa,GAAG,MAAtB
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,eAAA,GAA8C;EACzD,IAAI,EAAE,WADmD;EAEzD,SAAS,EAAE,sBAF8C;EAGzD,KAAK,EAAE,kBAHkD;EAIzD,KAAK,EAAE;AAJkD,CAA9C,C,CAOb;;AACA,MAAM,aAAa,GAAG,MAAtB;;AAEA,MAAM,oBAAoB,gBAAG,OAAA,cAAA,guEAA7B;;AAMA,MAAM,aAAa,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAOA,MAAM,qBAAqB,gBAAG,OAAA,cAAA,46GAA9B;;AAwFA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;;AAOA,MAAM,yBAAyB,gBAAG,OAAA,cAAA,4lBAAlC,C,CAmBA;;;AACA,MAAM,cAAc,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAsB;EAC3D,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,eAAA,CAAgB,IADK,EAErB,iBAFqB,EAGrB,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHnB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,MAAM,kBAAkB,GAAG,qBAAqB,EAAhD;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,kBAFsB,EAGtB,aAAa,KAAK,OAAlB,IAA6B,WAAW,CAAC,KAHnB,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAOA,MAAM,sBAAsB,GAAG,yBAAyB,EAAxD;EACA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAC1B,OAAA,CAAA,eAAA,CAAgB,SADU,EAE1B,sBAF0B,EAG1B,KAAK,CAAC,SAAN,CAAgB,SAHU,CAA5B;EAMA,MAAM,WAAW,GAAG,cAAc,EAAlC;;EACA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,eAAA,CAAgB,KADM,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,aAAD,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;EAMD;AACF,CArCM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\nconst useRootBaseClassName = makeResetStyles({\n display: 'inline-flex',\n position: 'relative',\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n position: 'absolute',\n left: 0,\n top: 0,\n width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`,\n height: '100%',\n boxSizing: 'border-box',\n margin: 0,\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n [`& ~ .${radioClassNames.label}`]: {\n cursor: 'pointer',\n },\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessible,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStroke,\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokeHover,\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorCompoundBrandStrokePressed,\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n cursor: 'default',\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n borderColor: tokens.colorNeutralStrokeDisabled,\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n below: {\n width: '100%',\n height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`,\n },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n\n border: tokens.strokeWidthThin + ' solid',\n borderRadius: tokens.borderRadiusCircular,\n margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n fill: 'currentColor',\n pointerEvents: 'none',\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n after: {\n paddingLeft: tokens.spacingHorizontalXS,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n paddingTop: tokens.spacingVerticalXS,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const { labelPosition } = state;\n\n const rootBaseClassName = useRootBaseClassName();\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootBaseClassName,\n labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputBaseClassName = useInputBaseClassName();\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(\n radioClassNames.input,\n inputBaseClassName,\n labelPosition === 'below' && inputStyles.below,\n state.input.className,\n );\n\n const indicatorBaseClassName = useIndicatorBaseClassName();\n state.indicator.className = mergeClasses(\n radioClassNames.indicator,\n indicatorBaseClassName,\n state.indicator.className,\n );\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221215-0425.1",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221215-0425.1"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221215-0425.1",
|
|
34
|
+
"@fluentui/react-field": "0.0.0-nightly-20221215-0425.1",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20221215-0425.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20221215-0425.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221215-0425.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221215-0425.1",
|
|
40
40
|
"@griffel/react": "^1.4.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|