Added Tooltip stories (#3881)

agreenberry · web-flow · commit e27c3c82a480 · 2023-10-31T21:35:37.000Z
* added existing tooltip story to storybook

* checkpoint

* refactored Tooltip files and labelled v1

* fix exports test

* cleanup old snapshot

* Updated documentation
diff --git a/docs/content/Tooltip.mdx b/docs/content/Tooltip.mdx
@@ -2,10 +2,10 @@
 componentId: tooltip
 title: Tooltip
 status: Alpha
-source: https://github.com/primer/react/blob/main/src/Tooltip.tsx
+source: https://github.com/primer/react/blob/main/src/Tooltip/Tooltip.tsx
 ---
 
-import data from '../../src/Tooltip.docs.json'
+import data from '../../src/Tooltip/Tooltip.docs.json'
 import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/design/components/tooltip/react'} />
diff --git a/src/Tooltip/Tooltip.docs.json b/src/Tooltip/Tooltip.docs.json
diff --git a/src/Tooltip/Tooltip.features.stories.tsx b/src/Tooltip/Tooltip.features.stories.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import {Meta} from '@storybook/react'
-import {BaseStyles, ThemeProvider, IconButton, Button} from '..'
+import {BaseStyles, ThemeProvider, IconButton} from '..'
 import Box from '../Box'
-import Tooltip from '../Tooltip'
+import Tooltip from './Tooltip'
 import {SearchIcon} from '@primer/octicons-react'
 
+/* Tooltip v1 */
+
 export default {
-  title: 'Components/Tooltip',
+  title: 'Components/Tooltip/Features',
   component: Tooltip,
 
   decorators: [
@@ -22,14 +24,6 @@ export default {
   ],
 } as Meta
 
-export const Default = () => (
-  <Box sx={{p: 5}}>
-    <Tooltip aria-label="Hello, Tooltip!">
-      <Button>Hover me</Button>
-    </Tooltip>
-  </Box>
-)
-
 export const IconButtonTooltip = () => (
   <Box sx={{p: 5}}>
     <Tooltip aria-label="Search">
diff --git a/src/Tooltip/Tooltip.stories.tsx b/src/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {BaseStyles, ThemeProvider, Button} from '..'
+import Box from '../Box'
+import Tooltip from './Tooltip'
+
+/* Tooltip v1 */
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    },
+  ],
+} as Meta
+
+export const Default = () => (
+  <Box sx={{p: 5}}>
+    <Tooltip aria-label="Hello, Tooltip!">
+      <Button>Hover me</Button>
+    </Tooltip>
+  </Box>
+)
diff --git a/src/Tooltip/Tooltip.test.tsx b/src/Tooltip/Tooltip.test.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
-import Tooltip, {TooltipProps} from '../Tooltip'
+import Tooltip, {TooltipProps} from './Tooltip'
 import {render, renderClasses, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
+/* Tooltip v1 */
+
 expect.extend(toHaveNoViolations)
 
 describe('Tooltip', () => {
diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx
@@ -1,9 +1,11 @@
 import clsx from 'clsx'
 import React from 'react'
 import styled from 'styled-components'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx, {SxProp} from '../sx'
+import {ComponentProps} from '../utils/types'
+
+/* Tooltip v1 */
 
 const TooltipBase = styled.span<SxProp>`
   position: relative;
diff --git a/src/Tooltip/Tooltip.types.test.tsx b/src/Tooltip/Tooltip.types.test.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
-import Tooltip from '../Tooltip'
+import Tooltip from '../Tooltip/Tooltip'
+
+/* Tooltip v1 */
 
 export function shouldAcceptCallWithNoProps() {
   return <Tooltip />
diff --git a/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
diff --git a/src/Tooltip/index.ts b/src/Tooltip/index.ts
@@ -0,0 +1,2 @@
+export {default} from './Tooltip'
+export type {TooltipProps} from './Tooltip'
diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx
@@ -51,6 +51,7 @@ const allowlist = [
   'Textarea',
   'TextInput',
   'TextInputWithTokens',
+  'Tooltip',
   'TreeView',
   'Timeline',
   'ToggleSwitch',
diff --git a/src/index.ts b/src/index.ts
@@ -165,8 +165,8 @@ export type {
 } from './Timeline'
 export {default as Token, IssueLabelToken, AvatarToken} from './Token'
 export type {TokenProps} from './Token'
-export {default as Tooltip} from './Tooltip'
-export type {TooltipProps} from './Tooltip'
+export {default as Tooltip} from './Tooltip/Tooltip'
+export type {TooltipProps} from './Tooltip/Tooltip'
 export {default as Truncate} from './Truncate'
 export type {TruncateProps} from './Truncate'
 
diff --git a/src/internal/components/TextInputInnerAction.tsx b/src/internal/components/TextInputInnerAction.tsx
@@ -2,7 +2,7 @@ import React, {forwardRef} from 'react'
 import {IconProps} from '@primer/octicons-react'
 import Box from '../../Box'
 import {Button, IconButton, ButtonProps} from '../../Button'
-import Tooltip from '../../Tooltip'
+import Tooltip from '../../Tooltip/Tooltip'
 import {BetterSystemStyleObject, merge, SxProp} from '../../sx'
 
 type TextInputActionProps = Omit<

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export {default} from './Tooltip'`
	`2`	`+export type {TooltipProps} from './Tooltip'`