Microsoft/vscode

Make dropdown control looks more consistent with other parts

Open

#224,780 opened on Aug 5, 2024

View on GitHub
 (9 comments) (1 reaction) (1 assignee)TypeScript (10,221 forks)batch import
dropdownfeature-requesthelp wantedux

Repository metrics

Stars
 (74,848 stars)
PR merge metrics
 (Avg merge 11h 43m) (1,000 merged PRs in 30d)

Description

image Control like this uses native select control. I think there are several drawbacks:

  1. No smooth scrolling
  2. No shadow
  3. It's hard to change its appearance or extend its function in the future. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#styling_with_css
  4. The separator is of the same height as other options and not enough width (since it's just a disabled option with text ----). It should be like in the normal menu, extending to both sides and having a smaller height.

Therefore I suggest using a custom control instead.

Contributor guide

Research direction
Investigate how the current native select is used and explore implementing a custom dropdown component using VS Code's UI toolkits like vs/base/parts/dropdown. Consider styles and accessibility requirements.
Tech stack
typescriptcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
CSSTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55