refactor(menu): adjust styling for disabled drill-in chevron

The SWC implementation was having difficulty with making sure the
chevron on a disabled drill-in menu item displayed as disabled,
without overriding CSS. On the SWC end, the way a generic icon is styled
is different from how chevrons or checkmarks are styled, so the styles
added don't apply to the chevron.

On looking at it on the CSS side, it doesn't seem to make sense to use
the .spectrum-itemIcon class on the drill-in chevron, as it is not
providing any styles and it seems that it should be distinct from the
icon to the left of the menu item label.

Author: jawinn

components/menu/index.css

@@ -787,7 +787,8 @@ governing permissions and limitations under the License.
     color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
   }
 
-  .spectrum-Menu-itemIcon {
+  .spectrum-Menu-itemIcon,
+  .spectrum-Menu-chevron {
     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)));
   }
@@ -805,7 +806,8 @@ governing permissions and limitations under the License.
       color: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-description-color-disabled, var(--spectrum-menu-item-description-color-disabled)));
     }
 
-    .spectrum-Menu-itemIcon {
+    .spectrum-Menu-itemIcon,
+    .spectrum-Menu-chevron {
       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/metadata/menu.yml

@@ -6,17 +6,24 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/menu/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### T-shirt sizing
+      ### 1/22/2024 - Version 6.1.4
+      The `.spectrum-itemIcon` class has been removed from the drill-in variant's chevron.
+
+      ### 8/04/2023 - Version 6.0.0
+
+      #### Core tokens migration ####
+      This component now uses Spectrum Tokens instead of DNA tokens. 
+
+      #### T-shirt sizing
       Menu now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Menu--size*` class.
 
-      ### Use small divider classes
-      When using a section divider, add `.spectrum-Divider` and `spectrum-Divider--sizeS` classes to `spectrum-Menu-divider`. The divider has also changed from medium to small.
+      #### Use small divider classes
+      When using a section divider, add `.spectrum-Divider` and `spectrum-Divider--sizeS` classes to `spectrum-Menu-divider`. The divider has changed from medium to small.
 
-      ### Change workflow icon size to medium
-      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
+      ### 9/22/2020 - Version 3.0.0
 
-      ### Menu item with switch mark up ###
-      In the case of a menu item that includes an icon and a switch, the label and icon should be seperate elements. As opposed to the icon SVG being with in the label. This matches the pattern of other variants with icons within the menu item.
+      #### Change workflow icon size to medium
+      Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
 
 examples:
   - id: sizing
@@ -619,7 +626,7 @@ examples:
                 </ul>
               </li>
               <li class="spectrum-Menu-item spectrum-Menu-item--collapsible spectrum-Menu-item--collapsible-withWorkflowIcon" role="menuitem" tabindex="0">
-                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
+                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-UIIcon-ChevronRight75 spectrum-Menu-chevron" focusable="false" aria-hidden="true" aria-label="Next">
                   <use xlink:href="#spectrum-css-icon-Chevron75" />
                 </svg>
                 <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Watch Icon">
@@ -1228,6 +1235,7 @@ examples:
       </div>
   - id: with-switch
     name: With Switch
+    description: In the case of a menu item that includes an icon and a switch, the label and icon should be seperate elements. As opposed to the icon SVG being within the label. This matches the pattern of other variants that have icons within a menu item.
     markup: |
       <div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
         <div class="spectrum-Examples-item">
@@ -1329,7 +1337,7 @@ examples:
             </li>
             <li class="spectrum-Menu-item spectrum-Menu-item--drillIn is-open" role="menuitem" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Feather really long item</span>
-              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ChevronRight100 spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
+              <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-UIIcon-ChevronRight100 spectrum-Menu-chevron" focusable="false" aria-hidden="true" aria-label="Next">
                 <use xlink:href="#spectrum-css-icon-Chevron100" />
               </svg>
             </li>
@@ -1388,7 +1396,7 @@ examples:
 
   - id: menu-truncate
     name: Menu with truncating text
-    description: Use the class `spectrum-Menu-itemLabel--truncate` on the item label or section heading that should truncate with in a menu with a set `inline-size` or `max-inline-size`
+    description: Use the class `spectrum-Menu-itemLabel--truncate` on the item label or section heading that should truncate within a menu with a set `inline-size` or `max-inline-size`
     markup: |
       <div class="spectrum-Examples" style="justify-content: flex-start; gap: 25%;">
         <div class="spectrum-Examples-item">

components/menu/stories/template.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
@@ -98,7 +98,6 @@ export const MenuItem = ({
             iconName: "ChevronRight100",
             size,
             customClasses: [
-              `${rootClass}Icon`,
               "spectrum-Menu-chevron",
             ],
           })