Skip to content

Consolidate tabs - #8511

Open
jonathanawesome wants to merge 23 commits into
mainfrom
consolidate-tabs
Open

jonathanawesome wants to merge 23 commits into
mainfrom
consolidate-tabs

Conversation

@jonathanawesome

@jonathanawesome jonathanawesome commented Sep 18, 2026

Copy link
Copy Markdown
Member

This PR migrates ui/tabs onto three base components on Base UI.

Valid uses of tabs were migrated 1:1 with only slight visual changes (ie animated active indicator).

TabbedView is a new wrapper component for the previously-nested tab views on checks and history.

SecondaryNavigation is a <nav> of router links replacing the old bits, which were navigation styled as tabs.

ui/tabs.tsx, navigation/secondary-nav-link.tsx and @radix-ui/react-tabs are deleted.

Found along the way

  • A global Monaco reset, [role='presentation'] { background: transparent !important }, cleared the background of every presentation-role element on the page.
  • The new-proposal page kept its Submit Proposal button inside the tab list. It moved to the page heading's side slot.
  • The proposal editor let you rename a new service through an input inside the tab button. Renaming moved to the settings panel next to the service URL, with a name conflict shown on the field and as a tooltip on the tab. This settings panel is also now a proper popover, not handrolled.
  • The checks and version pages kept a contract selection from the previous check or version, and a view choice carried across contracts even where that view was disabled. Both reset now.
  • The layout bars' links were marked current by the router's prefix match as well as by the page value, so Overview and Schema read as current on every page in their area. Links match exactly now.
  • Tab strips scroll sideways once their tabs outgrow them, as the old editor strip did. Tabs get a visible focus ring again.
  • Every Select in the app has an accessible name now: a visible label pointing at the trigger where one exists, aria-label where none does. The trigger is a combobox, which takes no name from its text.
  • Keyboard focus is settled by shape. Controls with an edge keep the 2px solid accent ring; tabs and the layout bars' links share a quiet 1px dotted one; the legacy --ring token follows the accent so the old button matches until it goes.

Checks & History updates

  • The meta cards at the top of both pages are DescriptionList now, which gained a title term style (12px medium terms over 13px values) and auto-fit columns.
  • The check and version pages now name the failed contracts in a new base FailureCard.
  • A new base Legend explains the status icons
  • The content under the tabs on both pages, and the shared changes list, use the critical color token instead of raw red shades.
  • New seed for locally verifying checks and history: TARGET=<target id> pnpm seed:history replays a schema history against any target: versions and checks over six weeks, and on a federation project four contracts with a failed contract version and checks that fail only on a contract.
  • A contract whose baseline failed to compose now shows as failed in the picker, not passed, and a service can be removed from a proposal from the keyboard, through the settings popover.

@jonathanawesome
jonathanawesome added this pull request to stack #8508 September 18, 2026 00:59
@github-actions

github-actions Bot commented Sep 18, 2026

Copy link
Copy Markdown
Contributor

🐋 This PR was built and pushed to the following Docker images:

Targets: build

Platforms: linux/amd64

Image Tags: 11.14.1-alpha-8e188c9, 8e188c9, 8e188c9f7237ae687fd89dd1d9b34f275586cb1e

@theguild-bot

theguild-bot commented Sep 20, 2026

Copy link
Copy Markdown
Collaborator

🚀 Snapshot Release (alpha)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package Version Info
hive 11.14.1-alpha-20260921234308-8e188c9f7237ae687fd89dd1d9b34f275586cb1e npm ↗︎ unpkg ↗︎

Base automatically changed from consolidate-toast to main September 21, 2026 15:50
…views against ui/tabs, and the tabs inventory
…to base SecondaryNavigation and drop the tabs-based nav link
…or and new proposal page onto base Tabs, and scope the Monaco presentation reset so the tab indicator paints
…proposal editor service tabs onto base Tabs, with service renaming in the settings panel
…ry with call-site previews for Tabs, TabbedView, SecondaryNavigation and the laboratory ToggleGroup
…ith call-site previews, move TabbedView's picker out of the tablist, and fix the header tab sizes, exact link matching and the checks and history state resets
…e gear button, and let the vertical Tabs panel scroll inside a page that fixes its height
…tus icons out of the leading slot, clear of the selection check
…ith a button to scope to it, and base Legend, a key to icons shown without their text, and move TabbedView under Components in foundry
…d navigation links share a quiet dotted one, and the legacy ring token follows the accent

@jdolle jdolle left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good overall.

I've added some recommended changes to #8525

Most are small bugs around state or very minor visual things. Nothing major, so I'm approving this PR.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants