Clarity: Accordion Component

[getcodenow]

[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

I expected to find behavior for an accordion component within clarity UI so I don't have pull in accordion functionality in from bootstrap library which has conflicts with Clarity. Want to also add that Clarity is awesome. You guys have done a great job with these components and the packaging.

Actual behavior

The closest thing I can find to an accordion component is the StackedView which is very close to the required functionality, but is designed to work with name/value pairs. In my case I want to insert my content into a single column instead of being required to have two columns.

The plunk below shows the behavior I see, but what I would like to achieve is for the Card embedded within the Stacked View to take up the entire horizontal space.

Reproduction of behavior

https://plnkr.co/edit/DwtjI0?p=preview

Environment details

• Angular version: 2.2.3

• Clarity version: 0.7.3

• OS and version: OSX 10.12.1

• Browser: Chrome 54.0.2840.98 (64-bit) | Firefox 50.0.2 | Safari 10.0.1

[lfs1102]

I have a similar issue.
I want to display only one data in a row and display it with full width. But Stack View works with name/value pairs and fixes the with of label to 40% and content to 60%. It create \

Actually my issue is not for an Accordion Effect, but the problem is similar: Stack View should be more flexible to developers.

P.S. I was told about Tree view, it would solve my problem.

[youdz]

It can be done with the current Stack View without waiting for a new feature, but it's not 100% perfect, it might need some extra styles tweaking. Put everything in the labels (you don't even have to put a single <clr-stack-content> in your HTML), then customize the styles of your #single-column stack view by adding this in your CSS:

#single-column .stack-block-label {
    max-width: 100%;
    flex-basis: 100%;
}
#single-column .stack-block-content {
    display: none;
}

I edited your plunker to show it: https://plnkr.co/edit/tvWpP8pk5IfwG4Tv8Y04?p=preview
(You can ignore my >>> selector, it's because I put the styles in my Angular component instead of a global stylesheet.)

I believe TreeView is/will be the cleaner solution, but it won't be displayed in cards like an accordion. Ideally, we should be able to reuse as much of the tree logic as possible to write several components with different look-and-feel, all following the same nesting + collapse logic.

[getcodenow]

The styling changes work well for my needs. Having the richer card view is important for my needs. Thank for you for the solution.

[gnomeontherun]

This could be done by taking tree view and providing an alternative styling, but the better approach would be to create a standalone accordion. Then extract the core collapse logic between stackview and accordion (like popovers).

[daverickdunn]

I've used Clarity extensively for the last 10-12 months across three very different projects. It's by far the best framework I've encountered for developing clean interfaces for complex apps requiring high levels of controls within 'n' clicks.

I've used every single component, bar _labels_, and I've copy-pasted-modified several. So many times I've been faced with a view that an 'accordian' is absolutely _ideal_ for, but instead I've had to compromise or modify one of the 'data' directives to wrangle it into working. This is (in my opinion at least) the biggest gap in Clarity's repertoire.

Please consider adding a directive to _Stack View_ that provides a simple responsive container for nested components. This is surely a small addition in the grand-scheme and would allow much greater flexibility for users.

Cheers!

[mathisscott]

Thanks for reaching out @daverickdunn

This is something that is on our long-term roadmap. So it will, at some point, become a part of Clarity. If your use case requires its addition to the library sooner than we can get to it, we would be happy to work with you on an external contribution.

Thanks!

[mathisscott]

2452 now has the latest info on this issue. Please subscribe to that issue to track progress.

[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.