@fluentui/react-switch 9.0.0-alpha.5 → 9.0.0-alpha.6
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 +30 -1
- package/CHANGELOG.md +11 -2
- package/lib/components/Switch/useSwitchStyles.js +29 -19
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-amd/components/Switch/useSwitchStyles.js +11 -11
- package/lib-amd/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +29 -19
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,36 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 20 Sep 2021 07:35:22 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v9.0.0-alpha.6",
|
|
7
|
+
"version": "9.0.0-alpha.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "czearing@outlook.com",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"comment": "Adding missing theme tokens and updating styles.",
|
|
14
|
+
"commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "lingfangao@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"comment": "chore: use versioon eslint-plugin and react-conformance in dev dependencies",
|
|
20
|
+
"commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884"
|
|
21
|
+
}
|
|
22
|
+
],
|
|
23
|
+
"prerelease": [
|
|
24
|
+
{
|
|
25
|
+
"author": "lingfangao@hotmail.com",
|
|
26
|
+
"package": "@fluentui/react-switch",
|
|
27
|
+
"commit": "4560b1fa7c9187216ce734c1f4435c1535fc4884",
|
|
28
|
+
"comment": "Bump @fluentui/react-switch to v9.0.0-alpha.6"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"date": "Fri, 17 Sep 2021 07:35:26 GMT",
|
|
6
35
|
"tag": "@fluentui/react-switch_v9.0.0-alpha.5",
|
|
7
36
|
"version": "9.0.0-alpha.5",
|
|
8
37
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 20 Sep 2021 07:35:22 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.6)
|
|
8
|
+
|
|
9
|
+
Mon, 20 Sep 2021 07:35:22 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.5..@fluentui/react-switch_v9.0.0-alpha.6)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-switch to v9.0.0-alpha.6 ([PR #18290](https://github.com/microsoft/fluentui/pull/18290) by lingfangao@hotmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-alpha.5)
|
|
8
17
|
|
|
9
|
-
Fri, 17 Sep 2021 07:
|
|
18
|
+
Fri, 17 Sep 2021 07:35:26 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-alpha.4..@fluentui/react-switch_v9.0.0-alpha.5)
|
|
11
20
|
|
|
12
21
|
### Changes
|
|
@@ -21,19 +21,21 @@ var useRootStyles = /*#__PURE__*/__styles({
|
|
|
21
21
|
"ha4doy": "f1qdqbpl"
|
|
22
22
|
},
|
|
23
23
|
"unchecked": {
|
|
24
|
-
"Bqjqakx": "
|
|
25
|
-
"Bd0vrip": "
|
|
26
|
-
"y7yju5": ["
|
|
27
|
-
"B07fonl": "
|
|
28
|
-
"lc79a6": ["
|
|
24
|
+
"Bqjqakx": "f1d44w5f",
|
|
25
|
+
"Bd0vrip": "f1j7dw8k",
|
|
26
|
+
"y7yju5": ["f1r94r6s", "f1fmnyxd"],
|
|
27
|
+
"B07fonl": "fyho6do",
|
|
28
|
+
"lc79a6": ["f1fmnyxd", "f1r94r6s"]
|
|
29
29
|
},
|
|
30
30
|
"checked": {
|
|
31
|
-
"ot2k7a": "
|
|
31
|
+
"ot2k7a": "fbufzf2",
|
|
32
|
+
"Bhph27x": "fvfzge"
|
|
32
33
|
},
|
|
33
34
|
"focusIndicator": {}
|
|
34
35
|
}, {
|
|
35
36
|
"d": [".frxo1y7{--switch-width:40px;}", ".fe5s2ct{--switch-height:20px;}", ".f1n6k660{--switch-thumb-size:14px;}", ".f10pi13n{position:relative;}", ".fnceurk{width:var(--switch-width);}", ".f15da5dy{height:var(--switch-height);}", ".f14t3ns0{display:inline-block;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f1qdqbpl{vertical-align:bottom;}"],
|
|
36
|
-
"h": [".
|
|
37
|
+
"h": [".f1d44w5f:hover .ms-Switch-thumb{background:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1j7dw8k:hover .ms-Switch-track{border-top-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1r94r6s:hover .ms-Switch-track{border-right-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1fmnyxd:hover .ms-Switch-track{border-left-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fyho6do:hover .ms-Switch-track{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fbufzf2:hover .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundHover);}"],
|
|
38
|
+
"a": [".fvfzge:active .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundPressed);}"]
|
|
37
39
|
});
|
|
38
40
|
/**
|
|
39
41
|
* Styles for the track slot
|
|
@@ -47,7 +49,7 @@ var useTrackStyles = /*#__PURE__*/__styles({
|
|
|
47
49
|
"Bqenvij": "f1l02sjl",
|
|
48
50
|
"B7ck84d": "f1ewtqcl",
|
|
49
51
|
"Dimara": "f8ff6pf",
|
|
50
|
-
"Bi2q7bf": "
|
|
52
|
+
"Bi2q7bf": "f1tuovvr",
|
|
51
53
|
"Bkecrkj": "f1aehjj5"
|
|
52
54
|
},
|
|
53
55
|
"unchecked": {
|
|
@@ -66,7 +68,7 @@ var useTrackStyles = /*#__PURE__*/__styles({
|
|
|
66
68
|
"ayd6f0": "f1k2sg7s"
|
|
67
69
|
},
|
|
68
70
|
"checked": {
|
|
69
|
-
"ayd6f0": "
|
|
71
|
+
"ayd6f0": "f1fw6kzu",
|
|
70
72
|
"icvyot": "f1ern45e",
|
|
71
73
|
"vrafjx": ["f1n71otn", "f1deefiw"],
|
|
72
74
|
"oivjwe": "f1h8hb77",
|
|
@@ -87,14 +89,22 @@ var useTrackStyles = /*#__PURE__*/__styles({
|
|
|
87
89
|
"zhjwy3": ["ffgazsd", "fgf1gi4"]
|
|
88
90
|
},
|
|
89
91
|
"disabledChecked": {
|
|
90
|
-
"
|
|
91
|
-
"
|
|
92
|
-
"
|
|
93
|
-
"
|
|
94
|
-
"
|
|
92
|
+
"B4j52fo": "f5ogflp",
|
|
93
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
94
|
+
"Bn0qgzm": "f1f09k3d",
|
|
95
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
96
|
+
"icvyot": "fzkkow9",
|
|
97
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
98
|
+
"oivjwe": "fg706s2",
|
|
99
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
100
|
+
"g2u3we": "fijmamb",
|
|
101
|
+
"h3c5rm": ["f13mpk6g", "f1sy8snd"],
|
|
102
|
+
"B9xav0g": "f1l53k52",
|
|
103
|
+
"zhjwy3": ["f1sy8snd", "f13mpk6g"],
|
|
104
|
+
"ayd6f0": "f7vsd9j"
|
|
95
105
|
}
|
|
96
106
|
}, {
|
|
97
|
-
"d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f8ff6pf{border-radius:999px;}", ".
|
|
107
|
+
"d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f8ff6pf{border-radius:999px;}", ".f1tuovvr{-webkit-transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1q58nl0{border-top-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1gj82os{border-right-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f97e4i{border-left-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f117jeii{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1k2sg7s{background:none;}", ".f1fw6kzu{background:var(--alias-color-neutral-brandBackground);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fh008h3{border-top-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fgf1gi4{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".ffgazsd{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f1nmao14{border-bottom-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fijmamb{border-top-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f13mpk6g{border-right-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1sy8snd{border-left-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1l53k52{border-bottom-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f7vsd9j{background:var(--alias-color-neutral-neutralBackgroundDisabled);}"]
|
|
98
108
|
});
|
|
99
109
|
/**
|
|
100
110
|
* Styles for the thumb wrapper slot
|
|
@@ -108,11 +118,11 @@ var useThumbWrapperStyles = /*#__PURE__*/__styles({
|
|
|
108
118
|
"B5kzvoi": "f1yab3r1",
|
|
109
119
|
"oyh7mz": ["fhpx7ww", "f1kctpth"],
|
|
110
120
|
"j35jbq": ["f1kctpth", "fhpx7ww"],
|
|
111
|
-
"Bi2q7bf": "
|
|
121
|
+
"Bi2q7bf": "f1xvpgc6",
|
|
112
122
|
"Bkecrkj": "f1aehjj5"
|
|
113
123
|
}
|
|
114
124
|
}, {
|
|
115
|
-
"d": [".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}", ".
|
|
125
|
+
"d": [".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}", ".f1xvpgc6{-webkit-transition:-webkit-transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}"]
|
|
116
126
|
});
|
|
117
127
|
/**
|
|
118
128
|
* Styles for the thumb slot
|
|
@@ -134,7 +144,7 @@ var useThumbStyles = /*#__PURE__*/__styles({
|
|
|
134
144
|
"ayd6f0": "fchusbt"
|
|
135
145
|
},
|
|
136
146
|
"checked": {
|
|
137
|
-
"ayd6f0": "
|
|
147
|
+
"ayd6f0": "fhupcpt"
|
|
138
148
|
},
|
|
139
149
|
"disabledUnchecked": {
|
|
140
150
|
"B4j52fo": "f5ogflp",
|
|
@@ -155,7 +165,7 @@ var useThumbStyles = /*#__PURE__*/__styles({
|
|
|
155
165
|
"ayd6f0": "f1dd8iac"
|
|
156
166
|
}
|
|
157
167
|
}, {
|
|
158
|
-
"d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".f1i1t8d1{top:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".f1aehjj5{pointer-events:none;}", ".fchusbt{background:var(--alias-color-neutral-neutralStrokeAccessible);}", ".
|
|
168
|
+
"d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".f1i1t8d1{top:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".f1aehjj5{pointer-events:none;}", ".fchusbt{background:var(--alias-color-neutral-neutralStrokeAccessible);}", ".fhupcpt{background:var(--alias-color-neutral-neutralForegroundOnBrand);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fjap463{border-top-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".fto8b0z{border-right-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f14er8zu{border-left-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1u5oejo{border-bottom-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1tv6yd0{background:var(--alias-color-neutral-neutralBackground1);}", ".f1dd8iac{background:var(--alias-color-neutral-neutralForegroundDisabled);}"]
|
|
159
169
|
});
|
|
160
170
|
/**
|
|
161
171
|
* Styles for the hidden input slot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AACA,SAAS,6BAAT,QAA8C,yBAA9C;AAGA,IAAM,aAAa,GAAG,gBAAtB;AACA,IAAM,cAAc,GAAG,iBAAvB;AACA,IAAM,cAAc,GAAG,iBAAvB;AAEA;;AAEG;;AACH,IAAM,aAAa,gBAAG;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;
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\n\n position: 'relative',\n width: 'var(--switch-width)',\n height: 'var(--switch-height)',\n display: 'inline-block',\n userSelect: 'none',\n touchAction: 'none',\n verticalAlign: 'bottom',\n }),\n\n unchecked: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundHover,\n },\n\n ':active .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundPressed,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.brandBackground,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.transparentStrokeDisabled}`,\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (state: SwitchState): SwitchState => {\n const { checked, disabled } = state.input;\n\n const rootStyles = useRootStyles();\n const trackStyles = useTrackStyles();\n const thumbWrapperStyles = useThumbWrapperStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked),\n state.track.className,\n );\n\n state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);\n\n state.thumb.className = mergeClasses(\n thumbClassName,\n thumbStyles.thumb,\n !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -23,16 +23,18 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
|
|
|
23
23
|
}); },
|
|
24
24
|
unchecked: function (theme) { return ({
|
|
25
25
|
':hover .ms-Switch-thumb': {
|
|
26
|
-
background: theme.alias.color.neutral.
|
|
26
|
+
background: theme.alias.color.neutral.neutralStrokeAccessibleHover,
|
|
27
27
|
},
|
|
28
28
|
':hover .ms-Switch-track': {
|
|
29
|
-
borderColor: theme.alias.color.neutral.
|
|
29
|
+
borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,
|
|
30
30
|
},
|
|
31
31
|
}); },
|
|
32
32
|
checked: function (theme) { return ({
|
|
33
33
|
':hover .ms-Switch-track': {
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
background: theme.alias.color.neutral.brandBackgroundHover,
|
|
35
|
+
},
|
|
36
|
+
':active .ms-Switch-track': {
|
|
37
|
+
background: theme.alias.color.neutral.brandBackgroundPressed,
|
|
36
38
|
},
|
|
37
39
|
}); },
|
|
38
40
|
focusIndicator: react_tabster_1.createFocusIndicatorStyleRule(function (theme) { return ({
|
|
@@ -59,7 +61,7 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
|
|
|
59
61
|
height: '100%',
|
|
60
62
|
boxSizing: 'border-box',
|
|
61
63
|
borderRadius: '999px',
|
|
62
|
-
transition: 'background .
|
|
64
|
+
transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
|
|
63
65
|
pointerEvents: 'none',
|
|
64
66
|
}); },
|
|
65
67
|
unchecked: function (theme) { return ({
|
|
@@ -67,16 +69,15 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
|
|
|
67
69
|
background: 'none',
|
|
68
70
|
}); },
|
|
69
71
|
checked: function (theme) { return ({
|
|
70
|
-
|
|
71
|
-
background: theme.global.palette.brand.primary,
|
|
72
|
+
background: theme.alias.color.neutral.brandBackground,
|
|
72
73
|
border: 'none',
|
|
73
74
|
}); },
|
|
74
75
|
disabledUnchecked: function (theme) { return ({
|
|
75
76
|
border: "1px solid " + theme.alias.color.neutral.neutralStrokeDisabled,
|
|
76
77
|
}); },
|
|
77
78
|
disabledChecked: function (theme) { return ({
|
|
79
|
+
border: "1px solid " + theme.alias.color.neutral.transparentStrokeDisabled,
|
|
78
80
|
background: theme.alias.color.neutral.neutralBackgroundDisabled,
|
|
79
|
-
border: 'none',
|
|
80
81
|
}); },
|
|
81
82
|
});
|
|
82
83
|
/**
|
|
@@ -89,7 +90,7 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
|
|
|
89
90
|
bottom: '0',
|
|
90
91
|
left: 'calc(var(--switch-thumb-size) * .7)',
|
|
91
92
|
right: 'calc(var(--switch-thumb-size) * .7)',
|
|
92
|
-
transition: 'transform .
|
|
93
|
+
transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
|
|
93
94
|
pointerEvents: 'none',
|
|
94
95
|
}); },
|
|
95
96
|
});
|
|
@@ -111,8 +112,7 @@ define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-ta
|
|
|
111
112
|
background: theme.alias.color.neutral.neutralStrokeAccessible,
|
|
112
113
|
}); },
|
|
113
114
|
checked: function (theme) { return ({
|
|
114
|
-
|
|
115
|
-
background: 'white',
|
|
115
|
+
background: theme.alias.color.neutral.neutralForegroundOnBrand,
|
|
116
116
|
}); },
|
|
117
117
|
disabledUnchecked: function (theme) { return ({
|
|
118
118
|
border: "1px solid " + theme.alias.color.neutral.neutralForegroundDisabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSwitchStyles.js","sourceRoot":"../src/","sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\n\n position: 'relative',\n width: 'var(--switch-width)',\n height: 'var(--switch-height)',\n display: 'inline-block',\n userSelect: 'none',\n touchAction: 'none',\n verticalAlign: 'bottom',\n }),\n\n unchecked: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralForeground3Hover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralForeground3Hover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n // TODO: theme.alias.color.neutral.brandBackgroundInteractive\n background: theme.global.palette.brand.shade30,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .2s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .2s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n // TODO: background: theme.alias.color.neutral.brandBackgroundInteractive,\n background: theme.global.palette.brand.primary,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n border: 'none',\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n transition: 'transform .2s cubic-bezier(0.33, 0.0, 0.67, 1), background .2s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n // Neutral foreground accessible\n background: 'white',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (state: SwitchState): SwitchState => {\n const { checked, disabled } = state.input;\n\n const rootStyles = useRootStyles();\n const trackStyles = useTrackStyles();\n const thumbWrapperStyles = useThumbWrapperStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked),\n state.track.className,\n );\n\n state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);\n\n state.thumb.className = mergeClasses(\n thumbClassName,\n thumbStyles.thumb,\n !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
|
|
1
|
+
{"version":3,"file":"useSwitchStyles.js","sourceRoot":"../src/","sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\n\n position: 'relative',\n width: 'var(--switch-width)',\n height: 'var(--switch-height)',\n display: 'inline-block',\n userSelect: 'none',\n touchAction: 'none',\n verticalAlign: 'bottom',\n }),\n\n unchecked: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundHover,\n },\n\n ':active .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundPressed,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.brandBackground,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.transparentStrokeDisabled}`,\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (state: SwitchState): SwitchState => {\n const { checked, disabled } = state.input;\n\n const rootStyles = useRootStyles();\n const trackStyles = useTrackStyles();\n const thumbWrapperStyles = useThumbWrapperStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked),\n state.track.className,\n );\n\n state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);\n\n state.thumb.className = mergeClasses(\n thumbClassName,\n thumbStyles.thumb,\n !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.className,\n );\n\n return state;\n};\n"]}
|
|
@@ -30,19 +30,21 @@ var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
30
30
|
"ha4doy": "f1qdqbpl"
|
|
31
31
|
},
|
|
32
32
|
"unchecked": {
|
|
33
|
-
"Bqjqakx": "
|
|
34
|
-
"Bd0vrip": "
|
|
35
|
-
"y7yju5": ["
|
|
36
|
-
"B07fonl": "
|
|
37
|
-
"lc79a6": ["
|
|
33
|
+
"Bqjqakx": "f1d44w5f",
|
|
34
|
+
"Bd0vrip": "f1j7dw8k",
|
|
35
|
+
"y7yju5": ["f1r94r6s", "f1fmnyxd"],
|
|
36
|
+
"B07fonl": "fyho6do",
|
|
37
|
+
"lc79a6": ["f1fmnyxd", "f1r94r6s"]
|
|
38
38
|
},
|
|
39
39
|
"checked": {
|
|
40
|
-
"ot2k7a": "
|
|
40
|
+
"ot2k7a": "fbufzf2",
|
|
41
|
+
"Bhph27x": "fvfzge"
|
|
41
42
|
},
|
|
42
43
|
"focusIndicator": {}
|
|
43
44
|
}, {
|
|
44
45
|
"d": [".frxo1y7{--switch-width:40px;}", ".fe5s2ct{--switch-height:20px;}", ".f1n6k660{--switch-thumb-size:14px;}", ".f10pi13n{position:relative;}", ".fnceurk{width:var(--switch-width);}", ".f15da5dy{height:var(--switch-height);}", ".f14t3ns0{display:inline-block;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f1sdsnyy{touch-action:none;}", ".f1qdqbpl{vertical-align:bottom;}"],
|
|
45
|
-
"h": [".
|
|
46
|
+
"h": [".f1d44w5f:hover .ms-Switch-thumb{background:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1j7dw8k:hover .ms-Switch-track{border-top-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1r94r6s:hover .ms-Switch-track{border-right-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".f1fmnyxd:hover .ms-Switch-track{border-left-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fyho6do:hover .ms-Switch-track{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessibleHover);}", ".fbufzf2:hover .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundHover);}"],
|
|
47
|
+
"a": [".fvfzge:active .ms-Switch-track{background:var(--alias-color-neutral-brandBackgroundPressed);}"]
|
|
46
48
|
});
|
|
47
49
|
/**
|
|
48
50
|
* Styles for the track slot
|
|
@@ -56,7 +58,7 @@ var useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
56
58
|
"Bqenvij": "f1l02sjl",
|
|
57
59
|
"B7ck84d": "f1ewtqcl",
|
|
58
60
|
"Dimara": "f8ff6pf",
|
|
59
|
-
"Bi2q7bf": "
|
|
61
|
+
"Bi2q7bf": "f1tuovvr",
|
|
60
62
|
"Bkecrkj": "f1aehjj5"
|
|
61
63
|
},
|
|
62
64
|
"unchecked": {
|
|
@@ -75,7 +77,7 @@ var useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
75
77
|
"ayd6f0": "f1k2sg7s"
|
|
76
78
|
},
|
|
77
79
|
"checked": {
|
|
78
|
-
"ayd6f0": "
|
|
80
|
+
"ayd6f0": "f1fw6kzu",
|
|
79
81
|
"icvyot": "f1ern45e",
|
|
80
82
|
"vrafjx": ["f1n71otn", "f1deefiw"],
|
|
81
83
|
"oivjwe": "f1h8hb77",
|
|
@@ -96,14 +98,22 @@ var useTrackStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
96
98
|
"zhjwy3": ["ffgazsd", "fgf1gi4"]
|
|
97
99
|
},
|
|
98
100
|
"disabledChecked": {
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
101
|
+
"B4j52fo": "f5ogflp",
|
|
102
|
+
"Bekrc4i": ["f1hqa2wf", "finvdd3"],
|
|
103
|
+
"Bn0qgzm": "f1f09k3d",
|
|
104
|
+
"ibv6hh": ["finvdd3", "f1hqa2wf"],
|
|
105
|
+
"icvyot": "fzkkow9",
|
|
106
|
+
"vrafjx": ["fcdblym", "fjik90z"],
|
|
107
|
+
"oivjwe": "fg706s2",
|
|
108
|
+
"wvpqe5": ["fjik90z", "fcdblym"],
|
|
109
|
+
"g2u3we": "fijmamb",
|
|
110
|
+
"h3c5rm": ["f13mpk6g", "f1sy8snd"],
|
|
111
|
+
"B9xav0g": "f1l53k52",
|
|
112
|
+
"zhjwy3": ["f1sy8snd", "f13mpk6g"],
|
|
113
|
+
"ayd6f0": "f7vsd9j"
|
|
104
114
|
}
|
|
105
115
|
}, {
|
|
106
|
-
"d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f8ff6pf{border-radius:999px;}", ".
|
|
116
|
+
"d": [".f1euv43f{position:absolute;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1ewtqcl{box-sizing:border-box;}", ".f8ff6pf{border-radius:999px;}", ".f1tuovvr{-webkit-transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:background .1s cubic-bezier(0.33, 0.0, 0.67, 1),borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f1q58nl0{border-top-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1gj82os{border-right-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f97e4i{border-left-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f117jeii{border-bottom-color:var(--alias-color-neutral-neutralStrokeAccessible);}", ".f1k2sg7s{background:none;}", ".f1fw6kzu{background:var(--alias-color-neutral-brandBackground);}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fh008h3{border-top-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fgf1gi4{border-right-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".ffgazsd{border-left-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".f1nmao14{border-bottom-color:var(--alias-color-neutral-neutralStrokeDisabled);}", ".fijmamb{border-top-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f13mpk6g{border-right-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1sy8snd{border-left-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f1l53k52{border-bottom-color:var(--alias-color-neutral-transparentStrokeDisabled);}", ".f7vsd9j{background:var(--alias-color-neutral-neutralBackgroundDisabled);}"]
|
|
107
117
|
});
|
|
108
118
|
/**
|
|
109
119
|
* Styles for the thumb wrapper slot
|
|
@@ -117,11 +127,11 @@ var useThumbWrapperStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
117
127
|
"B5kzvoi": "f1yab3r1",
|
|
118
128
|
"oyh7mz": ["fhpx7ww", "f1kctpth"],
|
|
119
129
|
"j35jbq": ["f1kctpth", "fhpx7ww"],
|
|
120
|
-
"Bi2q7bf": "
|
|
130
|
+
"Bi2q7bf": "f1xvpgc6",
|
|
121
131
|
"Bkecrkj": "f1aehjj5"
|
|
122
132
|
}
|
|
123
133
|
}, {
|
|
124
|
-
"d": [".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}", ".
|
|
134
|
+
"d": [".f1euv43f{position:absolute;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fhpx7ww{left:calc(var(--switch-thumb-size) * .7);}", ".f1kctpth{right:calc(var(--switch-thumb-size) * .7);}", ".f1xvpgc6{-webkit-transition:-webkit-transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);transition:transform .1s cubic-bezier(0.33, 0.0, 0.67, 1),background .1s cubic-bezier(0.33, 0.0, 0.67, 1);}", ".f1aehjj5{pointer-events:none;}"]
|
|
125
135
|
});
|
|
126
136
|
/**
|
|
127
137
|
* Styles for the thumb slot
|
|
@@ -143,7 +153,7 @@ var useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
143
153
|
"ayd6f0": "fchusbt"
|
|
144
154
|
},
|
|
145
155
|
"checked": {
|
|
146
|
-
"ayd6f0": "
|
|
156
|
+
"ayd6f0": "fhupcpt"
|
|
147
157
|
},
|
|
148
158
|
"disabledUnchecked": {
|
|
149
159
|
"B4j52fo": "f5ogflp",
|
|
@@ -164,7 +174,7 @@ var useThumbStyles = /*#__PURE__*/react_make_styles_1.__styles({
|
|
|
164
174
|
"ayd6f0": "f1dd8iac"
|
|
165
175
|
}
|
|
166
176
|
}, {
|
|
167
|
-
"d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".f1i1t8d1{top:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".f1aehjj5{pointer-events:none;}", ".fchusbt{background:var(--alias-color-neutral-neutralStrokeAccessible);}", ".
|
|
177
|
+
"d": [".f1euv43f{position:absolute;}", ".fcjrtee{width:var(--switch-thumb-size);}", ".fili5n9{height:var(--switch-thumb-size);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1ytn4vn{border-radius:var(--global-borderRadius-circular);}", ".f1i1t8d1{top:50%;}", ".foouk8k{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}", ".fd9rb4b{-webkit-transform:translate(50%, -50%);-moz-transform:translate(50%, -50%);-ms-transform:translate(50%, -50%);transform:translate(50%, -50%);}", ".f1aehjj5{pointer-events:none;}", ".fchusbt{background:var(--alias-color-neutral-neutralStrokeAccessible);}", ".fhupcpt{background:var(--alias-color-neutral-neutralForegroundOnBrand);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fjap463{border-top-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".fto8b0z{border-right-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f14er8zu{border-left-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1u5oejo{border-bottom-color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1tv6yd0{background:var(--alias-color-neutral-neutralBackground1);}", ".f1dd8iac{background:var(--alias-color-neutral-neutralForegroundDisabled);}"]
|
|
168
178
|
});
|
|
169
179
|
/**
|
|
170
180
|
* Styles for the hidden input slot
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAGA,IAAM,aAAa,GAAG,gBAAtB;AACA,IAAM,cAAc,GAAG,iBAAvB;AACA,IAAM,cAAc,GAAG,iBAAvB;AAEA;;AAEG;;AACH,IAAM,aAAa,gBAAG,mBAAA,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,EAAtB;
|
|
1
|
+
{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { createFocusIndicatorStyleRule } from '@fluentui/react-tabster';\nimport type { SwitchState } from './Switch.types';\n\nconst rootClassName = 'ms-Switch-root';\nconst trackClassName = 'ms-Switch-track';\nconst thumbClassName = 'ms-Switch-thumb';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: theme => ({\n '--switch-width': '40px',\n '--switch-height': '20px',\n '--switch-thumb-size': '14px',\n\n position: 'relative',\n width: 'var(--switch-width)',\n height: 'var(--switch-height)',\n display: 'inline-block',\n userSelect: 'none',\n touchAction: 'none',\n verticalAlign: 'bottom',\n }),\n\n unchecked: theme => ({\n ':hover .ms-Switch-thumb': {\n background: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n\n ':hover .ms-Switch-track': {\n borderColor: theme.alias.color.neutral.neutralStrokeAccessibleHover,\n },\n }),\n\n checked: theme => ({\n ':hover .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundHover,\n },\n\n ':active .ms-Switch-track': {\n background: theme.alias.color.neutral.brandBackgroundPressed,\n },\n }),\n\n focusIndicator: createFocusIndicatorStyleRule(\n theme => ({\n ':after': {\n content: \"''\",\n position: 'absolute',\n top: '-8px',\n right: '-8px',\n bottom: '-8px',\n left: '-8px',\n boxSizing: 'border-box',\n border: `1px solid ${theme.alias.color.neutral.neutralForeground1}`,\n borderRadius: theme.global.borderRadius.medium,\n },\n }),\n { selector: 'focus-within' },\n ),\n});\n\n/**\n * Styles for the track slot\n */\nconst useTrackStyles = makeStyles({\n track: theme => ({\n position: 'absolute',\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n borderRadius: '999px',\n transition: 'background .1s cubic-bezier(0.33, 0.0, 0.67, 1), borderColor .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeAccessible}`,\n background: 'none',\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.brandBackground,\n border: 'none',\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralStrokeDisabled}`,\n }),\n\n disabledChecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.transparentStrokeDisabled}`,\n background: theme.alias.color.neutral.neutralBackgroundDisabled,\n }),\n});\n\n/**\n * Styles for the thumb wrapper slot\n */\nconst useThumbWrapperStyles = makeStyles({\n thumbWrapper: theme => ({\n position: 'absolute',\n top: '0',\n bottom: '0',\n left: 'calc(var(--switch-thumb-size) * .7)',\n right: 'calc(var(--switch-thumb-size) * .7)',\n transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1), background .1s cubic-bezier(0.33, 0.0, 0.67, 1)',\n pointerEvents: 'none',\n }),\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n thumb: theme => ({\n position: 'absolute',\n width: 'var(--switch-thumb-size)',\n height: 'var(--switch-thumb-size)',\n boxSizing: 'border-box',\n borderRadius: theme.global.borderRadius.circular,\n top: '50%',\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none',\n }),\n\n unchecked: theme => ({\n background: theme.alias.color.neutral.neutralStrokeAccessible,\n }),\n\n checked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundOnBrand,\n }),\n\n disabledUnchecked: theme => ({\n border: `1px solid ${theme.alias.color.neutral.neutralForegroundDisabled}`,\n background: theme.alias.color.neutral.neutralBackground1,\n }),\n\n disabledChecked: theme => ({\n background: theme.alias.color.neutral.neutralForegroundDisabled,\n }),\n});\n\n/**\n * Styles for the hidden input slot\n */\nconst useInputStyle = makeStyles({\n input: {\n opacity: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n\n enabled: {\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'not-allowed',\n },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles = (state: SwitchState): SwitchState => {\n const { checked, disabled } = state.input;\n\n const rootStyles = useRootStyles();\n const trackStyles = useTrackStyles();\n const thumbWrapperStyles = useThumbWrapperStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyle();\n\n state.root.className = mergeClasses(\n rootClassName + (checked ? ' checked' : ''),\n rootStyles.root,\n rootStyles.focusIndicator,\n !disabled && (checked ? rootStyles.checked : rootStyles.unchecked),\n state.root.className,\n );\n\n state.track.className = mergeClasses(\n trackClassName,\n trackStyles.track,\n !disabled && (checked ? trackStyles.checked : trackStyles.unchecked),\n disabled && (checked ? trackStyles.disabledChecked : trackStyles.disabledUnchecked),\n state.track.className,\n );\n\n state.thumbWrapper.className = mergeClasses(thumbWrapperStyles.thumbWrapper, state.thumbWrapper.className);\n\n state.thumb.className = mergeClasses(\n thumbClassName,\n thumbStyles.thumb,\n !disabled && (checked ? thumbStyles.checked : thumbStyles.unchecked),\n disabled && (checked ? thumbStyles.disabledChecked : thumbStyles.disabledUnchecked),\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n inputStyles.input,\n disabled ? inputStyles.disabled : inputStyles.enabled,\n state.input.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": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.6",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"storybook": "start-storybook"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@fluentui/babel-make-styles": "9.0.0-alpha.
|
|
29
|
-
"@fluentui/eslint-plugin": "
|
|
30
|
-
"@fluentui/jest-serializer-make-styles": "9.0.0-alpha.
|
|
31
|
-
"@fluentui/react-conformance": "
|
|
32
|
-
"@fluentui/react-conformance-make-styles": "9.0.0-alpha.
|
|
33
|
-
"@fluentui/react-label": "9.0.0-alpha.
|
|
34
|
-
"@fluentui/react-provider": "9.0.0-alpha.
|
|
28
|
+
"@fluentui/babel-make-styles": "9.0.0-alpha.50",
|
|
29
|
+
"@fluentui/eslint-plugin": "*",
|
|
30
|
+
"@fluentui/jest-serializer-make-styles": "9.0.0-alpha.43",
|
|
31
|
+
"@fluentui/react-conformance": "*",
|
|
32
|
+
"@fluentui/react-conformance-make-styles": "9.0.0-alpha.12",
|
|
33
|
+
"@fluentui/react-label": "9.0.0-alpha.41",
|
|
34
|
+
"@fluentui/react-provider": "9.0.0-alpha.79",
|
|
35
35
|
"@fluentui/react-theme": "9.0.0-alpha.22",
|
|
36
36
|
"@fluentui/scripts": "^1.0.0",
|
|
37
37
|
"@types/enzyme": "3.10.3",
|
|
@@ -46,9 +46,9 @@
|
|
|
46
46
|
"react-test-renderer": "^16.3.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@fluentui/react-make-styles": "9.0.0-alpha.
|
|
49
|
+
"@fluentui/react-make-styles": "9.0.0-alpha.68",
|
|
50
50
|
"@fluentui/react-shared-contexts": "9.0.0-alpha.24",
|
|
51
|
-
"@fluentui/react-tabster": "9.0.0-alpha.
|
|
51
|
+
"@fluentui/react-tabster": "9.0.0-alpha.62",
|
|
52
52
|
"@fluentui/react-utilities": "9.0.0-alpha.49",
|
|
53
53
|
"tslib": "^2.1.0"
|
|
54
54
|
},
|