[redesign] implement new toolbar design (#2524)

* implement new toolbar design

* add `caller` argument for better errors

.changeset/real-waves-enjoy.md

@@ -0,0 +1,25 @@
+---
+'graphiql': major
+---
+
+BREAKING: The following static properties of the `GraphiQL` component have been removed:
+- `GraphiQL.Button`: You can use the `ToolbarButton` component from `@graphiql/react` instead.
+- `GraphiQL.ToolbarButton`: This exposed the same component as `GraphiQL.Button`.
+- `GraphiQL.Group`: Grouping multiple buttons side-by-side is not provided out-of-the box anymore in the new GraphiQL UI. If you want to implement a similar feature in the new vertical toolbar you can do so by adding your own styles for your custom toolbar elements. Example:
+  ```jsx
+  import { GraphiQL } from "graphiql";
+  function CustomGraphiQL() {
+    return (
+      <GraphiQL>
+        <GraphiQL.Toolbar>
+          {/* Add custom styles for your buttons using the given class */}
+          <div className="button-group">
+            <button>1</button>
+            <button>2</button>
+            <button>3</button>
+          </div>
+        </GraphiQL.Toolbar>
+      </GraphiQL>
+    );
+  }
+  ```

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

@@ -1,6 +1,7 @@
 .graphiql-editor {
   height: 100%;
   position: relative;
+  width: 100%;
 
   &.hidden {
     /* Just setting `display: none;` would break the editor gutters */

packages/graphiql-react/src/icons/index.tsx

@@ -1,11 +1,21 @@
 import _ChevronDownIcon from './chevron-down.svg';
 import _ChevronUpIcon from './chevron-up.svg';
+import _CopyIcon from './copy.svg';
+import _MergeIcon from './merge.svg';
+import _PlayIcon from './play.svg';
+import _PrettifyIcon from './prettify.svg';
+import _StopIcon from './stop.svg';
 
 export const ChevronDownIcon = generateIcon(
   _ChevronDownIcon,
   'chevron down icon',
 );
 export const ChevronUpIcon = generateIcon(_ChevronUpIcon, 'chevron up icon');
+export const CopyIcon = generateIcon(_CopyIcon, 'copy icon');
+export const MergeIcon = generateIcon(_MergeIcon, 'merge icon');
+export const PlayIcon = generateIcon(_PlayIcon, 'play icon');
+export const PrettifyIcon = generateIcon(_PrettifyIcon, 'prettify icon');
+export const StopIcon = generateIcon(_StopIcon, 'stop icon');
 
 function generateIcon(RawComponent: any, title: string) {
   const WithTitle = function IconComponent(

packages/graphiql-react/src/index.ts

@@ -44,6 +44,7 @@ export {
   StorageContextProvider,
   useStorageContext,
 } from './storage';
+export * from './toolbar';
 export * from './ui';
 export { useDragResize } from './utility/resize';
 

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

@@ -18,8 +18,10 @@
   --color-neutral-0: #ffffff;
 
   --color-pink-background: rgb(214, 6, 144, 0.1);
+  --color-pink-dark: #ab0573;
   --color-orche-background: rgba(211, 127, 0, 0.07);
   --color-orche-background-dark: rgba(211, 127, 0, 0.12);
+  --color-red-background: rgba(248, 91, 48, 0.12);
 
   /* Font */
   --font-family: 'Roboto', sans-serif;
@@ -50,6 +52,9 @@
   --box-shadow: 0px 6px 20px rgba(59, 76, 106, 0.13),
     0px 1.34018px 4.46726px rgba(59, 76, 106, 0.0774939),
     0px 0.399006px 1.33002px rgba(59, 76, 106, 0.0525061);
+
+  /* Layout */
+  --toolbar-width: 40px;
 }
 
 .graphiql-container,

packages/graphiql-react/src/toolbar/button.css

@@ -0,0 +1,13 @@
+button.graphiql-toolbar-button {
+  display: block;
+  height: var(--toolbar-width);
+  width: var(--toolbar-width);
+
+  &.error {
+    background: var(--color-red-background);
+  }
+
+  & > svg {
+    pointer-events: none;
+  }
+}

packages/graphiql-react/src/toolbar/button.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import { UnStyledButton } from '../ui';
+
+import './button.css';
+
+export function ToolbarButton(props: JSX.IntrinsicElements['button']) {
+  const [error, setError] = useState<Error | null>(null);
+  return (
+    <UnStyledButton
+      {...props}
+      className={
+        'graphiql-toolbar-button' +
+        (error ? ' error' : '') +
+        (props.className ? ' ' + props.className : '')
+      }
+      onClick={event => {
+        try {
+          props.onClick?.(event);
+          setError(null);
+        } catch (err) {
+          setError(
+            err instanceof Error
+              ? err
+              : new Error(`Toolbar button click failed: ${err}`),
+          );
+        }
+      }}
+      title={error ? error.message : props.title}
+      aria-invalid={error ? 'true' : props['aria-invalid']}
+    />
+  );
+}

packages/graphiql-react/src/toolbar/execute.css

@@ -0,0 +1,30 @@
+.graphiql-execute-button-wrapper {
+  position: relative;
+}
+
+.graphiql-execute-button {
+  background-color: var(--color-pink);
+  border: none;
+  border-radius: var(--border-radius-8);
+  cursor: pointer;
+  height: var(--toolbar-width);
+  padding: 0;
+  width: var(--toolbar-width);
+
+  &:active {
+    background-color: var(--color-pink-dark);
+  }
+
+  &:focus {
+    outline: var(--color-pink-dark) auto 1px;
+  }
+
+  & > svg {
+    color: var(--color-neutral-0);
+    display: block;
+    height: var(--px-16);
+    margin: auto;
+    pointer-events: none;
+    width: var(--px-16);
+  }
+}

packages/graphiql/src/components/ExecuteButton.tsx → packages/graphiql-react/src/toolbar/execute.tsx

@@ -1,17 +1,21 @@
-/**
- *  Copyright (c) 2021 GraphQL Contributors.
- *
- *  This source code is licensed under the MIT license found in the
- *  LICENSE file in the root directory of this source tree.
- */
-import { useEditorContext, useExecutionContext } from '@graphiql/react';
 import { OperationDefinitionNode } from 'graphql';
-import React, { useState } from 'react';
+import { useState } from 'react';
+
+import { useEditorContext } from '../editor';
+import { useExecutionContext } from '../execution';
+import { PlayIcon, StopIcon } from '../icons';
+import { Dropdown } from '../ui';
+
+import './execute.css';
 
 export function ExecuteButton() {
-  const { queryEditor, setOperationName } = useEditorContext({ nonNull: true });
+  const { queryEditor, setOperationName } = useEditorContext({
+    nonNull: true,
+    caller: ExecuteButton,
+  });
   const { isFetching, operationName, run, stop } = useExecutionContext({
     nonNull: true,
+    caller: ExecuteButton,
   });
   const [optionsOpen, setOptionsOpen] = useState(false);
   const [highlight, setHighlight] = useState<OperationDefinitionNode | null>(
@@ -22,10 +26,10 @@ export function ExecuteButton() {
   const hasOptions = operations.length > 1 && typeof operationName !== 'string';
 
   return (
-    <div className="execute-button-wrap">
+    <div className="graphiql-execute-button-wrapper">
       <button
         type="button"
-        className="execute-button"
+        className="graphiql-execute-button"
         onMouseDown={
           // Allow mouse down if there is no running query, there are options
           // for which operation to run, and the dropdown is currently closed.
@@ -75,22 +79,16 @@ export function ExecuteButton() {
         }
         title="Execute Query (Ctrl-Enter)"
       >
-        <svg width="34" height="34">
-          {isFetching ? (
-            <path d="M 10 10 L 23 10 L 23 23 L 10 23 z" />
-          ) : (
-            <path d="M 11 9 L 24 16 L 11 23 z" />
-          )}
-        </svg>
+        {isFetching ? <StopIcon /> : <PlayIcon />}
       </button>
       {hasOptions && optionsOpen ? (
-        <ul className="execute-options">
+        <Dropdown>
           {operations.map((operation, i) => {
             const opName = operation.name
               ? operation.name.value
               : `<Unnamed ${operation.operation}>`;
             return (
-              <li
+              <Dropdown.Item
                 key={`${opName}-${i}`}
                 className={operation === highlight ? 'selected' : undefined}
                 onMouseOver={() => setHighlight(operation)}
@@ -109,10 +107,10 @@ export function ExecuteButton() {
                 }}
               >
                 {opName}
-              </li>
+              </Dropdown.Item>
             );
           })}
-        </ul>
+        </Dropdown>
       ) : null}
     </div>
   );

packages/graphiql-react/src/toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './execute';

packages/graphiql-react/src/ui/dropdown.css

@@ -0,0 +1,30 @@
+.graphiql-dropdown {
+  background-color: var(--color-neutral-0);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius-8);
+  margin: 0;
+  max-width: 250px;
+  min-width: 100px;
+  padding: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.graphiql-dropdown-item {
+  border-radius: var(--border-radius-4);
+  cursor: pointer;
+  margin: var(--px-4);
+  overflow: hidden;
+  padding: var(--px-6) var(--px-8);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.graphiql-dropdown-item:active,
+.graphiql-dropdown-item:hover {
+  background-color: var(--color-neutral-7);
+}
+
+.graphiql-dropdown-item:not(:first-child) {
+  margin-top: 0;
+}

packages/graphiql-react/src/ui/dropdown.tsx

@@ -0,0 +1,21 @@
+import './dropdown.css';
+
+export function Dropdown(props: JSX.IntrinsicElements['ul']) {
+  return (
+    <ul
+      {...props}
+      className={`graphiql-dropdown ${props.className || ''}`.trim()}
+    />
+  );
+}
+
+Dropdown.Item = DropdownItem;
+
+function DropdownItem(props: JSX.IntrinsicElements['li']) {
+  return (
+    <li
+      {...props}
+      className={`graphiql-dropdown-item ${props.className || ''}`.trim()}
+    />
+  );
+}

packages/graphiql-react/src/ui/index.ts

@@ -1 +1,2 @@
 export * from './button';
+export * from './dropdown';