Accordion

[ulde01]

Design review March 27

The accordion has been updated.

Change

• The green “tab border” is removed
• Font in header is 20 px. Subheader is optional: 14 px
• Header cell height: 48 px. If there is also a subheader: 64 px
• Grey hover is added on the header cell
• Content background is still white/none, with the option to make it grey
• Chevron (FontAwesome Light) points up/down (not right/down)
• Guidelines now include: "Use this component mainly for text content"

Reason
Many reasons. First of all, it was time to specify the component better. We have adjusted to fit users’ need with more efficient use of space. The direction of chevron is updated to show how it is animated. We also noticed that the component has been (too) content-heavy and added clearer guidelines.

Specification
https://designlibrary.sebgroup.com/components/accordion/

Added to frameworks

• Vanilla Updated accordion design vanilla-pattern-library#88
• Bootstrap Updated accordion design bootstrap#118
• Angular Updated accordion design ng-components#24
• React Updated design: Accordion react-components#15
• AngularMaterial Updated accordion design seb-angular-material#28

Let us know if you have any questions!
/Ulrika
Design management

[SofiaDubbelve]

can the new accordion have a nice slide up/down animination? :)

[henrikhoglundseb]

definitely! Thats one off the things we will add :)

[mario-subo]

I don't think we should limit the amount of content an accordion can hold (in its body at least). It should accept a string of any length and display it as text and possibly even a custom component, meaning whatever you pass in the body will be displayed. This would make the accordion very powerful. This is something, the front x team discussed, the dialog/modal component should be able to do as well.

Also agree it should animate.

We should also discuss if the logic for the expanded state of the accordion (expanded: true | false) is contained within the component itself or should the parent component manage that (). I would suggest both. An internally managed logic unless the expanded flag is explicitly passed down to the component.

[ulde01]

Hej @mario-subo , thanks for the input! Good to see you here. We have discussed this at length as well, and user-tested the component. When content = headers, text, inline links, then the component can contain more. But we have seen videos and other huge content which works less well.