@fluentui/react-switch 9.0.12 → 9.0.13
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 +40 -1
- package/CHANGELOG.md +15 -2
- package/lib/components/Switch/useSwitchStyles.js +29 -29
- package/lib-commonjs/components/Switch/useSwitchStyles.js +29 -29
- package/package.json +5 -5
- package/MIGRATION.md +0 -91
- package/Spec.md +0 -229
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,46 @@
|
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 05 Dec 2022 18:25:28 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v9.0.13",
|
|
7
|
+
"version": "9.0.13",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "tristan.watanabe@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-switch",
|
|
13
|
+
"commit": "515f53fe2d85659868d85a6f56892010f0e1c6e6",
|
|
14
|
+
"comment": "chore: Migrate to new package structure."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-switch",
|
|
19
|
+
"comment": "Bump @fluentui/react-field to v9.0.0-alpha.10",
|
|
20
|
+
"commit": "4c29542a51bf068e171690cc8e59c14489883912"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-switch",
|
|
25
|
+
"comment": "Bump @fluentui/react-label to v9.0.12",
|
|
26
|
+
"commit": "4c29542a51bf068e171690cc8e59c14489883912"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-switch",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.2",
|
|
32
|
+
"commit": "4c29542a51bf068e171690cc8e59c14489883912"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-switch",
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.1.3",
|
|
38
|
+
"commit": "4c29542a51bf068e171690cc8e59c14489883912"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Thu, 17 Nov 2022 23:05:47 GMT",
|
|
6
45
|
"tag": "@fluentui/react-switch_v9.0.12",
|
|
7
46
|
"version": "9.0.12",
|
|
8
47
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 05 Dec 2022 18:25:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.13)
|
|
8
|
+
|
|
9
|
+
Mon, 05 Dec 2022 18:25:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.12..@fluentui/react-switch_v9.0.13)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Migrate to new package structure. ([PR #25819](https://github.com/microsoft/fluentui/pull/25819) by tristan.watanabe@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.0.0-alpha.10 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
|
|
16
|
+
- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.3.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.12)
|
|
8
21
|
|
|
9
|
-
Thu, 17 Nov 2022 23:
|
|
22
|
+
Thu, 17 Nov 2022 23:05:47 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.11..@fluentui/react-switch_v9.0.12)
|
|
11
24
|
|
|
12
25
|
### Patches
|
|
@@ -26,40 +26,40 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
26
26
|
"qhf8xq": "f10pi13n",
|
|
27
27
|
"Brovlpu": "ftqa4ok",
|
|
28
28
|
"B486eqv": "f2hkw1w",
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
29
|
+
"Bssx7fj": "f1b1k54r",
|
|
30
|
+
"uh7if5": ["f4ne723", "fqqcjud"],
|
|
31
|
+
"clntm0": "fh7aioi",
|
|
32
|
+
"Dlk2r6": ["fqqcjud", "f4ne723"],
|
|
33
|
+
"B2j2mmj": "ffht0p2",
|
|
34
|
+
"wigs8": "f1p0ul1q",
|
|
35
|
+
"pbfy6t": "f1c901ms",
|
|
36
|
+
"B0v4ure": "f1alokd7",
|
|
37
|
+
"ghq09": "f78i1la",
|
|
38
|
+
"B24cy0v": ["f1kvsw7t", "f1bw8brt"],
|
|
39
|
+
"Bwckmig": "f8k7e5g",
|
|
40
|
+
"Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
|
|
41
|
+
"Bbgo44z": "f1pmxfrl",
|
|
42
|
+
"Bil7v7r": ["fszkfcr", "f1ap5ily"],
|
|
43
|
+
"skfxo0": "f57dp0y",
|
|
44
|
+
"jo1ztg": ["f1ap5ily", "fszkfcr"],
|
|
45
|
+
"Ba3ybja": ["f11dm2qb", "f136rfnd"],
|
|
46
|
+
"az1dzo": ["f136rfnd", "f11dm2qb"],
|
|
47
|
+
"vppk2z": ["fdsq1qd", "f1khssms"],
|
|
48
|
+
"B6352mv": ["f1khssms", "fdsq1qd"],
|
|
49
|
+
"nr063g": "fq4eyks",
|
|
50
|
+
"Blmvk6g": ["f1ya6x16", "ftuszwa"],
|
|
51
|
+
"Bsiemmq": "f1e2iu44",
|
|
52
|
+
"B98u21t": ["ftuszwa", "f1ya6x16"],
|
|
53
|
+
"B2pnrqr": "f1xkdug0",
|
|
54
|
+
"Bhhzhcn": "f1m1ywml",
|
|
55
|
+
"Bec0n69": ["f7u4kgv", "f1a36mvi"],
|
|
56
|
+
"B29w5g4": ["f1a36mvi", "f7u4kgv"]
|
|
57
57
|
},
|
|
58
58
|
"vertical": {
|
|
59
59
|
"Beiy3e4": "f1vx9l62"
|
|
60
60
|
}
|
|
61
61
|
}, {
|
|
62
|
-
"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;}", ".f10pi13n{position:relative;}", ".
|
|
62
|
+
"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;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
|
|
63
63
|
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
64
64
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
65
65
|
});
|
|
@@ -36,40 +36,40 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
36
36
|
"qhf8xq": "f10pi13n",
|
|
37
37
|
"Brovlpu": "ftqa4ok",
|
|
38
38
|
"B486eqv": "f2hkw1w",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
39
|
+
"Bssx7fj": "f1b1k54r",
|
|
40
|
+
"uh7if5": ["f4ne723", "fqqcjud"],
|
|
41
|
+
"clntm0": "fh7aioi",
|
|
42
|
+
"Dlk2r6": ["fqqcjud", "f4ne723"],
|
|
43
|
+
"B2j2mmj": "ffht0p2",
|
|
44
|
+
"wigs8": "f1p0ul1q",
|
|
45
|
+
"pbfy6t": "f1c901ms",
|
|
46
|
+
"B0v4ure": "f1alokd7",
|
|
47
|
+
"ghq09": "f78i1la",
|
|
48
|
+
"B24cy0v": ["f1kvsw7t", "f1bw8brt"],
|
|
49
|
+
"Bwckmig": "f8k7e5g",
|
|
50
|
+
"Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
|
|
51
|
+
"Bbgo44z": "f1pmxfrl",
|
|
52
|
+
"Bil7v7r": ["fszkfcr", "f1ap5ily"],
|
|
53
|
+
"skfxo0": "f57dp0y",
|
|
54
|
+
"jo1ztg": ["f1ap5ily", "fszkfcr"],
|
|
55
|
+
"Ba3ybja": ["f11dm2qb", "f136rfnd"],
|
|
56
|
+
"az1dzo": ["f136rfnd", "f11dm2qb"],
|
|
57
|
+
"vppk2z": ["fdsq1qd", "f1khssms"],
|
|
58
|
+
"B6352mv": ["f1khssms", "fdsq1qd"],
|
|
59
|
+
"nr063g": "fq4eyks",
|
|
60
|
+
"Blmvk6g": ["f1ya6x16", "ftuszwa"],
|
|
61
|
+
"Bsiemmq": "f1e2iu44",
|
|
62
|
+
"B98u21t": ["ftuszwa", "f1ya6x16"],
|
|
63
|
+
"B2pnrqr": "f1xkdug0",
|
|
64
|
+
"Bhhzhcn": "f1m1ywml",
|
|
65
|
+
"Bec0n69": ["f7u4kgv", "f1a36mvi"],
|
|
66
|
+
"B29w5g4": ["f1a36mvi", "f7u4kgv"]
|
|
67
67
|
},
|
|
68
68
|
"vertical": {
|
|
69
69
|
"Beiy3e4": "f1vx9l62"
|
|
70
70
|
}
|
|
71
71
|
}, {
|
|
72
|
-
"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;}", ".f10pi13n{position:relative;}", ".
|
|
72
|
+
"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;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
|
|
73
73
|
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
74
74
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
75
75
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.13",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-field": "9.0.0-alpha.
|
|
34
|
+
"@fluentui/react-field": "9.0.0-alpha.10",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "^9.0.
|
|
37
|
-
"@fluentui/react-tabster": "^9.3.
|
|
38
|
-
"@fluentui/react-theme": "^9.1.
|
|
36
|
+
"@fluentui/react-label": "^9.0.12",
|
|
37
|
+
"@fluentui/react-tabster": "^9.3.2",
|
|
38
|
+
"@fluentui/react-theme": "^9.1.3",
|
|
39
39
|
"@fluentui/react-utilities": "^9.2.2",
|
|
40
40
|
"@griffel/react": "^1.4.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
package/MIGRATION.md
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
# Switch Migration
|
|
2
|
-
|
|
3
|
-
## Migration from v8's Toggle
|
|
4
|
-
|
|
5
|
-
### Props that remain as is
|
|
6
|
-
|
|
7
|
-
- `checked`
|
|
8
|
-
- `defaultChecked`
|
|
9
|
-
|
|
10
|
-
### Props that have the same name but have a different implementation
|
|
11
|
-
|
|
12
|
-
- `as` - Uses new pattern for `as` introduced in v9
|
|
13
|
-
- `label` - Now implemented as a v9 slot
|
|
14
|
-
- `onChange` - Has a slightly different API with our new event data handling pattern
|
|
15
|
-
|
|
16
|
-
### Props removed because we can get them from HTML props
|
|
17
|
-
|
|
18
|
-
- `ariaLabel` => Getting it as `aria-label` instead
|
|
19
|
-
- `disabled`
|
|
20
|
-
- `role`
|
|
21
|
-
|
|
22
|
-
### Props no longer supported with an equivalent funtionality in v9's Switch
|
|
23
|
-
|
|
24
|
-
- `as`
|
|
25
|
-
- `componentRef` => Use regular `ref` instead
|
|
26
|
-
- `inlineLabel` => Use `labelPosition` instead
|
|
27
|
-
- `styles` => Use new styling system via `tokens` instead
|
|
28
|
-
|
|
29
|
-
### Props no longer supported without an equivalent functionality in v9's Switch
|
|
30
|
-
|
|
31
|
-
- `offText`
|
|
32
|
-
- `onText`
|
|
33
|
-
- `theme`
|
|
34
|
-
|
|
35
|
-
## Migration from v0's Checkbox
|
|
36
|
-
|
|
37
|
-
### Props that remain as is
|
|
38
|
-
|
|
39
|
-
- `checked`
|
|
40
|
-
- `defaultChecked`
|
|
41
|
-
- `labelPosition`
|
|
42
|
-
|
|
43
|
-
### Props that have the same name but have a different implementation
|
|
44
|
-
|
|
45
|
-
- `as` - Uses new pattern for `as` introduced in v9
|
|
46
|
-
- `indicator` => Now implemented as a v9 slot
|
|
47
|
-
- `label` - Now implemented as a v9 slot
|
|
48
|
-
- `onChange` - Has a slightly different API with our new event data handling pattern
|
|
49
|
-
|
|
50
|
-
### Props removed because we can get them from HTML props
|
|
51
|
-
|
|
52
|
-
- `className`
|
|
53
|
-
- `disabled`
|
|
54
|
-
- `onClick`
|
|
55
|
-
|
|
56
|
-
### Props no longer supported with an equivalent functionality in v9's Switch
|
|
57
|
-
|
|
58
|
-
- `accessibility` => Override accessibility behavior by composing the `Switch` however you want
|
|
59
|
-
- `styles` => Use new styling system via `tokens` instead
|
|
60
|
-
- `toggle` => Default behavior for `Switch` in v9
|
|
61
|
-
- `variables` => Use new styling system via `tokens` instead
|
|
62
|
-
|
|
63
|
-
### Props no longer supported without an equivalent functionality in v9's Switch
|
|
64
|
-
|
|
65
|
-
- `design`
|
|
66
|
-
|
|
67
|
-
## Property mapping
|
|
68
|
-
|
|
69
|
-
| v8 `Toggle` | v0 `Checkbox` | v9 `Switch` |
|
|
70
|
-
| ---------------- | --------------- | ---------------- |
|
|
71
|
-
| | `accessibility` | |
|
|
72
|
-
| `arialabel` | `aria-label` | `aria-label` |
|
|
73
|
-
| `as` | `as` | `as` |
|
|
74
|
-
| `checked` | `checked` | `checked` |
|
|
75
|
-
| `className` | `className` | `className` |
|
|
76
|
-
| `componentRef` | | `ref` |
|
|
77
|
-
| `defaultChecked` | | |
|
|
78
|
-
| | `design` | |
|
|
79
|
-
| `disabled` | `disabled` | `disabled` |
|
|
80
|
-
| | `indicator` | `indicator` |
|
|
81
|
-
| `inlineLabel` | `labelPosition` | `labelPosition` |
|
|
82
|
-
| `label` | `label` | `label` |
|
|
83
|
-
| `offText` | | |
|
|
84
|
-
| `onChange` | `onChange` | `onChange` |
|
|
85
|
-
| `onClick` | `onClick` | `onClick` |
|
|
86
|
-
| `onText` | | |
|
|
87
|
-
| `role` | | `role` |
|
|
88
|
-
| `styles` | `styles` | |
|
|
89
|
-
| `theme` | | |
|
|
90
|
-
| Default behavior | `toggle` | Default behavior |
|
|
91
|
-
| | `variables` | |
|
package/Spec.md
DELETED
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-switch Spec
|
|
2
|
-
|
|
3
|
-
**GitHub Epic issue** - [Switch Convergence #19409](https://github.com/microsoft/fluentui/issues/19409)
|
|
4
|
-
|
|
5
|
-
## Background
|
|
6
|
-
|
|
7
|
-
Previously called `Toggle` in v8 and `Checkbox` in v0, the `Switch` component introduces a quick way of switching between on/off states by clicking/tapping the thumb.
|
|
8
|
-
|
|
9
|
-
## Prior Art
|
|
10
|
-
|
|
11
|
-
### Open UI
|
|
12
|
-
|
|
13
|
-
The Open UI [Switch Research](https://open-ui.org/components/switch) page shows that the component is used in UI platforms across the web, with the `Switch` moniker being the most prominently used across major component libraries.
|
|
14
|
-
|
|
15
|
-
### Comparison of v8 and v0
|
|
16
|
-
|
|
17
|
-
The existing components are:
|
|
18
|
-
|
|
19
|
-
- v8 - [Toggle](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
|
|
20
|
-
- v0 - [Checkbox](https://fluentsite.z22.web.core.windows.net/0.52.2/components/checkbox/definition)
|
|
21
|
-
|
|
22
|
-
### [Toggle in v8/Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle)
|
|
23
|
-
|
|
24
|
-
The v8 `Toggle` component
|
|
25
|
-
|
|
26
|
-
supports both `indeterminate` and `checked` states. In this case, an input tag is used and its opacity is set to 0. This allows for the logic to be performed by the native element while a div is rendered to show the styled checkbox.
|
|
27
|
-
|
|
28
|
-
Example
|
|
29
|
-
|
|
30
|
-
```tsx
|
|
31
|
-
<Checkbox
|
|
32
|
-
label="Indeterminate checkbox (controlled)"
|
|
33
|
-
indeterminate={isIndeterminate}
|
|
34
|
-
checked={isChecked}
|
|
35
|
-
onChange={onChange}
|
|
36
|
-
/>
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Component props:
|
|
40
|
-
|
|
41
|
-
| Prop | Description |
|
|
42
|
-
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
43
|
-
| `ariaLabel` | Text for screen-reader to announce as the name of the toggle. |
|
|
44
|
-
| `as` | Render the root element as another type. |
|
|
45
|
-
| `checked` | Checked state of the toggle. If you are maintaining state yourself, use this property. Otherwise use `defaultChecked`. |
|
|
46
|
-
| `componentRef` | Optional callback to access the IToggle interface. Use this instead of ref for accessing the public methods and properties of the component. |
|
|
47
|
-
| `defaultChecked` | Initial state of the toggle. If you want the toggle to maintain its own state, use this. Otherwise use `checked`. |
|
|
48
|
-
| `disabled` | Optional disabled flag. |
|
|
49
|
-
| `inlineLabel` | Whether the label (not the onText/offText) should bbe positioned inline with the toggle control. |
|
|
50
|
-
| `label` | A label for the toggle. |
|
|
51
|
-
| `offText` | Text to display when toggle is OFF. |
|
|
52
|
-
| `onChange` | Callback issued when the value changes. |
|
|
53
|
-
| `onText` | Text to display when toggle is ON. |
|
|
54
|
-
| `role` | Whether to use the 'switch' role (ARIA 1.1) or the 'checkbox' role (ARIA 1.0). |
|
|
55
|
-
| `styles` | Optional styles for the component. |
|
|
56
|
-
| `theme` | Theme provided by HOC. |
|
|
57
|
-
|
|
58
|
-
### [Checkbox in v0/Northstar](https://fluentsite.z22.web.core.windows.net/0.56.0/components/checkbox/definition)
|
|
59
|
-
|
|
60
|
-
The v0 `Checkbox` component
|
|
61
|
-
|
|
62
|
-
supports a mixed state, which is the same as indeterminate in v8. It is rendered as a `div` with `role="checkbox"` and does not use the native input element.
|
|
63
|
-
|
|
64
|
-
```tsx
|
|
65
|
-
// string
|
|
66
|
-
<Checkbox label="Make my profile visible" />
|
|
67
|
-
|
|
68
|
-
// jsx
|
|
69
|
-
<Checkbox
|
|
70
|
-
label={
|
|
71
|
-
<span>
|
|
72
|
-
Long labels will wrap and the indicator <br /> should remain top-aligned.
|
|
73
|
-
</span>
|
|
74
|
-
}
|
|
75
|
-
/>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Component props:
|
|
79
|
-
|
|
80
|
-
| Prop | Description |
|
|
81
|
-
| ---------------- | ------------------------------------------------------------------ |
|
|
82
|
-
| `accessibility` | Accessibility behavior if overridden by the user. |
|
|
83
|
-
| `as` | Render as given string or component. |
|
|
84
|
-
| `checked` | Checkbox's checked state. |
|
|
85
|
-
| `className` | Additional styles. |
|
|
86
|
-
| `defaultChecked` | Whether the checkbox should be set to checked by default. |
|
|
87
|
-
| `design` | ... |
|
|
88
|
-
| `disabled` | Whether the checkbox is disabled or not. |
|
|
89
|
-
| `indicator` | Checkbox's icon indicator. |
|
|
90
|
-
| `label` | Label text or jsx to be rendered in the label. |
|
|
91
|
-
| `labelPosition` | Whether the label is rendered on left or right (`start` or `end`). |
|
|
92
|
-
| `onChange` | Event handler to be called after checked state has changed. |
|
|
93
|
-
| `onClick` | Event handler to be called after the checkbox is clicked. |
|
|
94
|
-
| `styles` | Additional styles. |
|
|
95
|
-
| `toggle` | Render a toggle style checkbox with on and off choices. |
|
|
96
|
-
| `variables` | Additional styles. |
|
|
97
|
-
|
|
98
|
-
## Sample Code
|
|
99
|
-
|
|
100
|
-
```tsx
|
|
101
|
-
<Switch checked />
|
|
102
|
-
<Switch checked disabled/>
|
|
103
|
-
<Switch checked onChange={onChange}/>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
https://github.com/microsoft/fluentui/blob/master/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts
|
|
107
|
-
|
|
108
|
-
## API
|
|
109
|
-
|
|
110
|
-
### Switch Props
|
|
111
|
-
|
|
112
|
-
See API at [Switch.types.ts](./src/components/Switch/Switch.types.ts).
|
|
113
|
-
|
|
114
|
-
## Structure
|
|
115
|
-
|
|
116
|
-
### Slots
|
|
117
|
-
|
|
118
|
-
- `root` - The outer `<div>` wrapping the `indicator`, `input` and `label` to provide the correct layout styling.
|
|
119
|
-
- `indicator` - The track and the thumb sliding over it indicating the on and off status of the Switch.
|
|
120
|
-
- `input` - The visually hidden `<input type="checkbox">` that handles the `Switch`'s functionality. This is the **primary** slot: it receives all of the native props passed to the `Switch` component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
|
|
121
|
-
- `label` - (optional) The `<label>` describing this `Switch`.
|
|
122
|
-
|
|
123
|
-
### Public
|
|
124
|
-
|
|
125
|
-
```tsx
|
|
126
|
-
<Switch checked={true} />
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Internal
|
|
130
|
-
|
|
131
|
-
```tsx
|
|
132
|
-
<slots.root {...slotProps.root}>
|
|
133
|
-
<slots.input {...slotProps.input} />
|
|
134
|
-
{labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}
|
|
135
|
-
<slots.indicator {...slotProps.indicator} />
|
|
136
|
-
{labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}
|
|
137
|
-
</slots.root>
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
### DOM
|
|
141
|
-
|
|
142
|
-
_With label before the track thumb indicator:_
|
|
143
|
-
|
|
144
|
-
```tsx
|
|
145
|
-
<div class="fui-Switch">
|
|
146
|
-
<input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
|
|
147
|
-
<label class="fui-Switch__label" for="switch-1" />
|
|
148
|
-
<div aria-hidden="true" class="fui-Switch__indicator">
|
|
149
|
-
<CircleFilled />
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
_With label after the track thumb indicator:_
|
|
155
|
-
|
|
156
|
-
```tsx
|
|
157
|
-
<div class="fui-Switch">
|
|
158
|
-
<input class="fui-Switch__input" id="switch-1" role="switch" type="checkbox" />
|
|
159
|
-
<div aria-hidden="true" class="fui-Switch__indicator">
|
|
160
|
-
<CircleFilled />
|
|
161
|
-
</div>
|
|
162
|
-
<label class="fui-Switch__label" for="switch-1" />
|
|
163
|
-
</div>
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
## Migration
|
|
167
|
-
|
|
168
|
-
See [MIGRATION.md](./MIGRATION.md).
|
|
169
|
-
|
|
170
|
-
## Behaviors
|
|
171
|
-
|
|
172
|
-
### States
|
|
173
|
-
|
|
174
|
-
The following section describes the different states in which a `Switch` can be throughout the course of interaction with it.
|
|
175
|
-
|
|
176
|
-
#### Enabled state
|
|
177
|
-
|
|
178
|
-
An enabled `Switch` communicates interaction by having styling that invites the user to click/tap on it to toggle between on/off states.
|
|
179
|
-
|
|
180
|
-
#### Disabled state
|
|
181
|
-
|
|
182
|
-
A disabled `Switch` is non-interactive, ignoring all events and never updating its value. It does not allow focus and changes its styling to indicates this lack of interaction.
|
|
183
|
-
|
|
184
|
-
#### Hovered state
|
|
185
|
-
|
|
186
|
-
A hovered `Switch` changes styling to communicate that the user has placed a cursor above it.
|
|
187
|
-
|
|
188
|
-
#### Pressed state
|
|
189
|
-
|
|
190
|
-
A pressed `Switch` changes styling to communicate that the user is currently pressing it.
|
|
191
|
-
|
|
192
|
-
#### Unchecked state
|
|
193
|
-
|
|
194
|
-
An unchecked `Switch` has the thumb on the left (right in RTL) and styling to indicate that it is off.
|
|
195
|
-
|
|
196
|
-
#### Checked state
|
|
197
|
-
|
|
198
|
-
A checked `Switch` has the thumb on the right (left in RTL) and styling to indicate that it is on.
|
|
199
|
-
|
|
200
|
-
### Interaction
|
|
201
|
-
|
|
202
|
-
### Keyboard interaction
|
|
203
|
-
|
|
204
|
-
The following is a set of keys that interact with the `Switch` component:
|
|
205
|
-
|
|
206
|
-
| Key | Description |
|
|
207
|
-
| ------- | ------------------------------- |
|
|
208
|
-
| `Space` | Switches between on/off states. |
|
|
209
|
-
|
|
210
|
-
### Cursor interaction
|
|
211
|
-
|
|
212
|
-
- `click`: Triggers a toggle between on and off values. The thumb animates from left to right [off > on] and right to left [on > off] to reflect this change (the directions are reversed in RTL).
|
|
213
|
-
|
|
214
|
-
### Touch interaction
|
|
215
|
-
|
|
216
|
-
The same behavior as above is traslated for touch events.
|
|
217
|
-
|
|
218
|
-
## Accessibility
|
|
219
|
-
|
|
220
|
-
### Relevant documents
|
|
221
|
-
|
|
222
|
-
- [WAI-ARIA 1.1 Spec](https://www.w3.org/TR/wai-aria-1.1/#switch)
|
|
223
|
-
- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/#switch)
|
|
224
|
-
- [WAI-ARIA 1.2 Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#switch)
|
|
225
|
-
|
|
226
|
-
### Expected behavior
|
|
227
|
-
|
|
228
|
-
- Switch uses a standard HTML `<input type="checkbox">` with `role="switch"` set and does not require any additional handling for aria on the input element.
|
|
229
|
-
- The track and thumb indicator has `aria-hidden="true"` as it is a purely visual representation of the state of the underlying input.
|