fix: move hover/focus hoisting into conditioning

adobe · Mar 21, 2023 · 15ac2f7 · 15ac2f7
1 parent 7f66346
commit 15ac2f7
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 48 deletions.
diff --git a/packages/checkbox/src/spectrum-checkbox.css b/packages/checkbox/src/spectrum-checkbox.css
@@ -409,7 +409,7 @@ governing permissions and limitations under the License.
     );
 }
 :host([emphasized][invalid][invalid]:hover) #input:checked + #box:before,
-:host([emphasized][invalid][invalid]:hover[indeterminate]) #box:before {
+:host([emphasized][invalid][invalid][indeterminate]:hover) #box:before {
     border-color: var(
         --highcontrast-checkbox-color-hover,
         var(
@@ -419,7 +419,7 @@ governing permissions and limitations under the License.
     );
 }
 :host([emphasized]:hover) #input:checked + #box:before,
-:host([emphasized]:hover[indeterminate]) #box:before {
+:host([emphasized][indeterminate]:hover) #box:before {
     border-color: var(
         --highcontrast-checkbox-highlight-color-hover,
         var(

diff --git a/packages/dropzone/src/spectrum-dropzone.css b/packages/dropzone/src/spectrum-dropzone.css
@@ -34,10 +34,10 @@ governing permissions and limitations under the License.
     border-style: dashed;
     outline: 0;
 }
-:host(:focus.focus-visible) {
+:host(.focus-visible:focus) {
     border-style: solid;
 }
-:host(:focus:focus-visible) {
+:host(:focus-visible:focus) {
     border-style: solid;
 }
 :host {
@@ -71,21 +71,21 @@ governing permissions and limitations under the License.
         rgb(var(--spectrum-global-color-static-gray-500-rgb))
     );
 }
-:host(:focus.focus-visible) {
+:host(.focus-visible:focus) {
     border-color: var(
         --spectrum-dropzone-border-color-selected-hover,
         var(--spectrum-global-color-blue-400)
     );
 }
-:host(:focus:focus-visible) {
+:host(:focus-visible:focus) {
     border-color: var(
         --spectrum-dropzone-border-color-selected-hover,
         var(--spectrum-global-color-blue-400)
     );
 }
-:host(:focus[dragged].focus-visible) ::slotted(*) {
+:host([dragged].focus-visible:focus) ::slotted(*) {
     color: var(--spectrum-global-color-blue-400);
 }
-:host(:focus[dragged]:focus-visible) ::slotted(*) {
+:host([dragged]:focus-visible:focus) ::slotted(*) {
     color: var(--spectrum-global-color-blue-400);
 }
diff --git a/packages/number-field/src/spectrum-config.v2.js b/packages/number-field/src/spectrum-config.v2.js
@@ -30,6 +30,50 @@ const config = {
             fileName: 'number-field',
             hoistCustomPropertiesFrom: 'spectrum-Stepper',
             components: [
+                {
+                    find: builder.pseudoClass('hover'),
+                    replace: builder.pseudoClass('hover'),
+                    hoist: true,
+                },
+                {
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.class('is-focused')]],
+                    },
+                    replace: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.attribute('focused')]],
+                    },
+                    hoist: true,
+                },
+                {
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.class('is-disabled')]],
+                    },
+                    replace: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.attribute('disabled')]],
+                    },
+                    hoist: true,
+                },
+                {
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.class('is-invalid')]],
+                    },
+                    replace: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.attribute('invalid')]],
+                    },
+                    hoist: true,
+                },
                 {
                     exactSelector: true,
                     find: [builder.class('spectrum-Stepper--quiet')],

diff --git a/packages/number-field/src/spectrum-number-field.css b/packages/number-field/src/spectrum-number-field.css
@@ -249,14 +249,14 @@ governing permissions and limitations under the License.
     position: absolute;
     width: var(--spectrum-stepper-button-offset);
 }
-:host(:hover)
-    #textfield:not(.is-disabled):not(.is-invalid):not(.is-focused):not(.is-keyboardFocused)
+:host(:hover:not([disabled]):not([invalid]):not([focused]))
+    #textfield:not(.is-keyboardFocused)
     .input,
-:host(:hover)
-    #textfield:not(.is-disabled):not(.is-invalid):not(.is-focused):not(.is-keyboardFocused)
+:host(:hover:not([disabled]):not([invalid]):not([focused]))
+    #textfield:not(.is-keyboardFocused)
     .stepDown,
-:host(:hover)
-    #textfield:not(.is-disabled):not(.is-invalid):not(.is-focused):not(.is-keyboardFocused)
+:host(:hover:not([disabled]):not([invalid]):not([focused]))
+    #textfield:not(.is-keyboardFocused)
     .stepUp {
     border-color: var(
         --spectrum-textfield-m-texticon-border-color-hover,

diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
@@ -181,7 +181,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input + #button:before {
+:host([checked]:hover) #input + #button:before {
     border-color: var(
         --highcontrast-radio-button-checked-border-color-hover,
         var(
@@ -257,7 +257,7 @@ governing permissions and limitations under the License.
             var(--spectrum-radio-focus-indicator-gap) * 2
     );
 }
-:host(:focus[checked]) #input + #button:before {
+:host([checked]:focus) #input + #button:before {
     border-color: var(
         --highcontrast-radio-button-checked-border-color-focus,
         var(
@@ -310,7 +310,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([emphasized]:hover[checked]) #input + #button:before {
+:host([emphasized][checked]:hover) #input + #button:before {
     border-color: var(
         --highcontrast-radio-emphasized-accent-color-hover,
         var(
@@ -328,7 +328,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([emphasized]:focus[checked]) #input + #button:before {
+:host([emphasized][checked]:focus) #input + #button:before {
     border-color: var(
         --highcontrast-radio-emphasized-accent-color-focus,
         var(

diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css
@@ -386,7 +386,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input:enabled + #switch {
+:host([checked]:hover) #input:enabled + #switch {
     background-color: var(
         --highcontrast-switch-background-color-selected-hover,
         var(
@@ -395,7 +395,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input:enabled + #switch:before {
+:host([checked]:hover) #input:enabled + #switch:before {
     border-color: var(
         --highcontrast-switch-handle-border-color-selected-hover,
         var(
@@ -404,7 +404,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled]) #input + #switch {
+:host([disabled]:hover) #input + #switch {
     background-color: var(
         --highcontrast-switch-background-color-disabled,
         var(
@@ -413,7 +413,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled]) #input + #switch:before {
+:host([disabled]:hover) #input + #switch:before {
     border-color: var(
         --highcontrast-switch-handle-border-color-disabled,
         var(
@@ -422,7 +422,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled]) #input ~ #label {
+:host([disabled]:hover) #input ~ #label {
     color: var(
         --highcontrast-switch-label-color-disabled,
         var(
@@ -431,7 +431,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled][checked]) #input + #switch {
+:host([disabled][checked]:hover) #input + #switch {
     background-color: var(
         --highcontrast-switch-background-color-selected-disabled,
         var(
@@ -440,7 +440,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled][checked]) #input + #switch:before {
+:host([disabled][checked]:hover) #input + #switch:before {
     border-color: var(
         --highcontrast-switch-handle-border-color-disabled,
         var(
@@ -449,7 +449,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[disabled][checked]) #input ~ #label {
+:host([disabled][checked]:hover) #input ~ #label {
     color: var(
         --highcontrast-switch-label-color-disabled,
         var(
@@ -544,8 +544,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input.focus-visible + #switch,
-:host([checked]) #input.focus-visible + #switch {
+:host([checked]) #input.focus-visible + #switch,
+:host([checked]:hover) #input.focus-visible + #switch {
     background-color: var(
         --highcontrast-switch-background-color-selected-focus,
         var(
@@ -554,8 +554,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input:focus-visible + #switch,
-:host([checked]) #input:focus-visible + #switch {
+:host([checked]) #input:focus-visible + #switch,
+:host([checked]:hover) #input:focus-visible + #switch {
     background-color: var(
         --highcontrast-switch-background-color-selected-focus,
         var(
@@ -564,8 +564,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input.focus-visible + #switch:before,
-:host([checked]) #input.focus-visible + #switch:before {
+:host([checked]) #input.focus-visible + #switch:before,
+:host([checked]:hover) #input.focus-visible + #switch:before {
     border-color: var(
         --highcontrast-switch-handle-border-color-selected-focus,
         var(
@@ -574,8 +574,8 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:hover[checked]) #input:focus-visible + #switch:before,
-:host([checked]) #input:focus-visible + #switch:before {
+:host([checked]) #input:focus-visible + #switch:before,
+:host([checked]:hover) #input:focus-visible + #switch:before {
     border-color: var(
         --highcontrast-switch-handle-border-color-selected-focus,
         var(
@@ -708,11 +708,11 @@ governing permissions and limitations under the License.
     :host(:hover) #input:not(:checked) + #switch {
         box-shadow: inset 0 0 0 1px Highlight;
     }
-    :host(:hover[disabled][checked]) #input + #switch {
+    :host([disabled][checked]:hover) #input + #switch {
         background-color: GrayText;
         box-shadow: inset 0 0 0 1px GrayText;
     }
-    :host(:hover[disabled][checked]) #input + #switch:before {
+    :host([disabled][checked]:hover) #input + #switch:before {
         background-color: ButtonFace;
         border-color: GrayText;
     }

diff --git a/packages/tabs/src/spectrum-config.v2.js b/packages/tabs/src/spectrum-config.v2.js
@@ -27,7 +27,6 @@ const config = {
             inPackage: '@spectrum-css/tabs',
             outPackage: 'tabs',
             fileName: 'tabs',
-            // hoistCustomPropertiesFrom: 'spectrum-Tabs',
             components: [
                 {
                     exactSelector: true,
@@ -198,6 +197,7 @@ const config = {
             excludeByComponents: [
                 builder.class('spectrum-Tabs-itemLabel'),
                 builder.class('spectrum-Icon'),
+                builder.pseudoClass('hover'),
             ],
             excludeByExactComponentSeries: [
                 [builder.class('spectrum-Tabs-item')],

diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css
@@ -826,9 +826,6 @@ governing permissions and limitations under the License.
         --spectrum-tabs-emphasized-texticon-tabitem-selection-indicator-background-color-selected
     );
 }
-:host(:hover)::slotted(:not([slot])) {
-    color: var(--spectrum-tabs-textonly-tabitem-text-color-hover);
-}
 ::slotted([selected]:not([slot])) {
     color: var(--spectrum-tabs-textonly-tabitem-text-color-selected);
 }

diff --git a/tasks/process-spectrum.js b/tasks/process-spectrum.js
@@ -206,14 +206,6 @@ async function processComponent(componentPath) {
                         },
                     });
                     matched = true;
-                } else if (isHoistedPseudoClass(component)) {
-                    match.push({
-                        hoist: true,
-                        find: { ...component },
-                        replace: { ...component },
-                    });
-                    matched = true;
-                    log = true;
                 }
                 conversion.components.forEach((componentConversion) => {
                     if (Array.isArray(componentConversion.find)) {
@@ -413,6 +405,13 @@ async function processComponent(componentPath) {
                 });
                 // @ts-ignore
                 if (host) {
+                    if (
+                        newSelector.length &&
+                        isHoistedPseudoClass(newSelector[0])
+                    ) {
+                        host.selectors = host.selectors || [];
+                        host.selectors?.push(newSelector.shift());
+                    }
                     const firstIsPseudo = isPseudo(newSelector[0]);
                     const firstIsNotSlotted =
                         newSelector[0]?.value !== 'slotted';