Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
blackfalcon opened this issue Aug 20, 2024 · 3 comments
Open

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

blackfalcon opened this issue Aug 20, 2024 · 3 comments
Assignees

Comments

@blackfalcon
Copy link
Member

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 blackfalcon added not-reviewed Issue has not been reviewed by Auro team members Type: Bug Bug or Bug fixes labels Aug 20, 2024
@blackfalcon
Copy link
Member Author

This issue was created on behalf of @EvieCutrell

@Patrick-Daly-AA Patrick-Daly-AA removed their assignment Aug 21, 2024
@Patrick-Daly-AA
Copy link

Need to confirm with the figma documentation on the expected behavior

@Patrick-Daly-AA
Copy link

Confirmed this is a bug. The 3rd example is the intended behavior.

@Patrick-Daly-AA Patrick-Daly-AA removed the not-reviewed Issue has not been reviewed by Auro team members label Sep 25, 2024
@jason-capsule42 jason-capsule42 removed the Type: Bug Bug or Bug fixes label Oct 3, 2024
@blackfalcon blackfalcon transferred this issue from AlaskaAirlines/auro-nav Oct 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants