@fluentui/react-switch 0.0.0-nightly-20220623-0419.1 → 0.0.0-nightly-20220629-1444.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 +148 -11
- package/CHANGELOG.md +53 -8
- package/lib/components/Switch/useSwitchStyles.js +18 -6
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +18 -6
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +8 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,11 +2,95 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-switch_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 29 Jun 2022 14:56:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20220629-1444.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220629-1444.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "email not defined",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"commit": "not available",
|
|
14
|
+
"comment": "Release nightly v9"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220629-1444.1",
|
|
20
|
+
"commit": "69fd45674774a9e2e90bb9fcb472a7d0b13aeafd"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-switch",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220629-1444.1",
|
|
26
|
+
"commit": "69fd45674774a9e2e90bb9fcb472a7d0b13aeafd"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-switch",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220629-1444.1",
|
|
32
|
+
"commit": "69fd45674774a9e2e90bb9fcb472a7d0b13aeafd"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-switch",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220629-1444.1",
|
|
38
|
+
"commit": "69fd45674774a9e2e90bb9fcb472a7d0b13aeafd"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-switch",
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220629-1444.1",
|
|
44
|
+
"commit": "69fd45674774a9e2e90bb9fcb472a7d0b13aeafd"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Tue, 28 Jun 2022 17:39:52 GMT",
|
|
51
|
+
"tag": "@fluentui/react-switch_v9.0.1",
|
|
52
|
+
"version": "9.0.1",
|
|
53
|
+
"comments": {
|
|
54
|
+
"patch": [
|
|
55
|
+
{
|
|
56
|
+
"author": "lingfangao@hotmail.com",
|
|
57
|
+
"package": "@fluentui/react-switch",
|
|
58
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
|
|
59
|
+
"comment": "fix: Use caret dependency range for Griffel"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-switch",
|
|
64
|
+
"comment": "Bump @fluentui/react-label to v9.0.1",
|
|
65
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-switch",
|
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.1",
|
|
71
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-switch",
|
|
76
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10",
|
|
77
|
+
"commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b"
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"date": "Tue, 28 Jun 2022 15:14:04 GMT",
|
|
84
|
+
"tag": "@fluentui/react-switch_v9.0.0",
|
|
85
|
+
"version": "9.0.0",
|
|
86
|
+
"comments": {
|
|
87
|
+
"prerelease": [
|
|
88
|
+
{
|
|
89
|
+
"author": "lingfangao@hotmail.com",
|
|
90
|
+
"package": "@fluentui/react-switch",
|
|
91
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
92
|
+
"comment": "Bump Griffel dependencies"
|
|
93
|
+
},
|
|
10
94
|
{
|
|
11
95
|
"author": "Humberto.Morimoto@microsoft.com",
|
|
12
96
|
"package": "@fluentui/react-switch",
|
|
@@ -25,35 +109,61 @@
|
|
|
25
109
|
"commit": "82bd30dd41ad58df1f325e9b721200ed15d674a2",
|
|
26
110
|
"comment": "chore: Update @fluentui/react-icons to latest version"
|
|
27
111
|
},
|
|
112
|
+
{
|
|
113
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
114
|
+
"package": "@fluentui/react-switch",
|
|
115
|
+
"commit": "5e326ed2e7068e8eb75df4a54495c27206ec831b",
|
|
116
|
+
"comment": "fix: Making thumb be vertically centered in Switch."
|
|
117
|
+
},
|
|
28
118
|
{
|
|
29
119
|
"author": "Humberto.Morimoto@microsoft.com",
|
|
30
120
|
"package": "@fluentui/react-switch",
|
|
31
121
|
"commit": "5f06f19e57ffdc265f10ef26db086bf48dc8f610",
|
|
32
122
|
"comment": "README, spec and migration guide cleanup."
|
|
33
123
|
},
|
|
124
|
+
{
|
|
125
|
+
"author": "lingfangao@hotmail.com",
|
|
126
|
+
"package": "@fluentui/react-switch",
|
|
127
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
128
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
129
|
+
}
|
|
130
|
+
],
|
|
131
|
+
"patch": [
|
|
132
|
+
{
|
|
133
|
+
"author": "lingfangao@hotmail.com",
|
|
134
|
+
"package": "@fluentui/react-switch",
|
|
135
|
+
"commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
|
|
136
|
+
"comment": "feat: Initial 9.0.0 release"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"author": "beachball",
|
|
140
|
+
"package": "@fluentui/react-switch",
|
|
141
|
+
"comment": "Bump @fluentui/react-label to v9.0.0",
|
|
142
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
143
|
+
},
|
|
34
144
|
{
|
|
35
145
|
"author": "beachball",
|
|
36
146
|
"package": "@fluentui/react-switch",
|
|
37
|
-
"comment": "Bump @fluentui/react-
|
|
38
|
-
"commit": "
|
|
147
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0",
|
|
148
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
39
149
|
},
|
|
40
150
|
{
|
|
41
151
|
"author": "beachball",
|
|
42
152
|
"package": "@fluentui/react-switch",
|
|
43
|
-
"comment": "Bump @fluentui/react-
|
|
44
|
-
"commit": "
|
|
153
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0",
|
|
154
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
45
155
|
},
|
|
46
156
|
{
|
|
47
157
|
"author": "beachball",
|
|
48
158
|
"package": "@fluentui/react-switch",
|
|
49
|
-
"comment": "Bump @fluentui/react-
|
|
50
|
-
"commit": "
|
|
159
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0",
|
|
160
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
51
161
|
},
|
|
52
162
|
{
|
|
53
163
|
"author": "beachball",
|
|
54
164
|
"package": "@fluentui/react-switch",
|
|
55
|
-
"comment": "Bump @fluentui/react-
|
|
56
|
-
"commit": "
|
|
165
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9",
|
|
166
|
+
"commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
|
|
57
167
|
}
|
|
58
168
|
],
|
|
59
169
|
"none": [
|
|
@@ -66,6 +176,33 @@
|
|
|
66
176
|
]
|
|
67
177
|
}
|
|
68
178
|
},
|
|
179
|
+
{
|
|
180
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
181
|
+
"tag": "@fluentui/react-switch_v9.0.0-rc.14",
|
|
182
|
+
"version": "9.0.0-rc.14",
|
|
183
|
+
"comments": {
|
|
184
|
+
"prerelease": [
|
|
185
|
+
{
|
|
186
|
+
"author": "beachball",
|
|
187
|
+
"package": "@fluentui/react-switch",
|
|
188
|
+
"comment": "Bump @fluentui/react-label to v9.0.0-rc.6",
|
|
189
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"author": "beachball",
|
|
193
|
+
"package": "@fluentui/react-switch",
|
|
194
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.14",
|
|
195
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"author": "beachball",
|
|
199
|
+
"package": "@fluentui/react-switch",
|
|
200
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
201
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
202
|
+
}
|
|
203
|
+
]
|
|
204
|
+
}
|
|
205
|
+
},
|
|
69
206
|
{
|
|
70
207
|
"date": "Tue, 31 May 2022 21:28:47 GMT",
|
|
71
208
|
"tag": "@fluentui/react-switch_v9.0.0-rc.13",
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,69 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 29 Jun 2022 14:56:20 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-20220629-1444.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220629-1444.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.
|
|
9
|
+
Wed, 29 Jun 2022 14:56:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.1..@fluentui/react-switch_v0.0.0-nightly-20220629-1444.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
|
|
15
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220629-1444.1 ([commit](https://github.com/microsoft/fluentui/commit/69fd45674774a9e2e90bb9fcb472a7d0b13aeafd) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220629-1444.1 ([commit](https://github.com/microsoft/fluentui/commit/69fd45674774a9e2e90bb9fcb472a7d0b13aeafd) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220629-1444.1 ([commit](https://github.com/microsoft/fluentui/commit/69fd45674774a9e2e90bb9fcb472a7d0b13aeafd) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220629-1444.1 ([commit](https://github.com/microsoft/fluentui/commit/69fd45674774a9e2e90bb9fcb472a7d0b13aeafd) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220629-1444.1 ([commit](https://github.com/microsoft/fluentui/commit/69fd45674774a9e2e90bb9fcb472a7d0b13aeafd) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.1)
|
|
22
|
+
|
|
23
|
+
Tue, 28 Jun 2022 17:39:52 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0..@fluentui/react-switch_v9.0.1)
|
|
25
|
+
|
|
26
|
+
### Patches
|
|
27
|
+
|
|
28
|
+
- fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
|
|
29
|
+
- Bump @fluentui/react-label to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.0.1 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.10 ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by beachball)
|
|
32
|
+
|
|
33
|
+
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0)
|
|
34
|
+
|
|
35
|
+
Tue, 28 Jun 2022 15:14:04 GMT
|
|
36
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.14..@fluentui/react-switch_v9.0.0)
|
|
37
|
+
|
|
38
|
+
### Patches
|
|
39
|
+
|
|
40
|
+
- feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
|
|
41
|
+
- Bump @fluentui/react-label to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
42
|
+
- Bump @fluentui/react-tabster to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
43
|
+
- Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
44
|
+
- Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
45
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.9 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
|
|
46
|
+
|
|
47
|
+
### Changes
|
|
48
|
+
|
|
49
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
14
50
|
- fix: Removing user-select: 'none' from label. ([PR #23590](https://github.com/microsoft/fluentui/pull/23590) by Humberto.Morimoto@microsoft.com)
|
|
15
51
|
- README update. ([PR #23439](https://github.com/microsoft/fluentui/pull/23439) by Humberto.Morimoto@microsoft.com)
|
|
16
52
|
- chore: Update @fluentui/react-icons to latest version ([PR #23459](https://github.com/microsoft/fluentui/pull/23459) by olfedias@microsoft.com)
|
|
53
|
+
- fix: Making thumb be vertically centered in Switch. ([PR #23712](https://github.com/microsoft/fluentui/pull/23712) by Humberto.Morimoto@microsoft.com)
|
|
17
54
|
- README, spec and migration guide cleanup. ([PR #23396](https://github.com/microsoft/fluentui/pull/23396) by Humberto.Morimoto@microsoft.com)
|
|
18
|
-
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
55
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
56
|
+
|
|
57
|
+
## [9.0.0-rc.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.14)
|
|
58
|
+
|
|
59
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
60
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.13..@fluentui/react-switch_v9.0.0-rc.14)
|
|
61
|
+
|
|
62
|
+
### Changes
|
|
63
|
+
|
|
64
|
+
- Bump @fluentui/react-label to v9.0.0-rc.6 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
65
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.14 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
66
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
22
67
|
|
|
23
68
|
## [9.0.0-rc.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.13)
|
|
24
69
|
|
|
@@ -14,9 +14,9 @@ export const switchClassNames = {
|
|
|
14
14
|
export const switchClassName = switchClassNames.root; // Thumb and track sizes used by the component.
|
|
15
15
|
|
|
16
16
|
const spaceBetweenThumbAndTrack = 2;
|
|
17
|
-
const thumbSize = 14;
|
|
18
17
|
const trackHeight = 20;
|
|
19
18
|
const trackWidth = 40;
|
|
19
|
+
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
20
20
|
|
|
21
21
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
22
22
|
"base": {
|
|
@@ -84,7 +84,7 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
84
84
|
"B7ck84d": "f1ewtqcl",
|
|
85
85
|
"Bkfmm31": "f1w9h62z",
|
|
86
86
|
"Bnnss6s": "fi64zpg",
|
|
87
|
-
"Be2twd7": "
|
|
87
|
+
"Be2twd7": "fg38ndl",
|
|
88
88
|
"Bqenvij": "fjamq6b",
|
|
89
89
|
"Bkecrkj": "f1aehjj5",
|
|
90
90
|
"B3o57yi": "f1bnoopa",
|
|
@@ -96,7 +96,7 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
|
|
|
96
96
|
"B0zx559": "f1uwej41"
|
|
97
97
|
}
|
|
98
98
|
}, {
|
|
99
|
-
"d": [".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);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".
|
|
99
|
+
"d": [".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);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
|
|
100
100
|
});
|
|
101
101
|
|
|
102
102
|
const useInputStyles = /*#__PURE__*/__styles({
|
|
@@ -113,7 +113,7 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
113
113
|
"qhf8xq": "f1euv43f",
|
|
114
114
|
"Bhzewxz": "f15twtuk",
|
|
115
115
|
"a9b677": "fly5x3f",
|
|
116
|
-
"fv8x6k": ["
|
|
116
|
+
"fv8x6k": ["f3l1kk6", "f1kez0x4"],
|
|
117
117
|
"ezr58z": "fvxnmui",
|
|
118
118
|
"Blezdol": "f1cxq9o1",
|
|
119
119
|
"B8f96ig": "f1ks1zsm",
|
|
@@ -168,8 +168,20 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
168
168
|
"Bhmcd6p": "f1jaqqzs"
|
|
169
169
|
}
|
|
170
170
|
}, {
|
|
171
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".
|
|
172
|
-
"
|
|
171
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
|
|
172
|
+
"m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
173
|
+
"m": "(forced-colors: active)"
|
|
174
|
+
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
175
|
+
"m": "(forced-colors: active)"
|
|
176
|
+
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
177
|
+
"m": "(forced-colors: active)"
|
|
178
|
+
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
179
|
+
"m": "(forced-colors: active)"
|
|
180
|
+
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
181
|
+
"m": "(forced-colors: active)"
|
|
182
|
+
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
183
|
+
"m": "(forced-colors: active)"
|
|
184
|
+
}]]
|
|
173
185
|
});
|
|
174
186
|
|
|
175
187
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,gBAAgB,GAAgC;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE,uBAFgD;EAG3D,KAAK,EAAE,mBAHoD;EAI3D,KAAK,EAAE;AAJoD,CAAtD;AAOP;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAzC,C,CAEP;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -24,9 +24,9 @@ exports.switchClassNames = {
|
|
|
24
24
|
exports.switchClassName = exports.switchClassNames.root; // Thumb and track sizes used by the component.
|
|
25
25
|
|
|
26
26
|
const spaceBetweenThumbAndTrack = 2;
|
|
27
|
-
const thumbSize = 14;
|
|
28
27
|
const trackHeight = 20;
|
|
29
28
|
const trackWidth = 40;
|
|
29
|
+
const thumbSize = trackHeight - spaceBetweenThumbAndTrack;
|
|
30
30
|
|
|
31
31
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
32
32
|
"base": {
|
|
@@ -94,7 +94,7 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
94
94
|
"B7ck84d": "f1ewtqcl",
|
|
95
95
|
"Bkfmm31": "f1w9h62z",
|
|
96
96
|
"Bnnss6s": "fi64zpg",
|
|
97
|
-
"Be2twd7": "
|
|
97
|
+
"Be2twd7": "fg38ndl",
|
|
98
98
|
"Bqenvij": "fjamq6b",
|
|
99
99
|
"Bkecrkj": "f1aehjj5",
|
|
100
100
|
"B3o57yi": "f1bnoopa",
|
|
@@ -106,7 +106,7 @@ const useIndicatorStyles = /*#__PURE__*/react_1.__styles({
|
|
|
106
106
|
"B0zx559": "f1uwej41"
|
|
107
107
|
}
|
|
108
108
|
}, {
|
|
109
|
-
"d": [".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);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".
|
|
109
|
+
"d": [".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);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1w9h62z{fill:currentColor;}", ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".fg38ndl{font-size:18px;}", ".fjamq6b{height:20px;}", ".f1aehjj5{pointer-events:none;}", ".f1bnoopa{transition-duration:200ms;}", ".f1e1a42z{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".fo99fu7{transition-property:background,border,color;}", ".feqmc2u{width:40px;}", ".f1wkgtgk>*{transition-duration:200ms;}", ".f17f8g0y>*{transition-timing-function:cubic-bezier(0.33, 0, 0.67, 1);}", ".f1uwej41>*{transition-property:transform;}"]
|
|
110
110
|
});
|
|
111
111
|
|
|
112
112
|
const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -123,7 +123,7 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
123
123
|
"qhf8xq": "f1euv43f",
|
|
124
124
|
"Bhzewxz": "f15twtuk",
|
|
125
125
|
"a9b677": "fly5x3f",
|
|
126
|
-
"fv8x6k": ["
|
|
126
|
+
"fv8x6k": ["f3l1kk6", "f1kez0x4"],
|
|
127
127
|
"ezr58z": "fvxnmui",
|
|
128
128
|
"Blezdol": "f1cxq9o1",
|
|
129
129
|
"B8f96ig": "f1ks1zsm",
|
|
@@ -178,8 +178,20 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
178
178
|
"Bhmcd6p": "f1jaqqzs"
|
|
179
179
|
}
|
|
180
180
|
}, {
|
|
181
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".
|
|
182
|
-
"
|
|
181
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f1k6fduh{cursor:pointer;}", ".f1l02sjl{height:100%;}", ".f1vgc2s3{left:0;}", ".f1e31b4d{right:0;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".fk73vx1{opacity:0;}", ".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".fly5x3f{width:100%;}", ".f3l1kk6:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}", ".f1kez0x4:checked~.fui-Switch__indicator>*{-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}", ".fvxnmui:disabled{cursor:default;}", ".f1cxq9o1:disabled~.fui-Switch__indicator{color:var(--colorNeutralForegroundDisabled);}", ".f1ks1zsm:disabled~.fui-Switch__label{color:var(--colorNeutralForegroundDisabled);}", ".fiqfi0i:enabled:not(:checked)~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessible);}", ".f9aagkg:enabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessible);}", ".fgv8l18:enabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f1p3jmxb:enabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f11yi64e:enabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".fthrly9:enabled:not(:checked)~.fui-Switch__label{color:var(--colorNeutralForeground1);}", ".fhdp2ht:enabled:not(:checked):hover~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessibleHover);}", ".f1rzj6jj:enabled:not(:checked):hover~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1jywl1l:enabled:not(:checked):hover~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessibleHover);}", ".f13d626x:enabled:not(:checked):hover~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1ivtmze:enabled:not(:checked):hover~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".f1uvnr57:enabled:not(:checked):hover:active~.fui-Switch__indicator{color:var(--colorNeutralStrokeAccessiblePressed);}", ".frhcydi:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f1pvt3n7:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeAccessiblePressed);}", ".f14i0clv:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fq9gcw4:enabled:not(:checked):hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}", ".fft44l1:enabled:checked~.fui-Switch__indicator{background-color:var(--colorBrandBackground);}", ".fwlrvmy:enabled:checked~.fui-Switch__indicator{color:var(--colorNeutralForegroundOnBrand);}", ".f1c4gun2:enabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStroke);}", ".flhgtcm:enabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStroke);}", ".fx1zdd8:enabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStroke);}", ".fayrp2e:enabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStroke);}", ".f1vk2knj:enabled:checked:hover~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundHover);}", ".firogjh:enabled:checked:hover~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crd6p1:enabled:checked:hover~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".for8100:enabled:checked:hover~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1v5j4zb:enabled:checked:hover~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1rt7qcq:enabled:checked:hover:active~.fui-Switch__indicator{background-color:var(--colorBrandBackgroundPressed);}", ".fxvotg6:enabled:checked:hover:active~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fk9ur30:enabled:checked:hover:active~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f3u5smv:enabled:checked:hover:active~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fdtj07x:enabled:checked:hover:active~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fv5mb1o:disabled:not(:checked)~.fui-Switch__indicator{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1i2l8ou:disabled:not(:checked)~.fui-Switch__indicator{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fxj1kmv:disabled:not(:checked)~.fui-Switch__indicator{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fku528b:disabled:not(:checked)~.fui-Switch__indicator{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fabcpc0:disabled:checked~.fui-Switch__indicator{background-color:var(--colorNeutralBackgroundDisabled);}", ".f17xwy6w:disabled:checked~.fui-Switch__indicator{border-top-color:var(--colorTransparentStrokeDisabled);}", ".fipwscc:disabled:checked~.fui-Switch__indicator{border-right-color:var(--colorTransparentStrokeDisabled);}", ".fab39iv:disabled:checked~.fui-Switch__indicator{border-left-color:var(--colorTransparentStrokeDisabled);}", ".f1th5z1l:disabled:checked~.fui-Switch__indicator{border-bottom-color:var(--colorTransparentStrokeDisabled);}"],
|
|
182
|
+
"m": [["@media (forced-colors: active){.f19h63kc:disabled~.fui-Switch__indicator{color:GrayText;}}", {
|
|
183
|
+
"m": "(forced-colors: active)"
|
|
184
|
+
}], ["@media (forced-colors: active){.ffutfdj:disabled~.fui-Switch__indicator{border-top-color:GrayText;}}", {
|
|
185
|
+
"m": "(forced-colors: active)"
|
|
186
|
+
}], ["@media (forced-colors: active){.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}}", {
|
|
187
|
+
"m": "(forced-colors: active)"
|
|
188
|
+
}], ["@media (forced-colors: active){.f15xfkur:disabled~.fui-Switch__indicator{border-bottom-color:GrayText;}}", {
|
|
189
|
+
"m": "(forced-colors: active)"
|
|
190
|
+
}], ["@media (forced-colors: active){.f1ud47z9:disabled~.fui-Switch__indicator{border-left-color:GrayText;}.f72m8yo:disabled~.fui-Switch__indicator{border-right-color:GrayText;}}", {
|
|
191
|
+
"m": "(forced-colors: active)"
|
|
192
|
+
}], ["@media (forced-colors: active){.f1jaqqzs:disabled~.fui-Switch__label{color:GrayText;}}", {
|
|
193
|
+
"m": "(forced-colors: active)"
|
|
194
|
+
}]]
|
|
183
195
|
});
|
|
184
196
|
|
|
185
197
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.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,gBAAA,GAAgD;EAC3D,IAAI,EAAE,YADqD;EAE3D,SAAS,EAAE,uBAFgD;EAG3D,KAAK,EAAE,mBAHoD;EAI3D,KAAK,EAAE;AAJoD,CAAhD;AAOb;;AAEG;;AACU,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,gBAAA,CAAiB,IAAnC,C,CAEb;;AACA,MAAM,yBAAyB,GAAG,CAAlC;AACA,MAAM,
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n root: 'fui-Switch',\n indicator: 'fui-Switch__indicator',\n input: 'fui-Switch__input',\n label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootStyles = makeStyles({\n base: {\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n display: 'inline-flex',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n vertical: {\n flexDirection: 'column',\n paddingTop: tokens.spacingVerticalXS,\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('1px'),\n boxSizing: 'border-box',\n fill: 'currentColor',\n flexShrink: 0,\n fontSize: `${thumbSize}px`,\n height: `${trackHeight}px`,\n pointerEvents: 'none',\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'background, border, color',\n width: `${trackWidth}px`,\n\n '> *': {\n transitionDuration: '200ms',\n transitionTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n transitionProperty: 'transform',\n },\n },\n});\n\nconst useInputStyles = makeStyles({\n base: {\n boxSizing: 'border-box',\n cursor: 'pointer',\n height: '100%',\n left: 0,\n ...shorthands.margin(0),\n opacity: 0,\n position: 'absolute',\n top: 0,\n width: '100%',\n\n // Checked (both enabled and disabled)\n ':checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n '> *': {\n transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n },\n },\n },\n\n // Disabled (both checked and unchecked)\n ':disabled': {\n cursor: 'default',\n\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n // Enabled and unchecked\n ':enabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessible,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessibleHover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: tokens.colorNeutralStrokeAccessiblePressed,\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Enabled and checked\n ':enabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackground,\n color: tokens.colorNeutralForegroundOnBrand,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n\n ':hover:active': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n },\n\n // Disabled and unchecked\n ':disabled:not(:checked)': {\n [`& ~ .${switchClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n // Disabled and checked\n ':disabled:checked': {\n [`& ~ .${switchClassNames.indicator}`]: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n },\n },\n },\n\n highContrast: {\n '@media (forced-colors: active)': {\n ':disabled': {\n [`& ~ .${switchClassNames.indicator}`]: {\n color: 'GrayText',\n ...shorthands.borderColor('GrayText'),\n },\n\n [`& ~ .${switchClassNames.label}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n above: {\n marginBottom: tokens.spacingVerticalXS,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n const rootStyles = useRootStyles();\n const indicatorStyles = useIndicatorStyles();\n const inputStyles = useInputStyles();\n const labelStyles = useLabelStyles();\n\n const { labelPosition } = state;\n\n state.root.className = mergeClasses(\n switchClassNames.root,\n rootStyles.base,\n labelPosition === 'above' && rootStyles.vertical,\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(\n switchClassNames.input,\n inputStyles.base,\n inputStyles.highContrast,\n state.input.className,\n );\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles[labelPosition], state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220629-1444.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,16 +28,16 @@
|
|
|
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-20220629-1444.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.172-rc.8",
|
|
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-
|
|
40
|
-
"@griffel/react": "1.
|
|
36
|
+
"@fluentui/react-label": "^0.0.0-nightly-20220629-1444.1",
|
|
37
|
+
"@fluentui/react-tabster": "^0.0.0-nightly-20220629-1444.1",
|
|
38
|
+
"@fluentui/react-theme": "^0.0.0-nightly-20220629-1444.1",
|
|
39
|
+
"@fluentui/react-utilities": "^0.0.0-nightly-20220629-1444.1",
|
|
40
|
+
"@griffel/react": "^1.2.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -48,9 +48,7 @@
|
|
|
48
48
|
},
|
|
49
49
|
"beachball": {
|
|
50
50
|
"disallowedChangeTypes": [
|
|
51
|
-
"major"
|
|
52
|
-
"minor",
|
|
53
|
-
"patch"
|
|
51
|
+
"major"
|
|
54
52
|
]
|
|
55
53
|
},
|
|
56
54
|
"exports": {
|