Buttons with overflowing alpha-numeric text do not wrap

[mwargan]

Please search for duplicate or closed issues first.

Describe the issue

A button with very long alpha-numeric text does not wrap, causing overflow.

Current Behavior

A button with very long alpha-numeric text does not wrap, causing overflow.

Expected Behavior

The button to wrap as it would with text that has spaces.

Reproduction URL

On the docs, just write a long alpha-numeric string in the button contents.

Fix

The following fix is suggested:

[role=button],
[type=button],
[type=file]::file-selector-button,
[type=reset],
[type=submit],
button {
  max-width: 100%;
}

Tested on our project: https://vue3-starter-storybook.netlify.app/index.html?path=/story/components-basebutton--with-overflowing-no-spaces-text

[mwargan]

And related to the above, we should probably reconsider this rule:

[aria-busy="true"]:not(input, select, textarea, html) {
  white-space: nowrap;
}

Which causes overflow issues when we have an overflow condition (like in the original issue description) AND the button is in loading state.