feat(pm-wizard): label-mapping UX redesign + combobox disabled-item fix#1163
Merged
zbigniewsobiecki merged 5 commits intodevfrom Apr 23, 2026
Merged
feat(pm-wizard): label-mapping UX redesign + combobox disabled-item fix#1163zbigniewsobiecki merged 5 commits intodevfrom
zbigniewsobiecki merged 5 commits intodevfrom
Conversation
Optional `swatch` field on ComboboxOption. When set, the Combobox renders a 12×12 rounded dot before the label in both the trigger (selected value) and every option row in the dropdown. Accepts any CSS color value — hex/rgb/named. Additive; existing callers that don't set `swatch` are unchanged. PM wizard label picker (next commit) uses this so operators can distinguish `cascade-*` labels at a glance. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
The Labels step shipped with three controls per row — a dropdown, a text input pre-filled with the SAME value as the dropdown, and a Create button — repeated for every slot whether mapped or not. Confusing, noisy, and makes fresh setup a 5-click chore. This rewrite: - **Searchable Combobox** replaces the plain <select> for enum-mode rows (Linear + Trello). Each label shows a color swatch so `cascade-*` labels are visually distinguishable. - **Bulk-create banner** at the top: when ≥1 slot has a default but no mapping, one click creates every missing label with canonical defaults (5 clicks → 1). Hidden when every slot is mapped or when the provider doesn't declare `createLabel`. Wires the existing but previously unused `createMissingLabelsMutation` hook. - **Per-row Create form** now renders only when the slot is unmapped. Mapped rows show a single clean Combobox. Cuts visual clutter ~50%. Free-text mode (JIRA) is unchanged — plain Input per slot. The Trello and Linear `useProviderHooks` expose the new `onCreateMissingLabels` + `creatingMissingLabels` values; the adapters pass them through. JIRA doesn't declare `createLabel` so the banner stays hidden automatically. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
Migrates the test strategy: enum mode uses element-tree traversal (same pattern as container-pick.test.ts) because the new Combobox- based rendering can't SSR through radix Popover. Free-text mode stays on renderToStaticMarkup. Adds coverage for the new UX contracts: - Each slot renders a Combobox with `swatch` mapped from label.color. - Mapped rows get `data-mapped="true"` and `data-has-create-form="false"`. - Bulk banner renders when missing-with-defaults ≥ 1 and both onCreateLabel + onCreateMissingLabels are supplied; hides otherwise. Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
…eyout cmdk v1+ always sets data-disabled="false" on every non-disabled CommandItem. The bare Tailwind variant data-[disabled]: generates the CSS selector [data-disabled], which matches any element that *has* the attribute — including data-disabled="false". This caused every option in every PM-wizard combobox (team picker, label picker, project-scope picker) to receive pointer-events-none + opacity-50, making all options visually greyed-out and impossible to click. Fix: data-[disabled=true]: generates [data-disabled="true"], which only fires on explicitly disabled items. Also: - Make renderBulkBanner's onCreate param required (always guarded at call site by showBulkBanner check) - Add seed-once comment to CreateLabelForm to document intentional useState(defaultName) behaviour - Add structural regression test that pins both Tailwind class strings so the fix can't be silently reverted Tally: 3 files changed, 57 insertions(+), 5 deletions(-) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Resolved conflict in label-mapping.tsx: kept required (non-optional) `onCreate` param and direct `onCreate(...)` call — the optional-chaining variant on dev was superseded by the type-tightening in this branch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.
Summary
NativeSelectwith the shared searchableCombobox(with color swatches), adds a bulk-create banner for unmapped slots that have defaults, and collapses the per-row create form once a slot is already mapped — reducing visual clutter in the happy path.Combobox: new optionalswatchfield onComboboxOptionrenders an 8×8 dot in both the trigger and each list item, letting operators distinguishcascade-*labels at a glance.data-[disabled]:→data-[disabled=true]:— cmdk v1+ always setsdata-disabled="false"on every non-disabled item; the bare Tailwind attribute selector[data-disabled]matched even"false", giving every optionpointer-events-none + opacity-50. All PM-wizard selectors (team picker, label picker, project-scope picker) were broken — options appeared greyed out and could not be clicked.Test plan
tests/unit/web/combobox.test.tspins the exact Tailwind class strings to prevent silent regression of the fixtests/unit/web/steps/label-mapping.test.tsfully rewritten for the new element-tree traversal pattern (enum mode uses Combobox which can't SSR); covers bulk-banner visibility, per-row create-form collapse, and free-text modepnpm test:unit)pnpm typecheckclean🤖 Generated with Claude Code