Skip to content

UI Button: Optimize overflow styles #78300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mirka merged 4 commits into from
May 18, 2026
Merged

UI Button: Optimize overflow styles #78300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1d52d4
UI Button: Optimize overflow styles
mirka May 13, 2026
59887a7
Add changelog
mirka May 14, 2026
620ef71
Adapt grid style in variant matrix
mirka May 14, 2026
74b2721
Add 4px padding in non-small sizes
mirka May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ui/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@

### Enhancements

- `Button`: Allow long labels to wrap within constrained containers ([#78300](https://github.com/WordPress/gutenberg/pull/78300)).
- `Select`: Add a `placeholder` prop to `Select.Trigger`, and support `null` item values for clearable placeholder options ([#78076](https://github.com/WordPress/gutenberg/pull/78076)).
- `Drawer`: Fade the popup elevation shadow alongside the slide ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
- `Drawer`: Allow mouse-drag swipe-dismiss in the popup-edge padding gutter ([#77800](https://github.com/WordPress/gutenberg/pull/77800)).
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/button/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export const AllTonesAndVariants: Story = {
<div
style={ {
display: 'grid',
gridTemplateColumns: 'max-content repeat(2, min-content)',
gridTemplateColumns: 'max-content repeat(2, max-content)',
color: 'var(--wpds-color-fg-content-neutral)',
} }
>
Expand Down
8 changes: 7 additions & 1 deletion packages/ui/src/button/style.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);
--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);
--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
--wp-ui-button-padding-block: var(--wpds-dimension-padding-xs);
--wp-ui-button-padding-inline: var(--wpds-dimension-padding-md);
--wp-ui-button-height: 40px;
--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
Expand All @@ -40,7 +41,9 @@
gap: var(--wpds-dimension-gap-sm);
aspect-ratio: var(--wp-ui-button-aspect-ratio);
min-width: var(--wp-ui-button-min-width);
height: var(--wp-ui-button-height);
max-width: 100%;
min-height: var(--wp-ui-button-height);
padding-block: var(--wp-ui-button-padding-block);
padding-inline: var(--wp-ui-button-padding-inline);
border-style: solid;
border-width: 1px;
Expand All @@ -52,8 +55,10 @@
font-size: var(--wp-ui-button-font-size);
font-weight: var(--wp-ui-button-font-weight);
line-height: var(--wpds-typography-line-height-sm);
text-align: center;
text-decoration: none;
color: var(--wp-ui-button-foreground-color);
overflow-wrap: anywhere;

@mirka mirka May 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the most contentious line. I think our choices are:

  • anywhere — This will break long words, but the downside is that it will shrink down the button width in min-content situations. See the min-content example in the e2e Storybook, or the change we'd have to make in packages/ui/src/button/stories/index.story.tsx.
  • normal (i.e. we don't set an explicit overflow-wrap) — This will leave long words unbroken, and the text will overflow.

(break-word is not really a choice because it behaves the same as normal in our case, since the button being an inline-flex makes the break-word irrelevant for min-width calculations.)

@mirka mirka May 14, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment I'm leaning towards anywhere, because it will immediately surface any layout issues (like the interaction with min-content containers) in an obvious way. Whereas normal will not surface line break issues until someone that happens to see long strings (arbitrary or translations) in the UI reports an overflow.

@ciampo ciampo May 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels like something that @WordPress/gutenberg-design should also check

@jameskoster jameskoster May 15, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Through process of elimination anywhere seems like the only option, assuming we want to avoid words overflowing the button boundary 👍

cursor: var(--wpds-cursor-control);

@media not ( prefers-reduced-motion ) {
Expand Down Expand Up @@ -129,6 +134,7 @@
}

.is-small {
--wp-ui-button-padding-block: 0;
--wp-ui-button-padding-inline: var(--wpds-dimension-padding-sm);
--wp-ui-button-height: 24px;
}
Expand Down
Loading