Accordion: long text in the button is not indented

[minkyngkm]

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.

[bartaz]

Indeed, that's a bug in Vanilla. Thanks for the report, will try to fix it soon.

[lyubomir-popov]

@bartaz Also please limit the max-width of accordion buttons (or maybe even all buttons?) as per usual with $text-max-width.

[bartaz]

@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.

[lyubomir-popov]

@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.

[bartaz]

@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.

[lyubomir-popov]

Can you check with @minkyngkm ? she went through the exact same problems and found a solution that works well in the local implementation.

[bartaz]

Triage: This is quite high effort (would require changes to accordion markup probably), and as it hasn't been pushed or reported since, seems that impact would be quite low.
To be considered in next architecture when accordion is migrated.

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15208.

This message was autogenerated