Skip to content

v6: Restyle Tabs#4281

Merged
trevor-scheer merged 2 commits into
graphiql-6from
trevor/restyle-tabs
May 15, 2026
Merged

v6: Restyle Tabs#4281
trevor-scheer merged 2 commits into
graphiql-6from
trevor/restyle-tabs

Conversation

@trevor-scheer
Copy link
Copy Markdown
Contributor

@trevor-scheer trevor-scheer commented May 15, 2026

Summary

  • Tabs primitive moves to v6 OKLCH tokens.
  • Active tab uses a top accent border that overlaps the strip's bottom border.
  • Adds Storybook stories: TwoTabs and ManyTabs.

Test plan

  • Open Primitives/Tabs; check both stories.
  • Arrow-key navigation cycles tabs.
  • Active tab's top border visually overlaps the strip's bottom border (no double line, no gap).

Refs: #4219

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 15, 2026

🦋 Changeset detected

Latest commit: 3eeba5c

The changes in this PR will be included in the next version bump.

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

@trevor-scheer trevor-scheer force-pushed the trevor/restyle-tabs branch 2 times, most recently from 11b7279 to 7cf1ee6 Compare May 15, 2026 19:08
Switch tab strip styles to v6 OKLCH tokens. Active tabs get a top blue border that overlaps the strip's bottom border; inactive tabs use a dimmer text color.
Decorator wraps stories in a `.graphiql-container` and now sets that container (and the body) to the active theme's `--bg-canvas` and `--fg-default`. Without an opaque themed ancestor, axe-core walks up to the browser-default white body and contrast checks fail against any theme-aware text. This makes stories look like the real app and lets a11y tests evaluate the right surface.
@trevor-scheer trevor-scheer force-pushed the trevor/restyle-tabs branch from 7cf1ee6 to 3eeba5c Compare May 15, 2026 19:09
@github-actions
Copy link
Copy Markdown
Contributor

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

@trevor-scheer trevor-scheer marked this pull request as ready for review May 15, 2026 19:18
@trevor-scheer trevor-scheer merged commit 5fb2d64 into graphiql-6 May 15, 2026
13 checks passed
@trevor-scheer trevor-scheer deleted the trevor/restyle-tabs branch May 15, 2026 19:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant