[graphiql-react/graphiql] new looks of tabs

.changeset/thirty-spoons-call.md

@@ -0,0 +1,8 @@
+---
+"graphiql": major
+"@graphiql/react": minor
+---
+
+- new looks of tabs
+
+- fix `disableTabs` when `Add tab` button is still shown 

packages/graphiql-plugin-code-exporter/src/index.css

@@ -133,7 +133,7 @@
   }
   & .CodeMirror {
     box-shadow: var(--popover-box-shadow);
-    border-radius: calc(var(--border-radius-12));
+    border-radius: var(--border-radius-12);
     padding: var(--px-16);
   }
 }

packages/graphiql-react/package.json

@@ -59,7 +59,7 @@
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.13",
     "copy-to-clipboard": "^3.2.0",
-    "framer-motion": "^6.5.1",
+    "framer-motion": "^10.0.0",
     "graphql-language-service": "^5.2.2",
     "markdown-it": "^14.1.0",
     "set-value": "^4.1.0"

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

@@ -68,7 +68,7 @@
   /* Layout */
   --sidebar-width: 60px;
   --toolbar-width: 40px;
-  --session-header-height: 51px;
+  --session-header-height: 38.5px;
 }
 
 @media (prefers-color-scheme: dark) {

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

@@ -1,46 +1,84 @@
 .graphiql-tabs {
+  --bg: hsl(var(--color-base));
+
   display: flex;
   align-items: center;
-  overflow-x: auto;
-  padding: var(--px-12);
+  gap: var(--px-8);
+  /* reset browser defaults */
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
 
-  & > :not(:first-child) {
-    margin-left: var(--px-12);
-  }
+/* trick to shrink multiple tabs, instead of overflow container */
+.graphiql-tabs,
+.graphiql-tab {
+  min-width: 0;
 }
 
 .graphiql-tab {
-  align-items: stretch;
-  border-radius: var(--border-radius-8);
-  color: hsla(var(--color-neutral), var(--alpha-secondary));
+  border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
+  background: hsla(var(--color-neutral), var(--alpha-background-light));
+  position: relative;
   display: flex;
+  max-width: 140px;
 
-  & > button.graphiql-tab-close {
-    visibility: hidden;
-  }
-  &.graphiql-tab-active > button.graphiql-tab-close,
-  &:hover > button.graphiql-tab-close,
-  &:focus-within > button.graphiql-tab-close {
-    visibility: unset;
+  /* disable shrinking while changing the operation name */
+  &:not(:focus-within) {
+    transform: none !important;
   }
 
+  &:hover,
+  &:focus-within,
   &.graphiql-tab-active {
-    background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
-    color: hsla(var(--color-neutral), 1);
+    background: var(--bg);
+    color: hsl(var(--color-neutral));
+
+    .graphiql-tab-close {
+      display: block;
+    }
   }
-}
 
-button.graphiql-tab-button {
-  padding: var(--px-4) 0 var(--px-4) var(--px-8);
-}
+  .graphiql-tab-button {
+    border-radius: var(--border-radius-8) var(--border-radius-8) 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: var(--px-4) 28px var(--px-4) var(--px-8);
 
-button.graphiql-tab-close {
-  align-items: center;
-  display: flex;
-  padding: var(--px-4) var(--px-8);
+    &:hover {
+      background: none;
+    }
+  }
+
+  .graphiql-tab-close {
+    position: absolute;
+    right: min(var(--px-4), 5%);
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
+    background: var(--bg);
+    box-shadow: -10px 0 10px 0 var(--bg);
+    padding: var(--px-6);
+    line-height: 0;
+
+    & > svg {
+      height: var(--px-8);
+      width: var(--px-8);
+    }
+
+    &:hover {
+      background: var(--bg);
+      color: hsl(var(--color-neutral));
+      overflow: hidden; /* bg in `:before` will not overflow from radius area */
 
-  & > svg {
-    height: var(--px-8);
-    width: var(--px-8);
+      /* trick to add 2nd bg with opacity */
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        background: hsla(var(--color-neutral), 0.3);
+      }
+    }
   }
 }

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

@@ -2,9 +2,7 @@ import { forwardRef, ReactNode } from 'react';
 import { clsx } from 'clsx';
 import { Reorder } from 'framer-motion';
 import { CloseIcon } from '../icons';
-import { createComponentGroup } from '../utility/component-group';
 import { UnStyledButton } from './button';
-import { Tooltip } from './tooltip';
 
 import './tabs.css';
 
@@ -21,7 +19,7 @@ const TabRoot = forwardRef<HTMLLIElement, TabProps>(
       {...props}
       ref={ref}
       value={value}
-      aria-selected={isActive ? 'true' : undefined}
+      aria-selected={isActive}
       role="tab"
       className={clsx(
         'graphiql-tab',
@@ -38,36 +36,34 @@ TabRoot.displayName = 'Tab';
 const TabButton = forwardRef<
   HTMLButtonElement,
   JSX.IntrinsicElements['button']
->((props, ref) => (
+>(({ children, className, ...props }, ref) => (
   <UnStyledButton
     {...props}
     ref={ref}
     type="button"
-    className={clsx('graphiql-tab-button', props.className)}
+    className={clsx('graphiql-tab-button', className)}
   >
-    {props.children}
+    {children}
   </UnStyledButton>
 ));
 TabButton.displayName = 'Tab.Button';
 
 const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
   (props, ref) => (
-    <Tooltip label="Close Tab">
-      <UnStyledButton
-        aria-label="Close Tab"
-        {...props}
-        ref={ref}
-        type="button"
-        className={clsx('graphiql-tab-close', props.className)}
-      >
-        <CloseIcon />
-      </UnStyledButton>
-    </Tooltip>
+    <UnStyledButton
+      aria-label="Close Tab"
+      {...props}
+      ref={ref}
+      type="button"
+      className={clsx('graphiql-tab-close', props.className)}
+    >
+      <CloseIcon />
+    </UnStyledButton>
   ),
 );
 TabClose.displayName = 'Tab.Close';
 
-export const Tab = createComponentGroup(TabRoot, {
+export const Tab = Object.assign(TabRoot, {
   Button: TabButton,
   Close: TabClose,
 });

packages/graphiql/src/components/GraphiQL.tsx

@@ -456,18 +456,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
     }
   }, []);
 
-  const addTab = (
-    <Tooltip label="Add tab">
-      <UnStyledButton
-        type="button"
-        className="graphiql-tab-add"
-        onClick={handleAddTab}
-        aria-label="Add tab"
-      >
-        <PlusIcon aria-hidden="true" />
-      </UnStyledButton>
-    </Tooltip>
-  );
+  const hasMultipleTabs = editorContext.tabs.length > 1;
 
   const className = props.className ? ` ${props.className}` : '';
 
@@ -556,48 +545,55 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
           <div ref={pluginResize.secondRef} className="graphiql-sessions">
             <div className="graphiql-session-header">
               {!props.disableTabs && (
-                <Tabs
-                  values={editorContext.tabs}
-                  onReorder={handleReorder}
-                  aria-label="Select active operation"
-                >
-                  {editorContext.tabs.length > 1 && (
-                    <>
+                <>
+                  {hasMultipleTabs && (
+                    <Tabs
+                      values={editorContext.tabs}
+                      onReorder={handleReorder}
+                      aria-label="Select active operation"
+                    >
                       {editorContext.tabs.map((tab, index) => (
-                        <Tab
-                          key={tab.id}
-                          value={tab}
-                          isActive={index === editorContext.activeTabIndex}
-                        >
-                          <Tab.Button
-                            aria-controls="graphiql-session"
-                            id={`graphiql-session-tab-${index}`}
-                            onClick={() => {
-                              executionContext.stop();
-                              editorContext.changeTab(index);
-                            }}
+                        <Tooltip key={tab.id} label={tab.title}>
+                          <Tab
+                            value={tab}
+                            isActive={index === editorContext.activeTabIndex}
                           >
-                            {tab.title}
-                          </Tab.Button>
-                          <Tab.Close
-                            onClick={() => {
-                              if (editorContext.activeTabIndex === index) {
+                            <Tab.Button
+                              aria-controls="graphiql-session"
+                              id={`graphiql-session-tab-${index}`}
+                              onClick={() => {
                                 executionContext.stop();
-                              }
-                              editorContext.closeTab(index);
-                            }}
-                          />
-                        </Tab>
+                                editorContext.changeTab(index);
+                              }}
+                            >
+                              {tab.title}
+                            </Tab.Button>
+                            <Tab.Close
+                              onClick={() => {
+                                if (editorContext.activeTabIndex === index) {
+                                  executionContext.stop();
+                                }
+                                editorContext.closeTab(index);
+                              }}
+                            />
+                          </Tab>
+                        </Tooltip>
                       ))}
-                      {addTab}
-                    </>
+                    </Tabs>
                   )}
-                </Tabs>
+                  <Tooltip label="New tab">
+                    <UnStyledButton
+                      type="button"
+                      className="graphiql-tab-add"
+                      onClick={handleAddTab}
+                      aria-label="New tab"
+                    >
+                      <PlusIcon aria-hidden="true" />
+                    </UnStyledButton>
+                  </Tooltip>
+                </>
               )}
-              <div className="graphiql-session-header-right">
-                {editorContext.tabs.length === 1 && addTab}
-                {logo}
-              </div>
+              {logo}
             </div>
             <div
               role="tabpanel"
@@ -607,9 +603,15 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
             >
               <div ref={editorResize.firstRef}>
                 <div
-                  className={`graphiql-editors${
-                    editorContext.tabs.length === 1 ? ' full-height' : ''
-                  }`}
+                  className="graphiql-editors"
+                  style={
+                    hasMultipleTabs
+                      ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 }
+                      : {
+                          marginTop:
+                            'calc(var(--px-8) - var(--session-header-height))',
+                        }
+                  }
                 >
                   <div ref={editorToolsResize.firstRef}>
                     <section