Skip to content

Move GlAccordionItem props into parent element.

Within the GlAccordionItem component, the accordion prop seems like it could be implemented better. This value is provided to multiple GlAccordionItem components in order to cause one item to close when another is opened. In 99.9% of cases, this value will be the same across all GlAccordionItems within a GlAccordion set, so I propose we move these props up to the parent component and use provide/inject to pass them to the child.

Furthermore, the headerLevel property to be introduced to solve #1348 (closed) could benefit from this provide/inject model as well:

Before

<gl-accordion>
  <gl-accordion-item title="Item 1" :header-level="3" accordion="some-unique-set-id">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
  <gl-accordion-item title="Item 2" :header-level="3" accordion="some-unique-set-id">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
  <gl-accordion-item title="Item 3" :header-level="3" accordion="some-unique-set-id">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
</gl-accordion>

After

<gl-accordion :header-level="3" :auto-collapse="true">
  <gl-accordion-item title="Item 1">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
  <gl-accordion-item title="Item 2">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
  <gl-accordion-item title="Item 3">
    Only one collapse in an accordion group can be open at a time by providing an accordion group
    identifier.
  </gl-accordion-item>
</gl-accordion>

This has the added benefit of giving <gl-accordion> a reason to exist in the first place, whereas at the moment it is just a pass-through wrapper 😅