style(ui): Update Select component styles #3944
Merged
+42
−15
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
|
Preview this PR with FeatureBee: https://beta.wandb.ai/?betaVersion=03841ba09838ea724ea157ea4f6c87b922c79c68 |
connieelee
force-pushed
the
connie/select-styles
branch
from
6cea234 to
4b84302
Compare
connieelee
commented
Mar 24, 2025
Comment on lines
+131
to
+133
| if (indicatorProps.isMulti) { | ||
| return null; | ||
| } |
There was a problem hiding this comment.
hides dropdown indicator (chevron icon) for multi-select
connieelee
commented
Mar 24, 2025
| @@ -182,7 +206,7 @@ const getStyles = < | |||
| }, | |||
| valueContainer: baseStyles => { | |||
| const padding = PADDING[size]; | |||
| return {...baseStyles, padding}; | |||
| return {...baseStyles, padding, gap: '2px'}; | |||
There was a problem hiding this comment.
adds 2px gap between selected items
connieelee
changed the title
jtulk
approved these changes
Mar 24, 2025
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Description
Pre-req for https://wandb.atlassian.net/browse/WB-23683
We're building a new UI that displays a multi-select field next to a plain text field: https://www.figma.com/design/8v53a9ldK9DcVUkILt4CIn/Scratchpad?node-id=3102-175949&m=dev
But there are some styling discrepancies between our
TextFieldandSelectcomps that are especially prominent when the two are displayed right next to each other.box-shadowto simulate border while TextField usesoutline. this results in the borders to behave ever so slightly differently:Screen.Recording.2025-03-24.at.2.00.31.PM.mov
There are also some styling issues with multi-select that are totally unrelated to TextField:
This PR addresses all of the issues listed above. For the border problem, I've converted Select to use outline like TextField does. Unfortunately, neither Select nor TextField actually fully match the design specs in figma. I think there must've been some changes to the designs since we originally implemented these components. That's probably something to be addressed separately (prob as part of the common comps epic)
Testing
Tested in core app; things generally look right/good (will link associated core PR once that's available)
Screen.Recording.2025-03-24.at.2.34.33.PM.mov