Move tooltip from ToolbarSplitButton to ToolbarSplitButtonPrimary

udecode · Dec 26, 2024 · b6e771a · b6e771a
1 parent 63c4652
commit b6e771a
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx
@@ -41,15 +41,16 @@ export function NumberedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Numbered List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
-        onClick={() => {
+        onClick={() =>
           toggleIndentList(editor, {
             listStyleType: ListStyleType.Decimal,
-          });
-        }}
+          })
+        }
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Numbered List"
       >
         <ListOrdered className="size-4" />
       </ToolbarSplitButtonPrimary>
@@ -128,7 +129,7 @@ export function BulletedIndentListToolbarButton() {
   );
 
   return (
-    <ToolbarSplitButton pressed={openState.open} tooltip="Bulleted List">
+    <ToolbarSplitButton pressed={openState.open}>
       <ToolbarSplitButtonPrimary
         className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
         onClick={() => {
@@ -137,6 +138,7 @@ export function BulletedIndentListToolbarButton() {
           });
         }}
         data-state={pressed ? 'on' : 'off'}
+        tooltip="Bulleted List"
       >
         <List className="size-4" />
       </ToolbarSplitButtonPrimary>

diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx
@@ -114,9 +114,8 @@ export function MediaToolbarButton({
           }
         }}
         pressed={openState.open}
-        tooltip={currentConfig.tooltip}
       >
-        <ToolbarSplitButtonPrimary>
+        <ToolbarSplitButtonPrimary tooltip={currentConfig.tooltip}>
           {currentConfig.icon}
         </ToolbarSplitButtonPrimary>
 

diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx
@@ -170,28 +170,30 @@ export const ToolbarSplitButton = React.forwardRef<
   );
 });
 
-export const ToolbarSplitButtonPrimary = React.forwardRef<
-  React.ElementRef<typeof ToolbarToggleItem>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
->(({ children, className, size, variant, ...props }, ref) => {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        toolbarButtonVariants({
-          size,
-          variant,
-        }),
-        'rounded-r-none',
-        'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+export const ToolbarSplitButtonPrimary = withTooltip(
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'value'>
+  >(({ children, className, size, variant, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          toolbarButtonVariants({
+            size,
+            variant,
+          }),
+          'rounded-r-none',
+          'group-data-[pressed=true]:bg-accent group-data-[pressed=true]:text-accent-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  })
+);
 
 export const ToolbarSplitButtonSecondary = React.forwardRef<
   HTMLButtonElement,