diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 00a47cdd798..6ea64b50dd5 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -46,33 +46,53 @@ ".spectrum-Switch-switch", ".spectrum-Switch-switch:after", ".spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input ~ .spectrum-Switch-label", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled + .spectrum-Switch-switch", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled ~ .spectrum-Switch-label", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled] + .spectrum-Switch-switch", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", + ".spectrum-Switch.is-hovered:not(:active, .is-active) .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", ".spectrum-Switch.spectrum-Switch--emphasized", ".spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before", ".spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label", ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label", - ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after", ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before", ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before", ".spectrum-Switch:hover .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input ~ .spectrum-Switch-label", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled + .spectrum-Switch-switch", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled ~ .spectrum-Switch-label", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled] + .spectrum-Switch-switch", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", + ".spectrum-Switch:hover:not(:active) .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before" ], "modifiers": [ diff --git a/components/switch/index.css b/components/switch/index.css index 763ad359ab8..fe7f11390e4 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -243,7 +243,8 @@ } } -.spectrum-Switch:hover { +.spectrum-Switch:hover:not(:active), +.spectrum-Switch.is-hovered:not(:active, .is-active) { .spectrum-Switch-input { & + .spectrum-Switch-switch { &::before { diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index 5286b307882..bf90b962d82 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types"; +import { isActive, isChecked, isDisabled, isEmphasized, isHovered, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { SwitchGroup } from "./switch.test.js"; @@ -14,6 +14,8 @@ export default { component: "Switch", argTypes: { size: size(["s", "m", "l", "xl"]), + isActive, + isHovered, isEmphasized, isDisabled, isChecked: { diff --git a/components/switch/stories/switch.test.js b/components/switch/stories/switch.test.js index a0fc4a33bc8..4dfbbbdf2d5 100644 --- a/components/switch/stories/switch.test.js +++ b/components/switch/stories/switch.test.js @@ -32,5 +32,19 @@ export const SwitchGroup = Variants({ isChecked: true, isDisabled: true, }, + { + testHeading: "Hovered", + isHovered: true, + }, + { + testHeading: "Checked and hovered", + isChecked: true, + isHovered: true, + }, + { + testHeading: "Checked and active", + isChecked: true, + isActive: true, + }, ] }); diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 5e67a3cc8b3..f72e9f5387d 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -14,6 +14,8 @@ export const Template = ({ rootClass = "spectrum-Switch", size = "m", label = "Switch label", + isActive = false, + isHovered = false, isDisabled = false, isChecked = false, isEmphasized = false, @@ -32,6 +34,8 @@ export const Template = ({ [`${rootClass}--emphasized`] : isEmphasized, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", + "is-active": isActive, + "is-hovered": isHovered, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)}