JetBrains: Improve search box UI/UX
Created by: philipp-spiess
Fixes #36702 (closed) Fixes #37199 (closed)
This PR applies a bunch of changes to the JetBrains search box trying to mimic the Figma as good as possible.
Customization this part of the design is complicated since we do make heavy use of existing web components so for any components that need heaver customization, we have to fork the component into the JetBrains repo which dramatically increases maintainance cost as we now have two of the same components to maintain. To keep this as low as possible I tried to make some adjustments to get away with only forking two components (<SearchBox>
and <Toggles>
).
Here is what is currently missing from the Figma that I am aware of:
- I decided to not include an icon in the context menu dropdown since this would require me to fork another module. If we can avoid it, I'd strongly suggest we do.
- The individual drop downs (context menu and search specific ones) aren't styled at all yet. They are following two separate implementations that will be hard to match. Instead, for now, I suggest we use the default wildcard styling.
Known issues (they already happen on main
):
Other issues this fixes:
- I found out why the cursor has a weird blue border.
- I noticed that typing is really slow. Turns out we updated every result in the result list on every keystroke
😐 We also saved the previous search query after every keystroke. With these two issues fixed we now have a vastly better typing experience. - The focus ring now looks much better:
Test plan
This was tested manually. There isn't a lot of interactions that we need to take care here so I decided to keep the test plan simple and include two screenshots from dark and light mode instead:
With focus
Without focus
App preview:
Check out the client app preview documentation to learn more.