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

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

Author: jawinn

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)));
+    }
+  }
+}

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" },
   ],
 };