fix(menu)!: reimplement text truncating (#2299)

BREAKING CHANGE: removes flex-based display, renames classes, reintroduces truncation

Additionally:
* fix(menu): truncating class
* docs(menu): add truncating example
* docs(menu): improve docs
* feat(menu): add truncate example to storybook
* refactor(menu): remove flex from itemLabel
* feat(menu): wip adds truncating to all stories
* refactor(menu): removes uneeded code
* refactor(menu): removes hard coded ellipsis
* docs(menu): improve description
* chore(menu): story indenting
* docs(menu): improve storybook max-width
* refactor(menu): improves story
* docs(menu): adds to migration guide
* fix(menu): post rebase issues

Author: jenndiaz

components/menu/index.css

@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
   --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
   --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
-  
+
   --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
   --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
   --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
@@ -71,7 +71,7 @@ governing permissions and limitations under the License.
   --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
   --spectrum-menu-section-header-color: var(--spectrum-gray-900);
   --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
-  
+
   --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
   --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
   --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
@@ -120,7 +120,7 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
   --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
   --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
- 
+
   --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
   --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
   --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
@@ -147,7 +147,7 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
   --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
   --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
-  
+
   --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
   --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
   --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
@@ -174,7 +174,7 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
   --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
   --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
-  
+
   --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
   --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
   --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
@@ -227,7 +227,7 @@ governing permissions and limitations under the License.
         --highcontrast-checkbox-highlight-color-hover: ButtonText;
         --highcontrast-checkbox-highlight-color-default: ButtonText;
       }
-  
+
       .spectrum-Menu-itemSwitch {
         --highcontrast-switch-handle-border-color-hover: ButtonText;
         --highcontrast-switch-handle-border-color-selected-default: ButtonText;
@@ -281,7 +281,7 @@ governing permissions and limitations under the License.
   .spectrum-Menu-divider {
     --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-medium);
     &.spectrum-Divider--sizeS {
-      --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small); 
+      --spectrum-menu-divider-thickness: var(--spectrum-divider-thickness-small);
     }
 
     overflow: visible;
@@ -339,14 +339,14 @@ governing permissions and limitations under the License.
   box-sizing: border-box;
 
   background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default)));
-  
+
   line-height: var(--mod-menu-item-label-line-height, var(--spectrum-menu-item-label-line-height));
 
   min-block-size: var(--mod-menu-item-min-height, var(--spectrum-menu-item-min-height));
   padding-block-start: var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text));
   padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text));
   padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
-  
+
   margin: 0;
   text-decoration: none;
 
@@ -365,7 +365,7 @@ governing permissions and limitations under the License.
 
   .spectrum-Menu-itemSwitch {
     min-block-size: 0;
-    
+
     .spectrum-Switch-switch {
       margin-block-start: var(--mod-menu-item-top-to-action, var(--spectrum-menu-item-top-to-action));;
       margin-block-end: 0;
@@ -377,11 +377,11 @@ governing permissions and limitations under the License.
   display: grid;
   /* stylelint-disable declaration-block-no-redundant-longhand-properties */
   grid-template-areas:
-    ".            chevronAreaCollapsible .             iconArea sectionHeadingArea  .         .           .                 "
+    ".            chevronAreaCollapsible .             headingIconArea  sectionHeadingArea  .         .           .                 "
     "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea        valueArea actionsArea chevronAreaDrillIn"
     ".            .                      .             .        descriptionArea  .         .           .                 "
     ".            .                      .             .        submenuArea      .         .           .                 ";
-  
+
   grid-template-columns: auto auto auto auto 1fr auto auto auto;
   grid-template-rows: 1fr auto;
 }
@@ -422,7 +422,7 @@ governing permissions and limitations under the License.
   > .spectrum-Menu-itemValue {
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus)));
   }
-  
+
   > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
     fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus)));
@@ -469,7 +469,7 @@ governing permissions and limitations under the License.
   > .spectrum-Menu-itemValue {
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover)));
   }
-  
+
   > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
     fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover)));
@@ -492,7 +492,7 @@ governing permissions and limitations under the License.
   > .spectrum-Menu-itemLabel {
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down)));
   }
-  
+
   > .spectrum-Menu-sectionHeading {
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
   }
@@ -504,7 +504,7 @@ governing permissions and limitations under the License.
   > .spectrum-Menu-itemValue {
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down)));
   }
-  
+
   > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) {
     fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
     color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down)));
@@ -526,6 +526,17 @@ governing permissions and limitations under the License.
   align-self: start;
 }
 
+.spectrum-Menu-item--collapsible .spectrum-Menu-itemIcon {
+  grid-area: headingIconArea;
+}
+
+.is-selectableMultiple .spectrum-Menu-item {
+  align-items: start;
+}
+.is-selectableMultiple .spectrum-Menu-itemCheckbox {
+  grid-area: iconArea;
+}
+
 .spectrum-Menu-checkmark {
   grid-area: checkmarkArea;
   align-self: start;
@@ -537,8 +548,6 @@ governing permissions and limitations under the License.
 
 .spectrum-Menu-itemLabel {
   grid-area: labelArea;
-  display: flex;
-  align-items: flex-start;
   font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
   color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-content-color-default, var(--spectrum-menu-item-label-content-color-default)));
 }
@@ -640,7 +649,7 @@ governing permissions and limitations under the License.
   margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
 }
 
-.spectrum-Menu-itemLabel--wrapping {
+.spectrum-Menu-itemLabel--truncate {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -694,11 +703,11 @@ governing permissions and limitations under the License.
 }
 
 [dir="rtl"] .spectrum-Menu-chevron {
-  transform: rotate(-180deg); 
+  transform: rotate(-180deg);
 }
 
 /*
-  assume that if an item is collapsible, it will 
+  assume that if an item is collapsible, it will
   have a chevron and we need to adjust position of submenu items to account for that
 */
 .spectrum-Menu-item--collapsible .spectrum-Menu {
@@ -745,22 +754,22 @@ governing permissions and limitations under the License.
     .spectrum-Menu-chevron {
       fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
       color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-hover, var(--spectrum-menu-drillin-icon-color-hover)));
-    }    
+    }
   }
 
   &:focus,
   &.is-focused {
     .spectrum-Menu-chevron {
       fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
       color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-focus, var(--spectrum-menu-drillin-icon-color-focus)));
-    }    
+    }
   }
 
   &:active {
     .spectrum-Menu-chevron {
       fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
       color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down)));
-    }    
+    }
   }
 }
 
@@ -773,11 +782,11 @@ governing permissions and limitations under the License.
   .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)));