feat(onboarding): Section the SCM platform picker into Popular and Other - #122104
Draft
jaydgoss wants to merge 4 commits into
Draft
feat(onboarding): Section the SCM platform picker into Popular and Other#122104jaydgoss wants to merge 4 commits into
jaydgoss wants to merge 4 commits into
Conversation
This was referenced Aug 14, 2026
github-actions
Bot
added
the
Scope: Frontend
jaydgoss
force-pushed
the
jaygoss/scm-virtualized-menu-groups
branch
from
August 14, 2026 22:49
dc37a6e to
666f185
Compare
jaydgoss
force-pushed
the
jaygoss/scm-platform-picker-sections
branch
from
August 14, 2026 22:49
3a26b52 to
fe569ad
Compare
jaydgoss
force-pushed
the
jaygoss/scm-virtualized-menu-groups
branch
from
August 14, 2026 23:18
666f185 to
f88eab6
Compare
jaydgoss
force-pushed
the
jaygoss/scm-platform-picker-sections
branch
from
August 14, 2026 23:19
45c1f6e to
ccf4ea9
Compare
jaydgoss
force-pushed
the
jaygoss/scm-virtualized-menu-groups
branch
from
August 14, 2026 23:23
f88eab6 to
fcec062
Compare
Replace the flat alphabetical SCM dropdown with two labeled sections: the existing curated Popular list first (same order as the legacy Popular tab), then every other platform A-Z. The Select already supports react-select grouped options and styles the section headings; the virtualized menu list gained group support in the previous PR.
Section headings padded only to the row edge, so option content sat visibly indented under them because every option reserves a leading 1em checkmark column. Indent the headings by that column plus the leading-items gap so heading text lines up with the platform icons.
…shorthand The groupHeading base styles already contain a paddingLeft key from react-select's defaults, so overriding paddingLeft kept that key's early position and the later padding shorthand reset it. Override the padding shorthand instead.
The Other-section sort assertion reuses comparePlatformNames in its own expectation, so a regression to plain localeCompare would fail nothing. Assert directly that the .NET family sorts last so the distinguishing rule stays pinned.
jaydgoss
force-pushed
the
jaygoss/scm-platform-picker-sections
branch
from
August 14, 2026 23:24
ccf4ea9 to
335386a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TLDR
The SCM create-project SDK dropdown is now split into two labeled sections: the curated Popular list first, in the same order as the legacy Popular tab, then every other platform ordered like the legacy picker's All tab.
Details
A popularity-first flat sort reads as random without a visible boundary, so the split is made explicit with react-select option groups, which the core Select already styles (headings, section dividers) and the previous PR taught
ScmVirtualizedMenuListto render.platformOptionGroupsreusespopularPlatformCategoriesandcomparePlatformNamesrather than inventing a new ranking source, and each platform appears in exactly one section, so search and keyboard navigation see no duplicates. react-select drops a section while filtering once it has no matches. The stock headings sit flush with the row edge while options reserve a leading checkmark column, so the picker overrides the heading padding to line heading text up with the platform icons.When the framework-suggestion modal commits a key outside the static list, it is prepended as an unlabeled group; the Select's
groupHeadingstyle hides empty headings, so it renders as a bare option at the top, matching the previous behavior.Stack