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 GlAccordionItem
s 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