docs(tooltip): Remove documentation around Tooltipped component

Closes #1367
mlaursen · Mar 9, 2022 · 1a59190 · 1a59190
1 parent b30f1bf
commit 1a59190
Show file tree

Hide file tree

Showing 28 changed files with 487 additions and 278 deletions.
diff --git a/packages/documentation/src/components/AppBarAction.tsx b/packages/documentation/src/components/AppBarAction.tsx
@@ -3,7 +3,7 @@ import {
   AppBarAction as RMDAppBarAction,
   AppBarActionProps,
 } from "@react-md/app-bar";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 interface Props extends AppBarActionProps {
   id: string;
@@ -13,25 +13,35 @@ interface Props extends AppBarActionProps {
 export default function AppBarAction({
   id,
   tooltip,
+  onClick,
+  onBlur,
+  onFocus,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
   onTouchStart,
-  onFocus,
-  onKeyDown,
+  onContextMenu,
   children,
   ...props
 }: Props): ReactElement {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    onClick,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onTouchStart,
+    onContextMenu,
+  });
+
   return (
-    <Tooltipped
-      id={id}
-      tooltip={tooltip}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onTouchStart={onTouchStart}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-    >
-      <RMDAppBarAction {...props}>{children}</RMDAppBarAction>
-    </Tooltipped>
+    <>
+      <RMDAppBarAction {...props} {...(tooltip ? elementProps : { id })}>
+        {children}
+      </RMDAppBarAction>
+      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/AppBarNav.tsx b/packages/documentation/src/components/AppBarNav.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { AppBarNav as RMDAppBarNav, AppBarNavProps } from "@react-md/app-bar";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 interface Props extends AppBarNavProps {
   id: string;
@@ -10,25 +10,35 @@ interface Props extends AppBarNavProps {
 export default function AppBarNav({
   id,
   tooltip,
+  onClick,
+  onBlur,
+  onFocus,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
   onTouchStart,
-  onFocus,
-  onKeyDown,
+  onContextMenu,
   children,
   ...props
 }: Props): ReactElement {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    onClick,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onTouchStart,
+    onContextMenu,
+  });
+
   return (
-    <Tooltipped
-      id={id}
-      tooltip={tooltip}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onTouchStart={onTouchStart}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-    >
-      <RMDAppBarNav {...props}>{children}</RMDAppBarNav>
-    </Tooltipped>
+    <>
+      <RMDAppBarNav {...props} {...(tooltip ? elementProps : { id })}>
+        {children}
+      </RMDAppBarNav>
+      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/AppBarTitle.tsx b/packages/documentation/src/components/AppBarTitle.tsx
@@ -3,7 +3,7 @@ import {
   AppBarTitle as RMDAppBarTitle,
   AppBarTitleProps,
 } from "@react-md/app-bar";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 import { useResizeObserver } from "@react-md/utils";
 
 import { useId } from "./IdProvider";
@@ -41,16 +41,22 @@ export default function AppBarTitle({
   const [, refHandler] = useResizeObserver(updateTooltip, {
     disableHeight: true,
   });
+  const baseId = useId(id);
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId,
+  });
 
   return (
-    <Tooltipped id={useId(id)} tooltip={tooltip}>
+    <>
       <RMDAppBarTitle
         {...props}
+        {...(tooltip ? elementProps : { id: baseId })}
         ref={refHandler}
         tabIndex={tooltip ? 0 : undefined}
       >
         {children}
       </RMDAppBarTitle>
-    </Tooltipped>
+      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/Button.tsx b/packages/documentation/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { Button as RMDButton, ButtonProps } from "@react-md/button";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 interface Props extends ButtonProps {
   id: string;
@@ -10,25 +10,35 @@ interface Props extends ButtonProps {
 export default function Button({
   id,
   tooltip,
+  onClick,
+  onBlur,
+  onFocus,
+  onKeyDown,
   onMouseEnter,
   onMouseLeave,
   onTouchStart,
-  onFocus,
-  onKeyDown,
+  onContextMenu,
   children,
   ...props
 }: Props): ReactElement {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    onClick,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown,
+    onTouchStart,
+    onContextMenu,
+  });
+
   return (
-    <Tooltipped
-      id={id}
-      tooltip={tooltip}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      onTouchStart={onTouchStart}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-    >
-      <RMDButton {...props}>{children}</RMDButton>
-    </Tooltipped>
+    <>
+      <RMDButton {...props} {...(tooltip ? elementProps : { id })}>
+        {children}
+      </RMDButton>
+      <Tooltip {...tooltipProps}>{tooltip}</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/Demos/Badge/TooltippedBadgedButton.tsx b/packages/documentation/src/components/Demos/Badge/TooltippedBadgedButton.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, forwardRef, ReactNode } from "react";
 import { BadgedButton, BadgedButtonProps } from "@react-md/badge";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 export interface TooltippedBadgedButtonProps extends BadgedButtonProps {
   id: string;
@@ -11,20 +11,53 @@ export interface TooltippedBadgedButtonProps extends BadgedButtonProps {
 
 export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
   function TooltippedBadgedButton(
-    { id, tooltip, tooltipStyle, tooltipClassName, children, ...props },
+    {
+      id,
+      tooltip,
+      tooltipStyle,
+      tooltipClassName,
+      onClick,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
+      onTouchStart,
+      onContextMenu,
+      children,
+      ...props
+    },
     ref
   ) {
+    const { elementProps, tooltipProps } = useTooltip({
+      baseId: id,
+      onClick,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown,
+      onTouchStart,
+      onContextMenu,
+    });
+
     return (
-      <Tooltipped
-        id={id}
-        tooltip={tooltip}
-        style={tooltipStyle}
-        className={tooltipClassName}
-      >
-        <BadgedButton {...props} ref={ref}>
+      <>
+        <BadgedButton
+          {...props}
+          {...(tooltip ? elementProps : { id })}
+          ref={ref}
+        >
           {children}
         </BadgedButton>
-      </Tooltipped>
+        <Tooltip
+          {...tooltipProps}
+          style={tooltipStyle}
+          className={tooltipClassName}
+        >
+          {tooltip}
+        </Tooltip>
+      </>
     );
   }
 );
diff --git a/packages/documentation/src/components/Demos/CodePreview.tsx b/packages/documentation/src/components/Demos/CodePreview.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 import { useRouter } from "next/router";
 import { useActionClassName } from "@react-md/app-bar";
 import { CodeSVGIcon } from "@react-md/material-icons";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 import { useCodePreference } from "components/CodePreference";
 import LinkButton from "components/LinkButton";
@@ -22,10 +22,20 @@ export default function CodePreview({
 }: CodePreviewProps): ReactElement {
   const router = useRouter();
   const { pref } = useCodePreference();
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: `${demoId}-show-code`,
+    onClick: sendAnalytics({
+      name: EventName.ViewCode,
+      lang: pref,
+      demoName: demoTitle,
+      packageName: folder,
+    }),
+  });
 
   return (
-    <Tooltipped id={`${demoId}-show-code`} tooltip="Show Code">
+    <>
       <LinkButton
+        {...elementProps}
         buttonType="icon"
         aria-label="Show Code"
         href={toSandbox({
@@ -34,15 +44,10 @@ export default function CodePreview({
           from: `${router.pathname}#${demoId}-title`,
         })}
         className={useActionClassName({ first: true })}
-        onClick={sendAnalytics({
-          name: EventName.ViewCode,
-          lang: pref,
-          demoName: demoTitle,
-          packageName: folder,
-        })}
       >
         <CodeSVGIcon />
       </LinkButton>
-    </Tooltipped>
+      <Tooltip {...tooltipProps}>Show Code</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/Demos/GithubDemoLink.tsx b/packages/documentation/src/components/Demos/GithubDemoLink.tsx
@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 import GithubLink from "components/GithubLink";
 
@@ -12,9 +12,13 @@ export default function GithubDemoLink({
   id,
   href,
 }: GithubDemoLinkProps): ReactElement {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+  });
   return (
-    <Tooltipped id={id} tooltip="View source GitHub">
-      <GithubLink href={href} />
-    </Tooltipped>
+    <>
+      <GithubLink {...elementProps} href={href} />
+      <Tooltip {...tooltipProps}>View source GitHub</Tooltip>
+    </>
   );
 }
diff --git a/packages/documentation/src/components/Demos/List/TwoLineExamples.tsx b/packages/documentation/src/components/Demos/List/TwoLineExamples.tsx
@@ -5,7 +5,7 @@ import { Avatar, AvatarProps } from "@react-md/avatar";
 import { FolderSVGIcon, InfoOutlineSVGIcon } from "@react-md/material-icons";
 import { List, ListItem, ListSubheader } from "@react-md/list";
 import { SVGIconProps } from "@react-md/icon";
-import { Tooltipped } from "@react-md/tooltip";
+import { Tooltip, useTooltip } from "@react-md/tooltip";
 
 import Container from "./Container";
 import styles from "./TwoLineExamples.module.scss";
@@ -36,16 +36,22 @@ function InfoIcon({
   date,
   ...props
 }: SVGIconProps & { id: string; date: Date }): ReactElement {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: `${id}-info`,
+    defaultPosition: "left",
+  });
+
   return (
-    <Tooltipped
-      id={`${id}-info`}
-      tooltip={date.toLocaleString()}
-      defaultPosition="left"
-    >
-      <span tabIndex={0} className={cn(styles.icon, className)}>
+    <>
+      <span
+        {...elementProps}
+        tabIndex={0}
+        className={cn(styles.icon, className)}
+      >
         <InfoOutlineSVGIcon {...props} />
       </span>
-    </Tooltipped>
+      <Tooltip {...tooltipProps}>{date.toLocaleString()}</Tooltip>
+    </>
   );
 }