input_pill: Redesign input pills. #30121
Open
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
evykassirer
force-pushed
the
pill-redesign
branch
from
39dcd99
to
674da50
Compare
evykassirer
force-pushed
the
pill-redesign
branch
from
674da50
to
0a8af8e
Compare
evykassirer
force-pushed
the
pill-redesign
branch
2 times, most recently
from
73fd0a9
to
ac74fb6
Compare
|
This most recent push has these visual changes:
|
|
Most recent push involves these changes |
evykassirer
force-pushed
the
pill-redesign
branch
from
ac74fb6
to
adccc24
Compare
|
I think the search typeahead should have yellow user pills to be consistent, right? I'll post in #design. |
|
There are other places where you can input user pills:
(I think these look fine; just listing them for reference.) |
evykassirer
force-pushed
the
pill-redesign
branch
from
adccc24
to
3640459
Compare
This style is currently only used for search suggestions. Soon, styling for those suggestions will become more specific, and so for now we'll keep those styles in search.css to be more clear about what the new styles affect. If we want to repeat something like this in the future somewhere else in the app, we can come up with a generic styling then once we have a better idea of what that will look like.
This differentiates user pills and non-user input pills by color, and also replaces the close button with an svg. This is part of the app redesign, and preparation for the upcoming search pill project.
evykassirer
force-pushed
the
pill-redesign
branch
from
3640459
to
735e095
Compare
|
Most recent push has user pills for search suggestions 
And also has a 5% transparent black outline around all yellow user pills in light mode. I've asked on CZO if we want outlines for all pills, and specifically how to differentiate the blue pills from dark backgrounds in dark mode. |
12 tasks
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.
From these designs: https://www.figma.com/design/jbNOiBWvbtLuHaiTj4CW0G/Zulip-Web-App?node-id=7623%3A34026&t=6beCgEvgN2uhee7P-1
This differentiates user pills and non-user input pills by color, and also replaces the close button with an svg. This is part of the app redesign, and preparation for the upcoming search pill project.
The stream settings menu and user invite modal could probably use some tweaks to get the background contrast cleaner.
I think those are the only two places we use pills other than the DM compose box. Did I miss any? I can also do another more thorough check if there's not someone that just knows the answer off the top of their head.
compose box
stream settings, add subscribers
invite users modal
selecting pills
hovering over close button