Uh oh!
There was an error while loading. Please reload this page.
fix(web-shared): align metadata panel styling with attributes section - #2604
Conversation
Render hook metadata as key-value rows inside a DetailCard, matching the Attributes section instead of a raw JSON block with a separate label.
🦋 Changeset detectedLatest commit: c9828f6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Reuse DetailKeyValueRow for Module, Step ID, timestamps, etc. — same tighter spacing, typography, and no dividers as the Attributes section.
Add a dedicated cn module that understands text-heading, text-label, text-copy, text-button, and material utilities when merging classes.
Move vertical spacing to py-2 on the section container instead.
Restore shared DetailCard summary spacing for Input, Output, Events, and Attributes while keeping Metadata tighter with a summaryClassName override.
Replace the mono boolean and one-off Metadata summary override with CVA-backed row variants and semantic mono row wrapper.
Move spacing from summary margins to section padding and add content top spacing so collapsed and expanded detail cards both breathe consistently.
Keep DetailCard's default expanded content spacing for data panels, but let Metadata rows start directly below the title via contentClassName merge.
Replace the monolithic DetailCard (summary/trailing/disabled props plus child-type reflection for content) with a context-driven compound API: DetailCard + DetailCard.Trigger + DetailCard.Content. Drop the dead trailing branch, expose data-slot/data-state, and migrate all call sites.
It's a generic collapsible section, not a card-specific component. Rename the component, its parts, data-slots, and the file accordingly.
Export a batteries-included <Collapsible label> for the common case so consumers don't recompose the trigger/content every time, plus CollapsibleRoot/CollapsibleTrigger/CollapsibleContent for the few call sites that need to override part styling. Drop the dot-notation namespace.
It's a generic UI primitive, not sidebar-specific.
Drop the cn re-export from lib/utils; consumers import it from its actual source instead of routing through utils.
Move the extended cn (lib/cn) work to a separate PR; this branch keeps using the existing cn from lib/utils.
…tyling-be69 # Conflicts: # packages/web-shared/src/components/sidebar/detail-card.tsx
No backport to This UI refactor deletes To override, re-run the Backport to stable workflow manually via |
Summary
The top info rows in the detail panel (Module, Step ID, Spec Version, timestamps, etc.) are now grouped in a collapsible Metadata section with monospace values. As part of this work, the old
DetailCardwas rebuilt and renamed toCollapsiblewith a cleaner export surface.Changes
DetailCard→Collapsible(now incomponents/ui/collapsible.tsx):<Collapsible label>...</Collapsible>for the common caseCollapsibleRoot/CollapsibleTrigger/CollapsibleContentparts for the few call sites that override part styling (Attributes, Metadata, Events, event cards)sectionbranches, and the deadtrailingbranchdata-slot/data-stateattributes and usegroup-openfor chevron stateDetailMonoKeyValueRowwrapper for Metadata values$keys are still sorted after user keysNotes
cn(custom tailwind-merge class groups) work has been split out into a separate PR to keep this one focused.Verification
pnpm --filter @workflow/web-shared typecheckpassespnpm exec biome checkpasses on the touched files (only pre-existingnoArrayIndexKeywarnings remain inattribute-panel.tsx)