feat: cleanup <Tabs /> component (#23839)

This refactors `<Tabs />` into two clearer patterns: link tabs for route
navigation and Radix tabs for stateful tab panels. That gives us proper
accessibility semantics where we need them without overloading simple
navigation tabs.

As part of that split, this updates several consumers, adds coverage for
both variants, and cleans up some nearby styling.

- introduce Radix-backed tabs primitives for tabbed content
- move router-based tabs to `LinkTabs`
- update notifications, IdP sync, and workspace build pages to use
semantic tabs
- preserve route navigation tabs for groups and templates
- add stories/tests for both tab implementations
- simplify related layout and styling in touched components
This commit is contained in:
Jake Howell
2026-04-02 03:45:20 +11:00
committed by GitHub
parent 4a363b0d85
commit e81275a91c
15 changed files with 476 additions and 262 deletions
@@ -88,12 +88,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
<Fragment key={stage}>
<div
className={cn(
"logs-header text-sm font-semibold font-sans leading-none",
"border-solid border-0 border-b bg-surface-primary",
"flex items-center",
"[&:last-child]:border-b-0 [&:last-child]:rounded-b-lg",
"[&:first-of-type]:rounded-t-lg",
sticky && "sticky top-0",
"logs-header",
"flex items-center border-solid border-0 border-b border-border font-sans",
"bg-surface-primary text-xs font-semibold leading-none",
"first-of-type:pt-4",
)}
style={{
padding: `12px var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
@@ -101,12 +99,18 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
>
<div>{stage}</div>
{shouldDisplayDuration && (
<div className="ml-auto text-content-secondary text-xs">
<div className="ml-auto text-xs text-content-secondary">
{duration} seconds
</div>
)}
</div>
{!isEmpty && <Logs hideTimestamps={hideTimestamps} lines={lines} />}
{!isEmpty && (
<Logs
className="border-b-border"
hideTimestamps={hideTimestamps}
lines={lines}
/>
)}
</Fragment>
);
})}