chore(website): Update examples for useTooltip disabled option

Author: mlaursen

packages/documentation/src/components/AppBarAction.tsx

@@ -22,7 +22,9 @@ export default function AppBarAction({
   onContextMenu,
   ...props
 }: Props): ReactElement {
-  const handlers = {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    disabled: !tooltip,
     onClick,
     onBlur,
     onFocus,
@@ -31,18 +33,11 @@ export default function AppBarAction({
     onMouseLeave,
     onTouchStart,
     onContextMenu,
-  };
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
-    ...handlers,
   });
 
   return (
     <>
-      <RMDAppBarAction
-        {...props}
-        {...(tooltip ? elementProps : { id, ...handlers })}
-      >
+      <RMDAppBarAction {...props} {...elementProps}>
         {children}
       </RMDAppBarAction>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/AppBarNav.tsx

@@ -22,7 +22,9 @@ export default function AppBarNav({
   onContextMenu,
   ...props
 }: Props): ReactElement {
-  const handlers = {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    disabled: !tooltip,
     onClick,
     onBlur,
     onFocus,
@@ -31,18 +33,11 @@ export default function AppBarNav({
     onMouseLeave,
     onTouchStart,
     onContextMenu,
-  };
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
-    ...handlers,
   });
 
   return (
     <>
-      <RMDAppBarNav
-        {...props}
-        {...(tooltip ? elementProps : { id, ...handlers })}
-      >
+      <RMDAppBarNav {...props} {...elementProps}>
         {children}
       </RMDAppBarNav>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/Button.tsx

@@ -22,7 +22,9 @@ export default function Button({
   onContextMenu,
   ...props
 }: Props): ReactElement {
-  const handlers = {
+  const { elementProps, tooltipProps } = useTooltip({
+    baseId: id,
+    disabled: !tooltip,
     onClick,
     onBlur,
     onFocus,
@@ -31,15 +33,11 @@ export default function Button({
     onMouseLeave,
     onTouchStart,
     onContextMenu,
-  };
-  const { elementProps, tooltipProps } = useTooltip({
-    baseId: id,
-    ...handlers,
   });
 
   return (
     <>
-      <RMDButton {...props} {...(tooltip ? elementProps : { id, ...handlers })}>
+      <RMDButton {...props} {...elementProps}>
         {children}
       </RMDButton>
       <Tooltip {...tooltipProps}>{tooltip}</Tooltip>

packages/documentation/src/components/Demos/Badge/TooltippedBadgedButton.tsx

@@ -31,7 +31,8 @@ export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
     },
     ref
   ) {
-    const handlers = {
+    const { elementProps, tooltipProps } = useTooltip({
+      baseId: id,
       onClick,
       onBlur,
       onFocus,
@@ -40,19 +41,11 @@ export default forwardRef<HTMLButtonElement, TooltippedBadgedButtonProps>(
       onKeyDown,
       onTouchStart,
       onContextMenu,
-    };
-    const { elementProps, tooltipProps } = useTooltip({
-      baseId: id,
-      ...handlers,
     });
 
     return (
       <>
-        <BadgedButton
-          {...props}
-          {...(tooltip ? elementProps : { id, ...handlers })}
-          ref={ref}
-        >
+        <BadgedButton {...props} {...elementProps} ref={ref}>
           {children}
         </BadgedButton>
         <Tooltip