fix(menu): drill-in disabled menu item chevron (#2199)

A drill-in set to "open" was no longer showing the disabled color for the chevron icon. Moves disabled CSS after other CSS, which resolves this issue. Also includes this in the existing Storybook example for drill-in. Fixes #2176
adobe · Oct 13, 2023 · 2dba5d9 · 2dba5d9
1 parent 9c4a620
commit 2dba5d9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 29 deletions.
diff --git a/components/menu/index.css b/components/menu/index.css
@@ -512,34 +512,6 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Menu-item.is-disabled,
-.spectrum-Menu-item[aria-disabled="true"] {
-  background-color: transparent;
-
-  .spectrum-Menu-itemLabel,
-  .spectrum-Menu-sectionHeading {
-    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
-  }
-
-  .spectrum-Menu-itemDescription {
-    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
-  }
-
-  .spectrum-Menu-itemIcon {
-    fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-  }
-
-  &:hover {
-    cursor: default;
-
-    .spectrum-Menu-itemIcon {
-      fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-      color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
-    }
-  }
-}
-
 .spectrum-Menu-itemIcon {
   grid-area: iconArea;
   align-self: start;
@@ -782,3 +754,32 @@ governing permissions and limitations under the License.
     }    
   }
 }
+
+/* Disabled menu items */
+.spectrum-Menu-item.is-disabled,
+.spectrum-Menu-item[aria-disabled="true"] {
+  background-color: transparent;
+
+  .spectrum-Menu-itemLabel,
+  .spectrum-Menu-sectionHeading {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-content-color-disabled, var(--spectrum-menu-item-label-content-color-disabled)));
+  }
+
+  .spectrum-Menu-itemDescription {
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
+  }
+
+  .spectrum-Menu-itemIcon {
+    fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+    color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+  }
+
+  &:hover {
+    cursor: default;
+
+    .spectrum-Menu-itemIcon {
+      fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+      color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled)));
+    }
+  }
+}
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
@@ -342,7 +342,12 @@ DrillInSubmenu.args = {
       isDrillIn: true,
       isOpen: true,
     },
-    { label: "Select and Mask..." },
+    {
+      label: "Select and Mask...",
+      isDrillIn: true,
+      isDisabled: true,
+      isOpen: true,
+    },
     { label: "Save Selection" },
   ],
 };