From 353a76c1aba1ac5f57d9fd38075b74439d1bdb0b Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 24 Apr 2023 14:29:26 +0530
Subject: [PATCH] chore: tooltips

---
 .../Components/Button/RoundIconButton.tsx     | 42 +++++++++++--------
 .../Header/AddItemMenuButton.tsx              | 38 +++++++++--------
 .../ContentListView/Header/SearchButton.tsx   |  2 +-
 .../LinkedItems/LinkedItemsButton.tsx         |  5 +--
 4 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
index 75afaa6d8..d19dd001f 100644
--- a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
+++ b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
@@ -1,7 +1,8 @@
-import { ForwardedRef, forwardRef, MouseEventHandler } from 'react'
+import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
 import { classNames } from '@standardnotes/utils'
+import StyledTooltip from '../StyledTooltip/StyledTooltip'
 
 type Props = {
   onClick: () => void
@@ -10,30 +11,35 @@ type Props = {
   iconClassName?: string
   label: string
   id?: string
-}
+} & ComponentPropsWithoutRef<'button'>
 
 const RoundIconButton = forwardRef(
-  ({ onClick, className, icon: iconType, iconClassName, id, label }: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+  (
+    { onClick, className, icon: iconType, iconClassName, id, label, ...props }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+  ) => {
     const click: MouseEventHandler = (e) => {
       e.preventDefault()
       onClick()
     }
     return (
-      <button
-        className={classNames(
-          'bg-text-padding m-0 flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border',
-          'border-solid border-border bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast',
-          'focus:text-text focus:outline-none focus:ring-info md:h-8 md:min-w-8',
-          className,
-        )}
-        onClick={click}
-        ref={ref}
-        id={id}
-        title={label}
-        aria-label={label}
-      >
-        <Icon type={iconType} className={iconClassName} />
-      </button>
+      <StyledTooltip label={label}>
+        <button
+          className={classNames(
+            'bg-text-padding m-0 flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-full border',
+            'border-solid border-border bg-clip-padding text-neutral hover:bg-contrast hover:text-text focus:bg-contrast',
+            'focus:text-text focus:outline-none focus:ring-info md:h-8 md:min-w-8',
+            className,
+          )}
+          onClick={click}
+          ref={ref}
+          id={id}
+          aria-label={label}
+          {...props}
+        >
+          <Icon type={iconType} className={iconClassName} />
+        </button>
+      </StyledTooltip>
     )
   },
 )
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
index fe209cd15..82450445a 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/AddItemMenuButton.tsx
@@ -9,6 +9,7 @@ import { FilesController } from '@/Controllers/FilesController'
 import { PhotoRecorder } from '@/Controllers/Moments/PhotoRecorder'
 import { classNames } from '@standardnotes/snjs'
 import { useEffect, useRef, useState } from 'react'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 type Props = {
   isDailyEntry: boolean
@@ -47,24 +48,25 @@ const AddItemMenuButton = ({
 
   return (
     <>
-      <button
-        className={classNames(
-          'z-editor-title-bar hidden h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent hover:brightness-125 md:flex',
-          isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast',
-        )}
-        title={addButtonLabel}
-        aria-label={addButtonLabel}
-        onClick={() => {
-          if (canShowMenu) {
-            setIsMenuOpen((isOpen) => !isOpen)
-          } else {
-            addNewItem()
-          }
-        }}
-        ref={addItemButtonRef}
-      >
-        <Icon type="add" size="custom" className="h-5 w-5" />
-      </button>
+      <StyledTooltip label={addButtonLabel}>
+        <button
+          className={classNames(
+            'z-editor-title-bar hidden h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-solid border-transparent hover:brightness-125 md:flex',
+            isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast',
+          )}
+          aria-label={addButtonLabel}
+          onClick={() => {
+            if (canShowMenu) {
+              setIsMenuOpen((isOpen) => !isOpen)
+            } else {
+              addNewItem()
+            }
+          }}
+          ref={addItemButtonRef}
+        >
+          <Icon type="add" size="custom" className="h-5 w-5" />
+        </button>
+      </StyledTooltip>
       <Popover
         title="Add item"
         open={canShowMenu && isMenuOpen}
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx
index b47a5f236..b20f7c67e 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/SearchButton.tsx
@@ -50,7 +50,7 @@ const SearchButton = ({ itemListController }: Props) => {
           setIsSearchBarVisible(!isSearchBarVisible)
         }}
         icon={isSearchBarVisible ? 'close' : 'search'}
-        label="Display options menu"
+        label="Search"
       />
     </>
   )
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
index 03353a815..bae558c97 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsButton.tsx
@@ -5,7 +5,6 @@ import { observer } from 'mobx-react-lite'
 import { useRef, useCallback } from 'react'
 import RoundIconButton from '../Button/RoundIconButton'
 import Popover from '../Popover/Popover'
-import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import LinkedItemsPanel from './LinkedItemsPanel'
 
 type Props = {
@@ -33,9 +32,7 @@ const LinkedItemsButton = ({ linkingController, filesController, onClickPreproce
 
   return (
     <>
-      <StyledTooltip label="Linked items panel">
-        <RoundIconButton label="Linked items panel" onClick={toggleMenu} ref={buttonRef} icon="link" />
-      </StyledTooltip>
+      <RoundIconButton label="Linked items panel" onClick={toggleMenu} ref={buttonRef} icon="link" />
       <Popover
         title="Linked items"
         togglePopover={toggleMenu}