tooltip portal WIP

dist/lib/components/tooltip/tooltip-v2.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { BaseProps } from '../../types';
+type StyledTooltipProps = {
+    lineHeight?: 'xs' | 'sm';
+    scale?: 'xs' | 'sm';
+    paddingScale?: 1 | 2;
+};
+export interface TooltipV2Props extends BaseProps {
+    tooltipContent?: JSX.Element | string | null;
+    caption?: string | null;
+    additionalBlock?: React.ReactElement<any> & any;
+    children?: React.ReactElement<any> & any;
+    monotype?: boolean;
+    limitWidth?: boolean | string;
+}
+export declare const TooltipV2: React.ForwardRefExoticComponent<TooltipV2Props & StyledTooltipProps & React.RefAttributes<HTMLDivElement>>;
+export default TooltipV2;
+//# sourceMappingURL=tooltip-v2.d.ts.map

package.json

@@ -41,6 +41,7 @@
     "react-inlinesvg": "^4.2.0",
     "react-loading-skeleton": "^3.5.0",
     "react-modal": "^3.16.1",
+    "react-tooltip": "^5.30.0",
     "reakit": "^1.3.11",
     "styled-components": "^5.3.11",
     "web-vitals": "^4.2.4"
@@ -95,9 +96,9 @@
     "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.34",
     "@vitejs/plugin-react": "^4.7.0",
-    "prettier": "^3.6.2",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^9.0.18",
+    "prettier": "^3.6.2",
     "remark-gfm": "^4.0.1",
     "shx": "^0.4.0",
     "storybook": "^9.0.18",

src/lib/components/tooltip/tooltip-v2.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import TooltipV2 from './tooltip-v2';
+import FlexRow from '../flex-row/flex-row';
+import FlexColumn from '../flex-column/flex-column';
+import BodyText from '../body-text/body-text';
+import TruncateBox from '../truncate-box/truncate-box';
+import { Meta } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
+import CaptionText from '../caption-text/caption-text';
+
+const meta = {
+  component: TooltipV2,
+  title: 'Components/Display/TooltipV2',
+  args: {
+    caption: 'PublicKey',
+    tooltipContent:
+      '0202fa4d6ff148562fe18cdb5aca0bb6c3b96592cdacad8587eb906c3e4b1ac7258a',
+  },
+  argTypes: {
+    tooltipContent: {
+      control: 'text',
+      description: 'The tooltip text to display',
+    },
+    additionalBlock: {
+      control: 'object',
+    },
+  },
+} as Meta<typeof TooltipV2>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render: (args) => {
+    return (
+      <FlexRow itemsSpacing={30}>
+        <FlexColumn itemsSpacing={20}>
+          <BodyText size={2}>Tooltip V2</BodyText>
+          <TooltipV2 {...args}>
+            <BodyText size={3} monotype>
+              <TruncateBox size={1}>{args.tooltipContent as string}</TruncateBox>
+            </BodyText>
+          </TooltipV2>
+        </FlexColumn>
+      </FlexRow>
+    );
+  },
+};
+
+export const WithCaption: Story = {
+  render: (args) => {
+    return (
+      <FlexRow itemsSpacing={30}>
+        <FlexColumn itemsSpacing={20}>
+          <BodyText size={2}>With Caption</BodyText>
+          <TooltipV2 {...args} caption="PublicKey">
+            <BodyText size={3} monotype>
+              <TruncateBox size={1}>{args.tooltipContent as string}</TruncateBox>
+            </BodyText>
+          </TooltipV2>
+        </FlexColumn>
+      </FlexRow>
+    );
+  },
+};
+
+export const WithExtendedLine: Story = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    additionalBlock: (
+      <FlexColumn>
+        <CaptionText size={1} variation={'gray'}>
+          Tooltip Caption
+        </CaptionText>
+        <BodyText size={3}>Tooltip Content</BodyText>
+      </FlexColumn>
+    ),
+  },
+};
+
+export const LimitedWidth: Story = {
+  render: (args) => {
+    return (
+      <FlexRow itemsSpacing={30}>
+        <FlexColumn itemsSpacing={20}>
+          <BodyText size={2}>Limited Width (300px)</BodyText>
+          <TooltipV2 {...args} limitWidth="300px">
+            <BodyText size={3} monotype>
+              <TruncateBox size={1}>{args.tooltipContent as string}</TruncateBox>
+            </BodyText>
+          </TooltipV2>
+        </FlexColumn>
+      </FlexRow>
+    );
+  },
+};
+

src/lib/components/tooltip/tooltip-v2.tsx

@@ -0,0 +1,131 @@
+import React, { useId } from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import styled from 'styled-components';
+import { BaseProps } from '../../types';
+import BodyText from '../body-text/body-text';
+import CaptionText from '../caption-text/caption-text';
+import FlexColumn from '../flex-column/flex-column';
+import { matchSize } from '../../utils/match-size';
+
+type StyledTooltipProps = {
+  lineHeight?: 'xs' | 'sm';
+  scale?: 'xs' | 'sm';
+  paddingScale?: 1 | 2;
+};
+
+export interface TooltipV2Props extends BaseProps {
+  tooltipContent?: JSX.Element | string | null;
+  caption?: string | null;
+  additionalBlock?: React.ReactElement<any> & any;
+  children?: React.ReactElement<any> & any;
+  monotype?: boolean;
+  limitWidth?: boolean | string;
+}
+
+const StyledReactTooltip = styled(ReactTooltip).withConfig<StyledTooltipProps>({
+  shouldForwardProp: (prop) =>
+    !['paddingScale', 'lineHeight', 'scale'].includes(prop),
+})<StyledTooltipProps>(({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2 }) => ({
+  zIndex: `${theme.zIndex.tooltip} !important`,
+  color: `${theme.styleguideColors.contentPrimary} !important`,
+  backgroundColor: `${theme.styleguideColors.backgroundPrimary} !important`,
+  borderRadius: `${theme.borderRadius.base}px !important`,
+  padding: `${theme.padding[paddingScale]} !important`,
+  boxShadow: `${theme.boxShadow.tooltip} !important`,
+  opacity: '1 !important',
+  fontSize: matchSize(
+    {
+      sm: '1.3rem',
+      xs: '0.8125rem',
+    },
+    scale,
+  ),
+  lineHeight: matchSize(
+    {
+      sm: '1.5rem',
+      xs: '1.25rem',
+    },
+    lineHeight,
+  ),
+  '&.react-tooltip': {
+    maxWidth: 'none',
+  },
+  '&.react-tooltip__place-top .react-tooltip-arrow, &.react-tooltip__place-bottom .react-tooltip-arrow, &.react-tooltip__place-left .react-tooltip-arrow, &.react-tooltip__place-right .react-tooltip-arrow': {
+    display: 'none',
+  },
+}));
+
+export const TooltipV2 = React.forwardRef<
+  HTMLDivElement,
+  TooltipV2Props & StyledTooltipProps
+>(
+  (
+    {
+      children,
+      limitWidth,
+      tooltipContent,
+      caption,
+      additionalBlock,
+      monotype,
+      lineHeight = 'sm',
+      scale = 'sm',
+      paddingScale = 2,
+      ...props
+    },
+    _ref,
+  ) => {
+    const id = useId();
+    const maxWidth = limitWidth
+      ? typeof limitWidth === 'string'
+        ? limitWidth
+        : '500px'
+      : undefined;
+
+    if (children == null) {
+      return null;
+    }
+
+    if (tooltipContent == null) {
+      return <>{children}</>;
+    }
+
+    const trigger = React.cloneElement(children, {
+      'data-tooltip-id': id,
+    });
+
+    return (
+      <>
+        {trigger}
+        <StyledReactTooltip
+          id={id}
+          lineHeight={lineHeight}
+          scale={scale}
+          paddingScale={paddingScale}
+          render={() => (
+            <div style={{ maxWidth }}>
+              <FlexColumn itemsSpacing={8}>
+                <FlexColumn>
+                  <CaptionText size={2} variation="gray">
+                    {caption}
+                  </CaptionText>
+                  <BodyText
+                    size={3}
+                    monotype={monotype}
+                    lineHeight={lineHeight}
+                    scale={scale}
+                  >
+                    {tooltipContent}
+                  </BodyText>
+                </FlexColumn>
+                {additionalBlock}
+              </FlexColumn>
+            </div>
+          )}
+          {...props}
+        />
+      </>
+    );
+  },
+);
+
+export default TooltipV2;