fix: remove unnessary tooltips

chertik77 · Jan 10, 2025 · 1e0485f · 1e0485f
1 parent 4d5a381
commit 1e0485f
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 282 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-tooltip": "^1.1.6",
     "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.1.0",
     "@tanstack/react-query": "^5.32.1",

diff --git a/src/components/header/HeaderControls.tsx b/src/components/header/HeaderControls.tsx
@@ -7,7 +7,6 @@ import {
   setIsSidebarOpen
 } from 'features/sidebar/sidebar.slice'
 
-import { TooltipWrapper } from 'components/ui'
 import { useAppDispatch, useAppSelector } from 'hooks/redux'
 
 export const HeaderControls = () => {
@@ -19,15 +18,13 @@ export const HeaderControls = () => {
 
   return (
     <>
-      <TooltipWrapper tooltipText='Toggle sidebar'>
-        <button
-          onClick={() => dispatch(setIsSidebarOpen(!isSidebarOpen))}
-          type='button'
-          aria-label='Toggle sidebar'
-          className='focus-visible:styled-outline mr-auto size-5 max-desktop:hidden'>
-          <BiSidebar className='size-full violet:text-black' />
-        </button>
-      </TooltipWrapper>
+      <button
+        onClick={() => dispatch(setIsSidebarOpen(!isSidebarOpen))}
+        type='button'
+        aria-label='Toggle sidebar'
+        className='focus-visible:styled-outline mr-auto size-5 max-desktop:hidden'>
+        <BiSidebar className='size-full violet:text-black' />
+      </button>
       <button
         onClick={openSidebarMobileModal}
         type='button'

diff --git a/src/components/ui/TooltipWrapper.tsx b/src/components/ui/TooltipWrapper.tsx
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
@@ -3,4 +3,3 @@ export * from './Field'
 export * from './Loader'
 export * from './Modal'
 export * from './Scrollbar'
-export * from './TooltipWrapper'
diff --git a/src/features/kanban/board/components/BoardsListActiveItem.tsx b/src/features/kanban/board/components/BoardsListActiveItem.tsx
@@ -4,8 +4,6 @@ import { useModal } from 'react-modal-state'
 
 import { SidebarMobileModal } from 'features/sidebar/components'
 
-import { TooltipWrapper } from 'components/ui'
-
 import { useDeleteBoard } from '../hooks'
 import { EditBoardModal } from './modals'
 
@@ -28,44 +26,40 @@ export const BoardsListActiveItem = ({ board }: { board: Board }) => {
   return (
     <>
       <div className='flex items-center gap-2'>
-        <TooltipWrapper tooltipText='Edit board'>
-          <div
-            role='button'
-            tabIndex={0}
-            aria-label='Edit board'
-            onKeyDown={e => {
-              if (e.code === 'Enter' || e.code === 'Space') handleBoardEdit()
-            }}
-            onClick={handleBoardEdit}
-            className='focus-visible:styled-outline hocus:*:stroke-black violet:hocus:*:stroke-black
-              dark:hocus:*:stroke-white-primary'>
-            <svg className='size-4 stroke-black/50 violet:stroke-white/50 dark:stroke-white-primary/50'>
-              <use href='/icons.svg#icon-pencil' />
-            </svg>
-          </div>
-        </TooltipWrapper>
-        <TooltipWrapper tooltipText='Delete board'>
-          <div
-            role='button'
-            tabIndex={0}
-            aria-label='Delete board'
-            onKeyDown={e => {
-              if (e.code === 'Enter' || e.code === 'Space') {
-                closeSidebarMobileModal()
-                deleteBoard()
-              }
-            }}
-            onClick={() => {
+        <div
+          role='button'
+          tabIndex={0}
+          aria-label='Edit board'
+          onKeyDown={e => {
+            if (e.code === 'Enter' || e.code === 'Space') handleBoardEdit()
+          }}
+          onClick={handleBoardEdit}
+          className='focus-visible:styled-outline hocus:*:stroke-black violet:hocus:*:stroke-black
+            dark:hocus:*:stroke-white-primary'>
+          <svg className='size-4 stroke-black/50 violet:stroke-white/50 dark:stroke-white-primary/50'>
+            <use href='/icons.svg#icon-pencil' />
+          </svg>
+        </div>
+        <div
+          role='button'
+          tabIndex={0}
+          aria-label='Delete board'
+          onKeyDown={e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
               closeSidebarMobileModal()
               deleteBoard()
-            }}
-            className='focus-visible:styled-outline hocus:*:stroke-black violet:hocus:*:stroke-black
-              dark:hocus:*:stroke-white-primary'>
-            <svg className='size-4 stroke-black/50 violet:stroke-white/50 dark:stroke-white-primary/50'>
-              <use href='/icons.svg#icon-trash' />
-            </svg>
-          </div>
-        </TooltipWrapper>
+            }
+          }}
+          onClick={() => {
+            closeSidebarMobileModal()
+            deleteBoard()
+          }}
+          className='focus-visible:styled-outline hocus:*:stroke-black violet:hocus:*:stroke-black
+            dark:hocus:*:stroke-white-primary'>
+          <svg className='size-4 stroke-black/50 violet:stroke-white/50 dark:stroke-white-primary/50'>
+            <use href='/icons.svg#icon-trash' />
+          </svg>
+        </div>
       </div>
       <div className='h-4xl w-1 rounded-l-lg bg-brand violet:bg-white' />
     </>

diff --git a/src/features/kanban/board/components/MyBoardsInfo.tsx b/src/features/kanban/board/components/MyBoardsInfo.tsx
@@ -2,8 +2,6 @@ import { useModal } from 'react-modal-state'
 
 import { SidebarMobileModal } from 'features/sidebar/components'
 
-import { TooltipWrapper } from 'components/ui'
-
 import { cn } from 'lib'
 
 import { NewBoardModal } from './modals'
@@ -24,24 +22,22 @@ export const MyBoardsInfo = () => {
         className='flex items-center justify-between border-y border-black/10 py-3.5
           violet:border-white/10 dark:border-white/10'>
         <p className='w-[76px] violet:text-white'>Create a new board</p>
-        <TooltipWrapper tooltipText='Create new board'>
-          <button
-            type='button'
-            aria-label='Create new board'
-            className={cn(
-              `focus-visible:styled-outline flex h-9 w-10 items-center justify-center
-              rounded-lg bg-brand text-black transition-all duration-300 hocus:bg-brand-hover
-              violet:bg-brand-third violet:text-white violet:hocus:bg-[#979CEA]`
-            )}
-            onClick={() => {
-              openNewBoardModal()
-              closeSidebarMobileModal()
-            }}>
-            <svg className='size-5'>
-              <use href='/icons.svg#icon-plus-min' />
-            </svg>
-          </button>
-        </TooltipWrapper>
+        <button
+          type='button'
+          aria-label='Create new board'
+          className={cn(
+            `focus-visible:styled-outline flex h-9 w-10 items-center justify-center
+            rounded-lg bg-brand text-black transition-all duration-300 hocus:bg-brand-hover
+            violet:bg-brand-third violet:text-white violet:hocus:bg-[#979CEA]`
+          )}
+          onClick={() => {
+            openNewBoardModal()
+            closeSidebarMobileModal()
+          }}>
+          <svg className='size-5'>
+            <use href='/icons.svg#icon-plus-min' />
+          </svg>
+        </button>
       </div>
     </div>
   )

diff --git a/src/features/kanban/card/components/BoardCardActions.tsx b/src/features/kanban/card/components/BoardCardActions.tsx
@@ -5,7 +5,7 @@ import { useModal } from 'react-modal-state'
 
 import { useDeleteCard } from 'features/kanban/card/hooks'
 
-import { Button, TooltipWrapper } from 'components/ui'
+import { Button } from 'components/ui'
 
 import { EditCardModal } from './modals'
 
@@ -31,20 +31,16 @@ export const BoardCardActions = ({ card }: { card: Card }) => {
           <use href='/icons.svg#icon-bell' />
         </svg>
       )}
-      <TooltipWrapper tooltipText='Edit card'>
-        <Button
-          onClick={handleEditCardModal}
-          aria-label='Edit card'
-          iconName='pencil'
-        />
-      </TooltipWrapper>
-      <TooltipWrapper tooltipText='Delete card'>
-        <Button
-          onClick={() => deleteCard(card.id)}
-          aria-label='Delete card'
-          iconName='trash'
-        />
-      </TooltipWrapper>
+      <Button
+        onClick={handleEditCardModal}
+        aria-label='Edit card'
+        iconName='pencil'
+      />
+      <Button
+        onClick={() => deleteCard(card.id)}
+        aria-label='Delete card'
+        iconName='trash'
+      />
     </div>
   )
 }
diff --git a/src/features/kanban/column/components/BoardColumnsActions.tsx b/src/features/kanban/column/components/BoardColumnsActions.tsx
@@ -4,7 +4,7 @@ import { useModal } from 'react-modal-state'
 
 import { useDeleteColumn } from 'features/kanban/column/hooks'
 
-import { Button, TooltipWrapper } from 'components/ui'
+import { Button } from 'components/ui'
 
 import { cn } from 'lib'
 
@@ -22,26 +22,22 @@ export const BoardColumnsActions = ({ column }: { column: Column }) => {
         py-lg dark:bg-black`
       )}>
       {column.title}
-      <TooltipWrapper tooltipText='Edit column'>
-        <Button
-          className='ml-auto mr-2'
-          aria-label='Edit column'
-          onClick={() =>
-            openEditColumnModal<EditColumnModalProps>({
-              id: column.id,
-              title: column.title
-            })
-          }
-          iconName='pencil'
-        />
-      </TooltipWrapper>
-      <TooltipWrapper tooltipText='Delete column'>
-        <Button
-          onClick={() => deleteColumn(column.id)}
-          aria-label='Delete column'
-          iconName='trash'
-        />
-      </TooltipWrapper>
+      <Button
+        className='ml-auto mr-2'
+        aria-label='Edit column'
+        onClick={() =>
+          openEditColumnModal<EditColumnModalProps>({
+            id: column.id,
+            title: column.title
+          })
+        }
+        iconName='pencil'
+      />
+      <Button
+        onClick={() => deleteColumn(column.id)}
+        aria-label='Delete column'
+        iconName='trash'
+      />
     </div>
   )
 }