search

AlaskaAirlines / auro-nav

Custom element for the purpose of showing users a secondary navigation aid that helps them understand the relation between the location of their current page and higher level pages.
https://auro.alaskaair.com/components/auro/nav
Apache License 2.0
0 stars 1 forks source link

chevron="right" alignRight attributes not correctly supported #46

Open blackfalcon opened 3 weeks ago

blackfalcon commented 3 weeks ago

Please verify the version of auro-nav you have installed

@latest

Please describe the bug

Please see this CodePen to help understand the scope of the issue. https://codepen.io/blackfalcon/pen/zYVWBJo

In summary, what appears to be happening is that when <auro-sidenavsection chevron="right" alignRight> the attributes are not working as expected given the extension of auro-accordion.

What is also interesting to note is that there are similar issues, but slightly different between the v1.x and the v2.x versions of this component.

After some research into the issue, it was also discovered that if the auro-sidenavsection element is used without the auro-nav wrapper, the chevron="right" attribute works as expected, but alignRight still does not.

Lastly, if you replace auro-sidenavsection with auro-accordion within the auro-nav element, all works as expected.

This is all illustrated and commented on in the CodePen linked to above.

Screenshot 2024-08-20 at 3 53 48 PM

Reproducing the error

This issue cannot be reproduced on the Auro docsite

Expected behavior

The UI reflects the changes as instructed with the API.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

When reproducing this issue, it was discovered that when chevron="right" is added to the DOM, the following code appears to be losing context with this and is not applying the iconRight CSS selector into the DOM. 

this.getAttribute('chevron') === 'right'

It is possible to edit the DOM element in the inspector and add iconRight and the CSS selector is available and the UI responds. The inspector hack ONLY works with the v2.x version.

Exit criteria

As a user I want to use the following code and the UI will respond with aligning the trigger content and the chevron to the right of the container. 

<auro-sidenavsection chevron="right" alignRight>
Screenshot 2024-08-20 at 3 49 00 PM
blackfalcon commented 3 weeks ago

This issue was created on behalf of @EvieCutrell

Patrick-Daly-AA commented 3 weeks ago

Need to confirm with the figma documentation on the expected behavior