From 905f2e5ea3f0b304d27ea583e250ed4baff5016e Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Sun, 2 Oct 2022 04:13:25 -0500 Subject: [PATCH] Simple box model reset (#2778) * adds box model reset for .graphiql-container children * adds new class (graphiql-sidebar-section) and associated css * updates toolbar button css * fixes broken/out-of-date test in `graphiql` * adds additional test for doc explorer fetcher-error state * disables space-comment rule for line * adds additional expectation that an error will clear UI when context provider is error-free Co-authored-by: Ted Thibodeau Jr --- .changeset/tricky-glasses-try.md | 6 ++++ .../__tests__/doc-explorer.spec.tsx | 28 +++++++++++++++++++ packages/graphiql-react/src/style/root.css | 7 ++++- .../graphiql-react/src/toolbar/button.css | 4 ++- packages/graphiql-react/src/vite-env.d.ts | 1 + packages/graphiql/src/components/GraphiQL.tsx | 4 +-- .../components/__tests__/GraphiQL.spec.tsx | 10 +++++-- packages/graphiql/src/style.css | 21 ++++++++++---- 8 files changed, 68 insertions(+), 13 deletions(-) create mode 100644 .changeset/tricky-glasses-try.md diff --git a/.changeset/tricky-glasses-try.md b/.changeset/tricky-glasses-try.md new file mode 100644 index 00000000000..86774060c02 --- /dev/null +++ b/.changeset/tricky-glasses-try.md @@ -0,0 +1,6 @@ +--- +"@graphiql/react": patch +"graphiql": patch +--- + +Adds a box-model reset for all children of the `.graphiql-container` class. This change facilitated another change to the `--sidebar-width` variable. diff --git a/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx index b4d73fe3947..feb7741d6d4 100644 --- a/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx +++ b/packages/graphiql-react/src/explorer/components/__tests__/doc-explorer.spec.tsx @@ -13,6 +13,14 @@ const defaultSchemaContext: SchemaContextType = { validationErrors: [], }; +const withErrorSchemaContext: SchemaContextType = { + fetchError: 'Error fetching schema', + introspect() {}, + isFetching: false, + schema: new GraphQLSchema({ description: 'GraphQL Schema for testing' }), + validationErrors: [], +}; + function DocExplorerWithContext() { return ( @@ -59,4 +67,24 @@ describe('DocExplorer', () => { container.querySelector('.graphiql-markdown-description'), ).toHaveTextContent('GraphQL Schema for testing'); }); + it('renders correctly with schema error', () => { + const { rerender, container } = render( + + , + , + ); + + const error = container.querySelector('.graphiql-doc-explorer-error'); + + expect(error).toHaveTextContent('Error fetching schema'); + + rerender( + + , + , + ); + + const errors = container.querySelectorAll('.graphiql-doc-explorer-error'); + expect(errors).toHaveLength(0); + }); }); diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css index 4a3ba3e9da5..6e98210c2ad 100644 --- a/packages/graphiql-react/src/style/root.css +++ b/packages/graphiql-react/src/style/root.css @@ -1,3 +1,8 @@ +/* a very simple box-model reset, intentionally does not include pseudo elements */ +.graphiql-container * { + box-sizing: border-box; +} + .graphiql-container, .CodeMirror-info, .CodeMirror-lint-tooltip, @@ -57,7 +62,7 @@ reach-portal { --popover-border: none; /* Layout */ - --sidebar-width: 44px; + --sidebar-width: 60px; --toolbar-width: 40px; --session-header-height: 51px; } diff --git a/packages/graphiql-react/src/toolbar/button.css b/packages/graphiql-react/src/toolbar/button.css index 994b988c721..6d66de96012 100644 --- a/packages/graphiql-react/src/toolbar/button.css +++ b/packages/graphiql-react/src/toolbar/button.css @@ -1,5 +1,7 @@ button.graphiql-toolbar-button { - display: block; + display: flex; + align-items: center; + justify-content: center; height: var(--toolbar-width); width: var(--toolbar-width); diff --git a/packages/graphiql-react/src/vite-env.d.ts b/packages/graphiql-react/src/vite-env.d.ts index 11f02fe2a00..083a5ec64cd 100644 --- a/packages/graphiql-react/src/vite-env.d.ts +++ b/packages/graphiql-react/src/vite-env.d.ts @@ -1 +1,2 @@ +// eslint-disable-next-line spaced-comment /// diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx index 06968ce3339..a7dcb8d6db3 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/packages/graphiql/src/components/GraphiQL.tsx @@ -323,7 +323,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { return (
-
+
{pluginContext ? pluginContext?.plugins.map(plugin => { const isVisible = plugin === pluginContext.visiblePlugin; @@ -352,7 +352,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) { }) : null}
-
+
{ } // Use a bad fetcher for our initial render - const { rerender, container } = render(); + const { rerender, container, getByLabelText } = render( + , + ); await wait(); + fireEvent.click(getByLabelText('Show Documentation Explorer')); + expect( - container.querySelector('.doc-explorer-contents .error-container'), + container.querySelector('.graphiql-doc-explorer-error'), ).toBeTruthy(); // Re-render with valid fetcher @@ -120,7 +124,7 @@ describe('GraphiQL', () => { await wait(); expect( - container.querySelector('.doc-explorer-contents .error-container'), + container.querySelector('.graphiql-doc-explorer-error'), ).not.toBeTruthy(); }); diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css index e49d179059b..9baf3c35ea6 100644 --- a/packages/graphiql/src/style.css +++ b/packages/graphiql/src/style.css @@ -16,11 +16,22 @@ padding: var(--px-8); width: var(--sidebar-width); } + +.graphiql-container .graphiql-sidebar .graphiql-sidebar-section { + display: flex; + flex-direction: column; + gap: var(--px-8); +} + .graphiql-container .graphiql-sidebar button { + display: flex; + align-items: center; + justify-content: center; color: hsla(var(--color-neutral), var(--alpha-secondary)); - height: var(--sidebar-width); - width: var(--sidebar-width); + height: calc(var(--sidebar-width) - (2 * var(--px-8))); + width: calc(var(--sidebar-width) - (2 * var(--px-8))); } + .graphiql-container .graphiql-sidebar button.active { color: hsla(var(--color-neutral), 1); } @@ -28,9 +39,8 @@ margin-top: var(--px-4); } .graphiql-container .graphiql-sidebar button > svg { - height: calc(var(--sidebar-width) - (2 * var(--px-12))); - padding: var(--px-12); - width: calc(var(--sidebar-width) - (2 * var(--px-12))); + height: var(--px-20); + width: var(--px-20); } /* The main content, i.e. everything except the sidebar */ @@ -144,7 +154,6 @@ button.graphiql-tab-add > svg { color: hsla(var(--color-neutral), var(--alpha-tertiary)); display: block; height: calc(var(--toolbar-width) - (var(--px-8) * 2)); - padding: var(--px-8); width: calc(var(--toolbar-width) - (var(--px-8) * 2)); }