canonical
Accordion: long text in the button is not indented
Describe the bug
Building this FAQ page (PR), I found the text in the button is not indented when it gets longer and becomes multiple lines.
Indeed, that's a bug in Vanilla. Thanks for the report, will try to fix it soon.
@bartaz Also please limit the max-width of accordion buttons (or maybe even all buttons?) as per usual with $text-max-width.
@lyubomir-popov Limiting the width will be impossible without markup change. We can't limit just text width without affecting the whole box of accordion/button. And we should not affect the width of accordion/button this way, because it's a block with a background that should take the width of the container.
We would need additional internal element to wrap the text if we want to limit the width of the text.
@bartaz yes, that's what we had to do locally. this is a very needed feature in cases like the FAQ above, would be great if we have an official example with an extra element in there for this purpouse - or even better, deprecate all current examples and replace them with updated markup, then clean up come next major release.
@lyubomir-popov I tried to do some quick fix for that in this PR, but it is going to require a bigger (possibly breaking) change. Throwing a span inside is not enough, as it needs to be block/inline-block to make max-width work on it, and this completely breaks the placement of chevron, etc in current styling. So we would need to considerably re-do accordion to make this work.
A quick and dirty workaround could be to have max-with on p-accordion itself. To avoid issues with making text inside accordion narrower.
Can you check with @minkyngkm ? she went through the exact same problems and found a solution that works well in the local implementation.