Description

Splitting this out from #61761 (comment)

The compact and small sizes of the Button component use a fixed width. See the related CSS:

The fixed width is only applied when the buttons use an icon and don't contain text.

However, the current implementation of 'Show button text labels' preference in the editor doesn't use text. It uses CSS generated content. By setting a fixed width, these sizes aren't compatible with 'Show button text labels' as the CSS generated text will overlap the surrounding content.

I'm not sure why a fixed width is necessary in the first place. Unless I'm missing something, when the Button contains an icon and doesn't contain text, a min-width would be sufficient as the icon will not be greater than the button.

It appears the first fixed width was added long time ago for the small size in #19344

I'd tend to think all fixed widths should be removed, they seem unnecessary to me.

Step-by-step reproduction instructions

• Go to the Storybook and select the Secondary button: https://wordpress.github.io/gutenberg/?path=/story/components-button--secondary
• Note: the secondary button helps illustrate the issue because it has visible borders. The issue applies to all variants though.
• Remove the children string "Code is poetry" and only keep two double quotes.
• Set the icon prop to any icon.
• Set the label prop to a pretty long string.
• Set the size prop to compact or small.
• In your dev tools, inspect the button and observe it has a fixed width.
• Remove the fixed width.
• Observe that nothing changes.

Emulating what would happen with the editor 'Show button text labels' preference enabled:

More screenshots at #61761

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes