Skip to content

Commit

Permalink
fix: allow nested accordion content
Browse files Browse the repository at this point in the history 
Previously, the accordion component calculated and set an inline style
for the expanded height in order to set a transition animation. This
absolute height did not calculate the height of the nested content that
expands after the first load. Our solution listens for the
"toggleExpanded" event and sets the height to auto, allowing for nice
nested accordion transition handling.

Not covered:
- multiple events firing at once do not get handled very well

Changes to be committed:
	modified:   apiExamples/collapsible.html
	modified:   demo/index.md
	modified:   src/auro-sidenav.js
	modified:   src/auro-sidenavsection.js
  • Loading branch information
@rsstdd
rsstdd committed Mar 20, 2024
1 parent 3475e02 commit 7a2d70e
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 61 deletions.
114 changes: 57 additions & 57 deletions demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
The index.md file is a compiled document. No edits should be made directly to this file.
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from `./docs/partials/index.md`
-->

-->

# Sidenav

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
<!-- The below content is automatically added from ./description.md -->
`<auro-sidenav>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) that provides users a way to create navigational interfaces on the left hand
side of a page to navigate to separate pages or different sections within the same page.
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->

## auro-sidenav use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
Expand All @@ -20,8 +20,8 @@ The `<auro-sidenav>` element should be used in situations where users may:

* create in-page navigation for long content-heavy pages
* provide navigation to related pages on a page
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->

## Additional Information

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./readmeAddlInfo.md) -->
Expand All @@ -33,11 +33,11 @@ The `auro-sidenavsection` is an extension of the `auro-accordion` can be used to
The `auro-sidenavitem` is an extension of the `auro-hyperlink` and used to create the navigational links in the `auro-sidenav`. You can use the expected `href` and `target` attributes to properly enable and style the links.

Please refer to the below example to see how to use these components.
<!-- AURO-GENERATED-CONTENT:END -->

<!-- AURO-GENERATED-CONTENT:END -->

## Examples

<h4 id="default">Default</h4>
<h4 id="default">Default</h4>
The following example illustrates a common use case for the `sidenav` element that includes a navigation header, an accordion sub-nav action, as well as a link that will open to an external URL.

<div class="exampleWrapper">
Expand Down Expand Up @@ -76,12 +76,12 @@ The following example illustrates a common use case for the `sidenav` element th
</auro-sidenavsection>
</auro-sidenav>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/full.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/full.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/full.html -->

```html
<script>
// This design token variable can be whatever/from wherever you want
Expand Down Expand Up @@ -114,11 +114,11 @@ The following example illustrates a common use case for the `sidenav` element th
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#dog-info" target="_blank">Dogs</auro-sidenavitem>
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#cat-info" target="_blank">Cats</auro-sidenavitem>
</auro-sidenavsection>
</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### auro-sidenavitem

The `<auro-sidenavitem>` element is an [extension](https://lit.dev/docs/components/defining/) of `<auro-hyperlink>` element. All of the [auro-hyperlink API](https://auro.alaskaair.com/components/auro/hyperlink/api) are therefore exposed through the `auro-sidenavitem`.
Expand All @@ -136,22 +136,22 @@ The `<auro-sidenavitem>` element is an [extension](https://lit.dev/docs/componen
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/hyperlink.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/hyperlink.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/hyperlink.html -->

```html
<auro-sidenav>
<span slot="heading">Airlines</span>
<auro-sidenavitem href="/" target="_blank">Alaska Airlines</auro-sidenavitem>
<auro-sidenavitem href="https://www.aa.com/" target="_blank">American Airlines</auro-sidenavitem>
<auro-sidenavitem href="https://www.britishairways.com/" target="_blank">British Airways</auro-sidenavitem>
<auro-sidenavitem href="https://www.jal.co.jp/" target="_blank">Japan Airlines</auro-sidenavitem>
</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### selected

The `<auro-sidenav>` element supports using the `selected` attribute on `<auro-sidenavitem>` element to designate an item as active.
Expand All @@ -170,10 +170,10 @@ The `<auro-sidenav>` element supports using the `selected` attribute on `<auro-s
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/selected.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/selected.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/selected.html -->

```html
<auro-sidenav>
<span slot="heading">Favorite In-Flight Meal</span>
Expand All @@ -182,11 +182,11 @@ The `<auro-sidenav>` element supports using the `selected` attribute on `<auro-s
<auro-sidenavitem>Northwest Deli Picnic Pack</auro-sidenavitem>
<auro-sidenavitem>Mediterranean Tapas Picnic Pack</auro-sidenavitem>
<auro-sidenavitem>Kid's Choice Picnic Pack</auro-sidenavitem>
</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### Sections

The `<auro-sidenav>` element uses `<auro-sidenavsection>` elements to create sections and layers in the navigation. The `<auro-sidenavsection>` element is an extension of the `<auro-accordion>` element, you will need to supply a `trigger` slot for its children as well as the `<auro-sidenavitem>` elements. The `<auro-sidenav>` element will automatically apply the `chevron` and `fluid` attributes to the `<auro-sidenavsection>` elements.
Expand Down Expand Up @@ -219,10 +219,10 @@ Please [refer to the auro-accordion documentation](https://auro.alaskaair.com/co
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/sections.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/sections.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/sections.html -->

```html
<auro-sidenav>
<span slot="heading">Helpful links</span>
Expand All @@ -241,11 +241,11 @@ Please [refer to the auro-accordion documentation](https://auro.alaskaair.com/co
<auro-sidenavitem href="/content/travel-info/pets">Booking pet travel</auro-sidenavitem>
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa">Pet travel FAQ</auro-sidenavitem>
</auro-sidenavsection>
</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

#### Collapsible

The `<auro-sidenav>` element uses the attribute `collapsible` to toggle accordion functionality. This can be both static
Expand All @@ -266,10 +266,10 @@ token.
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/collapsible.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/collapsible.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/collapsible.html -->

```html
<auro-sidenav collapsible>
<span slot="heading">Collapsible Side Navigation (Click to toggle)</span>
Expand All @@ -278,11 +278,11 @@ token.
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `<auro-sidenav>` custom element is defined automatically.
Expand All @@ -308,19 +308,19 @@ Using the `registerComponent` function to create a custom `<auro-sidenav>` will
<custom-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</custom-sidenavitem>
</custom-sidenav>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

<!-- The below code snippet is automatically added from ./../../apiExamples/custom.html -->

```html
<custom-sidenav>
<span slot="heading">Alaska Airlines History</span>
<custom-sidenavitem href="/content/about-us/history">Historical overview</custom-sidenavitem>
<custom-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</custom-sidenavitem>
<custom-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</custom-sidenavitem>
</custom-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</custom-sidenav>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
39 changes: 35 additions & 4 deletions src/auro-sidenav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import styleCss from "./style-css.js";

// build the component class
export class AuroSidenav extends LitElement {

static get properties() {
return {
collapsible: {
Expand Down Expand Up @@ -143,16 +142,48 @@ export class AuroSidenav extends LitElement {
this.addEventListener('mousedown', this.handleMouseDown);
}

async updated(changedProperties) {
super.updated(changedProperties);
await this.updateComplete;

if (this.collapsible) {
const sidenavMobileAccordion = this.shadowRoot.getElementById("accordion");
if (sidenavMobileAccordion) {
// #accordionContent is the farthest down we can drill in the DOM to still catch all nested accordion events
const sidenavMobileAccordionContent = sidenavMobileAccordion.shadowRoot.querySelector('div.componentWrapper > #accordionContent');

// Catch all nested accordion expansion events
sidenavMobileAccordionContent.addEventListener("toggleExpanded", (event) => {
const nestedAccordionElement = event.target;
const nestedAccordionContent = nestedAccordionElement.shadowRoot.querySelector('div.componentWrapper > #accordionContent');

// Set height to auto to allow expansion/contraction
sidenavMobileAccordionContent.style.height = "auto";

const onTransitionEnd = () => {
// Transition is over, now update sidenav "root" accordion with correct height
sidenavMobileAccordion.handleContentSlotChanges();
// Make listener clean itself up
nestedAccordionContent.removeEventListener("transitionend", onTransitionEnd);
};

nestedAccordionContent.addEventListener("transitionend", onTransitionEnd);
});
}
}
}

// function that renders the HTML and CSS into the scope of the component
render() {
const sidebarContent = html`
<span><slot name="heading"></slot></span>
<slot @slotchange="{this.handleSlotChange}"></slot>
`;
const sidebarContentCollapsable = html`
<auro-accordion part="accordion-root" chevron="none">
const sidebarContentCollapsable = html`
<auro-accordion id="accordion" part="accordion-root" chevron="none">
<span slot="trigger"><slot name="heading"></slot></span>
<slot @slotchange="{this.handleSlotChange}"></slot>
<!-- Listen for inner accordions -->
<slot @slotchange="${this.handleSlotChange}"></slot>
</auro-accordion>
`;

Expand Down

0 comments on commit 7a2d70e

Please sign in to comment.