feat(core): Tooltip revisited!

React95 · Feb 9, 2024 · 6b60082 · 6b60082
1 parent 01ae210
commit 6b60082
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 108 deletions.
diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js
@@ -6,6 +6,7 @@ import { ImageLoader } from 'esbuild-vanilla-image-loader';
 export default {
   // stories: [, '../stories/(?!all)*.stories.tsx'],
   stories: [
+    '../stories/tooltip.stories.tsx',
     '../stories/radiobutton.stories.tsx',
     '../stories/titlebar.stories.tsx',
     '../stories/range.stories.tsx',

diff --git a/packages/core/components/Tooltip/Tooltip.css.ts b/packages/core/components/Tooltip/Tooltip.css.ts
@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+import { contract } from '../ThemeProvider/themes/contract.css';
+import { calc } from '@vanilla-extract/css-utils';
+
+export const tip = style({
+  background: `radial-gradient(#ff0 20%, transparent 20%) 0 0,
+     radial-gradient(#ff0 20%, transparent 20%) 4px 4px,
+     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,
+     radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px`,
+  backgroundSize: `${contract.space[7]} ${contract.space[7]}`,
+  backgroundColor: contract.colors.borderLightest,
+  borderWidth: contract.space[1],
+  borderStyle: 'solid',
+  paddingTop: contract.space[2],
+  paddingRight: contract.space[2],
+  paddingBottom: contract.space[2],
+  paddingLeft: contract.space[4],
+  boxShadow: 'none',
+  position: 'absolute',
+  top: calc.negate(contract.space[20]),
+  textAlign: 'center',
+  zIndex: contract.zIndices.taskbar,
+});
+
+export const wrapper = style({
+  display: 'inline-block',
+  position: 'relative',
+  cursor: 'default',
+  whiteSpace: 'nowrap',
+});
diff --git a/packages/core/components/Tooltip/Tooltip.test.tsx b/packages/core/components/Tooltip/Tooltip.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render } from '../shared/test/utils';
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 describe('<Tooltip />', () => {
   describe('Snapshot', () => {

diff --git a/packages/core/components/Tooltip/Tooltip.tsx b/packages/core/components/Tooltip/Tooltip.tsx
@@ -1,38 +1,14 @@
 import * as React from 'react';
-import styled from '@xstyled/styled-components';
-
-import Frame from '../Frame';
-
-const Tip = styled(Frame)`
-  background: radial-gradient(#ff0 20%, transparent 20%) 0 0,
-    radial-gradient(#ff0 20%, transparent 20%) 4px 4px,
-    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 0 1px,
-    radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 25%) 3px 4px;
-  background-size: 7px 7px;
-  background-color: borderLightest;
-  border: 1;
-  padding: 2 2 2 4;
-  box-shadow: none;
-  position: absolute;
-  top: -20px;
-  text-align: center;
-  z-index: taskbar;
-`;
+import { tip, wrapper } from './Tooltip.css';
+import cn from 'classnames';
 
 export type TooltipProps = {
   text?: string;
   delay?: number;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-const Wrapper = styled.div`
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  white-space: nowrap;
-`;
-
 const TooltipRenderer = (
-  { children, text, delay, ...rest }: TooltipProps,
+  { children, text = 'Hello!', delay = 1000, ...rest }: TooltipProps,
   ref: React.Ref<HTMLDivElement>,
 ) => {
   const [show, setShow] = React.useState(false);
@@ -52,46 +28,19 @@ const TooltipRenderer = (
   };
 
   return (
-    <Wrapper
+    <div
+      {...rest}
+      className={cn(wrapper, rest.className)}
       onMouseEnter={handleEnter}
       onMouseLeave={handleLeave}
-      {...rest}
       ref={ref}
     >
-      {show && <Tip>{text}</Tip>}
+      {show && <div className={tip}>{text}</div>}
       {children}
-    </Wrapper>
+    </div>
   );
 };
 
-const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(TooltipRenderer);
-
-function formatDate(date: Date): string {
-  const monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  const day = date.getDate();
-  const monthIndex = date.getMonth();
-  const year = date.getFullYear();
-
-  return `${day.toString().padStart(2, '0')} ${monthNames[monthIndex]} ${year}`;
-}
-
-Tooltip.defaultProps = {
-  delay: 1000,
-  text: formatDate(new Date()),
-};
-
-export default Tooltip;
+export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  TooltipRenderer,
+);
diff --git a/packages/core/components/Tooltip/__snapshots__/Tooltip.snap b/packages/core/components/Tooltip/__snapshots__/Tooltip.snap
@@ -1,16 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<Tooltip /> > Snapshot > should match snapshot 1`] = `
-.c0 {
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  white-space: nowrap;
-}
-
 <div>
   <div
-    class="c0"
+    class="Tooltip_wrapper__f5whxn1"
   >
     <span>
       hover
@@ -20,40 +13,12 @@ exports[`<Tooltip /> > Snapshot > should match snapshot 1`] = `
 `;
 
 exports[`<Tooltip /> > Snapshot > should match snapshot 2`] = `
-.c1 {
-  width: auto;
-  height: auto;
-  background-color: #c3c7cb;
-  --x-shadow: inset 0.5px 0.5px 0px 0.5px #ffffff, inset 0 0 0 1px #868a8e, 1px 0px 0 0px #000000, 0px 1px 0 0px #000000, 1px 1px 0 0px #000000;
-  box-shadow: var(--x-ring-shadow,0 0 #0000),var(--x-shadow);
-}
-
-.c2 {
-  background: radial-gradient(#ff0 20%,transparent 20%) 0 0, radial-gradient(#ff0 20%,transparent 20%) 4px 4px, radial-gradient(rgba(255,255,255,0.1) 20%,transparent 25%) 0 1px, radial-gradient(rgba(255,255,255,0.1) 20%,transparent 25%) 3px 4px;
-  background-size: 7px 7px;
-  background-color: #ffffff;
-  border: 1px solid;
-  padding: 2px 2px 2px 4px;
-  box-shadow: none;
-  position: absolute;
-  top: -20px;
-  text-align: center;
-  z-index: 2;
-}
-
-.c0 {
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  white-space: nowrap;
-}
-
 <div>
   <div
-    class="c0"
+    class="Tooltip_wrapper__f5whxn1"
   >
     <div
-      class="c1 c2"
+      class="Tooltip_tip__f5whxn0"
     >
       Tooltip text
     </div>

diff --git a/packages/core/components/Tooltip/index.ts b/packages/core/components/Tooltip/index.ts
@@ -1,3 +1,3 @@
-import Tooltip from './Tooltip';
+import { Tooltip } from './Tooltip';
 
 export default Tooltip;
diff --git a/packages/core/stories/tooltip.stories.tsx b/packages/core/stories/tooltip.stories.tsx
@@ -1,26 +1,61 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import * as React from 'react';
 
-import Tooltip from '../components/Tooltip';
+import { Tooltip, TooltipProps } from '../components/Tooltip/Tooltip';
 
 export default {
   title: 'Tooltip',
   component: Tooltip,
   tags: ['autodocs'],
-} as Meta<typeof Tooltip>;
+  argTypes: {
+    delay: {
+      control: { type: 'number', step: 100 },
+    },
+  },
+} as Meta<TooltipProps>;
+
+type Story = StoryObj<TooltipProps>;
+
+function formatDate(date: Date): string {
+  const monthNames = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
 
-export const Simple = {
-  render: () => (
+  const day = date.getDate();
+  const monthIndex = date.getMonth();
+  const year = date.getFullYear();
+
+  return `${day.toString().padStart(2, '0')} ${monthNames[monthIndex]} ${year}`;
+}
+
+export const Simple: Story = {
+  render: args => (
     <>
       <br />
       <br />
       <br />
-      <Tooltip>
+      <Tooltip {...args}>
         <span>Hover me</span>
       </Tooltip>
     </>
   ),
 
+  args: {
+    delay: 1000,
+    text: formatDate(new Date()),
+  },
+
   parameters: {
     design: {
       type: 'figma',