refactor(style): simplify checkmark ui #52

Changes to be committed: modified: demo/demo.md modified: docs/api.md modified: src/auro-menu-option.js modified: src/auro-menu.js modified: src/style-base.scss modified: src/style-menu-option.scss modified: src/style-sub-menu.scss
AlaskaAirlines · Jan 16, 2022 · fb864c8 · fb864c8
1 parent f4d03f4
commit fb864c8
Showing 7 changed files with 64 additions and 86 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -6,10 +6,22 @@ The `auro-menu` element should be used in situations where users will select one
 `auro-menu` will be used with `auro-dropdown`.
 
 
+### index selected option 2, checkmark;
+
+<div class="exampleWrapper">
+  <auro-menu id="auroMenu2" indexSelectedOption="2" icon>
+    <auro-menu-option data-value="Stops">Stops</auro-menu-option>
+    <auro-menu-option disabled data-value="Price">(disabled) Price</auro-menu-option>
+    <auro-menu-option data-value="Duration">Duration</auro-menu-option>
+    <auro-menu-option data-value="Departure">Departure</auro-menu-option>
+    <auro-menu-option data-value="Arrival">Arrival</auro-menu-option>
+  </auro-menu>
+</div>
+
 ### index selected option 2;
 
 <div class="exampleWrapper">
-  <auro-menu id="auroMenu2" indexSelectedOption="2" checkmark>
+  <auro-menu id="auroMenu2" indexSelectedOption="2">
     <auro-menu-option data-value="Stops">Stops</auro-menu-option>
     <auro-menu-option disabled data-value="Price">(disabled) Price</auro-menu-option>
     <auro-menu-option data-value="Duration">Duration</auro-menu-option>
@@ -34,5 +46,3 @@ The `auro-menu` element should be used in situations where users will select one
     <auro-menu-option data-value="option 8">Option 8</auro-menu-option>
   </auro-menu>
 </div>
-
-
diff --git a/docs/api.md b/docs/api.md
@@ -2,34 +2,33 @@
 
 Auro-menu provides users a way to select one option from a pre-defined list of options.
 
-## Attributes
-
-| Attribute  | Type     | Description                                      |
-|------------|----------|--------------------------------------------------|
-| `tabIndex` | `Number` | Will be either -1 or 0 depending on if auro-menu is currently visible or not. |
-
 ## Properties
 
 | Property           | Attribute          | Type      | Default | Description                                      |
 |--------------------|--------------------|-----------|---------|--------------------------------------------------|
-| `beingMouseOvered` | `beingMouseOvered` | `Boolean` |         | Used to help determine the color and background color of auro-menu-option. |
+| `beingMouseOvered` | `beingMouseOvered` | `boolean` |         |                                                  |
 | `disabled`         | `disabled`         | `Boolean` |         | When true specifies that the menu-option is disabled. |
-| `hasFocus`         | `hasFocus`         | `Boolean` | false   | Used to help determine if auro-menu-option is being tabbed onto. Used to help determine the color and background color of auro-menu-option. |
-| `index`            | `index`            | `Number`  |         | Index of the individual auro-menu-option.        |
-| `isHidden`         | `isHidden`         | `Boolean` |         | If the auro-menu-option is currently visible or not, perhaps because auro-dropdown is controlling whether or not auro-menu is visible or hidden. |
+| `hasFocus`         | `hasFocus`         | `boolean` | false   |                                                  |
+| `index`            | `index`            | `number`  |         |                                                  |
 | `selected`         | `selected`         | `boolean` |         |                                                  |
 
 
 # auro-menu
 
 Auro-menu provides users a way to select one option from a pre-defined list of options.
 
+## Attributes
+
+| Attribute   | Type      | Description              |
+|-------------|-----------|--------------------------|
+| `checkmark` | `Boolean` | Designates checkamrk UI. |
+
 ## Properties
 
-| Property              | Attribute             | Type     | Default | Description                             |
-|-----------------------|-----------------------|----------|---------|-----------------------------------------|
-| `indexSelectedOption` | `indexSelectedOption` | `Number` |         | Index of the currently selected option. |
-| `options`             | `options`             | `Array`  | null    | Array of auro-menu-option nodes.        |
+| Property              | Attribute             | Type     | Default |
+|-----------------------|-----------------------|----------|---------|
+| `indexSelectedOption` | `indexSelectedOption` | `number` |         |
+| `options`             | `options`             | `array`  | null    |
 
 ## Events
 
@@ -40,9 +39,9 @@ Auro-menu provides users a way to select one option from a pre-defined list of o
 
 ## Slots
 
-| Name            | Description                          |
-|-----------------|--------------------------------------|
-| `listOfOptions` | Slot for the auro-menu-option nodes. |
+| Name | Description                              |
+|------|------------------------------------------|
+|      | Open slot for insertion of menu options. |
 
 
 # auro-sub-menu

diff --git a/src/auro-menu-option.js b/src/auro-menu-option.js
@@ -11,10 +11,6 @@ import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6';
 /**
  * Auro-menu provides users a way to select one option from a pre-defined list of options.
  *
- * @attr {Number} index - Index of the individual auro-menu-option.
- * @attr {Number} tabIndex - Will be either -1 or 0 depending on if auro-menu is currently visible or not.
- * @attr {Boolean} hasFocus - Used to help determine if auro-menu-option is being tabbed onto. Used to help determine the color and background color of auro-menu-option.
- * @attr {Boolean} beingMouseOvered - Used to help determine the color and background color of auro-menu-option.
  * @attr {Boolean} disabled - When true specifies that the menu-option is disabled.
  */
 class AuroMenuOption extends LitElement {
@@ -51,23 +47,16 @@ class AuroMenuOption extends LitElement {
   }
 
   firstUpdated() {
-    this.checkmark = this.closest('auro-menu').hasAttribute('checkmark');
+    this.icon = this.closest('auro-menu').hasAttribute('icon');
   }
 
   render() {
     return html`
-      <li>
-        <div class="content">
-          ${this.checkmark ? html`
-            <div class="checkmark">
-              ${this.selected ? html`
-                ${this.svg}
-              `
-              : undefined}
-            </div>
-          ` : undefined}
+      <li class="menuOption" part="menuOption">
+        ${this.icon ? html`
+          ${this.selected ? html`${this.svg}` : undefined}
+        ` : undefined}
         <slot></slot>
-        </div>
       </li>
     `;
   }

diff --git a/src/auro-menu.js b/src/auro-menu.js
@@ -16,9 +16,8 @@ import "focus-visible/dist/focus-visible.min.js";
 /**
  * Auro-menu provides users a way to select one option from a pre-defined list of options.
  *
- * @attr {Array} options - Array of auro-menu-option nodes.
- * @attr {Number} indexSelectedOption - Index of the currently selected option.
- * @slot listOfOptions - Slot for the auro-menu-option nodes.
+ * @attr {Boolean} icon - Designates icon UI.
+ * @slot Open slot for insertion of menu options.
  */
 
 class AuroMenu extends LitElement {

diff --git a/src/style-base.scss b/src/style-base.scss
@@ -17,13 +17,21 @@
   width: 100%;
 }
 
+:host([icon]) {
+  ::slotted(auro-menu-option) {
+    padding-left: 2rem;
+  }
+
+  ::slotted([selected]) {
+    padding-left: 0;
+  }
+}
+
 ul {
   display: inline-block;
   width: 100%;
   padding: 0;
   margin: 0;
-  color: var(--auro-color-text-primary-on-light);
-  size: var(--auro-text-body);
   vertical-align: middle;
 
   .hidden {

diff --git a/src/style-menu-option.scss b/src/style-menu-option.scss
@@ -14,69 +14,39 @@
   white-space: nowrap;
 }
 
+:host(:hover) {
+  background-color: var(--auro-color-brand-neutral-100);
+  color: var(--auro-color-text-primary-on-light);
+}
+
 :host(:focus) {
   background-color: var(--auro-color-alert-notification-on-light);
-  box-shadow: inset 0 0 0 3px var(--auro-color-alert-notification-on-light);
   color: var(--auro-color-base-white);
-  outline: none;
 
   svg {
     fill: var(--auro-color-base-white);
   }
 }
 
-li {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  list-style-type: none;
-  outline: 0;
-
-  .checkmark {
-    width: var(--auro-size-lg);
-    height: 100%;
-    margin-right: var(--auro-size-xs);
-  }
-
-  &:hover {
-    background-color: var(--auro-color-brand-neutral-100);
-    color: var(--auro-color-text-primary-on-light);
-  }
-
-  &:focus {
-    background-color: var(--auro-color-alert-notification-on-light);
-    color: var(--auro-color-base-white);
-
-    svg {
-      fill: var(--auro-color-base-white);
-    }
-  }
+:host([disabled]) {
+  color: var(--auro-color-text-disabled-on-light);
+  pointer-events: none;
+  user-select: none;
 }
 
-.content {
+.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;
-}
 
-// TODO: review and refactor this
-@include auro_breakpoint--sm {
-  li {
-    height: var(--auro-size-xxl);
+  svg {
+    margin-right: var(--auro-size-xs);
   }
 }
-
-:host([disabled]) {
-  color: var(--auro-color-text-disabled-on-light);
-  pointer-events: none;
-  user-select: none;
-}
diff --git a/src/style-sub-menu.scss b/src/style-sub-menu.scss
@@ -9,5 +9,8 @@
 }
 
 .subMenu {
-  margin-left: var(--auro-size-lg);
+  slot {
+    display: block;
+    padding-left: var(--auro-size-md);
+  }
 }