Skip to content

Explore more obvious section headers in quick pick #149057

Closed
Closed
Explore more obvious section headers in quick pick#149057
Assignees
daviddossett
Labels
under-discussionIssue is under discussion for relevance, priority, approachuxUser experience issues

Description

@daviddossett
David Dossett (daviddossett)
opened on May 9, 2022

The right-aligned label text has always been slightly confusing to me as a pattern to separate sections in quick pick lists. I think it's worth exploring how we might make these more obvious while still using vertical space efficiently.

Current

CleanShot 2022-05-08 at 21 29 37@2x

Examples

GitHub

CleanShot 2022-05-08 at 21 30 48@2x

Raycast

CleanShot 2022-05-08 at 21 31 09@2x

cc Lydia Chung (@lychung7) @misolori

Activity

  1. ImageDavid Dossett (daviddossett)
    added
    uxUser experience issues
    under-discussionIssue is under discussion for relevance, priority, approach
    on May 9, 2022
  2. ImageDavid Dossett (daviddossett)
    self-assigned this
    on May 9, 2022

  3. jaeyonglee8687 commented on May 18, 2022

    @jaeyonglee8687
    Jaeyong Lee (jaeyonglee8687)
    on May 18, 2022

    Sharing another example

    Runner Pro
    https://docs.sketchrunner.com/search-commands/run
    image

  4. daviddossett commented on Jun 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Jun 10, 2022
    CollaboratorAuthor

    A couple of possible solutions within the current quick pick design:

    CleanShot 2022-06-10 at 10 52 15@2x

    CleanShot 2022-06-10 at 10 52 20@2x

  5. daviddossett commented on Jun 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Jun 10, 2022
    CollaboratorAuthor

    This could also be extended into an idea I had for a "comfortable" density mode for the quick pick/command palette.

    CleanShot 2022-05-17 at 20 50

  6. ImageMiguel Solorio (miguelsolorio)
    moved this to 📋 Backlog in 💎 VS Code Designon Jun 14, 2022
  7. ImageMiguel Solorio (miguelsolorio)
    added this to 💎 VS Code Designon Jun 14, 2022

  8. daviddossett commented on Aug 8, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 8, 2022
    CollaboratorAuthor

    Extending these explorations to include ideas for actions in the section header rows. Some early ideas:

    With Inline Icon Actions

    with-section-headers

    With Icon Action Labels

    We could also use labels here since the inline icons alone would be a downgrade in terms of understanding what the command is—today we use the plain text as a quick pick entry so this could retain some of that clarity.

    with-action-labels

    cc @misolori TylerLeonhardt

  9. ImageDavid Dossett (daviddossett)
    moved this from 📋 Backlog to 🏗 In Design in 💎 VS Code Designon Aug 10, 2022

  10. TylerLeonhardt commented on Aug 10, 2022

    @TylerLeonhardt
    TylerLeonhardt
    on Aug 10, 2022
    Member

    I like that the separator buttons could have text to them though I'm sure the first feature request once that lands is to allow buttons in the normal quick pick items to have text :) not a bad idea but I am concerned about space in the quickpick...

  11. miguelsolorio commented on Aug 10, 2022

    @miguelsolorio
    Miguel Solorio (miguelsolorio)
    on Aug 10, 2022
    Contributor

    I think starting with icons (no labels) is a good start to match most of our inline actions. I also wonder if we can have the section header actions/toolbar appear when you are on a section, just like views?

    CleanShot 2022-08-10 at 10 46 28@2x

  12. daviddossett commented on Aug 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 10, 2022
    CollaboratorAuthor

    Agreed.

    I also wonder if we can have the section header actions/toolbar appear when you are on a section, just like views?

    By that do you mean like if you're navigating via keyboard we should up the parent actions? 👍 if so!

  13. miguelsolorio commented on Aug 10, 2022

    @miguelsolorio
    Miguel Solorio (miguelsolorio)
    on Aug 10, 2022
    Contributor

    Right now we show the toolbar whenever you are hovering in a view and then it hides when you are off, as opposed to only showing it when you are hovering over the section title.

  14. daviddossett commented on Aug 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 10, 2022
    CollaboratorAuthor

    Oh ok even better. Great idea.

  15. 2 remaining items

  16. daviddossett commented on Aug 15, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 15, 2022
    CollaboratorAuthor

    Incoroporated a few bits of feedback and fixes:

    • Added dedicated divder rows to help distinguish between sections
    • Added @misolori's suggestion to show the actions on hover/focus of children

    CleanShot 2022-08-15 at 09 32 47

  17. TylerLeonhardt commented on Aug 15, 2022

    @TylerLeonhardt
    TylerLeonhardt
    on Aug 15, 2022
    Member

    David Dossett (@daviddossett) two questions:

    • Do you think we should keep the existing look if no separators have buttons?
    • If so... If only a single separator has buttons, should they the UI of separators be aligned to all take up an entire row even if they don't have buttons?

  18. daviddossett commented on Aug 15, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 15, 2022
    CollaboratorAuthor

    Do you think we should keep the existing look if no separators have buttons?

    My gut feeling is that it should be a global change. There are a bunch of differences in font, spacing, etc. that makes me think it would be confusing for users to see different formats across different lists. Here's how it would look on a regular grouped quick pick list:

    CleanShot 2022-08-15 at 10 22 14@2x

    Some inspiration from Safari for those worried about keyboard interactions. Feels super natural to arrow up/down across sections:

    CleanShot 2022-08-15 at 10 54 03

  19. eamodio commented on Aug 16, 2022

    @eamodio
    Eric Amodio (eamodio)
    on Aug 16, 2022
    Contributor

    I like the latest iteration. Although I think the section headers are too bold -- the blue stands out and draws the eye much more than the actual choices. I would prefer a style closer to the safari example where the headers are more muted, so the focus stays on the choices themselves.

  20. daviddossett commented on Aug 18, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Aug 18, 2022
    CollaboratorAuthor

    I like the grey headers too, at least in this particular default theme. I've landed on that for now. We're also looking at how to better integrate section-specific actions. Today they're often placed at the bottom of a long quick pick list and can be easily missed.

    Header w/ Toolbar

    Shows up on hover anywhere in that section. Advantages here are the similarities to a view toolbar and reduced noise in the list. Possible makes it difficult to have a natural-feeling keyboard navigation. We also lose the descriptive list item labels + search capability we have today.

    CleanShot 2022-08-18 at 14 38 49

    Header with Pinned Action List Items

    We could have section-specific actions rendered at the top of the relevant section as normal list items. This could be achieved today but it would obviously need to be done manually. Maybe there's a way to pin items per section?

    CleanShot 2022-08-18 at 14 43 33@2x

  21. usernamehw commented on Oct 9, 2022

    @usernamehw
    Alexander (usernamehw)
    on Oct 9, 2022
    Contributor

    Any chance of keeping headers even after typing? For example, Theme Picker with empty input shows:

    ──────────────────────────────────────────────────────────── light themes
...
GitHub Light
GitHub Light Colorblind
Light (Visual Studio)
Light+ (default light)
...
──────────────────────────────────────────────────────────── dark themes
...
Dark (Visual Studio)
Dark+ (default dark)
GitHub Dark
GitHub Dark Colorblind
...

    After filtering they are no longer grouped (input content - github):

    GitHub Dark
GitHub Light
GitHub Dark Colorblind
GitHub Light Colorblind
...

    Ideally, groups should persist (input content - github):

    ──────────────────────────────────────────────────────────── light themes
GitHub Light
GitHub Light Colorblind
──────────────────────────────────────────────────────────── dark themes
GitHub Dark
GitHub Dark Colorblind

  22. daviddossett commented on Oct 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Oct 10, 2022
    CollaboratorAuthor

    Alexander (@usernamehw) I think that's a reasonable proposal but I'd need to see how to approach quick picks that show something different after typing. There are some examples of presenting other content instead of the filtered list.

  23. TylerLeonhardt commented on Oct 10, 2022

    @TylerLeonhardt
    TylerLeonhardt
    on Oct 10, 2022
    Member

    Alexander (@usernamehw) that sounds like a bug to me because I get that rough experience:
    image

    Can you open a new issue and we can get that looked at?

  24. daviddossett commented on Oct 10, 2022

    @daviddossett
    David Dossett (daviddossett)
    on Oct 10, 2022
    CollaboratorAuthor

    It does look like there is some strangeness going on here.

    CleanShot 2022-10-10 at 09 54 22@2x

  25. TylerLeonhardt commented on Oct 10, 2022

    @TylerLeonhardt
    TylerLeonhardt
    on Oct 10, 2022
    Member

    Martin Aeschlimann (@aeschli) is this feedback for you? ^

  26. aeschli commented on Oct 11, 2022

    @aeschli
    Martin Aeschlimann (aeschli)
    on Oct 11, 2022
    Contributor

    Agree that this looks strange. Filtering & sorting doesn't go with the separator header.
    It's probably a bug with quick fix dialog to still show the separator labels when filtering (and sorting)
    Only when sortByLabel: false is set the separators can be shown while filtering.
    That what is done in the remote indicator menu:
    image

  27. usernamehw commented on Oct 11, 2022

    @usernamehw
    Alexander (usernamehw)
    on Oct 11, 2022
    Contributor

    Is sortByLabel available to extension api?

  28. jo-oikawa commented on Sep 22, 2025

    @jo-oikawa
    Joanna Oikawa (jo-oikawa)
    on Sep 22, 2025
    Contributor

    Closing - this has been implemented as a separator. You can see an example of this with: search: quick search

  29. ImageJoanna Oikawa (jo-oikawa)
    closed this as completedon Sep 22, 2025
  30. Imagevs-code-engineering
    locked and limited conversation to collaborators on Nov 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

under-discussionIssue is under discussion for relevance, priority, approachuxUser experience issues

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions