Move occasional actions to header menu, add guest to people strip - #332
Merged
Conversation
The list view opened with four filled orange buttons — Add Guest, Update from questions, Share, Back to Lists — stacked two rows deep above the list they were all less important than. Orange was doing two jobs at once, as the action colour and as the attention colour of the hidden-items callout, so the one thing on screen asking for a glance was camouflaged by four that were not. What the header carries now is a back chevron and a kebab: the same Radix menu the list cards already use for their own actions. "Add guest" moved to the people strip, where the people are — which also fixes a real disconnect, since the button used to open a name field several hundred pixels below, past the sticky bar and often off the bottom of a phone. The strip no longer hides itself when there is only one person on the list, because that is exactly the list a second person gets added to. Alongside, in Button: - A `subtle` variant. `ghost` is primary-tinted, so a row of quiet buttons still read teal; occasional actions should read as nothing in particular. - The filled variants move to gradients dark enough to carry white text. White on secondary-500 was 2.80:1 and on primary-500 2.49:1, against the 4.5:1 that 14px semibold needs. The decorative gradients stay bright — a progress bar answers to the 3:1 non-text rule. Same fix applied to the hand-rolled CTAs on the landing page and the wizard. - 44px minimum height, the floor the people chips already hold. - The scale bounce is behind `motion-safe:`. Show Packed drops to `subtle` while there is nothing packed to reveal: with the header quiet it had become the loudest thing on the page, for a toggle over an empty set. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Heb85VVme2oQbrv8UVifjZ
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Z1 reached Share as a top-level button. It moved into the header's actions menu, so the suite has to open the menu first — and twice over: the second click reopens Share after closing the modal, and picking an item closes the menu the first locator points into. CI's other e2e failure, F6, is a pre-existing flake — a route handler leaked from F5 — and passed on retry in the same run. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Heb85VVme2oQbrv8UVifjZ
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
2 participants
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
Reorganizes the packing list header to reduce visual weight on less-frequent actions. Moves "Share" and "Update from questions" behind a kebab menu, replaces the "Back to Lists" button with a subtle chevron, and relocates "Add Guest" from the header to the people filter strip where it's contextually relevant.
Key Changes
Header redesign: Replaced four filled buttons (Add Guest, Update from questions, Share, Back to Lists) with two controls:
ActionMenu) containing Share and Update from questionsNew
ActionMenucomponent: Createdsrc/components/ActionMenu.tsxusing Radix UI dropdown menu for consistent, accessible menu behavior with proper focus management and keyboard navigationGuest addition moved to people strip: Integrated guest-adding UI into
PeopleFilterBarvia newonAddGuestcallback, with inline name input that appears on demand rather than a header buttonButton variant refinement: Added
subtlevariant toButtoncomponent for occasional actions (neutral box, no gradient), with comprehensive test coverage ensuring proper emphasis hierarchyAccessibility improvements:
aria-labelonly (no text content) to avoid redundancy with nav barrole="menuitem"with Radix's roving focus and typeaheadTest updates: Updated 30+ test cases across
view-packing-list.test.tsx,PeopleFilterBar.test.tsx, and e2e tests to reflect new menu structure and guest-adding locationImplementation Details
onAddGuestis provided, opening an inline text field on the next line for full-width inputhttps://claude.ai/code/session_01Heb85VVme2oQbrv8UVifjZ