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

[cognominal]

disclaimer: I am new to vscode internals

I want to add a secondary breadcrumb bar to browse a raku parse tree.

I wanted to see how it could be integrated in vcode so i found your post and maybe my input may be of interest.

I arrived to the conclusion that horizontal bars including the status bar should be drag and droppable either to a top zone and a bottom zone kind like the icons on the activity bar.
Also Inline widgets should share or be derived from the same model as breadcrumb bars (do they?) because they both provide a view of a tree. Maybe one could be able to drag and drop a breadcrumb bar to the primary or secondary bar to create an inline view (same model again).

What is the branch you use for this work ?