fix(menu): process ":active" styles

adobe · Feb 5, 2024 · 7917583 · 7917583
1 parent e834a3c
commit 7917583
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js
@@ -76,6 +76,7 @@ const config = {
                 converter.classToHost('spectrum-Menu-item'),
                 converter.classToAttribute('is-disabled', 'disabled'),
                 converter.classToAttribute('is-active', 'active'),
+                converter.pseudoToAttribute('active', 'active'),
                 converter.classToAttribute('is-focused', 'focused'),
                 converter.classToAttribute('is-selected', 'selected'),
                 converter.classToId('spectrum-Menu-itemLabel', 'label'),

diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css
@@ -235,7 +235,7 @@ governing permissions and limitations under the License.
 :host([dir='rtl']) {
     --spectrum-menu-item-focus-indicator-direction-scalar: -1;
 }
-:host:active {
+:host([active]) {
     background-color: var(
         --highcontrast-menu-item-background-color-focus,
         var(
@@ -244,7 +244,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > #label {
+:host([active]) > #label {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -253,7 +253,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > [name='description']::slotted(*) {
+:host([active]) > [name='description']::slotted(*) {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -262,7 +262,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > ::slotted([slot='value']) {
+:host([active]) > ::slotted([slot='value']) {
     color: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -271,7 +271,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .icon:not(.chevron, .checkmark) {
+:host([active]) > .icon:not(.chevron, .checkmark) {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -287,7 +287,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .chevron {
+:host([active]) > .chevron {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -303,7 +303,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host:active > .checkmark {
+:host([active]) > .checkmark {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(
@@ -481,8 +481,8 @@ governing permissions and limitations under the License.
 .spectrum-Menu-item--collapsible.is-open .chevron {
     transform: rotate(90deg);
 }
-.spectrum-Menu-item--collapsible.is-open:active,
 .spectrum-Menu-item--collapsible.is-open:focus,
+:host([active]) .spectrum-Menu-item--collapsible.is-open,
 :host([focused]) .spectrum-Menu-item--collapsible.is-open {
     background-color: var(
         --highcontrast-menu-item-background-color-default,
@@ -606,7 +606,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([has-submenu]):active .chevron {
+:host([has-submenu][active]) .chevron {
     fill: var(
         --highcontrast-menu-item-color-focus,
         var(