From fb864c87c3089081fdbca3f12399079e990cbb02 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Sat, 15 Jan 2022 19:57:59 -0800 Subject: [PATCH] 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 --- demo/demo.md | 16 +++++++++-- docs/api.md | 33 +++++++++++----------- src/auro-menu-option.js | 21 ++++---------- src/auro-menu.js | 5 ++-- src/style-base.scss | 12 ++++++-- src/style-menu-option.scss | 58 +++++++++----------------------------- src/style-sub-menu.scss | 5 +++- 7 files changed, 64 insertions(+), 86 deletions(-) diff --git a/demo/demo.md b/demo/demo.md index 81194cd..8b7c49b 100644 --- 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; + +
+ + Stops + (disabled) Price + Duration + Departure + Arrival + +
+ ### index selected option 2;
- + Stops (disabled) Price Duration @@ -34,5 +46,3 @@ The `auro-menu` element should be used in situations where users will select one Option 8
- - diff --git a/docs/api.md b/docs/api.md index 82ac593..40b2e8e 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2,21 +2,14 @@ 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` | | | @@ -24,12 +17,18 @@ Auro-menu provides users a way to select one option from a pre-defined list of o 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 index 6a873fb..667ca87 100644 --- 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` -
  • -
    - ${this.checkmark ? html` -
    - ${this.selected ? html` - ${this.svg} - ` - : undefined} -
    - ` : undefined} +
  • + ${this.icon ? html` + ${this.selected ? html`${this.svg}` : undefined} + ` : undefined} -
    • `; } diff --git a/src/auro-menu.js b/src/auro-menu.js index 02004f9..809a849 100644 --- 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 index 1fdc177..ff89b74 100644 --- 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 index 60613a4..9af313b 100644 --- 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 index fa47fd9..e669daf 100644 --- 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); + } }