v6: Redesign Schema Explorer panel structure#4299
Draft
trevor-scheer wants to merge 11 commits into
Draft
Conversation
- PanelHeader title is now the eyebrow label "Schema Explorer" with filter and search icon buttons in actions - New Breadcrumb component below the header: mono font, color-coded depth segments (root blue, intermediate green, current strong), chevron separators, click-to-navigate - New SearchRow component: inline search below breadcrumb with "Filter fields..." placeholder and keycap hint, listbox drops as a content-area popover - New TypeCard component: [TYPE] badge (accent-blue tinted, mono, uppercase), type name in mono, description paragraph, "implements X · Y" row with orange accent links - New FieldsList component: "FIELDS · N" collapsible header, each row mono fieldName (green) : returnType (orange), 2px accent-blue left border on active row, optional description in fg-subtle - TypeDocumentation gains `hideHeader` prop to suppress description/implements/fields when TypeCard+FieldsList render them - Unit tests updated to query new breadcrumb selectors instead of removed title element - Cypress docs selectors updated: back navigation via breadcrumb, title checks via breadcrumb-current - Storybook stories extended: object/interface/input/enum type detail, breadcrumb nav, all using v6 components
🦋 Changeset detectedLatest commit: 473dc8d 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 |
Replace the v5-style `SchemaDocumentation` component with a new eyebrow-section layout: `ROOT TYPES` shows each operation with its `MethodPill` and target type name; `ALL SCHEMA TYPES · N` lists every non-built-in type with a kind badge (`TYPE`, `SCALAR`, `ENUM`, etc.). Drops the description paragraph and collapsible accordion. Both sections use the same uppercase letter-spaced header style as `FieldsList`. Also bumps horizontal padding from 14px to 16px consistently across `TypeCard`, `FieldsList`, `SearchRow`, `Breadcrumb`, and `TypeExtra` so the type-detail view has a bit more breathing room.
The override in `doc-explorer.css` was zeroing all four sides of `TypeCard`'s padding via a more-specific descendant selector, beating the component's own `padding: var(--px-10) var(--px-16)`. Move the padding declaration into the override and drop the now-redundant rule in `type-card.css`.
trevor-scheer
force-pushed
the
trevor/doc-explorer-redesign
branch
from
ca6f6b6 to
6bb166e
Compare
`FieldCard` renders a `FIELD` badge + mono `name : returnType` header plus description, mirroring `TypeCard`. `ArgumentsList` renders a collapsible `ARGUMENTS · N` eyebrow with mono `name : Type = default` rows, mirroring `FieldsList`. Directives use the same eyebrow + mono row treatment. `FieldDocumentation` is rewired to use these components and the `ExplorerSection` icon headers are dropped from the field view.
trevor-scheer
force-pushed
the
trevor/doc-explorer-redesign
branch
from
6bb166e to
7be025d
Compare
`FieldDocumentation` now renders descriptions through `FieldCard` (plain text in `.graphiql-doc-explorer-field-card-description`) instead of `MarkdownContent` (`.graphiql-markdown-description`). Update the cypress assertions accordingly and drop the trailing newline the markdown renderer used to add.
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
PanelHeaderfor the docs panel becomes a fixed eyebrow label,Schema Explorer. The type name moves into a new breadcrumb row below the header.SchemaDocumentationroot view: two eyebrow sections (ROOT TYPESandALL SCHEMA TYPES · N) replace the old accordion. Root operation rows show aMethodPilland target type name. All-types rows show a kind badge (TYPE,SCALAR,ENUM,INPUT,INTERFACE,UNION) and type name in mono.Breadcrumbrow: mono font, depth segments color-coded as--accent-blue/--accent-green-light/--fg-strong, chevron separators; clicking a segment navigates back to that depth.SearchRowcontent-area component: inlineSearch schemainput with keycap hint; listbox renders as a floating popover in the content area, replacing the old absolutely-positioned search overlay.TypeCard:TYPEbadge (mono, uppercase, accent-blue tinted), type name in mono, description, and animplements X · Yrow with--accent-orangelinks.FieldsList: collapsibleFIELDS · Nheader, mono rows with field name in--accent-green-light, colon in--fg-muted, return type in--accent-orange, optional description in--fg-subtle, and a 2px--accent-blueleft border on the active row. Horizontal padding bumped to 16px across all content sections for breathing room.TypeDocumentationgains ahideHeaderprop so it can suppress its own description / implements / fields block whenTypeCard+FieldsListrender those above.Test plan
SCHEMA EXPLORERwith no extra buttons, a search input, and two eyebrow sections:ROOT TYPESandALL SCHEMA TYPES · N.MethodPill(QRY/MUT/SUB), operation label, and target type name. Click a row and confirm it navigates into the type detail.ALL SCHEMA TYPES, confirm each row shows a kind badge and mono type name. Click a row and confirm navigation.TypeCardshows the kind badge, name, description, andimplementslist for an object type that implements interfaces.FieldsListshows mono rows with green field names and orange return types; click a field row and confirm it navigates in.Refs: #4219