fix(dom template): remove unnecessary DOM; address ellipsis feature

The scope of this commit removes the unnecessary UI and LI DOM wrappers for the menu and options elements. Implementation was breaking a11y. Commit also addresses broken ellipsis feature. Changes to be committed: modified: demo/demo.md new file: demo/partials/restrictedWidth.html modified: src/auro-menu.js modified: src/auro-menuoption.js modified: src/style-base.scss modified: src/style-menuoption.scss
AlaskaAirlines · Jan 22, 2022 · 20cf785 · 20cf785
1 parent 40ca97c
commit 20cf785
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 42 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -187,3 +187,52 @@ The `auro-menu` element supports a pre-selected menu option via the `selectOptio
   <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
+
+## Menu with restricted width and long option
+
+The `auro-menu` element supports scenarios where the outer parent element of the menu constrains its width and there are options with text longer than the pull down menu will support. Truncated content will be illustrated with an ellipsis.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./partials/restrictedWidth.html) -->
+  <!-- The below content is automatically added from ./partials/restrictedWidth.html -->
+  <auro-menu style="width: 300px">
+    <auro-menuoption data-value="New tab">New tab</auro-menuoption>
+    <auro-menuoption data-value="New window">New window</auro-menuoption>
+    <auro-menuoption data-value="Open file">Open file</auro-menuoption>
+    <auro-menuoption data-value="Open location">Open location</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Close window">Close window</auro-menuoption>
+    <auro-menuoption data-value="Close tab">Close tab</auro-menuoption>
+    <auro-menuoption data-value="Save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Share">Share</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Print">Print</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./partials/restrictedWidth.html) -->
+  <!-- The below code snippet is automatically added from ./partials/restrictedWidth.html -->
+  ```html
+  <auro-menu style="width: 300px">
+    <auro-menuoption data-value="New tab">New tab</auro-menuoption>
+    <auro-menuoption data-value="New window">New window</auro-menuoption>
+    <auro-menuoption data-value="Open file">Open file</auro-menuoption>
+    <auro-menuoption data-value="Open location">Open location</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Close window">Close window</auro-menuoption>
+    <auro-menuoption data-value="Close tab">Close tab</auro-menuoption>
+    <auro-menuoption data-value="Save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Share">Share</auro-menuoption>
+    <hr>
+    <auro-menuoption data-value="Print">Print</auro-menuoption>
+  </auro-menu>
+  ```
+  <!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
diff --git a/demo/partials/restrictedWidth.html b/demo/partials/restrictedWidth.html
@@ -0,0 +1,14 @@
+<auro-menu style="width: 300px">
+  <auro-menuoption data-value="New tab">New tab</auro-menuoption>
+  <auro-menuoption data-value="New window">New window</auro-menuoption>
+  <auro-menuoption data-value="Open file">Open file</auro-menuoption>
+  <auro-menuoption data-value="Open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption data-value="Close window">Close window</auro-menuoption>
+  <auro-menuoption data-value="Close tab">Close tab</auro-menuoption>
+  <auro-menuoption data-value="Save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
+  <hr>
+  <auro-menuoption data-value="Share">Share</auro-menuoption>
+  <hr>
+  <auro-menuoption data-value="Print">Print</auro-menuoption>
+</auro-menu>
diff --git a/src/auro-menu.js b/src/auro-menu.js
@@ -158,9 +158,7 @@ class AuroMenu extends LitElement {
 
   render() {
     return html`
-      <ul>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </ul>
+      <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
 }

diff --git a/src/auro-menuoption.js b/src/auro-menuoption.js
@@ -51,10 +51,8 @@ class AuroMenuOption extends LitElement {
 
   render() {
     return html`
-      <li class="menuOption" part="menuOption">
-        ${this.selected ? html`${this.svg}` : undefined}
-        <slot></slot>
-      </li>
+      ${this.selected ? html`${this.svg}` : undefined}
+      <slot></slot>
     `;
   }
 }

diff --git a/src/style-base.scss b/src/style-base.scss
@@ -15,9 +15,12 @@
 :host {
   display: inline-block;
   width: 100%;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
 
   ::slotted(auro-menuoption) {
-    padding-left: 2rem;
+    padding-left: var(--auro-size-xl);
   }
 
   ::slotted([selected]) {
@@ -36,15 +39,3 @@
     margin: var(--auro-size-xs) 0 !important;
   }
 }
-
-ul {
-  display: inline-block;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  vertical-align: middle;
-
-  .hidden {
-    visibility: hidden;
-  }
-}
diff --git a/src/style-menuoption.scss b/src/style-menuoption.scss
@@ -7,11 +7,21 @@
 @import './../node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints';
 
 :host {
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  padding: var(--auro-size-xxs) var(--auro-size-md) var(--auro-size-xxs) 0;
+  cursor: pointer;
+
+  slot {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  svg {
+    margin-right: var(--auro-size-xs);
+  }
 }
 
 :host(:hover) {
@@ -33,20 +43,3 @@
   pointer-events: none;
   user-select: none;
 }
-
-.menuOption {
-  display: flex;
-  overflow: hidden;
-  height: var(--auro-size-lg);
-  flex: 1;
-  align-items: center;
-  padding: var(--auro-size-xxs) var(--auro-size-xs);
-  cursor: pointer;
-  line-height: 1;
-  list-style-type: none;
-  text-overflow: ellipsis;
-
-  svg {
-    margin-right: var(--auro-size-xs);
-  }
-}