search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

fix[accordion]: nested Accordions not working as expected #7328

Closed jpbyrne closed 3 years ago

jpbyrne commented 3 years ago

fix[accordion]: nested Accordions not working as expected

What package(s) are you using?

Detailed description

Describe in detail the issue you're having.

Vanilla Carbon Accordions are not functional when placed inside of another Accordion. Nested Accordions do not expand and collapse.

Is this issue related to a specific component?

Yes. Accordion.

What did you expect to happen? What happened instead? What would you like to see changed?

That Carbon Accordions can be placed one within another and function normally.

What browser are you working in?

Chromium Edge (but applicable to all!)

What version of the Carbon Design System are you using?

v10.24.0 (latest)

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Social Program Management

Steps to reproduce the issue

  1. Update carbon/packages/components/src/components/accordion/accordion.hbs to include one Accordion component within another.
  2. Run yarn dev.
  3. Navigate to http://localhost:3000/demo/accordion.
  4. Observe that nested Accordions.

Additional information

Example of current behaviour
nested-accordion-example
dakahn commented 3 years ago

Changed this to a proposal instead of a bug report since this feature is specifically unsupported by our system.

@aagonzales I know when nested accordions have come up in the past we've decided against support for this feature. With a Carbon Treeview coming soon I assume that's still the case. I don't actually know if a Vanilla Treeview implementation is being worked on in parallel to the React though.

aagonzales commented 3 years ago

@jpbyrne Can you share a screenshot of design that uses the nested accordion for context please.

jpbyrne commented 3 years ago

Sure thing @aagonzales.

In SPM we have a UI templating system called UIM which our customers use to build custom interfaces. We're currently in the process of migrating the output of UIM to Carbon components.

image

Customers use something called a UIM CLUSTER element to create multi-column layouts. The default variant of Cluster comes with a collapsible header. We were planning to reimplement our Cluster using Carbon grid and Accordion components.

Screenshot 2020-11-23 at 09 13 33

However, as it's possible to nest Cluster elements one inside another, Accordions would also need to support this capability for use to use them in this way.

vpicone commented 3 years ago

Going to close this one out for inactivity. This is really challenging for user's content discoverability and accessibility. We recommend flattening your information architecture as much as possible.