Clarity: Nested Accordions expand/collapse icon shows expand icon while opening the Parent Accordion

[Chandu3245]

Nested Accordions expand/collapse icon shows expand icon while opening the Parent Accordion

Describe the bug:
When there are nested accordions, Open Parent accordion, nested accordions are appearing with a icon and background color as light blue though they are not open.
To be clear, the accordion panel is not open its only with expand icon being shown when not open. The actual function is working as expected for accordions.
Its the appearance that is being shown not right.

How To reproduce:
https://stackblitz.com/edit/clarity-light-theme-v2-a7y2qu
Steps to reproduce the behavior:
Click on Item 1 Accordion
See the expand icon and background color of the accordion button for nested accordions.

Expected behavior:
Each nested Accordion expand icon should stay collapsed until its respective angle icon is clicked.

Versions:
App

:
Angular: ^8.2.4 Node: [e.g. 10.10.0] Clarity: ^3.0.0-next.6

Device:

Happens on any device running Google Chrome.

[martinbrom]

This is not a pattern we are looking to support. If you need to nest accordions and remove the spacing for child accordions, then you could do so in your application's CSS using either a negative margin or translateX

Kind of duplicate of #3543. Linked issue also specifies a CSS workaround.

[Chandu3245]

Hi @martinbrom ,

Its not about spacing, its about nested accordions being shown with lightblue background though they are not open yet and its angle icons are shown downside.

Please check it.

[Chandu3245]

Please check the link https://stackblitz.com/edit/clarity-light-theme-v2-a7y2qu , the item1 has nested accordions, where when toggle them, their angle icon does not change as open/collapse mode. The angle icons are always showing down.

I'm thinking that, the actions are taken from parent accordion, hence, child actions are not acted on them.

[Chandu3245]

Sorry, just checked #3543. Yes, it is similar.

[stefandxm]

I really dont understand this "wont fix"/no bug approach here. This is clearly a bug not a design pattern or recommendation.
Accordions are extremely useful when you need to expand misc extra data and how can Clarity so sharply decide it is a bad pattern for UIs?
What are your proposed options when it comes to dynamic / actions that 99% of the time is not required but the end-user want the functionality quick at hand?

I mean, if you dont care about the layout etc that is OK. but this is a bug (that the wrong color and icon is displayed). Also not all UX:es can be perfect at first iteration and this kind of approach is really god for adding "Extra options" until a new UX can be designed.

I really feel the Clarity team is being arrogant and showing bad form here making me second guess my choice for Clarity as a whole.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.