Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions apps/ui/src/components/MeasurementDashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,20 @@ const MetricRow = ({
</div>
);

const SectionHeader = ({
/**
* Numbered, collapsible section toggle used by every Measurement Dashboard
* sub-section. Structurally distinct from the ui/SectionHeader primitive —
* this whole component IS the click target (the entire row toggles the
* section open/closed) whereas the primitive renders a static h2 with an
* optional action slot. Wrapping the primitive in a <button> would either
* nest interactive elements or swallow the primitive's accessibility
* affordances, so the local toggle stays.
*
* The two data-text-role attributes (`meta` on the number badge,
* `section-title` on the title span) are emitted directly here for the
* same vocabulary as the primitive renders elsewhere.
*/
const NumberedSectionToggle = ({
number,
title,
isOpen,
Expand All @@ -303,6 +316,7 @@ const SectionHeader = ({
}) => (
<button
onClick={onToggle}
aria-expanded={isOpen}
className="w-full text-left flex items-center gap-2 hover:opacity-80 transition-opacity"
>
<span data-text-role="meta" className={getTextRoleClassName('meta')}>
Expand All @@ -314,7 +328,7 @@ const SectionHeader = ({
>
{formatDisplayText(title, 'title')}
</span>
<span className="text-text-secondary text-sm">{isOpen ? '−' : '+'}</span>
<span aria-hidden className="text-text-secondary text-sm">{isOpen ? '−' : '+'}</span>
</button>
);

Expand All @@ -339,7 +353,7 @@ const Section = ({
data-testid={testId}
className="bg-bg-card border border-border rounded-sm p-4 space-y-4 scroll-mt-24"
>
<SectionHeader
<NumberedSectionToggle
number={number}
title={title}
isOpen={isOpen}
Expand Down
10 changes: 5 additions & 5 deletions apps/ui/src/components/ui/MetricTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ const tileVariants = cva(
variants: {
accent: {
none: '',
accent: 'border-l-2 border-l-accent',
success: 'border-l-2 border-l-success',
warning: 'border-l-2 border-l-warning',
error: 'border-l-2 border-l-error',
neutral: 'border-l-2 border-l-border-light',
accent: 'border-l-2 border-accent',
success: 'border-l-2 border-success',
warning: 'border-l-2 border-warning',
error: 'border-l-2 border-error',
neutral: 'border-l-2 border-border-light',
},
},
defaultVariants: { accent: 'none' },
Expand Down
Loading