From adb73f55676b8697ac4e8001c076bd2f31923f4b Mon Sep 17 00:00:00 2001
From: Laura buns <walaura@fb.com>
Date: Fri, 17 Jan 2020 00:58:32 +0000
Subject: [PATCH] feat(graphiql-theming): Toolbar component (#1203) by @walaura

* separate dividers for the toolbar
* add toolbar
* add layout to stories

Authored-by @walaura
---
 packages/graphiql/.storybook/decorators.js    |    9 +
 .../src/new-components/Layout.stories.js      |    2 +-
 .../src/new-components/{ => List}/List.js     |    6 +-
 .../new-components/{ => List}/List.stories.js |   26 +-
 packages/graphiql/src/new-components/Tabs.js  |   77 --
 .../src/new-components/Toolbar/Content.js     |   13 +
 .../src/new-components/Toolbar/Tabs.js        |   48 +
 .../{ => Toolbar}/Tabs.stories.js             |   17 +-
 .../src/new-components/Toolbar/Toolbar.js     |   34 +
 .../new-components/Toolbar/Toolbar.stories.js |   80 ++
 .../Toolbar/support/WithDividers.js           |   65 ++
 .../src/new-components/Type.stories.js        |   11 +-
 .../__snapshots__/stories.spec.js.snap        | 1007 ++++++++++++++---
 .../new-components/themes/default/index.js    |   11 +-
 14 files changed, 1157 insertions(+), 249 deletions(-)
 create mode 100644 packages/graphiql/.storybook/decorators.js
 rename packages/graphiql/src/new-components/{ => List}/List.js (78%)
 rename packages/graphiql/src/new-components/{ => List}/List.stories.js (57%)
 delete mode 100644 packages/graphiql/src/new-components/Tabs.js
 create mode 100644 packages/graphiql/src/new-components/Toolbar/Content.js
 create mode 100644 packages/graphiql/src/new-components/Toolbar/Tabs.js
 rename packages/graphiql/src/new-components/{ => Toolbar}/Tabs.stories.js (63%)
 create mode 100644 packages/graphiql/src/new-components/Toolbar/Toolbar.js
 create mode 100644 packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js
 create mode 100644 packages/graphiql/src/new-components/Toolbar/support/WithDividers.js

diff --git a/packages/graphiql/.storybook/decorators.js b/packages/graphiql/.storybook/decorators.js
new file mode 100644
index 00000000000..7464d690ea6
--- /dev/null
+++ b/packages/graphiql/.storybook/decorators.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const styles = {
+  maxWidth: '60em',
+  margin: '5em auto',
+  border: '1px solid #eee',
+};
+
+export const layout = storyFn => <div style={styles}>{storyFn()}</div>;
diff --git a/packages/graphiql/src/new-components/Layout.stories.js b/packages/graphiql/src/new-components/Layout.stories.js
index f625b754b87..9858a8d0d4e 100644
--- a/packages/graphiql/src/new-components/Layout.stories.js
+++ b/packages/graphiql/src/new-components/Layout.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Nav from './Nav';
-import List, { ListRow } from './List';
+import List, { ListRow } from './List/List';
 import { useThemeLayout } from './themes/provider';
 
 const explorer = {
diff --git a/packages/graphiql/src/new-components/List.js b/packages/graphiql/src/new-components/List/List.js
similarity index 78%
rename from packages/graphiql/src/new-components/List.js
rename to packages/graphiql/src/new-components/List/List.js
index 1b87c13612a..aa6e8b3b8d4 100644
--- a/packages/graphiql/src/new-components/List.js
+++ b/packages/graphiql/src/new-components/List/List.js
@@ -1,14 +1,14 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
-
 import PropTypes from 'prop-types';
 
-const ListRow = ({ children, flex = false, padding = true }) => (
+const ListRow = ({ children, flex = false, padding = false }) => (
   <div
     sx={{
       overflow: 'auto',
       flex: flex && '1 1 auto',
-      padding: padding && 3,
+      padding: padding ? ({ spaces }) => spaces.rowPadding : undefined,
+      minHeight: ({ spaces }) => spaces.rowMinHeight,
     }}>
     {children}
   </div>
diff --git a/packages/graphiql/src/new-components/List.stories.js b/packages/graphiql/src/new-components/List/List.stories.js
similarity index 57%
rename from packages/graphiql/src/new-components/List.stories.js
rename to packages/graphiql/src/new-components/List/List.stories.js
index 95058e3bf14..3117681e405 100644
--- a/packages/graphiql/src/new-components/List.stories.js
+++ b/packages/graphiql/src/new-components/List/List.stories.js
@@ -11,12 +11,14 @@ const longText = Array(300)
 export const withFlexChild = () => (
   <div style={{ height: '100vh', display: 'grid' }}>
     <List>
-      <ListRow>
-        {
-          'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
-        }
+      <ListRow padding>
+        <div>
+          {
+            'Lists are a vertical stack of components and form the basis of most modules. This one is very long'
+          }
+        </div>
       </ListRow>
-      <ListRow flex>
+      <ListRow padding flex>
         {'You normally want 1 flex area that grows forever like this one'}
         {longText}
         {'the end'}
@@ -28,17 +30,17 @@ export const withFlexChild = () => (
 export const withStackedRows = () => (
   <div style={{ height: '100vh', display: 'grid' }}>
     <List>
-      <ListRow>{'Title'}</ListRow>
-      <ListRow>{'Navigation'}</ListRow>
-      <ListRow>{'Search'}</ListRow>
-      <ListRow>{'Filter'}</ListRow>
-      <ListRow flex>
+      <ListRow padding>{'Title'}</ListRow>
+      <ListRow padding>{'Navigation'}</ListRow>
+      <ListRow padding>{'Search'}</ListRow>
+      <ListRow padding>{'Filter'}</ListRow>
+      <ListRow padding flex>
         {'Actual content'}
         {longText}
         {'Actual content ends here'}
       </ListRow>
-      <ListRow>{'Footer'}</ListRow>
-      <ListRow>{'Footers footer'}</ListRow>
+      <ListRow padding>{'Footer'}</ListRow>
+      <ListRow padding>{'Footers footer'}</ListRow>
     </List>
   </div>
 );
diff --git a/packages/graphiql/src/new-components/Tabs.js b/packages/graphiql/src/new-components/Tabs.js
deleted file mode 100644
index 815301ca152..00000000000
--- a/packages/graphiql/src/new-components/Tabs.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import PropTypes from 'prop-types';
-
-const Tab = ({ active, ...props }) => (
-  <button
-    sx={{
-      padding: 3,
-      outline: 'none',
-      textAlign: 'end',
-      verticalAlign: 'baseline',
-      transition: ({ transitions }) => transitions[0],
-      cursor: 'pointer',
-      ':focus, :hover': {
-        boxShadow: active ? 'primaryUnderline' : 'underline',
-        color: active ? 'primary' : 'darkText',
-      },
-      boxShadow: active ? 'primaryUnderline' : 'inset 0 0 0 transparent',
-      color: active ? 'primary' : 'text',
-    }}
-    {...props}
-  />
-);
-Tab.propTypes = { active: PropTypes.bool };
-
-const ListWithCssDividers = ({ children, ...props }) => {
-  return (
-    <ul
-      {...props}
-      sx={{
-        ...props.sx,
-        '& > *': {
-          position: 'relative',
-        },
-        '& > *:not(:first-of-type):before': {
-          content: '""',
-          display: 'block',
-          position: 'absolute',
-          background: ({ colors }) => colors.border,
-          width: 1,
-          top: ({ space }) => space[2],
-          bottom: ({ space }) => space[2],
-          left: 0,
-        },
-      }}>
-      {children}
-    </ul>
-  );
-};
-ListWithCssDividers.propTypes = { sx: PropTypes.object };
-
-const Tabs = ({ tabs, active, onChange }) => {
-  return (
-    <ListWithCssDividers
-      sx={{
-        display: 'flex',
-        height: '100%',
-        alignItems: 'stretch',
-      }}>
-      {tabs.map((tab, index) => (
-        <li sx={{ display: 'grid' }} key={index}>
-          <Tab active={active === index} onClick={() => onChange(index)}>
-            {tab}
-          </Tab>
-        </li>
-      ))}
-    </ListWithCssDividers>
-  );
-};
-
-Tabs.propTypes = {
-  tabs: PropTypes.arrayOf(PropTypes.node).isRequired,
-  active: PropTypes.number.isRequired,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default Tabs;
diff --git a/packages/graphiql/src/new-components/Toolbar/Content.js b/packages/graphiql/src/new-components/Toolbar/Content.js
new file mode 100644
index 00000000000..98afa887518
--- /dev/null
+++ b/packages/graphiql/src/new-components/Toolbar/Content.js
@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+
+const Content = ({ ...props }) => (
+  <div
+    {...props}
+    sx={{
+      padding: ({ spaces }) => spaces.rowPadding,
+    }}
+  />
+);
+
+export default Content;
diff --git a/packages/graphiql/src/new-components/Toolbar/Tabs.js b/packages/graphiql/src/new-components/Toolbar/Tabs.js
new file mode 100644
index 00000000000..bdc2d9f6ed5
--- /dev/null
+++ b/packages/graphiql/src/new-components/Toolbar/Tabs.js
@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import PropTypes from 'prop-types';
+import WithDividers from './support/WithDividers';
+
+const Tab = ({ active, ...props }) => (
+  <button
+    sx={{
+      padding: ({ spaces }) => spaces.rowPadding,
+      outline: 'none',
+      textAlign: 'end',
+      verticalAlign: 'baseline',
+      transition: ({ transitions }) => transitions[0],
+      cursor: 'pointer',
+      ':focus, :hover': {
+        boxShadow: active ? 'primaryUnderline' : 'underline',
+        color: active ? 'primary' : 'darkText',
+      },
+      boxShadow: active ? 'primaryUnderline' : 'inset 0 0 0 transparent',
+      color: active ? 'primary' : 'text',
+    }}
+    {...props}
+  />
+);
+Tab.propTypes = { active: PropTypes.bool };
+
+const Tabs = ({ tabs, active, onChange }) => {
+  return (
+    <WithDividers>
+      {tabs.map((tab, index) => (
+        <Tab
+          key={index}
+          active={active === index}
+          onClick={() => onChange(index)}>
+          {tab}
+        </Tab>
+      ))}
+    </WithDividers>
+  );
+};
+
+Tabs.propTypes = {
+  tabs: PropTypes.arrayOf(PropTypes.node).isRequired,
+  active: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default Tabs;
diff --git a/packages/graphiql/src/new-components/Tabs.stories.js b/packages/graphiql/src/new-components/Toolbar/Tabs.stories.js
similarity index 63%
rename from packages/graphiql/src/new-components/Tabs.stories.js
rename to packages/graphiql/src/new-components/Toolbar/Tabs.stories.js
index 911c92ed0d1..e9a85cd8935 100644
--- a/packages/graphiql/src/new-components/Tabs.stories.js
+++ b/packages/graphiql/src/new-components/Toolbar/Tabs.stories.js
@@ -1,21 +1,22 @@
-import List, { ListRow } from './List';
+import List, { ListRow } from '../List/List';
 import Tabs from './Tabs';
 import React, { useState } from 'react';
+import { layout } from '../../../.storybook/decorators';
 
-export default { title: 'Tabs' };
+export default { title: 'Tabbar', decorators: [layout] };
 
 // eslint-disable-next-line react/prop-types
 const ManagedTabs = ({ tabs }) => {
-  const [active, setActive] = useState(1);
+  const [active, setActive] = useState(0);
   return <Tabs active={active} tabs={tabs} onChange={setActive} />;
 };
 
 export const Tabbar = () => (
   <List>
-    <ListRow padding={false}>
-      <ManagedTabs tabs={['First', 'Second', 'Third']} />
+    <ListRow>
+      <ManagedTabs tabs={['One', 'Two', 'Three']} />
     </ListRow>
-    <ListRow padding={false}>
+    <ListRow>
       <ManagedTabs
         tabs={[
           'With',
@@ -28,8 +29,8 @@ export const Tabbar = () => (
         ]}
       />
     </ListRow>
-    <ListRow padding={false}>
-      <div style={{ height: 100 }}>
+    <ListRow flex>
+      <div style={{ height: '100px', display: 'grid' }}>
         <ManagedTabs tabs={['Very tall', 'tabs']} />
       </div>
     </ListRow>
diff --git a/packages/graphiql/src/new-components/Toolbar/Toolbar.js b/packages/graphiql/src/new-components/Toolbar/Toolbar.js
new file mode 100644
index 00000000000..5a330dca81f
--- /dev/null
+++ b/packages/graphiql/src/new-components/Toolbar/Toolbar.js
@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import PropTypes from 'prop-types';
+import WithDividers from './support/WithDividers';
+
+const Toolbar = ({ children, justifyContent = 'space-between' }) => {
+  const needsExtraPadding = !justifyContent.includes('space');
+  return (
+    <div
+      sx={{
+        overflow: 'auto',
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent,
+      }}>
+      {needsExtraPadding ? (
+        <WithDividers padding>{children}</WithDividers>
+      ) : (
+        children
+      )}
+    </div>
+  );
+};
+Toolbar.propTypes = {
+  justifyContent: PropTypes.oneOf([
+    'space-between',
+    'space-around',
+    'flex-start',
+    'flex-end',
+    'center',
+  ]),
+};
+
+export default Toolbar;
diff --git a/packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js b/packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js
new file mode 100644
index 00000000000..721c90c479e
--- /dev/null
+++ b/packages/graphiql/src/new-components/Toolbar/Toolbar.stories.js
@@ -0,0 +1,80 @@
+import List, { ListRow } from '../List/List';
+import Tabs from './Tabs';
+import React from 'react';
+import Toolbar from './Toolbar';
+import Content from './Content';
+import { layout } from '../../../.storybook/decorators';
+
+export default { title: 'Toolbar', decorators: [layout] };
+
+export const Basic = () => (
+  <List>
+    <ListRow padding>
+      <p>{`Toolbars group together widgets in a flexbox. You can cutomize what type of
+      justification to use and if elements go together it'll add dividers
+      between them`}</p>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="center">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-start">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-end">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="space-between">
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+        <Content>{'Some text'}</Content>
+      </Toolbar>
+    </ListRow>
+  </List>
+);
+
+export const ToolbarWithTabs = () => (
+  <List>
+    <ListRow padding>
+      <p>
+        {`The dividers don't nest so if you have tabs inside a toolbar the tabs won't get dividers`}
+      </p>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="center">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-start">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="flex-end">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+    <ListRow>
+      <Toolbar justifyContent="space-between">
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+        <Tabs active={2} tabs={['First', 'Second', 'Third']} />
+      </Toolbar>
+    </ListRow>
+  </List>
+);
diff --git a/packages/graphiql/src/new-components/Toolbar/support/WithDividers.js b/packages/graphiql/src/new-components/Toolbar/support/WithDividers.js
new file mode 100644
index 00000000000..26deab86fca
--- /dev/null
+++ b/packages/graphiql/src/new-components/Toolbar/support/WithDividers.js
@@ -0,0 +1,65 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui';
+import PropTypes from 'prop-types';
+import { Children } from 'react';
+
+const Divider = ({ innerSx }) => (
+  <div
+    data-is-divider
+    aria-hidden
+    sx={{
+      ...innerSx,
+      background: ({ colors }) => colors.border,
+      width: '1px',
+    }}
+  />
+);
+Divider.propTypes = { innerSx: PropTypes.object };
+
+const WithDividers = ({ children, padding = false, ...props }) => {
+  return (
+    <ul
+      data-contains-divider
+      {...props}
+      sx={{
+        display: 'flex',
+        alignItems: 'stretch',
+        '[data-contains-divider] [data-is-divider]': {
+          display: 'none',
+        },
+      }}>
+      {Children.map(children, (child, index) => {
+        const isFirst = index === 0;
+        return (
+          <li
+            sx={{
+              position: 'relative',
+              display: 'grid',
+              marginLeft:
+                padding && !isFirst
+                  ? ({ spaces }) => spaces.rowPadding * 2
+                  : undefined,
+            }}>
+            {!isFirst && (
+              <Divider
+                innerSx={{
+                  position: 'absolute',
+                  top: ({ space }) => space[2],
+                  bottom: ({ space }) => space[2],
+                  left:
+                    padding && !isFirst
+                      ? ({ spaces }) => spaces.rowPadding * -1
+                      : 0,
+                }}
+              />
+            )}
+            {child}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+WithDividers.propTypes = { padding: PropTypes.bool };
+
+export default WithDividers;
diff --git a/packages/graphiql/src/new-components/Type.stories.js b/packages/graphiql/src/new-components/Type.stories.js
index cbab7a80b72..3f7d6b0f333 100644
--- a/packages/graphiql/src/new-components/Type.stories.js
+++ b/packages/graphiql/src/new-components/Type.stories.js
@@ -1,18 +1,19 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui';
-import List, { ListRow } from './List';
+import List, { ListRow } from './List/List';
 import { SectionHeader, Explainer } from './Type';
+import { layout } from '../../.storybook/decorators';
 
-export default { title: 'Type' };
+export default { title: 'Type', decorators: [layout] };
 
 export const type = () => (
   <List>
-    <ListRow>
+    <ListRow padding>
       <SectionHeader>{'Title'}</SectionHeader>
     </ListRow>
-    <ListRow>
+    <ListRow padding>
       <Explainer>{'Small explainer text'}</Explainer>
     </ListRow>
-    <ListRow>{'Normal text'}</ListRow>
+    <ListRow padding>{'Normal text'}</ListRow>
   </List>
 );
diff --git a/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap b/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap
index 80c8ef3a429..cf7610d8de5 100644
--- a/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap
+++ b/packages/graphiql/src/new-components/__tests__/__snapshots__/stories.spec.js.snap
@@ -37,7 +37,7 @@ exports[`Storyshots Layout With Full Screen Panel 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Woooo
         </div>
@@ -54,7 +54,7 @@ exports[`Storyshots Layout With Full Screen Panel 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Input
         </div>
@@ -67,7 +67,7 @@ exports[`Storyshots Layout With Full Screen Panel 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Response
         </div>
@@ -80,7 +80,7 @@ exports[`Storyshots Layout With Full Screen Panel 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Console/Inspector
         </div>
@@ -127,7 +127,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Sidebar
         </div>
@@ -140,7 +140,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           aside
         </div>
@@ -153,7 +153,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Another aside
         </div>
@@ -170,7 +170,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Input
         </div>
@@ -183,7 +183,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Response
         </div>
@@ -196,7 +196,7 @@ exports[`Storyshots Layout With Many Sidebars 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Console/Inspector
         </div>
@@ -243,7 +243,7 @@ exports[`Storyshots Layout With Slots 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Input
         </div>
@@ -256,7 +256,7 @@ exports[`Storyshots Layout With Slots 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Response
         </div>
@@ -269,7 +269,7 @@ exports[`Storyshots Layout With Slots 1`] = `
         className="css-e025bq-List"
       >
         <div
-          className="css-ypzwgl-ListRow"
+          className="css-6dhis2-ListRow"
         >
           Console/Inspector
         </div>
@@ -332,12 +332,14 @@ exports[`Storyshots Lists With Flex Child 1`] = `
     className="css-e025bq-List"
   >
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
-      Lists are a vertical stack of components and form the basis of most modules. This one is very long
+      <div>
+        Lists are a vertical stack of components and form the basis of most modules. This one is very long
+      </div>
     </div>
     <div
-      className="css-11ix84p-ListRow"
+      className="css-7bkyhc-ListRow"
     >
       You normally want 1 flex area that grows forever like this one
       <div>
@@ -1259,27 +1261,27 @@ exports[`Storyshots Lists With Stacked Rows 1`] = `
     className="css-e025bq-List"
   >
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Title
     </div>
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Navigation
     </div>
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Search
     </div>
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Filter
     </div>
     <div
-      className="css-11ix84p-ListRow"
+      className="css-7bkyhc-ListRow"
     >
       Actual content
       <div>
@@ -2185,12 +2187,12 @@ exports[`Storyshots Lists With Stacked Rows 1`] = `
       Actual content ends here
     </div>
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Footer
     </div>
     <div
-      className="css-ypzwgl-ListRow"
+      className="css-q8crt6-ListRow"
     >
       Footers footer
     </div>
@@ -2198,171 +2200,894 @@ exports[`Storyshots Lists With Stacked Rows 1`] = `
 </div>
 `;
 
-exports[`Storyshots Tabs Tabbar 1`] = `
+exports[`Storyshots Tabbar Tabbar 1`] = `
 <div
-  className="css-e025bq-List"
+  style={
+    Object {
+      "border": "1px solid #eee",
+      "margin": "5em auto",
+      "maxWidth": "60em",
+    }
+  }
 >
   <div
-    className="css-1kkieog-ListRow"
-  >
-    <ul
-      className="css-1usdqpg-Tabs"
-    >
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-8zi662-Tab"
-          onClick={[Function]}
-        >
-          First
-        </button>
-      </li>
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-141niuh-Tab"
-          onClick={[Function]}
-        >
-          Second
-        </button>
-      </li>
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-8zi662-Tab"
-          onClick={[Function]}
-        >
-          Third
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div
-    className="css-1kkieog-ListRow"
+    className="css-e025bq-List"
   >
-    <ul
-      className="css-1usdqpg-Tabs"
+    <div
+      className="css-6dhis2-ListRow"
     >
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-8zi662-Tab"
-          onClick={[Function]}
-        >
-          With
-        </button>
-      </li>
-      <li
-        className="css-lgj0h8"
+      <ul
+        className="css-uydjkm-WithDividers"
+        data-contains-divider={true}
       >
-        <button
-          className="css-141niuh-Tab"
-          onClick={[Function]}
+        <li
+          className="css-tq0oo4"
         >
-          a
-        </button>
-      </li>
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-8zi662-Tab"
-          onClick={[Function]}
+          <button
+            className="css-141niuh-Tab"
+            onClick={[Function]}
+          >
+            One
+          </button>
+        </li>
+        <li
+          className="css-tq0oo4"
         >
-          nested
-        </button>
-      </li>
-      <li
-        className="css-lgj0h8"
-      >
-        <button
-          className="css-8zi662-Tab"
-          onClick={[Function]}
+          <div
+            aria-hidden={true}
+            className="css-6aw4lc-Divider"
+            data-is-divider={true}
+          />
+          <button
+            className="css-8zi662-Tab"
+            onClick={[Function]}
+          >
+            Two
+          </button>
+        </li>
+        <li
+          className="css-tq0oo4"
         >
-          Component 
-          <small
-            style={
-              Object {
-                "background": "yellow",
-                "padding": 3,
-              }
-            }
+          <div
+            aria-hidden={true}
+            className="css-6aw4lc-Divider"
+            data-is-divider={true}
+          />
+          <button
+            className="css-8zi662-Tab"
+            onClick={[Function]}
           >
-            2
-          </small>
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div
-    className="css-1kkieog-ListRow"
-  >
+            Three
+          </button>
+        </li>
+      </ul>
+    </div>
     <div
-      style={
-        Object {
-          "height": 100,
-        }
-      }
+      className="css-6dhis2-ListRow"
     >
       <ul
-        className="css-1usdqpg-Tabs"
+        className="css-uydjkm-WithDividers"
+        data-contains-divider={true}
       >
         <li
-          className="css-lgj0h8"
+          className="css-tq0oo4"
+        >
+          <button
+            className="css-141niuh-Tab"
+            onClick={[Function]}
+          >
+            With
+          </button>
+        </li>
+        <li
+          className="css-tq0oo4"
         >
+          <div
+            aria-hidden={true}
+            className="css-6aw4lc-Divider"
+            data-is-divider={true}
+          />
           <button
             className="css-8zi662-Tab"
             onClick={[Function]}
           >
-            Very tall
+            a
           </button>
         </li>
         <li
-          className="css-lgj0h8"
+          className="css-tq0oo4"
         >
+          <div
+            aria-hidden={true}
+            className="css-6aw4lc-Divider"
+            data-is-divider={true}
+          />
           <button
-            className="css-141niuh-Tab"
+            className="css-8zi662-Tab"
+            onClick={[Function]}
+          >
+            nested
+          </button>
+        </li>
+        <li
+          className="css-tq0oo4"
+        >
+          <div
+            aria-hidden={true}
+            className="css-6aw4lc-Divider"
+            data-is-divider={true}
+          />
+          <button
+            className="css-8zi662-Tab"
             onClick={[Function]}
           >
-            tabs
+            Component 
+            <small
+              style={
+                Object {
+                  "background": "yellow",
+                  "padding": 3,
+                }
+              }
+            >
+              2
+            </small>
           </button>
         </li>
       </ul>
     </div>
+    <div
+      className="css-crkf2n-ListRow"
+    >
+      <div
+        style={
+          Object {
+            "display": "grid",
+            "height": "100px",
+          }
+        }
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <button
+              className="css-141niuh-Tab"
+              onClick={[Function]}
+            >
+              Very tall
+            </button>
+          </li>
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              aria-hidden={true}
+              className="css-6aw4lc-Divider"
+              data-is-divider={true}
+            />
+            <button
+              className="css-8zi662-Tab"
+              onClick={[Function]}
+            >
+              tabs
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`Storyshots Type Type 1`] = `
+exports[`Storyshots Toolbar Basic 1`] = `
 <div
-  className="css-e025bq-List"
+  style={
+    Object {
+      "border": "1px solid #eee",
+      "margin": "5em auto",
+      "maxWidth": "60em",
+    }
+  }
 >
   <div
-    className="css-ypzwgl-ListRow"
+    className="css-e025bq-List"
   >
-    <h2
-      className="css-82xfaz-SectionHeader"
+    <div
+      className="css-q8crt6-ListRow"
     >
-      Title
-    </h2>
+      <p>
+        Toolbars group together widgets in a flexbox. You can cutomize what type of
+      justification to use and if elements go together it'll add dividers
+      between them
+      </p>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1ae10t4-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-yyqua-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1s856wh-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <div
+              className="css-ungdc8-Content"
+            >
+              Some text
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1ycjblk-Toolbar"
+      >
+        <div
+          className="css-ungdc8-Content"
+        >
+          Some text
+        </div>
+        <div
+          className="css-ungdc8-Content"
+        >
+          Some text
+        </div>
+        <div
+          className="css-ungdc8-Content"
+        >
+          Some text
+        </div>
+      </div>
+    </div>
   </div>
+</div>
+`;
+
+exports[`Storyshots Toolbar Toolbar With Tabs 1`] = `
+<div
+  style={
+    Object {
+      "border": "1px solid #eee",
+      "margin": "5em auto",
+      "maxWidth": "60em",
+    }
+  }
+>
   <div
-    className="css-ypzwgl-ListRow"
+    className="css-e025bq-List"
   >
-    <span
-      className="css-f0hvcz-Explainer"
+    <div
+      className="css-q8crt6-ListRow"
+    >
+      <p>
+        The dividers don't nest so if you have tabs inside a toolbar the tabs won't get dividers
+      </p>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1ae10t4-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
     >
-      Small explainer text
-    </span>
+      <div
+        className="css-yyqua-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1s856wh-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+          <li
+            className="css-1t44jqq"
+          >
+            <div
+              aria-hidden={true}
+              className="css-u594xb-Divider"
+              data-is-divider={true}
+            />
+            <ul
+              className="css-uydjkm-WithDividers"
+              data-contains-divider={true}
+            >
+              <li
+                className="css-tq0oo4"
+              >
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  First
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-8zi662-Tab"
+                  onClick={[Function]}
+                >
+                  Second
+                </button>
+              </li>
+              <li
+                className="css-tq0oo4"
+              >
+                <div
+                  aria-hidden={true}
+                  className="css-6aw4lc-Divider"
+                  data-is-divider={true}
+                />
+                <button
+                  className="css-141niuh-Tab"
+                  onClick={[Function]}
+                >
+                  Third
+                </button>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div
+      className="css-6dhis2-ListRow"
+    >
+      <div
+        className="css-1ycjblk-Toolbar"
+      >
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <button
+              className="css-8zi662-Tab"
+              onClick={[Function]}
+            >
+              First
+            </button>
+          </li>
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              aria-hidden={true}
+              className="css-6aw4lc-Divider"
+              data-is-divider={true}
+            />
+            <button
+              className="css-8zi662-Tab"
+              onClick={[Function]}
+            >
+              Second
+            </button>
+          </li>
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              aria-hidden={true}
+              className="css-6aw4lc-Divider"
+              data-is-divider={true}
+            />
+            <button
+              className="css-141niuh-Tab"
+              onClick={[Function]}
+            >
+              Third
+            </button>
+          </li>
+        </ul>
+        <ul
+          className="css-uydjkm-WithDividers"
+          data-contains-divider={true}
+        >
+          <li
+            className="css-tq0oo4"
+          >
+            <button
+              className="css-8zi662-Tab"
+              onClick={[Function]}
+            >
+              First
+            </button>
+          </li>
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              aria-hidden={true}
+              className="css-6aw4lc-Divider"
+              data-is-divider={true}
+            />
+            <button
+              className="css-8zi662-Tab"
+              onClick={[Function]}
+            >
+              Second
+            </button>
+          </li>
+          <li
+            className="css-tq0oo4"
+          >
+            <div
+              aria-hidden={true}
+              className="css-6aw4lc-Divider"
+              data-is-divider={true}
+            />
+            <button
+              className="css-141niuh-Tab"
+              onClick={[Function]}
+            >
+              Third
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
+</div>
+`;
+
+exports[`Storyshots Type Type 1`] = `
+<div
+  style={
+    Object {
+      "border": "1px solid #eee",
+      "margin": "5em auto",
+      "maxWidth": "60em",
+    }
+  }
+>
   <div
-    className="css-ypzwgl-ListRow"
+    className="css-e025bq-List"
   >
-    Normal text
+    <div
+      className="css-q8crt6-ListRow"
+    >
+      <h2
+        className="css-82xfaz-SectionHeader"
+      >
+        Title
+      </h2>
+    </div>
+    <div
+      className="css-q8crt6-ListRow"
+    >
+      <span
+        className="css-f0hvcz-Explainer"
+      >
+        Small explainer text
+      </span>
+    </div>
+    <div
+      className="css-q8crt6-ListRow"
+    >
+      Normal text
+    </div>
   </div>
 </div>
 `;
diff --git a/packages/graphiql/src/new-components/themes/default/index.js b/packages/graphiql/src/new-components/themes/default/index.js
index a3294d86017..038b2f97d2d 100644
--- a/packages/graphiql/src/new-components/themes/default/index.js
+++ b/packages/graphiql/src/new-components/themes/default/index.js
@@ -22,16 +22,23 @@ const colors = {
   border: palette.neutral[90],
 };
 
+const space = [0, 5, 10, 15, 20];
+const fontSizes = [12, 16, 20];
+
 const theme = {
   fonts: {
     body: 'system-ui, sans-serif',
     heading: '"Avenir Next", sans-serif',
     monospace: 'Menlo, monospace',
   },
-  fontSizes: [12, 16, 20],
-  space: [0, 5, 10, 15, 20],
+  fontSizes,
+  space,
   colors,
   transitions: ['.25s'],
+  spaces: {
+    rowPadding: space[3],
+    rowMinHeight: space[3] + fontSizes[1] + space[3],
+  },
   shadows: {
     card: `0 0 0 .1px ${colors.border}, 0 1px 4px 0 ${colors.border}`,
     primaryUnderline: `inset 0 -4px 0 0 ${colors.primary}`,