[v4] improve explorer styles (#3738)

* improve explorer styles * aa
graphql · Aug 19, 2024 · eaa415c · eaa415c
1 parent 3a2580e
commit eaa415c
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 40 deletions.
diff --git a/.changeset/healthy-onions-bake.md b/.changeset/healthy-onions-bake.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-explorer': patch
+---
+
+improve explorer styles
diff --git a/packages/graphiql-plugin-explorer/examples/index.html b/packages/graphiql-plugin-explorer/examples/index.html
@@ -1,5 +1,5 @@
 <!--
- *  Copyright (c) 2021 GraphQL Contributors
+ *  Copyright (c) 2024 GraphQL Contributors
  *  All rights reserved.
  *
  *  This source code is licensed under the license found in the
@@ -8,29 +8,25 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title></title>
+    <title>GraphiQL Plugin Explorer Demo</title>
     <style>
       body {
-        height: 100%;
         margin: 0;
-        width: 100%;
-        overflow: hidden;
+        overflow: hidden; /* in Firefox */
       }
 
       #graphiql {
-        height: 100vh;
+        height: 100dvh;
       }
-    </style>
-
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/dist/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
-    />
-  </head>
 
-  <body>
-    <div id="graphiql">Loading...</div>
+      .loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 4rem;
+      }
+    </style>
 
     <script
       crossorigin
@@ -42,34 +38,45 @@
     ></script>
 
     <script
-      src="https://unpkg.com/graphiql/dist/index.umd.js"
+      src="https://unpkg.com/graphiql@4.0.0-alpha.5/dist/index.umd.js"
       crossorigin
     ></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/style.css"
+    />
+
     <script
-      src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
-      integrity="sha512-Fjas/uSkzvsFjbv4jqU9nt4ulU7LDjiMAXW2YFTYD96NgKS1fhhAsGR4b2k2VaVLsE29aia3vyobAq9TNzusvA=="
-      crossorigin="anonymous"
+      src="https://unpkg.com/@graphiql/[email protected]/dist/index.umd.js"
+      crossorigin
     ></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@graphiql/[email protected]/dist/style.css"
+    />
+  </head>
+
+  <body>
+    <div id="graphiql">
+      <div class="loading">Loading…</div>
+    </div>
 
     <script>
-      var fetcher = GraphiQL.createFetcher({
+      const fetcher = GraphiQL.createFetcher({
         url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
       });
-      var defaultQuery =
-        'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}';
-      var explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
+      const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
 
-      function GraphiQLWithExplorer() {
-        return React.createElement(GraphiQL, {
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      root.render(
+        React.createElement(GraphiQL, {
           fetcher: fetcher,
           defaultEditorToolsVisibility: true,
           plugins: [explorerPlugin],
-          defaultQuery: defaultQuery,
-        });
-      }
-
-      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-      root.render(React.createElement(GraphiQLWithExplorer));
+          defaultQuery:
+            'query AllFilms {\n  allFilms {\n    films {\n      title\n    }\n  }\n}',
+        }),
+      );
     </script>
   </body>
 </html>
diff --git a/packages/graphiql-plugin-explorer/src/icons/folder-plus.svg b/packages/graphiql-plugin-explorer/src/icons/folder-plus.svg
diff --git a/packages/graphiql-plugin-explorer/src/index.css b/packages/graphiql-plugin-explorer/src/index.css
@@ -31,6 +31,10 @@
   padding-top: var(--px-16);
 }
 
+.graphiql-explorer-root > div {
+  overflow: auto !important; /* override overflow: scroll */
+}
+
 .graphiql-explorer-root input {
   background: unset;
 }
@@ -44,16 +48,23 @@
   padding: var(--px-4) var(--px-6);
 }
 
-.graphiql-operation-title-bar .toolbar-button {
-  line-height: 0;
-  margin-left: var(--px-8);
-  color: hsla(var(--color-neutral), var(--alpha-secondary, 0.6));
-  font-size: var(--font-size-h3);
-  vertical-align: middle;
+.toolbar-button {
+  all: unset;
+  cursor: pointer;
+  line-height: 0 !important;
+  margin-left: var(--px-6);
+  color: hsl(var(--color-primary));
+  font-size: var(--font-size-h3) !important;
+}
+
+.graphiql-explorer-slug .toolbar-button,
+.graphiql-explorer-graphql-arguments .toolbar-button {
+  font-size: inherit !important;
 }
 
 .graphiql-explorer-graphql-arguments input {
   line-height: 0;
+  min-width: 5rem;
 }
 
 .graphiql-explorer-actions {