Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Show current search shortcut in search box sidebar #21619

Merged
merged 8 commits into from May 10, 2023

Conversation

gitstart
Copy link
Contributor

Issue: #21325

What I did

  • Replace fixed / on search field by the shortcut key

How to test

  • Start a sandbox template: yarn task --task dev --template react-vite/default-ts
  • Open: http://localhost:6006/?path=/settings/shortcuts
  • Change "Focus search" shortcut to any key collection
  • Search field on sidebar shows new key collection instead of fixed /

Screenshot at Mar 14 23-06-16


This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

@gitstart gitstart marked this pull request as ready for review March 15, 2023 16:28
@gitstart gitstart marked this pull request as draft March 15, 2023 16:29
Co-authored-by: phunguyenmurcul <51897872+phunguyenmurcul@users.noreply.github.com>
@gitstart gitstart force-pushed the ui/show-current-search-shortcut branch from 22419a5 to cf70e64 Compare March 15, 2023 16:32
@gitstart gitstart marked this pull request as ready for review March 15, 2023 16:35
@gitstart gitstart marked this pull request as draft March 15, 2023 17:24
Co-authored-by: phunguyenmurcul <51897872+phunguyenmurcul@users.noreply.github.com>
@gitstart gitstart marked this pull request as ready for review March 16, 2023 03:25
@yannbf yannbf self-assigned this Mar 20, 2023
@kylegach kylegach added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Apr 10, 2023
@@ -126,6 +126,7 @@ const FocusKey = styled.code(({ theme }) => ({
borderRadius: 3,
userSelect: 'none',
pointerEvents: 'none',
fontFamily: 'inherit',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is super interesting! I think you spotted a problem that has been there for quite some time cc @MichaelArestad

The font-family for code elements is ui-monospace, while the rest of Storybook uses Nunito sans. I think it'd be better to handle this elsewhere, so we can also fix the issues in the setting tooltip. For instance, it looks like this now:
image

with the font fixed, it will look like this:
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Howdy! Nice catch! Can you undo this change? I will fix this typeface in a followup PR. Thank you!

Copy link
Member

@yannbf yannbf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great! Thank you so much for your contribution <3

gitstart and others added 3 commits May 10, 2023 05:26
Co-authored-by: phunguyenmurcul <51897872+phunguyenmurcul@users.noreply.github.com>
@yannbf yannbf merged commit b3c9b95 into storybookjs:next May 10, 2023
48 checks passed
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label May 12, 2023
shilman pushed a commit that referenced this pull request May 12, 2023
UI: Show current search shortcut in search box sidebar
@shilman shilman mentioned this pull request May 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch ui: search
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants