Accordion: max-width is not working properly in the headings.

[minkyngkm]

Describe the bug

1. max-width needs to be added for the case texts get longer in the headings. after adding max-width to the button locally, the background color is not going all the way when its hovered over because the hover effect is applied to the button.

2. span needs to be added inside the buttons to fix this hover effect bug mentioned above. after adding span inside the button locally, max-width is not working as span has inline attribute. so I had to add display: inline-block after adding display: inline-block to the span, the position of the icon in the button moves down.

[lyubomir-popov]

To summarise:

1. the markup in all accordion examples should allow for the text to be constrained by our default "$text-max-width", which will probably involve adding a span inside the button
2. unless that span is already styled with a max-width and display:inline-block, then we need these two as utilities

[bartaz]

@lyubomir-popov Is it a working group proposal, or simply a bug?

[lyubomir-popov]

@bartaz depends on how we look at it - one way would be to introduce the span, deprecate the current markup, and leave out the proposed utilities. In this case, it's a bug

but if we are considering utilities, then we surelyt need to run this by @anthonydillon so then it might be a WG proposal

[lyubomir-popov]

@bartaz feel free to remove the label if you think we can avoid a breaking change and also avoid the utilities. ALthough I do think it's useful to have the $text-max-width exposed as a class

[bartaz]

I'll try to look into it and see what would be needed to fix.

[bartaz]

ALthough I do think it's useful to have the $text-max-width exposed as a class

@lyubomir-popov I guess it may be useful to have such utility, but accordion shows how tricky it is. It's not as simple as max-width: $text-max-width, because when applied to elements that have background or borders it may make them look in unexpected way.

[lyubomir-popov]

My idea was to be able to drop a span in between the existing elements, and apply that class to it- exactly to avoid effecting borders and what not.

[bartaz]

As Lyubo suggests, it seems we need to add a support for adding additional span (possibly with a accordion-specific class name, or utility) to limit max width of the text inside the accordion button.

This seems to require some changes around styling accordion in terms of spacing and chevron placement.