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 <[email protected]>

.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. 

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 (
     <ExplorerContextProvider>
@@ -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(
+      <SchemaContext.Provider value={withErrorSchemaContext}>
+        <DocExplorerWithContext />,
+      </SchemaContext.Provider>,
+    );
+
+    const error = container.querySelector('.graphiql-doc-explorer-error');
+
+    expect(error).toHaveTextContent('Error fetching schema');
+
+    rerender(
+      <SchemaContext.Provider value={defaultSchemaContext}>
+        <DocExplorerWithContext />,
+      </SchemaContext.Provider>,
+    );
+
+    const errors = container.querySelectorAll('.graphiql-doc-explorer-error');
+    expect(errors).toHaveLength(0);
+  });
 });

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;
 }

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);
 

packages/graphiql-react/src/vite-env.d.ts

@@ -1 +1,2 @@
+// eslint-disable-next-line spaced-comment
 /// <reference types="vite/client" />

packages/graphiql/src/components/GraphiQL.tsx

@@ -323,7 +323,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
   return (
     <div data-testid="graphiql-container" className="graphiql-container">
       <div className="graphiql-sidebar">
-        <div>
+        <div className="graphiql-sidebar-section">
           {pluginContext
             ? pluginContext?.plugins.map(plugin => {
                 const isVisible = plugin === pluginContext.visiblePlugin;
@@ -352,7 +352,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
               })
             : null}
         </div>
-        <div>
+        <div className="graphiql-sidebar-section">
           <Tooltip label="Re-fetch GraphQL schema">
             <UnStyledButton
               type="button"

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -108,19 +108,23 @@ describe('GraphiQL', () => {
     }
 
     // Use a bad fetcher for our initial render
-    const { rerender, container } = render(<GraphiQL fetcher={firstFetcher} />);
+    const { rerender, container, getByLabelText } = render(
+      <GraphiQL fetcher={firstFetcher} />,
+    );
     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
     rerender(<GraphiQL fetcher={secondFetcher} />);
     await wait();
 
     expect(
-      container.querySelector('.doc-explorer-contents .error-container'),
+      container.querySelector('.graphiql-doc-explorer-error'),
     ).not.toBeTruthy();
   });
 

packages/graphiql/src/style.css

@@ -16,21 +16,31 @@
   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);
 }
 .graphiql-container .graphiql-sidebar button:not(:first-child) {
   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));
 }