From 729488028b3ee1755f6eadd73bff8df3433122c9 Mon Sep 17 00:00:00 2001
From: Alessio Gravili <alessio@gravili.de>
Date: Thu, 14 Nov 2024 19:29:12 -0700
Subject: [PATCH] feat(richtext-lexical): add tooltips to toolbar dropdown
 items (#9218)

Previously, if the dropdown item text is cut off due to length, there
was no way to view the full text.

Now, you can hover:

![CleanShot 2024-11-14 at 18 55
11@2x](https://github.com/user-attachments/assets/b160c172-c78a-4eb5-9fb3-b4ef8aee7eb5)
---
 .../toolbars/fixed/client/Toolbar/index.tsx   |  2 +-
 .../shared/ToolbarDropdown/DropDown.tsx       | 19 ++++++++++++++-----
 .../shared/ToolbarDropdown/index.scss         |  8 ++++++++
 .../toolbars/shared/ToolbarDropdown/index.tsx | 18 ++++++++++++++----
 packages/ui/src/elements/Button/index.tsx     |  2 ++
 packages/ui/src/elements/Button/types.ts      |  1 +
 6 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx
index e4ccdbbab..9f1a46cb7 100644
--- a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx
+++ b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx
@@ -40,7 +40,7 @@ function ButtonGroupItem({
 
   return (
     <ToolbarButton editor={editor} item={item} key={item.key}>
-      {<item.ChildComponent />}
+      <item.ChildComponent />
     </ToolbarButton>
   )
 }
diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx
index 4d9d585d3..1daae08ad 100644
--- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx
+++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/DropDown.tsx
@@ -1,6 +1,7 @@
 'use client'
 import type { LexicalEditor } from 'lexical'
 
+import { Button } from '@payloadcms/ui'
 import React, { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
@@ -19,15 +20,17 @@ export function DropDownItem({
   children,
   editor,
   enabled,
+  Icon,
   item,
-  title,
+  tooltip,
 }: {
   active?: boolean
   children: React.ReactNode
   editor: LexicalEditor
   enabled?: boolean
+  Icon: React.ReactNode
   item: ToolbarGroupItem
-  title?: string
+  tooltip?: string
 }): React.ReactNode {
   const [className, setClassName] = useState<string>(baseClass)
 
@@ -61,8 +64,14 @@ export function DropDownItem({
   }, [ref, registerItem])
 
   return (
-    <button
+    <Button
+      aria-label={tooltip}
+      buttonStyle="none"
       className={className}
+      disabled={enabled === false}
+      icon={Icon}
+      iconPosition="left"
+      iconStyle="none"
       onClick={() => {
         if (enabled !== false) {
           editor._updateTags = new Set(['toolbar', ...editor._updateTags]) // without setting the tags, our onSelect will not be able to trigger our onChange as focus onChanges are ignored.
@@ -82,11 +91,11 @@ export function DropDownItem({
         e.preventDefault()
       }}
       ref={ref}
-      title={title}
+      tooltip={tooltip}
       type="button"
     >
       {children}
-    </button>
+    </Button>
   )
 }
 
diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss
index d6efb7871..79959749d 100644
--- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss
+++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.scss
@@ -75,6 +75,7 @@
         cursor: pointer;
         color: var(--theme-elevation-900);
         transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
+        position: relative;
 
         .text {
           overflow: hidden;
@@ -91,6 +92,13 @@
           opacity: 0.2;
         }
 
+        .btn__icon {
+          // Override default button icon styles that
+          // set a background color when focused
+          background: none !important;
+          background-color: none !important;
+        }
+
         padding-left: 6.25px;
         padding-right: 6.25px;
         width: 100%;
diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx
index 3ffb16ca3..a78e26579 100644
--- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx
+++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx
@@ -49,6 +49,7 @@ const ToolbarItem = ({
   }
 
   let title = item.key
+  let croppedTitle = item.key
   if (item.label) {
     title =
       typeof item.label === 'function'
@@ -57,13 +58,22 @@ const ToolbarItem = ({
   }
   // Crop title to max. 25 characters
   if (title.length > 25) {
-    title = title.substring(0, 25) + '...'
+    croppedTitle = title.substring(0, 25) + '...'
+  } else {
+    croppedTitle = title
   }
 
   return (
-    <DropDownItem active={active} editor={editor} enabled={enabled} item={item} key={item.key}>
-      {item?.ChildComponent && <item.ChildComponent />}
-      <span className="text">{title}</span>
+    <DropDownItem
+      active={active}
+      editor={editor}
+      enabled={enabled}
+      Icon={item?.ChildComponent ? <item.ChildComponent /> : undefined}
+      item={item}
+      key={item.key}
+      tooltip={title}
+    >
+      <span className="text">{croppedTitle}</span>
     </DropDownItem>
   )
 }
diff --git a/packages/ui/src/elements/Button/index.tsx b/packages/ui/src/elements/Button/index.tsx
index d38330483..8cfe3cfe3 100644
--- a/packages/ui/src/elements/Button/index.tsx
+++ b/packages/ui/src/elements/Button/index.tsx
@@ -63,6 +63,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
     Link,
     newTab,
     onClick,
+    onMouseDown,
     round,
     size = 'medium',
     SubMenuPopupContent,
@@ -114,6 +115,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((
     className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,
     disabled,
     onClick: !disabled ? handleClick : undefined,
+    onMouseDown: !disabled ? onMouseDown : undefined,
     onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,
     onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,
     rel: newTab ? 'noopener noreferrer' : undefined,
diff --git a/packages/ui/src/elements/Button/types.ts b/packages/ui/src/elements/Button/types.ts
index b634d2aa5..7bc3c0710 100644
--- a/packages/ui/src/elements/Button/types.ts
+++ b/packages/ui/src/elements/Button/types.ts
@@ -20,6 +20,7 @@ export type Props = {
   Link?: React.ElementType
   newTab?: boolean
   onClick?: (event: MouseEvent) => void
+  onMouseDown?: (event: MouseEvent) => void
   round?: boolean
   secondaryActions?: secondaryAction | secondaryAction[]
   size?: 'large' | 'medium' | 'small'