-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Improve the 'Show button text labels' preference by using a button wrapper component #61824
base: trunk
Are you sure you want to change the base?
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +270 B (+0.02%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
Flaky tests detected in 9294fa1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9176530016
|
Fixes #61763
So far, this is a Proof Of Concept. Please do not merge.
This PR explores a way to improve the 'Show button text labels' preference by using a wrapper component around the base Button component. The wnew wrapper component lives in the
editor
package, as the 'Show button text labels' preference is specific to the Gutenberg editor. The base Button component stays unchanged.The wrapper component is responsible to retrieve the preference and add some simple logic to pass the appropriate props to teh Button.
What?
The 'Show button text labels' preference broke several times as it's inherently fragile and based on CSS pseudo elements.
The
::before
and::after
pseudo elements are already used for other purposes for the various buttons, tab buttons etc. in teh editor mainly for the focus style, the active style etc. Useing these pseudo elements also to show the button text is fragile and open to CSS conflicts.Why?
The 'Show button text labels' preference should be reliable, testable, and not use CSS hacks.
How?
PreferencesAwareButton
. Suggestions for better naming welcome.icon
prop is set tonull
.text
prop is set to thelabel
value.is-showing-icon-label
that can be used for style adjustments.Testing Instructions
content: attr(aria-label);
.Testing Instructions for Keyboard
Screenshots or screencast