You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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>
The text was updated successfully, but these errors were encountered:
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 ofauro-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 theauro-nav
wrapper, thechevron="right"
attribute works as expected, butalignRight
still does not.Lastly, if you replace
auro-sidenavsection
withauro-accordion
within theauro-nav
element, all works as expected.This is all illustrated and commented on in the CodePen linked to above.
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 withthis
and is not applying theiconRight
CSS selector into the DOM.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.
The text was updated successfully, but these errors were encountered: