feat: #235 v4 Deprecated existing Tooltip

src/components/tool-tip/__styles__/index.ts → src/components/deprecated-tool-tip/__styles__/index.ts

@@ -1,7 +1,8 @@
 import { styled } from '@linaria/react'
 import { css } from '@linaria/core'
 
-export const ElToolTipChild = styled.div`
+/** @deprecated */
+export const ElDeprecatedToolTipChild = styled.div`
   position: absolute;
   padding: 0.5rem;
   background: var(--black);
@@ -27,7 +28,8 @@ export const elToolTipActive = css`
   display: block;
 `
 
-export const ElToolTipContainer = styled.div`
+/** @deprecated */
+export const ElDeprecatedToolTipContainer = styled.div`
   position: relative;
   padding: 0.25rem;
 `

src/components/tool-tip/__tests__/tool-tip.test.tsx → src/components/deprecated-tool-tip/__tests__/tool-tip.test.tsx

@@ -1,12 +1,12 @@
 import { render } from '@testing-library/react'
-import { ToolTip } from '../tool-tip'
+import { DeprecatedToolTip } from '../tool-tip'
 
-describe('ToolTip', () => {
+describe('DeprecatedToolTip', () => {
   it('should match a snapshot and render children', () => {
     const wrapper = render(
-      <ToolTip tip="hello there" defaultActive>
+      <DeprecatedToolTip tip="hello there" defaultActive>
         Hover here
-      </ToolTip>,
+      </DeprecatedToolTip>,
     )
     expect(wrapper.asFragment()).toMatchSnapshot()
   })

src/components/deprecated-tool-tip/tool-tip.tsx

@@ -0,0 +1,35 @@
+import { cx } from '@linaria/core'
+import React, { FC, HTMLAttributes, useState } from 'react'
+import { ElDeprecatedToolTipChild, elToolTipActive, ElDeprecatedToolTipContainer } from './__styles__'
+
+/** @deprecated */
+export interface DeprecatedToolTipProps extends HTMLAttributes<HTMLDivElement> {
+  defaultActive?: boolean
+  tip?: string
+}
+
+/** @deprecated */
+export interface DeprecatedToolTipChildProps extends HTMLAttributes<HTMLDivElement> {
+  active?: boolean
+  tip?: string
+}
+
+/** @deprecated */
+export const DeprecatedToolTip: FC<DeprecatedToolTipProps> = ({ children, defaultActive = false, tip }) => {
+  const [active, setActive] = useState<boolean>(defaultActive)
+
+  return (
+    <ElDeprecatedToolTipContainer onMouseOver={() => setActive(true)} onMouseOut={() => setActive(false)}>
+      {children}
+      <ToolTipChild active={active}>{tip}</ToolTipChild>
+    </ElDeprecatedToolTipContainer>
+  )
+}
+
+export const ToolTipChild: FC<DeprecatedToolTipChildProps> = ({ children, active }) => {
+  return (
+    <ElDeprecatedToolTipChild role="tooltip" className={cx(active && elToolTipActive)}>
+      {children}
+    </ElDeprecatedToolTipChild>
+  )
+}

src/components/tool-tip/tooltip.mdx → src/components/deprecated-tool-tip/tooltip.mdx

@@ -1,5 +1,4 @@
 import { Story, Canvas, Controls, Meta } from '@storybook/blocks'
-import { ToolTip } from './index'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import * as TooltipStories from './tooltip.stories'
 

src/components/deprecated-tool-tip/tooltip.stories.tsx

@@ -0,0 +1,18 @@
+import { DeprecatedToolTip } from './index'
+
+export default {
+  title: 'DeprecatedToolTip',
+  component: DeprecatedToolTip,
+}
+
+export const BasicUsage = {
+  render: ({}) => <DeprecatedToolTip tip="Some Data">Hover here</DeprecatedToolTip>,
+}
+
+export const DefaultActive = {
+  render: ({}) => (
+    <DeprecatedToolTip tip="Some Data" defaultActive>
+      Hover here
+    </DeprecatedToolTip>
+  ),
+}

src/index.ts

@@ -38,7 +38,7 @@ export * from './components/textarea'
 export * from './components/toggle'
 export * from './components/typography'
 export * from './components/form-layout'
-export * from './components/tool-tip'
+export * from './components/deprecated-tool-tip'
 export * from './components/input-error'
 export * from './components/file-input'
 export * from './components/placeholder-image'