Background

We have seen continuous needs for various styling of the Accordion — with the divider, with an outline, or without one at all. Additionally, a more minimal and space saving Accordion has also been desired.

In some cases, the divider is useful to separate the different accordion items in a group, but in some other cases the dividers within the accordion items in a group create noise (e.g. when they are placed on big screens like desktop or tablet). Also, we need to keep in mind that a single accordion could appear in a page, so in this case the divider could not be necessary.

Goal

Ideally, we would have a variant property called something like separation with the values of divider, outline, and none. In order to not break any current implementations of Accordion, divider should be the default. Additionally, we should add a boolean prop for minimal or something, which is forced to have a separation of none due to its styling.

Also, for a separation of divider, the border division should only appear on accordion groups, and not on a lone accordion.

Acceptance criteria (or Done)

Design

• Update the component in the Figma

Code

• Implement the component in Codex