[Accordion] component does not support child accordions

[davidicus]

When you place an accordion inside another accordion, the child accordion rows collapse/expand function does not work.
https://carbon-addons-iot-react.com/?path=/story/accordion--default

We opened an issue with Carbon @ carbon-design-system/carbon#4768, but it seems that this issue was fixed at one point but has regressed, and then, they decided to no longer support it for some reason.

There is a consideration to create a "Tree" component, but this would only support text. Maximo needs a full set of components to exist within the child. carbon-design-system/carbon#2230

Any component placed within an accordion should function (even another accordion). We also have a use case for it in an upcoming design. It's likely that whatever is causing this defect will cause defects in other components placed within accordions.

[bjornalm]

This problem is isolated to nested accordions. Root cause is that the BEM class 'bx--accordion__item--active' (meaning open) from the parent accordion is affecting the elements in any child accordions. This makes sense since we only have default styles and the 'active' modifier, no modifier for 'inactive'.

I think there is an easy solution which should be safe to implement. We can add a bx--accordion__item--inactive class that cancels out the parent styles from 'bx--accordion__item--active' , e.g

.#{$prefix}--accordion__item--inactive {  
  .#{$prefix}--accordion__content {
    display: none;
  }

  .#{$prefix}--accordion__arrow {
    transform: rotate(90deg);
  }
}

I don't see any reason that such a fix should not be implemented in the carbon library. If they don't agree we can probably wrap the component and use the 'onHeadingClick' callback to set such style in our wrapped component.

Another option for a pure carbon library fix could be to have the 'bx--accordion__item--active' only affect direct descendent by introducing the child combinator, e.g.

.bx--accordion__item--active > .#{$prefix}--accordion__content {...}
.bx--accordion__item--active > .#{$prefix}--accordion__arrow {...}

this wouldn't require any js changes but is perhaps less BEM compatible.

[sstone2423]

FYI: The new List component being created will handle nested, expandable lists very similar to accordions with the added bonus of searching and selecting
PR tracking here: #856

[davidicus]

closing this issue as Carbon is adamant about not having nested accordions

[davidicus]

@bjornalm This request is being closed.