fix: hover behaviour on table cells (#1557)

* edit button focus fix

* cell feedback fix

* using theme prop

* isHovered prop drill

* edit button component

* refactor editable cell

* import fix

* index fix (merge issue)

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -1,9 +1,6 @@
 import { ReactElement, useState } from 'react';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
 
-import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
-import { IconPencil } from '@/ui/icon';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
@@ -14,14 +11,10 @@ import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCel
 import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell';
 
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
+import { EditableCellEditButton } from './EditableCellEditButton';
 import { EditableCellEditMode } from './EditableCellEditMode';
 import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
 
-const StyledEditButtonContainer = styled(motion.div)`
-  position: absolute;
-  right: 5px;
-`;
-
 const StyledCellBaseContainer = styled.div`
   align-items: center;
   box-sizing: border-box;
@@ -102,27 +95,20 @@ export function EditableCell({
             {editModeContent}
           </EditableCellEditMode>
         ) : hasSoftFocus ? (
-          <EditableCellSoftFocusMode>
+          <>
-            {nonEditModeContent}
+            {showEditButton && (
-          </EditableCellSoftFocusMode>
+              <EditableCellEditButton onClick={handlePenClick} />
+            )}
+            <EditableCellSoftFocusMode>
+              {nonEditModeContent}
+            </EditableCellSoftFocusMode>
+          </>
         ) : (
           <>
             {showEditButton && (
-              <StyledEditButtonContainer
+              <EditableCellEditButton onClick={handlePenClick} />
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                transition={{ duration: 0.1 }}
-                whileHover={{ scale: 1.04 }}
-              >
-                <FloatingIconButton
-                  size="small"
-                  onClick={handlePenClick}
-                  Icon={IconPencil}
-                />
-              </StyledEditButtonContainer>
             )}
-
+            <EditableCellDisplayMode isHovered={isHovered}>
-            <EditableCellDisplayMode>
               {nonEditModeContent}
             </EditableCellDisplayMode>
           </>

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayContainer.tsx

@@ -5,10 +5,11 @@ export type EditableCellDisplayContainerProps = {
   softFocus?: boolean;
   onClick?: () => void;
   scrollRef?: Ref<HTMLDivElement>;
+  isHovered?: boolean;
 };
 
 const StyledEditableCellDisplayModeOuterContainer = styled.div<
-  Pick<EditableCellDisplayContainerProps, 'softFocus'>
+  Pick<EditableCellDisplayContainerProps, 'softFocus' | 'isHovered'>
 >`
   align-items: center;
   display: flex;
@@ -20,7 +21,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
   width: 100%;
 
   ${(props) =>
-    props.softFocus
+    props.softFocus || props.isHovered
       ? `background: ${props.theme.background.transparent.secondary};
         border-radius: ${props.theme.border.radius.sm};
         box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
@@ -40,6 +41,7 @@ export function EditableCellDisplayContainer({
   softFocus,
   onClick,
   scrollRef,
+  isHovered,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) {
   return (
     <StyledEditableCellDisplayModeOuterContainer
@@ -49,6 +51,7 @@ export function EditableCellDisplayContainer({
           : 'editable-cell-display-mode'
       }
       onClick={onClick}
+      isHovered={isHovered}
       softFocus={softFocus}
       ref={scrollRef}
     >

front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx

@@ -5,7 +5,8 @@ import { EditableCellDisplayContainer } from './EditableCellDisplayContainer';
 
 export function EditableCellDisplayMode({
   children,
-}: React.PropsWithChildren<unknown>) {
+  isHovered,
+}: React.PropsWithChildren<unknown> & { isHovered?: boolean }) {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
 
   const { openEditableCell } = useEditableCell();
@@ -16,7 +17,7 @@ export function EditableCellDisplayMode({
   }
 
   return (
-    <EditableCellDisplayContainer onClick={handleClick}>
+    <EditableCellDisplayContainer isHovered={isHovered} onClick={handleClick}>
       {children}
     </EditableCellDisplayContainer>
   );

front/src/modules/ui/table/editable-cell/components/EditableCellEditButton.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
+import { IconPencil } from '@/ui/icon';
+
+const StyledEditButtonContainer = styled(motion.div)`
+  position: absolute;
+  right: 5px;
+`;
+
+type EditableCellEditButtonProps = {
+  onClick?: () => void;
+};
+
+export function EditableCellEditButton({
+  onClick,
+}: EditableCellEditButtonProps) {
+  return (
+    <StyledEditButtonContainer
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.1 }}
+      whileHover={{ scale: 1.04 }}
+    >
+      <FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
+    </StyledEditButtonContainer>
+  );
+}