Skip to content

feat(Accordion): Implement GlAccordion component

Samantha Ming requested to merge glaccordian-component into master

What does this MR do?

This MR adds an Accordion component.

Figma > https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=425%3A0

BCollapse > https://bootstrap-vue.org/docs/components/collapse

Pajamas > https://design.gitlab.com/components/accordion

Components

To create an accordion, we require 2 components: gl-accordion and <gl-accordion-item/>

<gl-accordion>
  <gl-accordion-item title="Item 1">Body text</gl-accordion-item>
</gl-accordion

And we can add more accordion-items as required

<gl-accordion>
  <gl-accordion-item title="Item 1">Body text</gl-accordion-item>
  <gl-accordion-item title="Item 2">Body text</gl-accordion-item>
</gl-accordion

Scenarios

Basic

This is the basic use case where each accordion can be expanded or collapsed independently of others.

accordion-basic

Initial Visible

Setting visible prop, we can set an accordion item to be initially visible.

accordion-initial-visible

Collapse Other

We can also collapse the other accordion item in an accordion group by passing an accordion group identifier.

accordion-collapse

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by Samantha Ming

Merge request reports