[redesign] editor in new design #2513

thomasheyenbrock · 2022-06-21T09:40:43Z

Part of #2325

This implements the new design for all the editors and moves the components to @graphiql/react. I left some more notes as inline comments.

Preview at https://deploy-preview-2513--graphiql-test.netlify.app/

changeset-bot · 2022-06-21T09:40:45Z

🦋 Changeset detected

Latest commit: 218c261

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

This PR includes changesets to release 3 packages

Name	Type
@graphiql/react	Minor
codemirror-graphql	Major
graphiql	Major

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

.changeset/pre.json

thomasheyenbrock · 2022-06-21T09:42:30Z

packages/graphiql-react/font/fira-code.css

@@ -0,0 +1,58 @@
+@font-face {


I chose to add pre-bundled css files that contain the fonts we're using in the new design. That's just for convenience, if users prefer to load the fonts via Google Fonts that'll still be their choice.

github-actions · 2022-06-21T09:43:12Z

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

thomasheyenbrock · 2022-06-21T09:44:10Z

packages/graphiql-react/src/editor/completion.ts

+          deprecation.appendChild(deprecationReason);
+
+          /**
+           * This is a bit hacky: By default, codemirror renders all hints


That was probably the trickiest part: Getting the two-column layout working for the typeahead hints. I hope this comment explains how I made this work with the restrictions imposed by codemirror.

Also, if you see a better way, happy to change the implementation!

thomasheyenbrock · 2022-06-21T09:46:26Z

packages/graphiql-react/src/style/root.css

+.graphiql-container,
+.CodeMirror-info,
+.CodeMirror-lint-tooltip {
+  /* Colors */


Here you can find all the "theme tokens". This allows a very easy way to customize the appearance of GraphiQL.

Awesome - perhaps we can add to the “CDN example“ an example of how to override theme colors using css variables? This example used to source the actual compiled CDN bundle of graphiql, but I think it points to unpkg now

Makes sense! I added an issue for this: #2516

codecov · 2022-06-21T09:54:40Z

Codecov Report

❗ No coverage uploaded for pull request base (graphiql-v2@37c98aa). Click here to learn what that means.
The diff coverage is n/a.

@@              Coverage Diff               @@
##             graphiql-v2    #2513   +/-   ##
==============================================
  Coverage               ?   68.23%           
==============================================
  Files                  ?       67           
  Lines                  ?     4165           
  Branches               ?     1383           
==============================================
  Hits                   ?     2842           
  Misses                 ?     1318           
  Partials               ?        5

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 37c98aa...218c261. Read the comment docs.

thomasheyenbrock · 2022-06-21T15:05:14Z

@acao do you want to get in #2508 before we start with the breaking changes and the pre-release? Or are you fine with waiting a couple of weeks for v2? (Shipping prettier with v2 could also be an option.)

acao · 2022-06-24T11:04:42Z

@thomasheyenbrock let’s see how it plays out! Let’s not let one block the other, but if we can make them part of the same breaking release that would be cool!

acao · 2022-06-26T08:58:04Z

@thomasheyenbrock should I assume this one comes first, then #2515 ?

* add postcss config to allow nesting * avoid processing css from `@graphiql/react` with postcss * add css files for default fonts * add long description with markdown to dev schema * rewrite completion tooltip * move editor css to @graphiql/react * git mv editor components to `@graphiql/react` * adjust editor components after moving to `@graphiql/react` * move styles for auto-inserted leads * make dynamic padding more resilient and add explanatory comment * add extra color to avoid conflicts * colocate markdown and deprecation styles * add changesets * fix spell checking * add changeset for graphiql@2 * don't enter pre-release mode in changeset * more elaborate changeset message

* [redesign]: editor in new design (#2513) * add postcss config to allow nesting * avoid processing css from `@graphiql/react` with postcss * add css files for default fonts * add long description with markdown to dev schema * rewrite completion tooltip * move editor css to @graphiql/react * git mv editor components to `@graphiql/react` * adjust editor components after moving to `@graphiql/react` * move styles for auto-inserted leads * make dynamic padding more resilient and add explanatory comment * add extra color to avoid conflicts * colocate markdown and deprecation styles * add changesets * fix spell checking * add changeset for graphiql@2 * don't enter pre-release mode in changeset * more elaborate changeset message * [redesign] layout for editor components (#2515) * add icons to `@graphiql/react` * add `UnstyledButton` ui component * implement new design for editors layout * rename `Unstyled` to `UnStyled` for spell checking * remove unused class and whitespace in `className` * make tiny change for deploy preview 🤞 * this will do it, i think? Co-authored-by: Rikki Schulte <[email protected]> * set default background color for editors (#2528) * set default background colors via css variables (#2530) * move editor styles to `@graphiql/react` (#2532) * refresh editor after hiding (#2537) * add caller argument to editor hooks (#2538) * implement footer in new design (#2540) * [redesign] implement new toolbar design (#2524) * implement new toolbar design * add `caller` argument for better errors * [redesign] implement sidebar (#2543) * implement sidebar in new design * simplify callback * [redesign] implement new design for history plugin (#2571) * add icons * don't invoce callback when programmatically change resizable element * implement history in new design * visually separate favourite history items * add save button when editing history label * add changeset * add missing changesets in retrospect * fix typos * fix e2e tests * remove input outline * add prerelease versions * fix opening doc explorer when clicking references (#2578) * extract loading spinner to `@graphiql/react` (#2581) * [redesign] move docs components to `@graphiql/react` (#2582) * move explorer context into folder * move `TypeLink` component to `@graphiql/react` * move `FieldLink` component to `@graphiql/react` * move `DefaultValue` component to `@graphiql/react` * move `Directive` component to `@graphiql/react` * extract `MarkdownContent` component in `@gaphiql/react` * move `Argument` component to `@graphiql/react` * combine and extend changesets * add `Search` component to `@graphiql/react` (#2586) * move remaining doc explorer component to `@graphiql/react` (#2587) * [redesign] docs (#2588) * add icons * add `Button` component to `@graphiql/react` * add explorer section component * redesign `SchemaDocumentation` component * redesign `TypeDocumentation` component * redesign `FieldDocumentation` component * redesign `DocExplorer` component * extend changeset message * move tab components to `@graphiql/react` (#2591) * [redesign] implement new design for tabs (#2592) * implement new design for tabs * add back `tab` role * increment versions from release * [redesign] add settings dialog (#2595) * add `Dialog` component to `@graphiql/react` * add a `clear` method to the `Storage` type * add success and failure states to `Button` component * add settings dialog * make sure to show dialog above editor scrollbars * [redesign] add dark mode (#2596) * add `ButtonGroup` component to `@graphiql/react` * dark mode * add back styles for editor search (#2599) * add a dialog that shows all available shortkeys (#2601) * add a dialog that shows all available shortkeys * use table in short key dialog * add shortkey for introspection * add link to codemirror keymaps * make dropdown menu accessible (#2627) * fix doc explorer style regressions (#2630) * fix selector specificity for link styling * leverage nesting * fix hiding the headline on focus * ensure correct focus outlines and remove visited styles * increment next versions * adds styles to contain the result window above any footer content (#2621) * adds styles to contain the result window above any footer content * simplifies flex value * use hsl values and reduce number of CSS variables (#2637) * rename CSS variables for colors (#2641) * forward refs and props for UI components (#2628) * [redesign] implement toolbar menu and select in new design (#2631) * implement toolbar menu in new design * implement `ToolbarListbox` in new design * better tooltips * [v2] cleanup `GraphiQL` component (#2632) * remove deprecated class methods * remove utilities * remove ref forwarding * refactor inner class component to a function component * merge main component with context consumer component * remove component statics * refactor outer component to be a class component * remove comments * add changeset * remove legacy exports * [v2] add provider component and deduplicate prop type definitions (#2650) * add `GraphiQLProvider` to `@graphiql/react` and include `StorageContextProvider` * add `HistoryContextProvider` to `GraphiQLProvider` * add `EditorContextProvider` to `GraphiQLProvider` * add `SchemaContextProvider` to `GraphiQLProvider` * add `ExecutionContextProvider` to `GraphiQLProvider` * move `ExplorerContextProvider` to `GraphiQLProvider` * declare props for `GraphiQLInterface` * reuse prop definitions from editor components * merge props for default state of editor tools * rename prop for toggling headers editor * re-export GraphiQL provider * add documention for `@graphiql/react` (#2657) * add JSDocs for component props and hooks * add JSDocs for context types * add README for `@graphiql/react` * [v2] add plugin api for docs and history (#2674) * add plugin api for docs and history * throw error when plugin has no title * make popover styles look good in dark mode (#2682) * add example for `graphiql-explorer` (#2683) * don't pass `shouldPersistHeaders` to fetcher anymore (#2684) * bump preview versions * overhaul READMEs and add migratio guide for `graphiql@2` Co-authored-by: Rikki Schulte <[email protected]> Co-authored-by: Jonathan Brennan <[email protected]>

* add postcss config to allow nesting * avoid processing css from `@graphiql/react` with postcss * add css files for default fonts * add long description with markdown to dev schema * rewrite completion tooltip * move editor css to @graphiql/react * git mv editor components to `@graphiql/react` * adjust editor components after moving to `@graphiql/react` * move styles for auto-inserted leads * make dynamic padding more resilient and add explanatory comment * add extra color to avoid conflicts * colocate markdown and deprecation styles * add changesets * fix spell checking * add changeset for graphiql@2 * don't enter pre-release mode in changeset * more elaborate changeset message

thomasheyenbrock added 13 commits June 21, 2022 10:50

add postcss config to allow nesting

903c772

avoid processing css from @graphiql/react with postcss

e947193

add css files for default fonts

c37be13

add long description with markdown to dev schema

d149789

rewrite completion tooltip

2c68448

move editor css to @graphiql/react

c47aaac

git mv editor components to @graphiql/react

04ef5a0

adjust editor components after moving to @graphiql/react

e1992e7

move styles for auto-inserted leads

1cabfbd

make dynamic padding more resilient and add explanatory comment

3ea62ee

add extra color to avoid conflicts

cbde0c3

colocate markdown and deprecation styles

db2c34e

add changesets

8db0e72

thomasheyenbrock commented Jun 21, 2022

View reviewed changes

.changeset/pre.json Outdated Show resolved Hide resolved

thomasheyenbrock commented Jun 21, 2022

View reviewed changes

fix spell checking

1ca5160

thomasheyenbrock force-pushed the feat/editor-redesign branch from a19a1ae to 1ca5160 Compare June 21, 2022 09:51

thomasheyenbrock requested review from acao and timsuchanek June 21, 2022 12:27

timsuchanek requested a review from JoviDeCroock June 21, 2022 21:33

JoviDeCroock approved these changes Jun 23, 2022

View reviewed changes

add changeset for graphiql@2

8c5864c

thomasheyenbrock added 2 commits June 29, 2022 11:54

don't enter pre-release mode in changeset

c82b22f

more elaborate changeset message

218c261

thomasheyenbrock merged commit f8f7ffe into graphiql-v2 Jun 29, 2022

thomasheyenbrock deleted the feat/editor-redesign branch June 29, 2022 10:34

thomasheyenbrock mentioned this pull request Jun 29, 2022

graphiql@2 #2523

Merged

thomasheyenbrock changed the title ~~[redesign]: editor in new design~~ [redesign] editor in new design Jun 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[redesign] editor in new design #2513

[redesign] editor in new design #2513

thomasheyenbrock commented Jun 21, 2022 •

edited

Loading

changeset-bot bot commented Jun 21, 2022 •

edited

Loading

thomasheyenbrock Jun 21, 2022

github-actions bot commented Jun 21, 2022

thomasheyenbrock Jun 21, 2022

thomasheyenbrock Jun 21, 2022

acao Jun 24, 2022

thomasheyenbrock Jun 24, 2022

codecov bot commented Jun 21, 2022 •

edited

Loading

thomasheyenbrock commented Jun 21, 2022 •

edited

Loading

acao commented Jun 24, 2022

acao commented Jun 26, 2022

[redesign] editor in new design #2513

[redesign] editor in new design #2513

Conversation

thomasheyenbrock commented Jun 21, 2022 • edited Loading

changeset-bot bot commented Jun 21, 2022 • edited Loading

🦋 Changeset detected

thomasheyenbrock Jun 21, 2022

Choose a reason for hiding this comment

github-actions bot commented Jun 21, 2022

thomasheyenbrock Jun 21, 2022

Choose a reason for hiding this comment

thomasheyenbrock Jun 21, 2022

Choose a reason for hiding this comment

acao Jun 24, 2022

Choose a reason for hiding this comment

thomasheyenbrock Jun 24, 2022

Choose a reason for hiding this comment

codecov bot commented Jun 21, 2022 • edited Loading

Codecov Report

thomasheyenbrock commented Jun 21, 2022 • edited Loading

acao commented Jun 24, 2022

acao commented Jun 26, 2022

thomasheyenbrock commented Jun 21, 2022 •

edited

Loading

changeset-bot bot commented Jun 21, 2022 •

edited

Loading

codecov bot commented Jun 21, 2022 •

edited

Loading

thomasheyenbrock commented Jun 21, 2022 •

edited

Loading