Repository navigation
fix(ui): ui kit harmonisation after naive-ui (tokens, sizes and touch, tooltips, field states, toggles, one overlay system) - #592
Merged
Conversation
… page - 'secondary' on PButton becomes type="secondary" (COGM and the two Material I/O toggles were rendering primary blue); bordered, size, multiple, clearable and status that the kit never had are removed - vue-tsc checkUnknownProps/checkUnknownEvents, with role, title, id, aria-* and data-* allowed to fall through (ui.types.ts) - remove buttonConfig defaults, the unused v-click-outside directive and PSelectElement/PPagination from the barrel - rename PFormSeperator to PFormSeparator - /dev/kit shows every kit component, in dev and VITE_KIT_PAGE builds Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- style.css tokens: surface, surface-sunken, line, line-strong, hover, selected, ink, ink-strong, primary, link, radius-control (4px), radius-panel (6px), shadow-panel; gray-dark, pp-border and link-primary alias them - popover, menu, select list, tooltip and toast share one panel look; modal and drawer the same surface and shadow; one hover highlight - no hex or rgb literals left in the kit (PDataTable, PTable, PPagination, PPopover, PModal, PDrawer, PDropdown) - error buttons are filled negative with dark text and follow the colour-blind palette; warning buttons and tags are amber - PSpin colours from a fixed map - app: raw red/orange on negative/warning, text-white/60 and /55 on muted - kitTokens.test.ts guards literals and raw red/orange/green Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- size (sm | md) on PSelect, PSelectMultiple and PCheckbox; every control is 28px at md and 24px at sm (PInput sm gets a height, a textarea none); MaterialTile and CXTickerPreference get their sm back - touch-target utility: an invisible 44x44 hit area under pointer: coarse, on PButton, PCheckbox, PInputNumber steppers, PLayerClose, pagination, table sort and expand buttons, PTag close, PDropdown items and the raw buttons in Planet Search, Management and the plan analytics box - text fields and select triggers are 44px tall on touch screens - PCheckbox indeterminate; Management's native checkboxes move to it Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- useTooltipTrigger holds the open rules (hover with a 150ms close delay, focus in the trigger, Esc caught in the capture phase, a tap on a non-interactive trigger toggles, a tap on a control inside runs it), for PTooltip and the coming chart tooltips - PTooltip: role=tooltip panel, aria-describedby on the trigger's first focusable element, a trigger without one becomes a tab stop; disabled tooltips add nothing - the clickable planet resource div in PlanProduction is a button Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- status (error | warning) on PInput, PInputNumber, PSelect and PSelectMultiple: an inset ring, aria-invalid for an error - PFormItem error shows the message under the field, puts the control in the error state and links it and #info with aria-describedby - PNotice (info, warning, error; #action), role alert or status; the 11 hand-styled notices move to it - the construction cart's red inputs and the Exchanges name warning use status; the warning shows again - PModal width; the 9 call sites drop their ! width classes - PInput #prefix (Planet Search drops its padding override); PSelectMultiple placeholder, clearable off by default Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- PButton pressed: sets aria-pressed, primary while pressed, its type
(default secondary) when not; the 27 buttons that switched type to
show a selection or an on/off state use it
- PTag closable renders a real 'Remove {label}' button that emits close;
the clickable #icon slot is gone and PSelectMultiple chips use it
- the select triggers lose their <label> wrapper, which forwarded every
click on the trigger to the first chip's remove button
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- useSelectList: search, filtering, highlight (still one option per arrow key) and keys, shared by PSelect and PSelectMultiple, which keep only value handling and their trigger - select lists are non-modal layers in useOverlayLayer, positioned with createFloating: Esc closes only the list, a pick in a select inside a popover keeps the popover open; currentlyOpenId, the select's own popper and PPopover's data-pselect-dropdown check are gone - combobox/listbox semantics: aria-controls, role=option with aria-selected, groups, aria-activedescendant; a keyboard-opened searchable select focuses its search, Esc and Enter return to the combobox - z-indexes from ui/zIndex.ts; tooltips render (and describe their trigger) only while open, so closed ones add no nodes - PDataTable's expand column header gets a screen-reader label - tests: listbox roles, Esc in a select inside a modal, drawer and popover, axe over the kit page Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…lectElement and PConfirmHost Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- a chip's remove button keeps Enter and Space (the combobox opened or picked instead), so chips can be removed by keyboard - touch-target is at least 24px for every pointer (44px on touch); tooltip triggers that become tab stops get it - PForm rows don't clip the hit areas on touch screens - PSelectMultiple is 28/24px tall again (less padding) - a tooltip adds its id to a field's own aria-describedby instead of replacing it - more built than planned is a warning, not an invalid value - architecture.md no longer mentions v-click-outside Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…chips - PInputNumber steppers and a tag's remove button are visibly 44px on touch screens instead of an invisible hit area that covered their neighbour (a tap on the right of − incremented) - a tooltip on a disabled control: the trigger takes focus, hover and taps (the COGM tooltip explains why it's disabled) - PSelectMultiple chips follow its size, so sm is 24px with chips - removing a chip by keyboard keeps focus in the select - PForm content keeps min-width 0, so its grid sizes as before - docs: hit areas next to each other, the table-row limit Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…eways only - PInputNumber's steppers are mouse-only (as with the keyboard) and hidden on touch screens, where 44px steppers left no room for the number; the field opens the numeric keypad - PForm rows clip sideways only (the ellipsis), so a checkbox's hit area isn't cut to the row on a mouse either - docs: steppers on touch, buttons close together share the space Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- a tag's remove button is a target on a mouse too (touch-target, 24px); on touch screens it stays visibly 44px inside its chip - docs: PForm rows only clip sideways Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…filled data A missing exchange ticker left MaterialTile with a partial overview, and its tooltip (now also opened by keyboard focus) threw on render. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…plete the password Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…p only The kit's button min width no longer overrides the app's min-w-30, so at 768 the 120px button squeezed the plan title until it wrapped. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
# Conflicts: # src/features/account/components/RegistrationComponent.vue
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
✅ Deploy Preview for prunplanner-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
jplacht
added a commit
that referenced
this pull request
Oct 13, 2026
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | -25 |
| Duplication | 0 |
🟢 Coverage 100.00% diff coverage · +0.02% coverage variation
Metric Results Coverage variation ✅ +0.02% coverage variation (-1.00%) Diff coverage ✅ 100.00% diff coverage Coverage variation details
Coverable lines Covered lines Coverage Common ancestor commit (7cc168d) 4152 4061 97.81% Head commit (3ea037b) 4153 (+1) 4063 (+2) 97.83% (+0.02%) Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch:
<coverage of head commit> - <coverage of common ancestor commit>Diff coverage details
Coverable lines Covered lines Diff coverage Pull request (#592) 1 1 100.00% Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified:
<covered lines added or modified>/<coverable lines added or modified> * 100%
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
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.
What and why
naive-ui is gone, but
src/ui/still looked and behaved like the library it replaced: seven floating-panel looks, literal colours, buttons off the tokens, props that don't exist (three "secondary" buttons rendered blue), tooltips on mouse hover only, no field error state and three overlay systems. This makes it one kit on the tokens and the colour-blind palette. It's usable by keyboard and touch (44 px targets on touch screens, tooltips on focus and tap) and has the options the app kept working around, so the chart specs can build on it.Changes
pnpm tscnow fails on unknown props or events (checkUnknownProps/checkUnknownEvents). There's a kit page at/dev/kit(dev builds, orVITE_KIT_PAGE=true).primary/negative/warning, and the app's raw red/orange/green andtext-white/60now use tokens.sm/mdheights are equal at 24/28 px. Atouch-targethit area gives 24 px everywhere and 44 px on coarse pointers, and fields are 44 px tall on touch.PCheckboxgainssizeandindeterminate.aria-describedby. Field states:statuson fields,PFormItem error,PNotice(11 notices migrated),PModal widthand aPInput #prefixslot.PButton pressedsetsaria-pressed(27 toggles);PTag closableis a real "Remove {label}" button.useSelectList, listbox ARIA, Esc closes only the list);stateCurrentOpenand thedata-pselect-dropdownhatch are removed.Outside the kit,
getMaterialExchangeOverviewnow rejects instead of returning a half-filled overview, which made the MaterialTile tooltip throw. The branch keeps one commit per part plus the QA fix commits.How it was verified
QA: PASS after five rounds:
checks.sh, theqacode review, and theqa-e2ewalk in the running app. Details are in the spec's QA report.Checks:
pnpm testpassed: 142 files, 3870 tests. It ran with--maxWorkers=3because, at load average 20,main.test.tshits its 30 s timeout with the default workers, before and after the merge alike.pnpm test:components: 950 tests passed.pnpm tsc,pnpm lintandpnpm knippass.UI audit: all pages at 8 widths, against a baseline taken on main. No regressions versus baseline.
Bench (select): open with 330 options takes 3.5 → 3.7 ms. ArrowDown with 2000 options takes 0.7 → 0.8 ms, with 3 updates per key on both.
Visual sign-off: 35 main | branch | diff pairs, signed off row by row. They're in
specs/assets/ui-kit-harmonisation/in the workspace repo.Merge of main: brought in fix(account): registration form keeps the security planet after an error and shows every field error at its field #591 (signup-02).
RegistrationComponent.vueconflicted: the new top error (alertText+alertMessages) now renders inside aPNotice, and the field errors are unchanged. Its tests now find thePNotice(separate commit). The registration flow was retested in the app after the merge: PASS. The username error shows under its field with thePNoticeabove, the security planet and answer are kept, and the notice clears once the field is fixed. The UI audit of landing, login-form and onboarding shows no regressions.Screenshots
Desktop (1440):
Mobile (375, touch):
Main | branch | diff comparisons for 35 states are in the workspace repo,
specs/assets/ui-kit-harmonisation/.Deploy order
Frontend only; no backend or API change.
🤖 Generated with Claude Code