@fluentui/react-switch 0.0.0-nightly-20220512-0418.1 → 0.0.0-nightly-20220517-0418.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 +28 -16
- package/CHANGELOG.md +12 -10
- package/lib/components/Switch/useSwitchStyles.js +21 -27
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +21 -27
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,16 +2,28 @@
|
|
|
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": "Tue, 17 May 2022 04:30:56 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20220517-0418.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220517-0418.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
|
-
"author": "
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "behowell@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"commit": "c0b27cce0d29122e4488ff431689b966076a728b",
|
|
20
|
+
"comment": "Replace hardcoded padding with spacing tokens"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "behowell@microsoft.com",
|
|
12
24
|
"package": "@fluentui/react-switch",
|
|
13
|
-
"commit": "
|
|
14
|
-
"comment": "
|
|
25
|
+
"commit": "45ec789399b65b76b80cc8023d977de7d2b8b579",
|
|
26
|
+
"comment": "Refactor styles to remove usage of flex gap"
|
|
15
27
|
},
|
|
16
28
|
{
|
|
17
29
|
"author": "esteban.230@hotmail.com",
|
|
@@ -34,32 +46,32 @@
|
|
|
34
46
|
{
|
|
35
47
|
"author": "beachball",
|
|
36
48
|
"package": "@fluentui/react-switch",
|
|
37
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1",
|
|
50
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
|
39
51
|
},
|
|
40
52
|
{
|
|
41
53
|
"author": "beachball",
|
|
42
54
|
"package": "@fluentui/react-switch",
|
|
43
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220517-0418.1",
|
|
56
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
|
45
57
|
},
|
|
46
58
|
{
|
|
47
59
|
"author": "beachball",
|
|
48
60
|
"package": "@fluentui/react-switch",
|
|
49
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1",
|
|
62
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
|
51
63
|
},
|
|
52
64
|
{
|
|
53
65
|
"author": "beachball",
|
|
54
66
|
"package": "@fluentui/react-switch",
|
|
55
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
67
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1",
|
|
68
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
|
57
69
|
},
|
|
58
70
|
{
|
|
59
71
|
"author": "beachball",
|
|
60
72
|
"package": "@fluentui/react-switch",
|
|
61
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
62
|
-
"commit": "
|
|
73
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1",
|
|
74
|
+
"commit": "f95f6684cb226074554f5279075ff446d8397b6b"
|
|
63
75
|
}
|
|
64
76
|
]
|
|
65
77
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 17 May 2022 04:30:56 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-20220517-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220517-0418.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.9..@fluentui/react-switch_v0.0.0-nightly-
|
|
9
|
+
Tue, 17 May 2022 04:30:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.9..@fluentui/react-switch_v0.0.0-nightly-20220517-0418.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
-
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
|
|
15
|
+
- Replace hardcoded padding with spacing tokens ([PR #22982](https://github.com/microsoft/fluentui/pull/22982) by behowell@microsoft.com)
|
|
16
|
+
- Refactor styles to remove usage of flex gap ([PR #22976](https://github.com/microsoft/fluentui/pull/22976) by behowell@microsoft.com)
|
|
15
17
|
- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
|
|
16
18
|
- feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
|
|
17
19
|
- Removing SwitchCommons type in @fluentui/react-switch. ([PR #22943](https://github.com/microsoft/fluentui/pull/22943) by Humberto.Morimoto@microsoft.com)
|
|
18
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
22
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
20
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
|
21
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
|
22
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
|
24
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220517-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/f95f6684cb226074554f5279075ff446d8397b6b) by beachball)
|
|
23
25
|
|
|
24
26
|
## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.9)
|
|
25
27
|
|
|
@@ -11,11 +11,7 @@ export const switchClassNames = {
|
|
|
11
11
|
* @deprecated Use `switchClassNames.root` instead.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
export const switchClassName = switchClassNames.root; //
|
|
15
|
-
|
|
16
|
-
const spacingXS = 4;
|
|
17
|
-
const spacingS = 8;
|
|
18
|
-
const spacingM = 12; // Thumb and track sizes used by the component.
|
|
14
|
+
export const switchClassName = switchClassNames.root; // Thumb and track sizes used by the component.
|
|
19
15
|
|
|
20
16
|
const spaceBetweenThumbAndTrack = 2;
|
|
21
17
|
const thumbSize = 14;
|
|
@@ -24,13 +20,13 @@ const trackWidth = 40;
|
|
|
24
20
|
|
|
25
21
|
const useRootStyles = /*#__PURE__*/__styles({
|
|
26
22
|
"base": {
|
|
23
|
+
"Bt984gj": "f6jr5hl",
|
|
27
24
|
"B7ck84d": "f1ewtqcl",
|
|
28
|
-
"i8kkvl": "f4akndk",
|
|
29
25
|
"mc9l5x": "ftuwxu6",
|
|
30
|
-
"z8tnut": "
|
|
31
|
-
"z189sj": ["
|
|
32
|
-
"Byoj8tv": "
|
|
33
|
-
"uwmqm3": ["
|
|
26
|
+
"z8tnut": "f1kwiid1",
|
|
27
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
28
|
+
"Byoj8tv": "f5b47ha",
|
|
29
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
34
30
|
"qhf8xq": "f10pi13n",
|
|
35
31
|
"B486eqv": "f2hkw1w",
|
|
36
32
|
"vchsgm": "fbiesyy",
|
|
@@ -62,23 +58,12 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
62
58
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
63
59
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
64
60
|
},
|
|
65
|
-
"
|
|
61
|
+
"vertical": {
|
|
66
62
|
"Beiy3e4": "f1vx9l62",
|
|
67
|
-
"z8tnut": "
|
|
68
|
-
"Belr9w4": "f1ma2n7n"
|
|
69
|
-
},
|
|
70
|
-
"after": {
|
|
71
|
-
"Bt984gj": "f6jr5hl",
|
|
72
|
-
"i8kkvl": "f4akndk",
|
|
73
|
-
"Beiy3e4": "f1063pyq"
|
|
74
|
-
},
|
|
75
|
-
"before": {
|
|
76
|
-
"Bt984gj": "f6jr5hl",
|
|
77
|
-
"i8kkvl": "f4akndk",
|
|
78
|
-
"Beiy3e4": "f1063pyq"
|
|
63
|
+
"z8tnut": "f1ywm7hm"
|
|
79
64
|
}
|
|
80
65
|
}, {
|
|
81
|
-
"d": [".
|
|
66
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
|
|
82
67
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
83
68
|
});
|
|
84
69
|
|
|
@@ -190,9 +175,18 @@ const useInputStyles = /*#__PURE__*/__styles({
|
|
|
190
175
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
191
176
|
"base": {
|
|
192
177
|
"famaaq": "f1xqy1su"
|
|
178
|
+
},
|
|
179
|
+
"above": {
|
|
180
|
+
"jrapky": "f8l5zjj"
|
|
181
|
+
},
|
|
182
|
+
"after": {
|
|
183
|
+
"Frg6f3": ["f199hnxi", "fkujibs"]
|
|
184
|
+
},
|
|
185
|
+
"before": {
|
|
186
|
+
"t21cq0": ["fkujibs", "f199hnxi"]
|
|
193
187
|
}
|
|
194
188
|
}, {
|
|
195
|
-
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
|
|
189
|
+
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}"]
|
|
196
190
|
});
|
|
197
191
|
/**
|
|
198
192
|
* Apply styling to the Switch slots based on the state
|
|
@@ -207,12 +201,12 @@ export const useSwitchStyles_unstable = state => {
|
|
|
207
201
|
const {
|
|
208
202
|
labelPosition
|
|
209
203
|
} = state;
|
|
210
|
-
state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, rootStyles
|
|
204
|
+
state.root.className = mergeClasses(switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
211
205
|
state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
212
206
|
state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
|
|
213
207
|
|
|
214
208
|
if (state.label) {
|
|
215
|
-
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);
|
|
209
|
+
state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
216
210
|
}
|
|
217
211
|
|
|
218
212
|
return state;
|
|
@@ -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;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAtD;AAOP;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAzC,C,CAEP;;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 thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\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 + spaceBetweenThumbAndTrack}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 * 2}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 base: {\n userSelect: 'none',\n },\n\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(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -21,11 +21,7 @@ exports.switchClassNames = {
|
|
|
21
21
|
* @deprecated Use `switchClassNames.root` instead.
|
|
22
22
|
*/
|
|
23
23
|
|
|
24
|
-
exports.switchClassName = exports.switchClassNames.root; //
|
|
25
|
-
|
|
26
|
-
const spacingXS = 4;
|
|
27
|
-
const spacingS = 8;
|
|
28
|
-
const spacingM = 12; // Thumb and track sizes used by the component.
|
|
24
|
+
exports.switchClassName = exports.switchClassNames.root; // Thumb and track sizes used by the component.
|
|
29
25
|
|
|
30
26
|
const spaceBetweenThumbAndTrack = 2;
|
|
31
27
|
const thumbSize = 14;
|
|
@@ -34,13 +30,13 @@ const trackWidth = 40;
|
|
|
34
30
|
|
|
35
31
|
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
36
32
|
"base": {
|
|
33
|
+
"Bt984gj": "f6jr5hl",
|
|
37
34
|
"B7ck84d": "f1ewtqcl",
|
|
38
|
-
"i8kkvl": "f4akndk",
|
|
39
35
|
"mc9l5x": "ftuwxu6",
|
|
40
|
-
"z8tnut": "
|
|
41
|
-
"z189sj": ["
|
|
42
|
-
"Byoj8tv": "
|
|
43
|
-
"uwmqm3": ["
|
|
36
|
+
"z8tnut": "f1kwiid1",
|
|
37
|
+
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
38
|
+
"Byoj8tv": "f5b47ha",
|
|
39
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
44
40
|
"qhf8xq": "f10pi13n",
|
|
45
41
|
"B486eqv": "f2hkw1w",
|
|
46
42
|
"vchsgm": "fbiesyy",
|
|
@@ -72,23 +68,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
72
68
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
73
69
|
"Bj23z95": ["f8l10fm", "fxfgh6q"]
|
|
74
70
|
},
|
|
75
|
-
"
|
|
71
|
+
"vertical": {
|
|
76
72
|
"Beiy3e4": "f1vx9l62",
|
|
77
|
-
"z8tnut": "
|
|
78
|
-
"Belr9w4": "f1ma2n7n"
|
|
79
|
-
},
|
|
80
|
-
"after": {
|
|
81
|
-
"Bt984gj": "f6jr5hl",
|
|
82
|
-
"i8kkvl": "f4akndk",
|
|
83
|
-
"Beiy3e4": "f1063pyq"
|
|
84
|
-
},
|
|
85
|
-
"before": {
|
|
86
|
-
"Bt984gj": "f6jr5hl",
|
|
87
|
-
"i8kkvl": "f4akndk",
|
|
88
|
-
"Beiy3e4": "f1063pyq"
|
|
73
|
+
"z8tnut": "f1ywm7hm"
|
|
89
74
|
}
|
|
90
75
|
}, {
|
|
91
|
-
"d": [".
|
|
76
|
+
"d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}"],
|
|
92
77
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
93
78
|
});
|
|
94
79
|
|
|
@@ -200,9 +185,18 @@ const useInputStyles = /*#__PURE__*/react_1.__styles({
|
|
|
200
185
|
const useLabelStyles = /*#__PURE__*/react_1.__styles({
|
|
201
186
|
"base": {
|
|
202
187
|
"famaaq": "f1xqy1su"
|
|
188
|
+
},
|
|
189
|
+
"above": {
|
|
190
|
+
"jrapky": "f8l5zjj"
|
|
191
|
+
},
|
|
192
|
+
"after": {
|
|
193
|
+
"Frg6f3": ["f199hnxi", "fkujibs"]
|
|
194
|
+
},
|
|
195
|
+
"before": {
|
|
196
|
+
"t21cq0": ["fkujibs", "f199hnxi"]
|
|
203
197
|
}
|
|
204
198
|
}, {
|
|
205
|
-
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]
|
|
199
|
+
"d": [".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}"]
|
|
206
200
|
});
|
|
207
201
|
/**
|
|
208
202
|
* Apply styling to the Switch slots based on the state
|
|
@@ -217,12 +211,12 @@ const useSwitchStyles_unstable = state => {
|
|
|
217
211
|
const {
|
|
218
212
|
labelPosition
|
|
219
213
|
} = state;
|
|
220
|
-
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, rootStyles
|
|
214
|
+
state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
|
|
221
215
|
state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, state.indicator.className);
|
|
222
216
|
state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, state.input.className);
|
|
223
217
|
|
|
224
218
|
if (state.label) {
|
|
225
|
-
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, state.label.className);
|
|
219
|
+
state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
|
|
226
220
|
}
|
|
227
221
|
|
|
228
222
|
return state;
|
|
@@ -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;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,KAAK,EAAE;AAJoD,CAAhD;AAOb;;AAEG;;AACU,OAAA,CAAA,eAAA,GAAkB,OAAA,CAAA,gBAAA,CAAiB,IAAnC,C,CAEb;;AACA,MAAM,
|
|
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;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,SAAS,EAAE,uBAFgD;AAG3D,EAAA,KAAK,EAAE,mBAHoD;AAI3D,EAAA,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,SAAS,GAAG,EAAlB;AACA,MAAM,WAAW,GAAG,EAApB;AACA,MAAM,UAAU,GAAG,EAAnB;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAiBA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAwBA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAmHA,MAAM,cAAc,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAgBA;;AAEG;;;AACI,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,QAAM,WAAW,GAAG,cAAc,EAAlC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,aAAa,KAAK,OAAlB,IAA6B,UAAU,CAAC,QAHnB,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAOA,EAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,gBAAA,CAAiB,SAA9B,EAAyC,eAAe,CAAC,IAAzD,EAA+D,KAAK,CAAC,SAAN,CAAgB,SAA/E,CAA5B;AAEA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,YAHU,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;;AAOA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CACtB,OAAA,CAAA,gBAAA,CAAiB,KADK,EAEtB,WAAW,CAAC,IAFU,EAGtB,WAAW,CAAC,aAAD,CAHW,EAItB,KAAK,CAAC,KAAN,CAAY,SAJU,CAAxB;AAMD;;AAED,SAAO,KAAP;AACD,CAlCM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","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 thumbSize = 14;\nconst trackHeight = 20;\nconst trackWidth = 40;\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 + spaceBetweenThumbAndTrack}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 * 2}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 base: {\n userSelect: 'none',\n },\n\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(\n switchClassNames.label,\n labelStyles.base,\n labelStyles[labelPosition],\n state.label.className,\n );\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-20220517-0418.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-20220517-0418.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.166-rc.3",
|
|
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.0.
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20220517-0418.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220517-0418.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220517-0418.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220517-0418.1",
|
|
40
|
+
"@griffel/react": "1.0.4",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|