v6: Add StatusBar layout component#4289
Merged
Merged
Conversation
🦋 Changeset detectedLatest commit: d9e822e 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 |
Contributor
|
The latest changes of this PR are not available as canary, since there are no linked |
trevor-scheer
force-pushed
the
trevor/statusbar-component
branch
from
5e2887c to
f6f2021
Compare
A 24px-tall footer at the bottom of the app showing connection status, schema type count, plugin count, cursor position, and document encoding/indent/language metadata.
`starships` is a real GraphQL field name in the Star Wars schema fixture. The status bar at 10.5px against `--bg-canvas` was 4.47 contrast on `--fg-disabled`; `--fg-subtle` clears the WCAG AA threshold.
The connection label only colored its text green or red; adds a small filled circle alongside the label so the connection state reads as a status indicator at a glance, with the dot taking the accent and the label staying in the neutral chrome color. Drops the `indent` slot. Indent is fixed for GraphiQL today, so showing `Spaces: 2` invited the assumption that it could be changed.
Cursor position isn't wired up to the Monaco editor today and was only exposed as a caller-provided prop, so the field never rendered in the app. Drops the prop and the corresponding render path; left as a future follow-up once a cursor store slice exists.
trevor-scheer
force-pushed
the
trevor/statusbar-component
branch
from
4501e93 to
d9e822e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a 24px footer pinned to the bottom of the GraphiQL app. It shows the connection status (with a small dot indicator), schema type count, plugin count, the document encoding, and the language label. The outer container becomes a flex column with a new
graphiql-bodywrapper for the sidebar-plus-main row, which keeps the status bar fixed beneath a scrolling content area.Test plan
Refs: #4219