Skip to content

v6: Remove the legacy editor toolbar and corner logo#4398

Draft
trevor-scheer wants to merge 7 commits into
graphiql-6from
trevor/remove-legacy-editor-chrome
Draft

v6: Remove the legacy editor toolbar and corner logo#4398
trevor-scheer wants to merge 7 commits into
graphiql-6from
trevor/remove-legacy-editor-chrome

Conversation

@trevor-scheer

@trevor-scheer trevor-scheer commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Remove the legacy vertical editor toolbar and the floating "GraphiQL" corner logo. Branding now lives only in the top bar, and editor actions live only in the tab strip.
  • Move Merge Fragments, previously available only in the old toolbar, into the tab-strip actions alongside Prettify, Copy, and Save, so the action isn't lost.
  • The composable Toolbar/Logo render-prop slots still work for embedders. Only the default rendering is removed.
  • Enlarge the tab-strip action buttons so they're easier to click.
  • Position the action buttons at the right edge of the query editor instead of the far right of the response pane, so they stay next to the query and follow the editor/response divider as it's resized. The sessions area is split into an editor column and a response column divided by the drag bar; the tab strip lives in the editor column.

Test plan

  • Open GraphiQL. There's no floating vertical button column and no corner logo over the editor; branding appears once, in the top bar.
  • The tab strip shows Prettify, Merge Fragments, Copy, and Save, each exactly once.
  • The action buttons sit at the right edge of the query editor (by the editor/response divider), not over the response pane, and follow the divider when it's dragged.
  • Write a query that references a fragment, click Merge Fragments, and confirm the fragment gets inlined into the operation.
  • Prettify reformats the query, Copy copies it, and the single Run button in the top bar still executes it.
  • The Prettify, Merge, and Copy keyboard shortcuts still work.
  • The tab-strip action buttons read as comfortably sized, not cramped, and stay evenly spaced and aligned with the tab labels.

Refs: #4219

The v6 layout puts branding in the top bar and editor actions in the
tab strip, but the old vertical toolbar and corner logo still rendered
alongside them, so prettify and copy appeared twice and a second
"GraphiQL" logo floated over the editor. Drop the legacy chrome and
move Merge Fragments, which only lived in the old toolbar, into the
tab-strip actions so the action isn't lost.
@changeset-bot

changeset-bot Bot commented Jul 10, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 01e9dce

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

This PR includes changesets to release 1 package
Name Type
graphiql Minor

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

The prettify/merge/copy/save buttons sat at the far right of the tab
strip, over the response pane — far from the query you're editing.
Split the sessions area into an editor column and a response column
divided by the drag bar, and move the tab strip into the editor column
so the actions land at the editor's right edge and follow the divider
as it's resized.
Reconcile the two-column sessions restructure with the flattened,
flush editor frame that landed on graphiql-6 (#4397, #4405):

- Drop the 8px inset on `.graphiql-session-row` so the panes sit flush
  to the frame edges, matching the inset-padding removal (#4405).
- Move the editor/response divider `border-right` from `.graphiql-editors`
  onto `.graphiql-editor-column` so it runs the full column height
  (header + editor) rather than only the editor body.
- Keep `min-height: 0` on `#graphiql-session`.
The editorFlex resize ref moved from .graphiql-editors onto the new
.graphiql-editor-column wrapper, so the panel-resizing test now reads
flexGrow from the column.
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