Accordion - new variation for nested tree structure & left-positioned chevron

[jendowns]

Summary

The Security team would like to add a variation of the Accordion component to Carbon that...

1. Has the chevron on the left side, turned right toward the Accordion title when the Accordion is closed and then facing downward when an Accordion is open
2. Allows for nesting of accordions (chevron positioning on the left would help with this)

Examples:

Justification

@petervachon can provide more insight here, but here's a summary:

To stay consistent with the expectation of "revealing" additional content, we use the chevron on the left and point towards the content when collapsed, facing down when revealed in a few different components including filters & navigation. We only use the chevron on the right for dropdowns.

Desired UX and success metrics

User experience would be very similar to that of the current Accordion.

By providing a variation with the chevron on the left, we are following the user expectation of "revealing" additional content while not confusing the chevron position and direction with that of a dropdown.

By providing a left-aligned chevron with the ability to nest Accordions, we are providing a familiar hierarchy and interaction pattern for collapsing and revealing parent/child content.

"Must have" functionality

Chevron position & direction is our "must have," as it's important for the overall UX of our application.

Specific timeline issues / requests

We are hoping to use this variation of the Accordion at the end of Q1, so we can drop our custom Accordion.

Available extra resources

The Security team (in particular, myself & @SimonFinney) is willing to create & propose a PR of this Accordion variation for both carbon-components and carbon-components-react 🎉

[asudoh]

Hi @jendowns thank you for writing this up! You may have had a discussion with our designers, but the second screenshot seems to go beyond the purview of accordion (looks like a general-purpose tree view instead). Any thoughts? Ref: IBM/carbon-components-react#814

[jendowns]

Hey @asudoh - thanks for the link! I didn't realize there was already a related issue open. I may need to revisit the scope/language of this proposal 🤔

But about the difference in screenshots you mentioned: The second screenshot is actually a screen of a coded accordion component, based on the Carbon accordion, that we modified. 😅

[asudoh]

The second screenshot is actually a screen of a coded accordion component, based on the Carbon accordion, that we modified. 😅

Thank you for articulating @jendowns! I imagined that, too. To go more about this topic, what you achieved brings me two things to my mind:

1. Should accordion incorporate this larger scope, or should we introduce a new tree view component? (e.g. Do we need tree-view type of keyboard navigation in accordion or a separate component?)
2. Does the tree view UI fit well in Carbon design ecosystem?

[jendowns]

Thanks again @asudoh! Per our conversation the other day, we haven't gotten a lot of traction for this variation & we are in the process of working out alternatives. I'm going to close this issue.

[ThinkOpenly]

I am working on a new project which makes use of Accordions, and would really like the twiddly to be on the left. I stumbled on this issue, which is now closed with the tantalizing last comment

we are in the process of working out alternatives.

Have any such alternatives surfaced?

[cipriancirstea]

I am looking for nested accordions as well. Any help is appreciated.

[asudoh]

Refs #2230 - If people are interested in #2230, be sure to add 👍 to the issue description!