Skip to content

Commit

Permalink
refactor(isHidden): remove attribute #52
Browse files Browse the repository at this point in the history
Changes to be committed:
modified:   demo/demo.md
modified:   docs/api.md
modified:   src/auro-menu-option.js
modified:   src/auro-menu.js
  • Loading branch information
blackfalcon committed Jan 13, 2022
1 parent cd3e934 commit 983cfbb
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 25 deletions.
16 changes: 8 additions & 8 deletions demo/demo.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro

### Submenu Example
<div class="exampleWrapper">
<auro-menu id="auroMenu0" indexSelectedOption="5" ishidden>
<auro-menu id="auroMenu0" indexSelectedOption="5">
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Seattle Area (All Airports)</auro-menu-option>
<auro-sub-menu slot="listOfOptions">
<auro-menu-option data-value="the value for option 2">Everett, WA (PAE-Paine Field)</auro-menu-option>
Expand All @@ -32,7 +32,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
<auro-accordion lowProfile justifyRight>

```html
<auro-menu id="auroMenu0" indexSelectedOption="5" ishidden>
<auro-menu id="auroMenu0" indexSelectedOption="5">
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Seattle Area (All Airports)</auro-menu-option>
<auro-sub-menu slot="listOfOptions">
<auro-menu-option data-value="the value for option 2">Everett, WA (PAE-Paine Field)</auro-menu-option>
Expand All @@ -57,7 +57,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
### &lt;auro-menu indexselectedoption="0"&gt;

<div class="exampleWrapper">
<auro-menu id="auroMenu1" indexSelectedOption="0" ishidden checkmark>
<auro-menu id="auroMenu1" indexSelectedOption="0" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand All @@ -70,7 +70,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
<auro-accordion lowProfile justifyRight>

```html
<auro-menu id="auroMenu1" indexSelectedOption="0" ishidden checkmark>
<auro-menu id="auroMenu1" indexSelectedOption="0" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand All @@ -89,7 +89,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
### index selected option 5;

<div class="exampleWrapper">
<auro-menu id="auroMenu2" indexSelectedOption="5" ishidden checkmark>
<auro-menu id="auroMenu2" indexSelectedOption="5" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option disabled slot="listOfOptions" data-value="the value for option 2">(disabled) Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand All @@ -102,7 +102,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
<auro-accordion lowProfile justifyRight>

```html
<auro-menu id="auroMenu2" indexSelectedOption="5" ishidden checkmark>
<auro-menu id="auroMenu2" indexSelectedOption="5" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand All @@ -118,7 +118,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro

<div class="exampleWrapper">
<div indexSelectedOption="3">
<auro-menu id="auroMenu3" ishidden checkmark>
<auro-menu id="auroMenu3" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand All @@ -133,7 +133,7 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro

```html
<div indexSelectedOption="3">
<auro-menu id="auroMenu3" ishidden checkmark>
<auro-menu id="auroMenu3" checkmark>
<auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
<auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
Expand Down
16 changes: 10 additions & 6 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

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 |
Expand All @@ -12,7 +18,6 @@ Auro-menu provides users a way to select one option from a pre-defined list of o
| `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. |
| `selected` | `selected` | `boolean` | | |
| `tabIndex` | `tabIndex` | `Number` | | Will be either -1 or 0 depending on if auro-menu is currently visible or not. |


# auro-menu
Expand All @@ -21,11 +26,10 @@ Auro-menu provides users a way to select one option from a pre-defined list of o

## Properties

| Property | Attribute | Type | Default | Description |
|-----------------------|-----------------------|-----------|---------|--------------------------------------------------|
| `indexSelectedOption` | `indexSelectedOption` | `Number` | | Index of the currently selected option. |
| `isHidden` | `isHidden` | `Boolean` | true | If the auro-menu is currently being shown or hidden, perhaps because auro-dropdown is controlling whether or not auro-menu is visible or hidden. |
| `options` | `options` | `Array` | null | Array of auro-menu-option nodes. |
| Property | Attribute | Type | Default | Description |
|-----------------------|-----------------------|----------|---------|-----------------------------------------|
| `indexSelectedOption` | `indexSelectedOption` | `Number` | | Index of the currently selected option. |
| `options` | `options` | `Array` | null | Array of auro-menu-option nodes. |

## Events

Expand Down
3 changes: 0 additions & 3 deletions src/auro-menu-option.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@ class AuroMenuOption extends LitElement {
beingMouseOvered: { type: Boolean },
hasFocus: { type: Boolean },
index: { type: Number },
isHidden: { type: Boolean },
selected: { type: Boolean },
tabIndex: { type: Number },
disabled: { type: Boolean }
};
}
Expand All @@ -44,7 +42,6 @@ class AuroMenuOption extends LitElement {
}

firstUpdated() {
this.tabIndex = this.parentElement.hasAttribute('ishidden') ? '-1' : '0';
this.checkmark = this.closest('auro-menu').hasAttribute('checkmark');
}

Expand Down
10 changes: 2 additions & 8 deletions src/auro-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ 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 {Boolean} isHidden - If the auro-menu is currently being shown or hidden, perhaps because auro-dropdown is controlling whether or not auro-menu is visible or hidden.
* @attr {Number} indexSelectedOption - Index of the currently selected option.
* @slot listOfOptions - Slot for the auro-menu-option nodes.
*/
Expand All @@ -26,17 +25,12 @@ class AuroMenu extends LitElement {
constructor() {
super();

this.isHidden = true;
this.options = null;
}

static get properties() {
return {
options: { type: Array },
isHidden: {
type: Boolean,
reflect: true
},
indexSelectedOption: { type: Number }
};
}
Expand Down Expand Up @@ -128,7 +122,7 @@ class AuroMenu extends LitElement {
dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
}

// if user tabs off of last li, send a custome event 'hideOptionsContainer' to parent component
// if user tabs off of last li, send a custom event 'hideOptionsContainer' to parent component
if (evt.key.toLowerCase() === 'tab' && !evt.shiftKey && Number(evt.target.getAttribute('index')) === this.options.length - 1) {
evt.target.dispatchEvent(new CustomEvent('hideOptionsContainer', {
bubbles: true,
Expand Down Expand Up @@ -169,7 +163,7 @@ class AuroMenu extends LitElement {
}

attributeChangedCallback(name, oldVal, newVal) {
if (name.toLowerCase() === 'ishidden' && this.options) {
if (name.toLowerCase() === this.options) {
if (newVal === null) {
for (let iter = 0; iter < this.options.length; iter++) {
this.options[iter].setAttribute('tabindex', 0);
Expand Down

0 comments on commit 983cfbb

Please sign in to comment.