refactor: adjust sizing of MButton info slot

[berwyn]

Describe the problem this PR addresses

The information slot in MButton currently uses a width property inside a flex container, which causes the text to be cut off in situations where the main slot runs long.

Describe the changes in this PR

This PR changes the slot to be sized with flex properties, specifically setting the flex-basis so that contents aren't elided.

Other information

[github-actions]

Deployed Styleguide and Lab.

Notes

1. Links may take a few minutes to update after PR is opened or commit is pushed.
2. Links may become invalidated after PR is merged or closed.
3. Links for all releases and open PRs can be found on the Maker Deploys page.

[ashjtan]

jw, what is the behavior when the main label (left side) is really really long? does the font size accommodate, so that the text continues to wrap? does it get cut off after two lines?

i believe the #info slot (right side) is generally "secondary" to the main label (left side). if we are going to ensure that it always shows via fit-content, we should ensure that the main label always shows as well.

[berwyn]

Both slots are supposed to ellipsize but I'm not sure the logic is correctly applying

[ashjtan]

@berwyn Both slots are supposed to ellipsize but I'm not sure the logic is correctly applying

Do you mind verifying this behavior? I think it's even more important that this works correctly if we're going to force the info slot to always fit-content. It could force a lot of existing MButtons to overflow that weren't before.

[berwyn]

The code shows that both slots should have the class applied, however there aren't any wrapping rules applied so it looks like the text on both slots will wrap, and after all space is exhausted only then will they ellipsise.

We can see that behaviour in the screenshot as well as the site it's hosted from, where the presence of the info slot causes the default slot to wrap with or without the changeset.

[pretzelhammer]

note: if your pr title begins with "refactor" i believe merging it won't produce a maker release, if you'd like these changes to be released immediately after merging consider changing the pr title to begin with "fix" if it fixes an issue

[github-actions]

🎉 This PR is included in version 19.6.8 🎉

The release is available on:

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

Your semantic-release bot 📦🚀