FormTokenField: Fix token styles #66640
Merged
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
mirka
added
[Type] Enhancement
mirka
commented
Oct 31, 2024
| @@ -90,7 +95,6 @@ | |||
| position: absolute; | |||
| top: 1px; | |||
| right: 0; | |||
| padding: 0; | |||
Comment on lines
-115
to
-120
|
|
||
| &.is-disabled { | ||
| .components-form-token-field__remove-token { | ||
| cursor: default; | ||
| } | ||
| } |
| @@ -134,20 +131,19 @@ | |||
| .components-form-token-field__token-text { | |||
| border-radius: $radius-x-small 0 0 $radius-x-small; | |||
| padding: 0 0 0 8px; | |||
| line-height: 24px; | |||
There was a problem hiding this comment.
Moving here because it's overwritten for the remove token button on line 143 anyway.
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .components-form-token-field__remove-token.components-button { | ||
| cursor: pointer; |
| border-radius: 0 $radius-x-small $radius-x-small 0; | ||
| padding: 0 2px; |
There was a problem hiding this comment.
Removing the 2px side padding as unnecessary.
|
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: -44 B (0%) Total Size: 1.81 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 364ffbe. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11613729725
|
tyxla
approved these changes
Nov 1, 2024
There was a problem hiding this comment.
LGTM 👍
While testing, I noticed that the hover colors with a dark color scheme when borderless and potentially when disabled as well might be off, but this seems to be the same in trunk. Not for this PR, but could definitely use some love, like many other use cases of other components when using dark background 😅
Ooh, I love how you tried the color theme tool! To clarify on the status there, we were in the midst of experimenting internally with theming, and only a few components fully support all the (experimental) color parameters. Accent color theming is fully supported though, at least. |
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
* FormTokenField: Fix token styles * Add changelog Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
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.
In preparation for #65751
What?
Tweak the token component so it uses fewer style overrides, as well as fix some minor style bugs when
isBorderless.Testing Instructions
See the Storybook for FormTokenField. Test for combinations of the
disabledandisBorderlessprops.Screenshots or screencast
Default
The remove button is now a nice square using the "small" variant of Button.
Disabled
No visual changes aside from right padding on the remove button.
isBorderless & Disabled
Before
CleanShot.2024-10-31.at.22.59.12.mp4
The token text and remove button both look interactive, even though they are disabled.
After
CleanShot.2024-10-31.at.22.59.42.mp4
A version 2 of this component is planned, and a comprehensive design review would take place then, but cc @WordPress/gutenberg-design anyway for awareness.