@fluentui/react-switch 0.0.0-nightly-20220310-0418.1 → 0.0.0-nightly-20220315-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 +14 -14
- package/CHANGELOG.md +10 -10
- package/lib/components/Switch/useSwitchStyles.js +21 -7
- package/lib/components/Switch/useSwitchStyles.js.map +1 -1
- package/lib-commonjs/components/Switch/useSwitchStyles.js +21 -7
- package/lib-commonjs/components/Switch/useSwitchStyles.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,46 +2,46 @@
|
|
|
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, 15 Mar 2022 04:28:24 GMT",
|
|
6
|
+
"tag": "@fluentui/react-switch_v0.0.0-nightly-20220315-0418.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220315-0418.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
11
|
"author": "email not defined",
|
|
12
12
|
"package": "@fluentui/react-switch",
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "not available",
|
|
14
14
|
"comment": "Release nightly v9"
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-switch",
|
|
19
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20220315-0418.1",
|
|
20
|
+
"commit": "9291b58a0772db7887ec0137edbcb40ced11bfda"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-switch",
|
|
25
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220315-0418.1",
|
|
26
|
+
"commit": "9291b58a0772db7887ec0137edbcb40ced11bfda"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-switch",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220315-0418.1",
|
|
32
|
+
"commit": "9291b58a0772db7887ec0137edbcb40ced11bfda"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-switch",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220315-0418.1",
|
|
38
|
+
"commit": "9291b58a0772db7887ec0137edbcb40ced11bfda"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-switch",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220315-0418.1",
|
|
44
|
+
"commit": "9291b58a0772db7887ec0137edbcb40ced11bfda"
|
|
45
45
|
}
|
|
46
46
|
],
|
|
47
47
|
"none": [
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-switch
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 15 Mar 2022 04:28:24 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-20220315-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v0.0.0-nightly-20220315-0418.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.5..@fluentui/react-switch_v0.0.0-nightly-
|
|
9
|
+
Tue, 15 Mar 2022 04:28:24 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-switch_v9.0.0-rc.5..@fluentui/react-switch_v0.0.0-nightly-20220315-0418.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/
|
|
15
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
|
|
15
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20220315-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/9291b58a0772db7887ec0137edbcb40ced11bfda) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20220315-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/9291b58a0772db7887ec0137edbcb40ced11bfda) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20220315-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/9291b58a0772db7887ec0137edbcb40ced11bfda) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220315-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/9291b58a0772db7887ec0137edbcb40ced11bfda) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220315-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/9291b58a0772db7887ec0137edbcb40ced11bfda) by beachball)
|
|
20
20
|
|
|
21
21
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-switch_v9.0.0-rc.5)
|
|
22
22
|
|
|
@@ -30,16 +30,30 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
30
30
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
31
31
|
"qhf8xq": "f10pi13n",
|
|
32
32
|
"B486eqv": "f2hkw1w",
|
|
33
|
-
"
|
|
33
|
+
"vchsgm": "fbiesyy",
|
|
34
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
35
|
+
"B7lelfh": "f1il7mou",
|
|
36
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
34
37
|
"B8vm7ur": "f12sql3b",
|
|
35
38
|
"f4hv8x": "f1i4q40k",
|
|
36
39
|
"Gpan81": "fcrbge9",
|
|
37
|
-
"z7afg": "ft464mn",
|
|
38
40
|
"rsjj6t": "fskqmiq",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
41
|
+
"E86f5s": "f1kbdjx9",
|
|
42
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
43
|
+
"Bhtq6h7": "f14hlsw1",
|
|
44
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
45
|
+
"dzajus": "f1bkt4b4",
|
|
46
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
47
|
+
"Byq6oy9": "fyyqeim",
|
|
48
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
49
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
50
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
51
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
52
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
53
|
+
"epcuuz": "filx0we",
|
|
54
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
55
|
+
"va7z1g": "fkii2tb",
|
|
56
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
43
57
|
"Bjkpy09": "f1unftzx",
|
|
44
58
|
"Jxg1p8": "f8rjbh6",
|
|
45
59
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
@@ -61,7 +75,7 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
61
75
|
"Beiy3e4": "f1063pyq"
|
|
62
76
|
}
|
|
63
77
|
}, {
|
|
64
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .
|
|
78
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".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;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
|
|
65
79
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
66
80
|
});
|
|
67
81
|
|
|
@@ -1 +1 @@
|
|
|
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// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\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 boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\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\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
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// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\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 boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\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\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -40,16 +40,30 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
40
40
|
"uwmqm3": ["f177v4lu", "f19lj068"],
|
|
41
41
|
"qhf8xq": "f10pi13n",
|
|
42
42
|
"B486eqv": "f2hkw1w",
|
|
43
|
-
"
|
|
43
|
+
"vchsgm": "fbiesyy",
|
|
44
|
+
"ozrjjd": ["fq2kn9", "f1jxwnad"],
|
|
45
|
+
"B7lelfh": "f1il7mou",
|
|
46
|
+
"Bp3tz3o": ["f1jxwnad", "fq2kn9"],
|
|
44
47
|
"B8vm7ur": "f12sql3b",
|
|
45
48
|
"f4hv8x": "f1i4q40k",
|
|
46
49
|
"Gpan81": "fcrbge9",
|
|
47
|
-
"z7afg": "ft464mn",
|
|
48
50
|
"rsjj6t": "fskqmiq",
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"E86f5s": "f1kbdjx9",
|
|
52
|
+
"f5nhos": ["fw1d893", "fpuz8dn"],
|
|
53
|
+
"Bhtq6h7": "f14hlsw1",
|
|
54
|
+
"Bubk9yy": ["fpuz8dn", "fw1d893"],
|
|
55
|
+
"dzajus": "f1bkt4b4",
|
|
56
|
+
"B8gmrwi": ["f16hf5f2", "f1qhqcal"],
|
|
57
|
+
"Byq6oy9": "fyyqeim",
|
|
58
|
+
"Bdy2j38": ["f1qhqcal", "f16hf5f2"],
|
|
59
|
+
"Bi8bqab": ["f1aneyfs", "f15nmyc0"],
|
|
60
|
+
"kq6z4e": ["f15nmyc0", "f1aneyfs"],
|
|
61
|
+
"l5tc3q": ["f3cpy5b", "f13v6kgv"],
|
|
62
|
+
"d1z3ck": ["f13v6kgv", "f3cpy5b"],
|
|
63
|
+
"epcuuz": "filx0we",
|
|
64
|
+
"Ba33l6n": ["f1horip2", "fgnx9ah"],
|
|
65
|
+
"va7z1g": "fkii2tb",
|
|
66
|
+
"Bmi6mq9": ["fgnx9ah", "f1horip2"],
|
|
53
67
|
"Bjkpy09": "f1unftzx",
|
|
54
68
|
"Jxg1p8": "f8rjbh6",
|
|
55
69
|
"Bc94xmo": ["fxfgh6q", "f8l10fm"],
|
|
@@ -71,7 +85,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
|
71
85
|
"Beiy3e4": "f1063pyq"
|
|
72
86
|
}
|
|
73
87
|
}, {
|
|
74
|
-
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f10pi13n{position:relative;}", "[data-keyboard-nav] .
|
|
88
|
+
"d": [".f1ewtqcl{box-sizing:border-box;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".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;}", ".f10ra9hq{padding-top:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}"],
|
|
75
89
|
"i": [".f2hkw1w:focus-visible{outline-style:none;}"]
|
|
76
90
|
});
|
|
77
91
|
|
|
@@ -1 +1 @@
|
|
|
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// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\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 boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\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\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
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// TODO temporary export to pass conformance test.\nexport const switchClassName = switchClassNames.root;\n\n// TODO replace these spacing constants with theme values once they're on the theme.\nconst spacingXS = 4;\nconst spacingS = 8;\nconst spacingM = 12;\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 boxSizing: 'border-box',\n columnGap: `${spacingM}px`,\n display: 'inline-flex',\n ...shorthands.padding(`${spacingS}px`),\n position: 'relative',\n\n ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n },\n\n // Label position variations\n above: {\n flexDirection: 'column',\n paddingTop: `${spacingXS}px`,\n rowGap: `${spacingXS}px`,\n },\n after: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\n },\n before: {\n alignItems: 'flex-start',\n columnGap: `${spacingM}px`,\n flexDirection: 'row',\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\nconst useLabelStyles = makeStyles({\n base: {\n userSelect: 'none',\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 rootStyles[labelPosition],\n state.root.className,\n );\n\n state.indicator.className = mergeClasses(switchClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n state.input.className = mergeClasses(switchClassNames.input, inputStyles.base, state.input.className);\n\n if (state.label) {\n state.label.className = mergeClasses(switchClassNames.label, labelStyles.base, state.label.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-switch",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220315-0418.1",
|
|
4
4
|
"description": "Fluent UI React Switch component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,15 +28,15 @@
|
|
|
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-20220315-0418.1",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@fluentui/react-icons": "^2.0.159-beta.10",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20220315-0418.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20220315-0418.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220315-0418.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220315-0418.1",
|
|
40
40
|
"@griffel/react": "1.0.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|