Fix tabs snapshot and move example to Menu.story

looker-open-source · Jan 8, 2021 · f773299 · f773299
1 parent 2c8a491
commit f773299
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 146 deletions.
diff --git a/packages/components/src/Menu/Menu.story.tsx b/packages/components/src/Menu/Menu.story.tsx
@@ -39,7 +39,8 @@ import { Divider } from '../Divider'
 import { FieldToggleSwitch } from '../Form'
 import { Icon } from '../Icon'
 import { Space, SpaceVertical } from '../Layout'
-import { Text, Paragraph } from '../Text'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../Tabs'
+import { Heading, Text, Paragraph } from '../Text'
 import { Tooltip } from '../Tooltip'
 import { useToggle } from '../utils'
 import { Menu } from './Menu'
@@ -563,3 +564,33 @@ export const WithTooltip = () => {
 WithTooltip.parameters = {
   storyshots: { disable: true },
 }
+
+export const ArrowKeyNavigation = () => (
+  <SpaceVertical align="start">
+    <Button>Above</Button>
+    <Heading>Menu</Heading>
+    <MenuList>
+      <MenuItem>1</MenuItem>
+      <MenuItem>2</MenuItem>
+      <MenuItem>3</MenuItem>
+    </MenuList>
+    <Heading>Tabs</Heading>
+    <Tabs>
+      <TabList>
+        <Tab>1</Tab>
+        <Tab>2</Tab>
+        <Tab>3</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>One</TabPanel>
+        <TabPanel>Two</TabPanel>
+        <TabPanel>Three</TabPanel>
+      </TabPanels>
+    </Tabs>
+    <Button>Below</Button>
+  </SpaceVertical>
+)
+
+ArrowKeyNavigation.parameters = {
+  storyshots: { disable: true },
+}
diff --git a/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -1,114 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tabs focus behavior Tab Focus: does not render focus ring after click 1`] = `
-.c0 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
-  padding-bottom: 0.75rem;
-  padding-top: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  background: transparent;
-  border: none;
-  border-bottom: 3px solid;
-  border-bottom-color: #6C43E0;
-  border-radius: 0;
-  color: #262D33;
-  cursor: pointer;
-  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
-  margin: 0;
-}
-
-.c0:active {
-  border-bottom-color: #6C43E0;
-}
-
-.c0:active,
-.c0:hover {
-  border-bottom-color: transparent;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0:hover {
-  border-bottom-color: #6C43E0;
-}
-
-.c0:disabled {
-  border-bottom-color: transparent;
-  color: #939BA5;
-  cursor: default;
-}
-
-<button
-  aria-controls="panel-0"
-  aria-orientation="horizontal"
-  aria-selected="true"
-  class="c0 Tab-eojndt-1"
-  id="tab-0"
-  role="tab"
-  tabindex="-1"
->
-  tab1
-</button>
-`;
-
-exports[`Tabs focus behavior Tab Focus: renders focus ring for keyboard navigation 1`] = `
-.c0 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
-  padding-bottom: 0.75rem;
-  padding-top: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  background: transparent;
-  border: none;
-  border-bottom: 3px solid;
-  border-bottom-color: transparent;
-  border-radius: 0;
-  box-shadow: 0 0 0 0.15rem rgba(151,133,242,0.25);
-  color: #707781;
-  cursor: pointer;
-  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
-  margin: 0;
-}
-
-.c0:active {
-  border-bottom-color: #707781;
-}
-
-.c0:active,
-.c0:hover {
-  border-bottom-color: transparent;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0:hover {
-  border-bottom-color: #C1C6CC;
-}
-
-.c0:disabled {
-  border-bottom-color: transparent;
-  color: #939BA5;
-  cursor: default;
-}
-
-<button
-  aria-controls="panel-1"
-  aria-orientation="horizontal"
-  aria-selected="false"
-  class="c0 Tab-eojndt-1"
-  id="tab-1"
-  role="tab"
-  tabindex="-1"
->
-  tab2
-</button>
-`;
-
 exports[`focus behavior Tab Focus: does not render focus ring after click 1`] = `
 .c0 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;

diff --git a/playground/src/index.tsx b/playground/src/index.tsx
@@ -25,46 +25,13 @@
  */
 import React from 'react'
 import { render } from 'react-dom'
-import {
-  Button,
-  ComponentsProvider,
-  Heading,
-  MenuList,
-  MenuItem,
-  SpaceVertical,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from '@looker/components'
+import { ComponentsProvider } from '@looker/components'
+import { LongMenus } from '@looker/components/src/Menu/Menu.story'
 
 const App = () => {
   return (
     <ComponentsProvider loadGoogleFonts>
-      <SpaceVertical align="start">
-        <Button>Above</Button>
-        <Heading>Menu</Heading>
-        <MenuList>
-          <MenuItem>1</MenuItem>
-          <MenuItem>2</MenuItem>
-          <MenuItem>3</MenuItem>
-        </MenuList>
-        <Heading>Tabs</Heading>
-        <Tabs>
-          <TabList>
-            <Tab>1</Tab>
-            <Tab>2</Tab>
-            <Tab>3</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel>One</TabPanel>
-            <TabPanel>Two</TabPanel>
-            <TabPanel>Three</TabPanel>
-          </TabPanels>
-        </Tabs>
-        <Button>Below</Button>
-      </SpaceVertical>
+      <LongMenus />
     </ComponentsProvider>
   )
 }