feat(tooltip): ✨ add anchor prop to provide renderPropable element (#342)

Author: navin-moorthy

src/tooltip/Tooltip.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
 
+import { passProps } from "../utils";
+
 import { TooltipAnchor } from "./TooltipAnchor";
 import { TooltipArrow } from "./TooltipArrow";
 import { TooltipPrefix } from "./TooltipPrefix";
@@ -17,11 +19,17 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       prefixProps,
       suffixProps,
     } = useTooltipProps(props);
-    const { prefix, content, suffix, withArrow } = uiProps;
+    const { anchor, prefix, content, suffix, withArrow } = uiProps;
 
     return (
       <>
-        <TooltipAnchor {...anchorProps} />
+        {anchor ? (
+          <TooltipAnchor {...anchorProps}>
+            {props => passProps(anchor, {}, props)}
+          </TooltipAnchor>
+        ) : (
+          <TooltipAnchor {...anchorProps} />
+        )}
         <TooltipWrapper ref={ref} {...wrapperProps}>
           <>
             {prefix ? <TooltipPrefix {...prefixProps} /> : null}

src/tooltip/TooltipAnchor.tsx

@@ -14,7 +14,16 @@ import { createComponent } from "../utils";
 import { TooltipUIProps } from "./TooltipProps";
 
 export const useTooltipAnchor = createHook<TooltipAnchorOptions>(
-  ({ state, content, withArrow, prefix, suffix, isDragging, ...props }) => {
+  ({
+    state,
+    anchor,
+    content,
+    withArrow,
+    prefix,
+    suffix,
+    isDragging,
+    ...props
+  }) => {
     if (!state) return props;
 
     const { visible, hide, show } = state;

src/tooltip/TooltipArrow.tsx

@@ -37,6 +37,7 @@ export const useTooltipArrow = createHook<TooltipArrowOptions>(
   ({
     state,
     size = defaultSize,
+    anchor,
     content,
     withArrow,
     prefix,

src/tooltip/TooltipPrefix.tsx

@@ -8,7 +8,16 @@ import { createComponent, cx } from "../utils";
 import { TooltipUIProps } from "./TooltipProps";
 
 export const useTooltipPrefix = createHook<TooltipPrefixOptions>(
-  ({ state, content, withArrow, prefix, suffix, isDragging, ...props }) => {
+  ({
+    state,
+    anchor,
+    content,
+    withArrow,
+    prefix,
+    suffix,
+    isDragging,
+    ...props
+  }) => {
     const theme = useTheme("tooltip");
     const className = cx(theme.prefix, props.className);
 

src/tooltip/TooltipProps.tsx

@@ -24,6 +24,7 @@ const componentMap = {
 };
 
 export const useTooltipProps = ({
+  anchor,
   content,
   prefix,
   suffix,
@@ -72,6 +73,7 @@ export const useTooltipProps = ({
     renderCallback,
   });
   const uiState = useTooltipUIState({
+    anchor,
     content,
     prefix,
     suffix,

src/tooltip/TooltipSuffix.tsx

@@ -8,7 +8,16 @@ import { createComponent, cx } from "../utils";
 import { TooltipUIProps } from "./TooltipProps";
 
 export const useTooltipSuffix = createHook<TooltipSuffixOptions>(
-  ({ state, content, withArrow, prefix, suffix, isDragging, ...props }) => {
+  ({
+    state,
+    anchor,
+    content,
+    withArrow,
+    prefix,
+    suffix,
+    isDragging,
+    ...props
+  }) => {
     const theme = useTheme("tooltip");
     const className = cx(theme.suffix, props.className);
 

src/tooltip/TooltipUIState.tsx

@@ -4,6 +4,7 @@ import { TooltipUIProps } from "./TooltipProps";
 
 export function useTooltipUIState(props: TooltipUIStateProps): TooltipUIState {
   const {
+    anchor,
     content,
     prefix,
     suffix,
@@ -12,6 +13,7 @@ export function useTooltipUIState(props: TooltipUIStateProps): TooltipUIState {
   } = props;
 
   return {
+    anchor,
     content,
     prefix,
     suffix,
@@ -21,6 +23,7 @@ export function useTooltipUIState(props: TooltipUIStateProps): TooltipUIState {
 }
 
 export type TooltipUIState = {
+  anchor: RenderProp<React.HTMLAttributes<any> & React.RefAttributes<any>>;
   /**
    * Label for the Tooltip.
    */
@@ -50,6 +53,6 @@ export type TooltipUIState = {
 export type TooltipUIStateProps = Partial<
   Pick<
     TooltipUIState,
-    "content" | "withArrow" | "prefix" | "suffix" | "isDragging"
+    "anchor" | "content" | "withArrow" | "prefix" | "suffix" | "isDragging"
   >
 >;

src/tooltip/TooltipWrapper.tsx

@@ -9,7 +9,16 @@ import { createComponent, cx } from "../utils";
 import { TooltipUIProps } from "./TooltipProps";
 
 export const useTooltipWrapper = createHook<TooltipWrapperOptions>(
-  ({ state, content, withArrow, prefix, suffix, isDragging, ...props }) => {
+  ({
+    state,
+    anchor,
+    content,
+    withArrow,
+    prefix,
+    suffix,
+    isDragging,
+    ...props
+  }) => {
     if (!state) return props;
 
     const theme = useTheme("tooltip");

src/tooltip/stories/TooltipAnchor.component.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { Button } from "../../button";
+import { Tooltip, TooltipProps } from "../../index";
+
+export type TooltipAnchorProps = TooltipProps & {};
+
+export const TooltipAnchor: React.FC<TooltipAnchorProps> = props => {
+  return (
+    <Tooltip
+      anchor={<Button>Tooltip</Button>}
+      content="Add your information"
+      {...props}
+    />
+  );
+};
+
+export default TooltipAnchor;

src/tooltip/stories/TooltipAnchor.stories.tsx

@@ -0,0 +1,86 @@
+import { ComponentMeta, ComponentStoryObj } from "@storybook/react";
+
+import { createControls, createPreviewTabs } from "../../../.storybook/utils";
+import { SlotIcon } from "../../icons";
+
+import js from "./templates/TooltipAnchorJsx";
+import ts from "./templates/TooltipAnchorTsx";
+import TooltipAnchor from "./TooltipAnchor.component";
+
+type Meta = ComponentMeta<typeof TooltipAnchor>;
+type Story = ComponentStoryObj<typeof TooltipAnchor>;
+
+export default {
+  title: "Popups/Tooltip/Anchor",
+  component: TooltipAnchor,
+  argTypes: createControls("tooltip", {
+    ignore: [
+      "wrapElement",
+      "as",
+      "ref",
+      "prefix",
+      "suffix",
+      "content",
+      "isDragging",
+      "visible",
+      "defaultVisible",
+      "setVisible",
+      "animated",
+      "gutter",
+      "timeout",
+      "getAnchorRect",
+      "fixed",
+      "shift",
+      "flip",
+      "slide",
+      "overlap",
+      "sameWidth",
+      "fitViewport",
+      "arrowPadding",
+      "overflowPadding",
+      "renderCallback",
+      "wrapperProps",
+      "portalElement",
+      "portalRef",
+      "hideOnEscape",
+      "hideOnControl",
+    ],
+  }),
+  parameters: {
+    layout: "centered",
+    options: { showPanel: true },
+    preview: createPreviewTabs({ js, ts }),
+  },
+} as Meta;
+
+export const Bottom: Story = { args: { placement: "bottom" } };
+export const Right: Story = { args: { placement: "right" } };
+export const Left: Story = { args: { placement: "left" } };
+export const Top: Story = { args: { placement: "top" } };
+
+export const ArrowBottom: Story = {
+  args: { withArrow: true, placement: "bottom" },
+};
+export const ArrowRight: Story = {
+  args: { withArrow: true, placement: "right" },
+};
+export const ArrowLeft: Story = {
+  args: { withArrow: true, placement: "left" },
+};
+export const ArrowTop: Story = { args: { withArrow: true, placement: "top" } };
+
+export const Prefix: Story = {
+  args: { withArrow: true, placement: "top", prefix: <SlotIcon /> },
+};
+
+export const Suffix: Story = {
+  args: { withArrow: true, placement: "top", suffix: <SlotIcon /> },
+};
+export const PrefixSuffix: Story = {
+  args: {
+    withArrow: true,
+    placement: "top",
+    prefix: <SlotIcon />,
+    suffix: <SlotIcon />,
+  },
+};