[redesign] implement sidebar #2543
Merged
Conversation
This file contains 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
|
thomasheyenbrock
changed the title
Codecov Report
@@ Coverage Diff @@
## graphiql-v2 #2543 +/- ##
==============================================
Coverage ? 69.53%
==============================================
Files ? 64
Lines ? 4087
Branches ? 1363
==============================================
Hits ? 2842
Misses ? 1237
Partials ? 8 Continue to review full report at Codecov.
|
acao
approved these changes
Jul 8, 2022
There was a problem hiding this comment.
Well this looks fantastic!
Is there a plan to move some more of these components into small component files in graphiql-react perhaps, as well as some implementation specific components in graphiql as needed? Just seeing graphiql.tsx grow and grow makes me nervous for contributors haha!
There is still a plan for adding the component library and storybook/styleguidest/ladle/or what have you for some baseline, css-var and class selector? theme-able components, yes?
update: just re-checked and wow, this codebase changes quickly! i see there are many components in @graphiql/react, not just context, hooks and icons. So you'll probably be eventually moving these to separate component files in @graphiql/react then great!
dimaMachina
reviewed
Jul 8, 2022
dimaMachina
reviewed
Jul 8, 2022
|
Looks nice! I guess it could be awesome to change |
dimaMachina
approved these changes
Jul 8, 2022
hebertcisco
approved these changes
Jul 10, 2022
acao
approved these changes
Jul 11, 2022
|
@acao definitely worth exploring a storybook-like component library in the future. I'm focussing on getting the redesign out first (basically @B2o5T good point! But also here I'd defer this to a later point in time, just to have better focus on the redesign. |
Merged
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 13, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 14, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 20, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 22, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 27, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Jul 27, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 1, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 2, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 4, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 5, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 5, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 7, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 8, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 9, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 9, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 9, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 9, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 9, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 15, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 19, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 24, 2022
* implement sidebar in new design * simplify callback
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 24, 2022
* [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]>
thomasheyenbrock
added a commit
that referenced
this pull request
Aug 24, 2022
* implement sidebar in new design * simplify callback
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Part of #2325
This adds the new sidebar on the left side that contains the toggle buttons for docs and history, as well as (currently non-functional) buttons for showing the short-keys and the settings modal. It also moves over the doc explorer to the right side.
💡 Reviewing with hidden whitespaces reduces the changed LOCs significantly!
Preview is here: https://deploy-preview-2543--graphiql-test.netlify.app/
Note: No changeset here as we already have one for the redesign in #2523.