Accordion Component

[buseselvi]

Here is the design documentation link: https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=15548%3A20910&mode=design&t=25ieOea9LEuP8Yzk-1

[fatihhayri]

Native accordion

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
https://open-ui.org/components/accordion.explainer
https://12daysofweb.dev/2021/details-summary/

[fatihhayri]

@buseselvi, is the title any hover action?

[buseselvi]

@fatihhayri yes, I added hover in the accordion list variant at the bottom of the document.

[fatihhayri]

I made accordion component with native HTML element <details> and <summary>.

https://codepen.io/fatihhayri/pen/bGzYYWv?editors=1100

Note: name attribute only Chrome 120, Safari 17.2. support. (this time)

[AykutSarac]

@Enes5519 do we have progress on this issue?

[Enes5519]

Figma Design Document

https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=15548%3A20910&mode=design&t=25ieOea9LEuP8Yzk-1

General Usage Example

<!--   STANDALONE   -->
<bl-accordion caption="Deneme"> Merhaba </bl-accordion>

<!--   LIST VARIANT   -->
<bl-accordion-group>
  <bl-accordion caption="Deneme"> Merhaba </bl-accordion>

  <bl-accordion icon="eye_on" caption="Deneme"> Merhaba </bl-accordion>
</bl-accordion-group>

Rules

• Accordion is a component that allows the user to show and hide sections of related content on a page.
• The accordion component includes a free content area.
• The caption can be set either via attribute or slot.
• An icon can be added to the beginning of the caption.
• Accordion can be disabled.
• The accordion group component combines accordions and only allows one accordion to be open by default

API Reference

bl-accordion-group

Attribute	Type	Description	Default Value
multiple	boolean	Allow multiple accordions to be open at once	false

bl-accordion

Attribute	Type	Description	Default Value
open	boolean	Whether the accordion is expanded	false
caption	string	Sets accordion caption.	null
icon	string	Add icon to beginning of the title	null
disabled	boolean	Whether the accordion is expanded	false

Slots

Slot Name	Description
title	Setting the accordion title as a slot disables the title attribute.
default	Free content area

Events

Event	Description
bl-toggle	Triggered when the accordion expands or collapses

[AykutSarac]

Great work, Enes! Here are some suggestions for the ADR:

• The 'accordion' prefix is not needed for the event name bl-accordion-toggle.
• I believe we can omit the variant for bl-accordion-group. In instances of standalone usage, there doesn't seem to be a need to enclose accordions within the accordion group. We can simply use bl-accordion-group for lists and bl-accordion for standalone scenarios.
• The option to make an accordion either standalone or within a list may be marked as disabled, although this detail is not reflected in the Figma. We can explore this further during the design meeting with @buseselvi.
• We could consider renaming auto-collapse to a shorter alternative like multiplefor simplicity.

[buseselvi]

I added the disabled versions to the design guide. Thank you @AykutSarac 🙏🏻

[Enes5519]

Thx for review @AykutSarac

1. Done ✅
2. I added it in case you want auto-collapse in your accordions and also want them to stand apart. We can change the name of the standalone variant if it creates confusion.
3. Done ✅ (Thx @buseselvi )
4. multiple does not explain what it does, I can update it if there is an alternative.

[AykutSarac]

Thx for review @AykutSarac
2. I added it in case you want auto-collapse in your accordions and also want them to stand apart. We can change the name of the standalone variant if it creates confusion.
4. multiple does not explain what it does, I can update it if there is an alternative.

2. I'm not sure if it makes sense to auto-collapse if they are standing apart, I mean they should be using the list in this case. So, I offered to use bl-accordion-group only for lists without the variant. We can discuss this further at the weekly update.
3. Agreed, couldn't think of anything better. auto-collapse sounds ok.

[Enes5519]

2. Separate accordions will need to write their own for auto-collapse. We talked with @buseselvi, but we can also bring it to the weekly agenda.
3. thx

[Enes5519]

I updated it as we discussed at the weekly meeting.

• Remove standalone variant from bl-accordion-group.

[Enes5519]

Since auto-collapse is enabled by default, it is not possible to turn it off as an attribute, so I will change the name to keep-open. @buseselvi @AykutSarac

[github-actions]

🎉 This issue has been resolved in version 3.0.0-beta.13 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 3.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀