chore(svelte): Update fuzzy finder designs#63354
Conversation
Closes srch-458 This implements the new fuzzy finder design, specifically: - Backdrop and dropshadow - Border radius - Tab header (affects all tab headers) - Options
| .icon { | ||
| grid-area: icon; | ||
| } |
There was a problem hiding this comment.
Design feedback: the placement of the icon looks weird to me. It doesn't quite align visually with the label, it's also not centered on entry as a whole, and since there is no separator between elements, it kinda just looks like it's floating out in space.
There was a problem hiding this comment.
The icon should now be centered with the top line. Personally I think it's OK.
There was a problem hiding this comment.
This type of placement is usually done to make the icon not look out of place when placed against a multi-line label or something. In reality, it's aligned top-left to the entire item, then padded a bit.
Happy either way. Might not matter because we don't do multi-line here anyway.
| display: grid; | ||
| grid-template-columns: [icon] auto [label] 1fr; | ||
| grid-template-rows: auto; | ||
| grid-template-areas: 'icon label' '. info'; | ||
| column-gap: 0.5rem; |
There was a problem hiding this comment.
display: grid is my new favorite thing 😄
| left: 0; | ||
| } | ||
|
|
||
| .close { |
There was a problem hiding this comment.
Should there be a hover state on the close button?
There was a problem hiding this comment.
Probably. The designs didn't indicate what that should be.
There was a problem hiding this comment.
Yea, apologies, the components on it are a little out of date. Feel free to add the hover, and we'll do a refinement stage later too.
| border-radius: var(--border-radius); | ||
| background-color: var(--body-bg); | ||
| background-color: var(--color-bg-1); | ||
| margin-top: 2rem; |
There was a problem hiding this comment.
Intentionally not centered on the page?
There was a problem hiding this comment.
It didn't seem to be in the designs but maybe that was just my impression of it.
There was a problem hiding this comment.
Made it so that it's centered again.
There was a problem hiding this comment.
The modal should be anchored to the top of the page and offset from there, not centered. This prevents any positioning weirdness if/when it resizes.
There was a problem hiding this comment.
At the moment the modal always has a fixed height of 80vh, so I wouldn't expect weirdness.
Happy to make it dynamically sized but I think I'll leave that till we implement a proper empty state to see how that actually feels.
Yeah I felt like we made lots of changes to tabs and I'm confused :D |
Closes srch-458
This implements the new fuzzy finder design, specifically:
Note 1: Some aspects of the options UI (such as how paths are rendered and highlighted), and the "footer" depend on how the highlighted parts are computed. This will change when the local matching and ranking logic is removed and will be updated when that happens.
Note 2: The symbol icon coloring was broken by #63288 and will be fixed in a separate PR.
Test plan
Manual testing
Changelog