Enable disabled reason tooltip on button (#1293)

* Enable disabled reason tooltip on button

* Make tooltip component wrappable around any element

* Add example of disable button tooltips

* Only have one tooltip usage method

Author: just-be-dev

app/pages/project/instances/instance/tabs/StorageTab.tsx

@@ -136,6 +136,7 @@ export function StorageTab() {
             variant="default"
             size="sm"
             onClick={() => setShowDiskCreate(true)}
+            disabledReason="Instance must be stopped to create a disk"
             disabled={!instanceStopped}
           >
             Create new disk
@@ -145,6 +146,7 @@ export function StorageTab() {
             color="secondary"
             size="sm"
             onClick={() => setShowDiskAttach(true)}
+            disabledReason="Instance must be stopped to attach a disk"
             disabled={!instanceStopped}
           >
             Attach existing disk

libs/ui/lib/button/Button.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import type { MouseEventHandler } from 'react'
 import { forwardRef } from 'react'
 
-import { Spinner } from '@oxide/ui'
+import { Spinner, Tooltip, Wrap } from '@oxide/ui'
 import { assertUnreachable } from '@oxide/util'
 
 import './button.css'
@@ -86,6 +86,7 @@ export type ButtonProps = Pick<
   ButtonStyleProps & {
     innerClassName?: string
     loading?: boolean
+    disabledReason?: string
   }
 
 export const buttonStyle = ({
@@ -129,31 +130,36 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       onClick,
       'aria-disabled': ariaDisabled,
+      disabledReason,
       form,
       title,
     },
     ref
   ) => {
     return (
-      <button
-        className={cn(buttonStyle({ size, variant, color }), className, {
-          'visually-disabled': disabled,
-        })}
-        ref={ref}
-        type={type}
-        onMouseDown={disabled ? noop : undefined}
-        onClick={disabled ? noop : onClick}
-        aria-disabled={disabled || ariaDisabled}
-        form={form}
-        title={title}
-      >
-        <>
-          {loading && <Spinner className="absolute" />}
-          <span className={cn('flex items-center', innerClassName, { invisible: loading })}>
-            {children}
-          </span>
-        </>
-      </button>
+      <Wrap when={disabled && disabledReason} with={<Tooltip content={disabledReason!} />}>
+        <button
+          className={cn(buttonStyle({ size, variant, color }), className, {
+            'visually-disabled': disabled,
+          })}
+          ref={ref}
+          type={type}
+          onMouseDown={disabled ? noop : undefined}
+          onClick={disabled ? noop : onClick}
+          aria-disabled={disabled || ariaDisabled}
+          form={form}
+          title={title}
+        >
+          <>
+            {loading && <Spinner className="absolute" />}
+            <span
+              className={cn('flex items-center', innerClassName, { invisible: loading })}
+            >
+              {children}
+            </span>
+          </>
+        </button>
+      </Wrap>
     )
   }
 )

libs/ui/lib/field-label/FieldLabel.tsx

@@ -32,8 +32,10 @@ export const FieldLabel = ({
         )}
       </Component>
       {tip && (
-        <Tooltip id={`${id}-tip`} content={tip}>
-          <Info8Icon />
+        <Tooltip content={tip}>
+          <button className="svg:pointer-events-none">
+            <Info8Icon />
+          </button>
         </Tooltip>
       )}
     </div>

libs/ui/lib/tooltip/Tooltip.stories.tsx

@@ -2,7 +2,9 @@ import { Filter12Icon } from '../icons'
 import { Tooltip } from './Tooltip'
 
 export const Default = () => (
-  <Tooltip id="tooltip" content="Filter" onClick={() => alert('onClick')}>
-    <Filter12Icon />
+  <Tooltip content="Filter">
+    <button>
+      <Filter12Icon />
+    </button>
   </Tooltip>
 )

libs/ui/lib/tooltip/Tooltip.tsx

@@ -14,7 +14,13 @@ import {
 } from '@floating-ui/react-dom-interactions'
 import type { Placement } from '@floating-ui/react-dom-interactions'
 import cn from 'classnames'
+import type { ReactElement } from 'react'
+import { forwardRef } from 'react'
+import { cloneElement } from 'react'
+import { Children } from 'react'
 import { useRef, useState } from 'react'
+import { mergeRefs } from 'react-merge-refs'
+import invariant from 'tiny-invariant'
 
 import './tooltip.css'
 
@@ -26,23 +32,13 @@ import './tooltip.css'
  */
 type PlacementOrAuto = Placement | 'auto'
 
-export interface TooltipProps {
-  id: string
-  children?: React.ReactNode
-  /** The text to appear on hover/focus */
+export interface UseTooltipOptions {
+  /** Text to be rendered inside the tooltip */
   content: string | React.ReactNode
-  onClick?: React.MouseEventHandler<HTMLButtonElement>
-  definition?: boolean
   /** Defaults to auto if not supplied */
   placement?: PlacementOrAuto
 }
-
-export const Tooltip = ({
-  children,
-  content,
-  placement = 'auto',
-  definition = false,
-}: TooltipProps) => {
+export const useTooltip = ({ content, placement }: UseTooltipOptions) => {
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
 
@@ -80,18 +76,15 @@ export const Tooltip = ({
     useRole(context, { role: 'tooltip' }),
   ])
 
-  return (
-    <>
-      <button
-        type="button"
-        ref={reference}
-        {...getReferenceProps()}
-        className={cn('svg:pointer-events-none', {
-          'dashed-underline': definition,
-        })}
-      >
-        {children}
-      </button>
+  return {
+    /**
+     * Ref to be added to the anchor element of the tooltip. Use
+     * `react-merge-refs` if more than one ref is required for the element.
+     * */
+    ref: reference,
+    /** Props to be passed to the anchor element of the tooltip */
+    props: getReferenceProps(),
+    Tooltip: () => (
       <FloatingPortal>
         {open && (
           <div
@@ -111,6 +104,40 @@ export const Tooltip = ({
           </div>
         )}
       </FloatingPortal>
-    </>
-  )
+    ),
+  }
+}
+export interface TooltipProps {
+  children?: React.ReactNode
+  /** The text to appear on hover/focus */
+  content: string | React.ReactNode
+  /** Defaults to auto if not supplied */
+  placement?: PlacementOrAuto
 }
+
+export const Tooltip = forwardRef(
+  ({ children, content, placement = 'auto' }: TooltipProps, elRef) => {
+    const {
+      ref,
+      props,
+      Tooltip: TooltipPopup,
+    } = useTooltip({
+      content,
+      placement,
+    })
+
+    let child = Children.only(children)
+    invariant(child, 'Tooltip must have a single child')
+    child = cloneElement(child as ReactElement, {
+      ...props,
+      ref: mergeRefs([ref, elRef]),
+    })
+
+    return (
+      <>
+        {child}
+        <TooltipPopup />
+      </>
+    )
+  }
+)

package-lock.json

@@ -49,6 +49,7 @@
     "react-error-boundary": "^3.1.3",
     "react-hook-form": "^7.38.0",
     "react-is": "^17.0.2",
+    "react-merge-refs": "^2.0.1",
     "react-router-dom": "^6.4.2",
     "recharts": "^2.1.12",
     "tiny-invariant": "^1.2.0",