Accordion hover state

[MarkoOleksiyenko]

Hi,
I didn't find anything related to the hover state of the accordion. I believe it would be cool to have reactivity when hovering over the header. This requires css state handling plus additional sass variables to control the color of the text + button (expand/close) as it is an svg.
What do you think?
Best regards,
Marko

[julien-deramond]

Hi @MarkoOleksiyenko

I'd say it makes sense. TBH, on a more general approach, I don't know yet what level of customization we will want to let to the users in the end. With the Sass variables, it was kind of free since it didn't generate necessarily too much extra CSS; with the CSS variables it might not be that free if everything becomes customizable.

Anyway, for this specific use case, I wouldn't mind providing 2 extra variables to handle that.
We already have:

• --bs-accordion-btn-color
• --bs-accordion-btn-bg
• --bs-accordion-active-color
• --bs-accordion-active-bg

For information, on a fork of Bootstrap that I maintain, we have added --bs-accordion-btn-hover-bg.

So, we could add in Bootstrap:

• --bs-accordion-btn-hover-bg
• --bs-accordion-btn-hover-color
• and maybe some others for the ::after arrow.

Any opinion @twbs/css-review?
If you're OK with that approach, I could create an issue or a PR, and plan it for maybe v5.4.0.

[louismaximepiton]

Hey there,

IMO, we could add --bs-accordion-btn-hover-bg and --bs-accordion-btn-hover-color quite easily and defaulting to actual.
On the other side, I don't think we should add any ::after variables now, since it means a copy paste of the svg. IMO, we should firstly change the way to manage the svg by using a mask-image and control it via background-color.

[MarkoOleksiyenko]

Hello!

Thanks for your answer!

I agree that we need to find a better way to handle the svgs as potentially we also want to have the customization of the disabled state and that also means having the (color and a connected svg to it). However, this is an additional request that can have its own issue.

On my side will check the mask-image approach to play around and see the impact.

And yeah, having more customizable accordion would be a great addition for v5.4.0!

Cheers!