Skip to content

v6: Add SidePanel component#4291

Merged
trevor-scheer merged 4 commits into
graphiql-6from
trevor/sidepanel-component
May 17, 2026
Merged

v6: Add SidePanel component#4291
trevor-scheer merged 4 commits into
graphiql-6from
trevor/sidepanel-component

Conversation

@trevor-scheer
Copy link
Copy Markdown
Contributor

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

Summary

This PR adds a SidePanel that hosts the active plugin's content next to the new activity rail. The panel renders nothing when no plugin is active, and remains user-resizable via the existing drag handle. Together with the activity rail change, it completes the left-side navigation chrome for the v6 layout.

Test plan

  • Open the deploy preview. With no plugin active, confirm the side panel area is collapsed and the editor takes the full width.
  • Click a plugin icon in the activity rail; confirm the side panel opens with that plugin's content.
  • Drag the divider between the panel and the editor; confirm the panel resizes smoothly and the width persists when you switch between plugins.
  • Click the active plugin's icon a second time; confirm the panel closes.
  • Toggle dark/light theme via the settings dialog; confirm the panel chrome reads from the active tokens.

Refs: #4219

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 16, 2026

🦋 Changeset detected

Latest commit: 1b19a4d

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

@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 force-pushed the trevor/sidepanel-component branch 2 times, most recently from e99a938 to 96dd313 Compare May 17, 2026 18:41
Hosts the active plugin's `content` ReactNode in a 340px-wide
panel next to the activity rail. Renders nothing when no plugin
is active. Width is user-resizable via the existing drag handle.
Splits the connected `SidePanel` from a pure `SidePanelView`. The unit
tests now render `SidePanelView` directly, sidestepping the monaco
teardown errors that `GraphiQLProvider` triggers in jsdom.
@trevor-scheer trevor-scheer force-pushed the trevor/sidepanel-component branch from 96dd313 to 1f1eeb9 Compare May 17, 2026 18:52
@trevor-scheer trevor-scheer marked this pull request as ready for review May 17, 2026 19:05
@trevor-scheer trevor-scheer enabled auto-merge (squash) May 17, 2026 19:05
@trevor-scheer trevor-scheer merged commit 4fa53a8 into graphiql-6 May 17, 2026
13 checks passed
@trevor-scheer trevor-scheer deleted the trevor/sidepanel-component branch May 17, 2026 19:11
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