fix: make Menu items wrap correctly, fixes #451 (#482)

adobe · Jan 23, 2020 · 03208af · 03208af
1 parent cd48593
commit 03208af
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/components/dropdown/metadata/dropdown.yml b/components/dropdown/metadata/dropdown.yml
@@ -18,27 +18,27 @@ examples:
       <h4>Open</h4>
       <div class="spectrum-Dropdown is-open" style="width: 240px;">
         <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="listbox">
-          <span class="spectrum-Dropdown-label">Ballard</span>
+          <span class="spectrum-Dropdown-label">Donaudampfschifffahrtsgesellschaftskapitän</span>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
           </svg>
         </button>
         <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
           <ul class="spectrum-Menu" role="listbox">
             <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
-              <span class="spectrum-Menu-itemLabel">Ballard</span>
+              <span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
-              <span class="spectrum-Menu-itemLabel">Fremont</span>
+              <span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
-              <span class="spectrum-Menu-itemLabel">Greenwood</span>
+              <span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
@@ -62,7 +62,7 @@ examples:
           <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
             <use xlink:href="#spectrum-icon-18-Image" />
           </svg>
-          <span class="spectrum-Dropdown-label">Ballard</span>
+          <span class="spectrum-Dropdown-label">Donaudampfschifffahrtsgesellschaftskapitän</span>
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
           </svg>
@@ -73,7 +73,7 @@ examples:
               <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
-              <span class="spectrum-Menu-itemLabel">Ballard</span>
+              <span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
@@ -82,7 +82,7 @@ examples:
               <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
-              <span class="spectrum-Menu-itemLabel">Fremont</span>
+              <span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
@@ -91,7 +91,7 @@ examples:
               <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
-              <span class="spectrum-Menu-itemLabel">Greenwood</span>
+              <span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
               <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>

diff --git a/components/menu/index.css b/components/menu/index.css
@@ -109,13 +109,27 @@ governing permissions and limitations under the License.
   .spectrum-Icon + .spectrum-Menu-itemLabel,
   .spectrum-Menu-itemIcon  + .spectrum-Menu-itemLabel {
     margin-left: var(--spectrum-selectlist-thumbnail-image-padding-x);
+
+    width: calc(
+      100%
+      - var(--spectrum-icon-checkmark-medium-width)
+      - var(--spectrum-selectlist-option-icon-padding-x)
+      - var(--spectrum-selectlist-thumbnail-image-padding-x)
+      - var(--spectrum-alias-workflow-icon-size)
+    );
   }
 }
 
 .spectrum-Menu-itemLabel {
   flex: 1 1 auto;
   line-height: var(--spectrum-selectlist-option-label-line-height);
-  word-break: break-all;
+  hyphens: auto;
+  overflow-wrap: break-word;
+  width: calc(
+    100%
+    - var(--spectrum-icon-checkmark-medium-width)
+    - var(--spectrum-selectlist-option-icon-padding-x)
+  );
 }
 
 .spectrum-Menu-itemLabel--wrapping {