Hugh KaznowskiandClaude Sonnet 5
5038295554
Alerts, Metrics, Params, and Dashboards now toggle collapsed state when their header row is clicked, instead of requiring a dedicated collapse button. The chevron (CollapseToggle) becomes a purely visual, non-focusable indicator for these sections; HelpIcon and PopOutButton now stop propagation so they keep working without also collapsing the section. The log viewer's toggle (App.tsx/FilterBar) keeps its dedicated button, since that row is a filter toolbar with an editable input rather than a plain title bar, so CollapseToggle's onToggle prop stays available for that case. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
21 lines
765 B
TypeScript
21 lines
765 B
TypeScript
import { useDocsNav } from '../lib/docsNav'
|
|
|
|
// Opens the Docs panel scrolled to (and flashing) sectionId, instead of the user hunting for it in the Docs accordion (ticket 021).
|
|
export function HelpIcon({ sectionId, label }: { sectionId: string; label?: string }) {
|
|
const { openSection } = useDocsNav()
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
openSection(sectionId)
|
|
}}
|
|
title="Open docs"
|
|
aria-label={label ?? 'Open docs for this section'}
|
|
className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-soft bg-surface-2 text-xs leading-none text-text-muted hover:border-border-strong hover:text-text-secondary"
|
|
>
|
|
?
|
|
</button>
|
|
)
|
|
}
|