feat(show): add public show() method

AlaskaAirlines · Mar 21, 2022 · a9f4d5f · a9f4d5f
1 parent f4c7f83
commit a9f4d5f
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 63 deletions.
diff --git a/apiExamples/programmaticallyShow.html b/apiExamples/programmaticallyShow.html
@@ -0,0 +1,10 @@
+<auro-input id="showExampleTriggerInput" required>
+  <span slot="label">Enter a value to show the dropdown</span>
+</auro-input>
+
+<auro-dropdown id="showMethodExample" aria-label="custom label" rounded bordered inset>
+  <p>
+    Lorem ipsum solar
+  </p>
+  <span slot="trigger">Trigger Label</span>
+</auro-dropdown>
diff --git a/apiExamples/programmaticallyShow.js b/apiExamples/programmaticallyShow.js
@@ -0,0 +1,8 @@
+function handleShowExample() {
+  const showExampleInput = document.querySelector('#showExampleTriggerInput');
+  const showExampleDropdown = document.querySelector('#showMethodExample');
+
+  showExampleInput.addEventListener('keydown', () => {
+    showExampleDropdown.show();
+  })
+}
diff --git a/apiExamples/programmaticallyShowHide.html b/apiExamples/programmaticallyShowHide.html
diff --git a/demo/apiExamples.md b/demo/apiExamples.md
@@ -4,22 +4,24 @@
 
 ## Properties
 
-| Property           | Attribute  | Type        | Default | Description                                      |
-|--------------------|------------|-------------|---------|--------------------------------------------------|
-| [bordered](#bordered)         | `bordered` | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
-| [chevron](#chevron)          | `chevron`  | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
-| [disabled](#disabled)         | `disabled` | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
-| [error](#error)            | `error`    | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| [inset](#inset)            | `inset`    | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
-| [isPopoverVisible](#isPopoverVisible) |            | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
-| [rounded](#rounded)          | `rounded`  | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
-| [toggle](#toggle)           | `toggle`   | ` Boolean ` |         | If declared, the trigger will toggle the show/hide state of the dropdown. |
+| Property           | Attribute          | Type        | Default | Description                                      |
+|--------------------|--------------------|-------------|---------|--------------------------------------------------|
+| [bordered](#bordered)         | `bordered`         | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
+| [chevron](#chevron)          | `chevron`          | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
+| [disabled](#disabled)         | `disabled`         | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
+| [error](#error)            | `error`            | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
+| [inset](#inset)            | `inset`            | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
+| [isPopoverVisible](#isPopoverVisible) | `isPopoverVisible` | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
+| [rounded](#rounded)          | `rounded`          | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
+| [toggle](#toggle)           | `toggle`           | ` Boolean ` |         | If declared, the trigger will toggle the show/hide state of the dropdown. |
 
 ## Methods
 
-| Method | Type       | Description                 |
-|--------|------------|-----------------------------|
-| [hide](#hide) | `(): void` | Hides the dropdown content. |
+| Method         | Type                    | Description                                      |
+|----------------|-------------------------|--------------------------------------------------|
+| [hide](#hide)         | `(): void`              | Hides the dropdown content.                      |
+| [outsideClick](#outsideClick) | `(event: Object): void` | **event**: Event passed in from the document click event listener that this function gets attached to. |
+| [show](#show)         | `(): void`              | Shows the dropdown content.                      |
 
 ## Events
 
@@ -636,9 +638,41 @@ When combined with the `error` property the `helpText` slot content is colored r
 
 ### Method Examples
 
+#### <a name="show"></a>show
+
+The `show` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`.
+
+<div class="exampleWrapper">
+  <auro-input id="showExampleTriggerInput" required>
+    <span slot="label">Enter a value to show the dropdown</span>
+  </auro-input>
+  <auro-dropdown id="showMethodExample" aria-label="custom label" rounded bordered inset>
+    <p>
+      Lorem ipsum solar
+    </p>
+    <span slot="trigger">Trigger Label</span>
+  </auro-dropdown>
+</div>
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+```html
+<auro-input id="showExampleTriggerInput" required>
+  <span slot="label">Enter a value to show the dropdown</span>
+</auro-input>
+<auro-dropdown id="showMethodExample" aria-label="custom label" rounded bordered inset>
+  <p>
+    Lorem ipsum solar
+  </p>
+  <span slot="trigger">Trigger Label</span>
+</auro-dropdown>
+```
+
+</auro-accordion>
+
 #### <a name="hide"></a>hide
 
-The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-dropdownmenu`.
+The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-select`.
 
 The `hide` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`.
 

diff --git a/demo/index.html b/demo/index.html
@@ -38,6 +38,9 @@
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
+        })
+        .then(() => {
+          handleShowExample();
         });
     </script>
     <script type="module" src="../src/auro-dropdown.js"></script>
@@ -47,5 +50,6 @@
     <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
+    <script src="../apiExamples/programmaticallyShow.js"></script>
   </body>
 </html>
diff --git a/docs/api.md b/docs/api.md
@@ -2,22 +2,24 @@
 
 ## Properties
 
-| Property           | Attribute  | Type        | Default | Description                                      |
-|--------------------|------------|-------------|---------|--------------------------------------------------|
-| `bordered`         | `bordered` | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
-| `chevron`          | `chevron`  | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
-| `disabled`         | `disabled` | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
-| `error`            | `error`    | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
-| `inset`            | `inset`    | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
-| `isPopoverVisible` |            | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
-| `rounded`          | `rounded`  | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
-| `toggle`           | `toggle`   | ` Boolean ` |         | If declared, the trigger will toggle the show/hide state of the dropdown. |
+| Property           | Attribute          | Type        | Default | Description                                      |
+|--------------------|--------------------|-------------|---------|--------------------------------------------------|
+| `bordered`         | `bordered`         | ` Boolean ` |         | If declared, applies a border around the trigger slot. |
+| `chevron`          | `chevron`          | ` Boolean ` |         | If declared, the dropdown displays an display state chevron on the right. |
+| `disabled`         | `disabled`         | ` Boolean ` |         | If declared, the dropdown is not interactive.    |
+| `error`            | `error`            | ` Boolean ` |         | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. |
+| `inset`            | `inset`            | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
+| `isPopoverVisible` | `isPopoverVisible` | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
+| `rounded`          | `rounded`          | ` Boolean ` |         | If declared, will apply border-radius to trigger and default slots. |
+| `toggle`           | `toggle`           | ` Boolean ` |         | If declared, the trigger will toggle the show/hide state of the dropdown. |
 
 ## Methods
 
-| Method | Type       | Description                 |
-|--------|------------|-----------------------------|
-| `hide` | `(): void` | Hides the dropdown content. |
+| Method         | Type                    | Description                                      |
+|----------------|-------------------------|--------------------------------------------------|
+| `hide`         | `(): void`              | Hides the dropdown content.                      |
+| `outsideClick` | `(event: Object): void` | **event**: Event passed in from the document click event listener that this function gets attached to. |
+| `show`         | `(): void`              | Shows the dropdown content.                      |
 
 ## Events
 

diff --git a/docs/partials/apiExamples.md b/docs/partials/apiExamples.md
@@ -305,9 +305,26 @@ When combined with the `error` property the `helpText` slot content is colored r
 
 ### Method Examples
 
+#### show
+
+
+The `show` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/programmaticallyShow.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/programmaticallyShow.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 #### hide
 
-The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-dropdownmenu`.
+The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-select`.
 
 The `hide` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`.
 

diff --git a/src/auro-dropdown.js b/src/auro-dropdown.js
@@ -55,13 +55,14 @@ class AuroDropdown extends LitElement {
   // function to define props used within the scope of this component
   static get properties() {
     return {
-      bordered: { type: Boolean },
-      chevron:  { type: Boolean },
-      disabled: { type: Boolean },
-      error:    { type: Boolean },
-      inset:    { type: Boolean },
-      rounded:  { type: Boolean },
-      toggle:   { type: Boolean },
+      bordered:         { type: Boolean },
+      chevron:          { type: Boolean },
+      disabled:         { type: Boolean },
+      error:            { type: Boolean },
+      inset:            { type: Boolean },
+      rounded:          { type: Boolean },
+      toggle:           { type: Boolean },
+      isPopoverVisible: { type: Boolean },
 
       /**
        * @private
@@ -147,17 +148,7 @@ class AuroDropdown extends LitElement {
     this.popover = this.shadowRoot.querySelector('#popover');
     this.popper = new Popover(this.trigger, this.popover, this.placement);
 
-    const offClick = (event) => {
-      // Hide the dropdown content if we clicked anywhere outside auro-dropdown
-      const expectedIndex = -1;
-      if (event.composedPath().indexOf(this) === expectedIndex) {
-        document.removeEventListener('click', offClick);
-        this.toggleHide();
-      }
-    };
-
     const handleShow = () => {
-      document.addEventListener('click', offClick);
       this.toggleShow();
     };
 
@@ -226,6 +217,7 @@ class AuroDropdown extends LitElement {
    */
   toggleShow() {
     if (!this.hasAttribute('disabled')) {
+      document.expandedAuroDropdown = this;
       this.fixWidth();
       this.popper.show();
       this.isPopoverVisible = true;
@@ -245,6 +237,14 @@ class AuroDropdown extends LitElement {
     this.toggleHide();
   }
 
+  /**
+   * Shows the dropdown content.
+   * @returns {void}
+   */
+  show() {
+    this.toggleShow();
+  }
+
   /**
    * @private
    * @returns {void} Dispatches event with an object showing the state of the dropdown.
@@ -260,6 +260,31 @@ class AuroDropdown extends LitElement {
     this.dispatchEvent(event);
   }
 
+  /**
+   * @param {Object} event - Event passed in from the document click event listener that this function gets attached to.
+   * @returns {void} Method used to close the dropdown bib when clicking in the view outside the dropdown.
+   */
+  outsideClick(event) {
+    // Dropdown content is hidden when a user clicks outside the element.
+    const expectedIndex = -1;
+
+    if (event.composedPath().indexOf(document.expandedAuroDropdown) === expectedIndex) {
+      document.expandedAuroDropdown.hide();
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('isPopoverVisible')) {
+      if (this.isPopoverVisible) {
+        document.addEventListener('click', document.expandedAuroDropdown.outsideClick);
+      } else {
+        if (document.expandedAuroDropdown) {
+          document.removeEventListener('click', document.expandedAuroDropdown.outsideClick);
+        }
+      }
+    }
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     return html`

diff --git a/test/auro-dropdown.test.js b/test/auro-dropdown.test.js
@@ -120,10 +120,9 @@ describe('auro-dropdown', () => {
     expectPopoverHidden(el);
     expect(chevron).to.not.have.attribute('data-expanded');
 
-    const trigger = el.shadowRoot.querySelector('#trigger');
     expectPopoverHidden(el);
 
-    trigger.click();
+    el.show();
     expectPopoverShown(el);
 
     el.hide();