Try updated command palette styling - #53117
Merged
Merged
Conversation
richtabor
added
[Type] Enhancement
richtabor
marked this pull request as ready for review
July 28, 2023 14:49
|
Size Change: +139 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
I like this, more accessible colors, i like the search icon in the field too. Feels neater. |
apeatling
reviewed
Jul 28, 2023
apeatling
left a comment
apeatling
left a comment
Contributor
There was a problem hiding this comment.
This looks much more refined to me, especially the spacing and iconography colouring.
Contributor
I agree this is unnecessary when the matching term is the first word of the result. I wonder if it does add enough context to justify its inclusion when the match is not the first word? |
|
I agree with both @adampickering and @apeatling, this is a huge improvement. As we discussed on Slack, I do like the search icon being left aligned. It feels less jarring than if it were to the right, and aligns nicely with the rest of the icons. |
stokesman
reviewed
Jul 30, 2023
Contributor
There was a problem hiding this comment.
Looks like an overall improvement to me. I have a couple ideas that might be considered.
First, with the removal of the mark bolding, it seems a couple of things become cruft and could be removed:
TextHighlightcomponent- ruleset for the
markelement
Second, might the border-radius of the command items be better at 2px i.e. $radius-block-ui like most other interactive elements? Referring to this:
gutenberg/packages/commands/src/components/style.scss
Lines 64 to 65 in e87f9d0
Contributor
|
I think it looks good, nice and simple, any reduction in borders is nearly always good. In this case I'd love a sanity check first from @jameskoster, however, because it does remove one layer of visible categorization. Before: 
After: 
GIF, before and after:
Personally I also prefer keeping the bold text to highlight the search term. For me, very often, I'll look at the search results and wonder: why is a post showing up here, I'm searching for a template! In that situation, the bold text highlighting the part of the word that is matched reminding me that even if in my mind I have a particular goal, the search box looks across all taxonomies. This is a semi-strong opinion. Which is to say I'm happy to bow out if you all agree, however I'd suggest maybe you could extract that change so we can review it separately and not hold up the other improvements. Nice work! |
Contributor
|
+1 keeping the highlight.
The reasoning seems fine to me – no need to highlight suggestions while searching. |
Member
Author
Sounds good; I'll add back the bold mark styling. |
Member
Author
|
Done. 
|
Member
Author
Agreed; consistency is better. ✅ |
|
Flaky tests detected in 59d1cf0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5715824230
|
SaxonF
reviewed
Jul 31, 2023
SaxonF
left a comment
SaxonF
left a comment
Contributor
There was a problem hiding this comment.
Lovely stuff, thanks for sweating the details @richtabor
Member
Author
|
@WordPress/gutenberg-design Mind leaving an official review? Thanks! 🙇 |
jameskoster
approved these changes
Aug 2, 2023
22 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
9 participants
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?
An initial attempt to revise the command palette UI.
A couple highlights:
Testing Instructions
Screenshots or screencast
Before
After