Design Systems Patterns

[miguelsolorio]

Summary

This design exploration aims to look at how we can make the product more consistent from a design system perspective. Parts of the products use certain patterns while others don't, so we will explore what this could look like. The list below will grow and evolve as we discover more patterns:

• Overflow
• View and action management
• Contextual windows (notification center, feedback)
• Drag and drop
• Filtering

Design Proposal

Overflow and view management

Below is video walkthrough of the current proposal for how we could apply our overflow and view management patterns to other areas like toolbar actions, status bar items, etc.

Related issues

• Allow hiding the buttons in the tab bar line and in the panel title bar #46403
• Customizable status bar item locations #35744
• User configurable menus #9285

design-patterns-overflow-view-action-management.mp4

Contextual windows

In the status bar, we utilize contextual windows to display content close to the user's click target. Using the same spirit, this concept looks at using a "mini quick pick" for items that derive from the status bar. Because the quick pick can filter out results based on the input field, we inverted the orientation to keep the position of the input consistent.

CleanShot.2022-02-03.at.18.20.39.mp4

Drag and drop

We currently allow users to move around views in the Activity Bar, Sidebars, and Panels. This explorer aims to see how we can extend this to the editor area and allow you to move files that are inside of views (Problems, References, Diff, etc.) and other views into the editor area. We also looked at how we can extend the drag and drop functionality for inserting paths/links in markdown/typescript files.

Related issues

• Allow to add file reference with drag and drop. #5240
• Allow to enter split editor view via drag and drop #133018
• Drag-and-drop from Source Control panel #111260

Filtering

We have a, hard to discover, feature in tree views that allow the user to filter the list view on type. This exploration looks at making that a little more discoverable by adding an entry point in the list header. This is also looks at consolidating the search filters & queries from the problems/settings/extensions views for a consistent experience.

Related issues

• "Normal" filtering input for trees #70646