Components: Fix logic of has-text class addition in Button
#56949
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ntsekouras
added
[Type] Bug
|
Size Change: -3 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 331cdf8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7209009217
|
|
These changes seem ok to me, although with |
ntsekouras
changed the title
compact sized Buttonscompact and small sized Buttons
I think the main thing we want to enforce is that pure icon buttons (those without any text) maintain square proportions. To give a contrived example, if your icon had a rectangular intrinsic size (let's say H 24px W 40px), then removing the @ntsekouras Could you help me understand what the original problem was that you saw in DataViews? Was there a case for a rectangular icon button? |
You can replicate the issue in storybook too(see PR's description). Screen.Recording.2023-12-13.at.2.07.05.PM.movMaybe we need to update the conditions of where |
|
The |
|
Ok, it seems that the problem is the "text" prop of the "Button" component. I'm not entirely sure when this was added but it seems to have been added after the "has-text" class and yes the "has-text" condition doesn't account for this prop at the moment, it only checks "children". So my question is:
|
It looks like the
I personally would like to deprecate the The only potential wrinkle that I see is that #26687 made changes so that on RTL directions the Apart from that, I don't see many differences. |
|
I do agree that the Button props are convoluted, but there are a lot of considerations given their widespread usage (some discussion in #44042) and it's unclear to me whether the effort of deprecating is worth the upside. For the scope and intent of this PR, how about we stick to fixing the logic for the |
ntsekouras
changed the title
compact and small sized Buttonshas-text class addition in Button
ntsekouras
force-pushed
the
fix/compact-button-styles
branch
from
04990c1 to
9c5f676
Compare
ntsekouras
force-pushed
the
fix/compact-button-styles
branch
from
afb84a4 to
331cdf8
Compare
youknowriad
approved these changes
Dec 14, 2023
artemiomorales
pushed a commit
that referenced
this pull request
Jan 4, 2024
* Components: Remove fixed width for `compact` sized Buttons * update changelog * Fix logic of has-text class addition in Button * fix changelog
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes: #44043
I observed in DataViews experiment pages list that when we sort a field, the icon in Button that is used is either not shown or is shown really small. The button uses the
compactsize that seem to add a specific fixed width. After testing it seems thesmallsize has the fixed width too.This PR updates the condition where we add the
has-textCSS class.Testing instructions
Buttongo to theIconstory(link here)compactorsmallsizes