Remove ANIMATION DIV PROPS constant

twentyhq · May 3, 2024 · 50dd265 · 50dd265
1 parent 0bdb6a3
commit 50dd265
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 50 deletions.
diff --git a/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/...ont/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -2,11 +2,9 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'react-tooltip';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
 import { IconComponent } from 'twenty-ui';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { ANIMATION_DIV_PROPS } from '@/object-record/record-table/constants/AnimationDivProps';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { ExpandableListProps } from '@/ui/layout/expandable-list/components/ExpandableList';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -50,11 +48,6 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
   width: ${({ width }) => width}px;
 `;
 
-const StyledEditButtonContainer = styled(motion.div)`
-  align-items: center;
-  display: flex;
-`;
-
 const StyledClickableContainer = styled.div<{ readonly?: boolean }>`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -229,16 +222,7 @@ export const RecordInlineCellContainer = ({
             >
               {newDisplayModeContent}
             </RecordInlineCellDisplayMode>
-            {showEditButton && (
-              <StyledEditButtonContainer
-                initial={ANIMATION_DIV_PROPS.initial}
-                animate={ANIMATION_DIV_PROPS.animate}
-                transition={ANIMATION_DIV_PROPS.transition}
-                whileHover={ANIMATION_DIV_PROPS.whileHover}
-              >
-                <RecordInlineCellButton Icon={buttonIcon} />
-              </StyledEditButtonContainer>
-            )}
+            {showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
           </StyledClickableContainer>
         )}
       </StyledValueContainer>

diff --git a/...nt/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/...nt/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
@@ -1,13 +1,23 @@
+import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
 
+import { AnimatedContainer } from '@/object-record/record-table/components/AnimatedContainer';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
+const StyledInlineCellButtonContainer = styled.div`
+  align-items: center;
+  display: flex;
+`;
 export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
   return (
-    <FloatingIconButton
-      size="small"
-      Icon={Icon}
-      data-testid="inline-cell-edit-mode-container"
-    />
+    <AnimatedContainer>
+      <StyledInlineCellButtonContainer>
+        <FloatingIconButton
+          size="small"
+          Icon={Icon}
+          data-testid="inline-cell-edit-mode-container"
+        />
+      </StyledInlineCellButtonContainer>
+    </AnimatedContainer>
   );
 };
diff --git a/...ages/twenty-front/src/modules/object-record/record-table/components/AnimatedContainer.tsx b/...ages/twenty-front/src/modules/object-record/record-table/components/AnimatedContainer.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+
+const StyledAnimatedChipContainer = styled(motion.div)``;
+
+export const AnimatedContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <StyledAnimatedChipContainer
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.1 }}
+    whileHover={{ scale: 1.04 }}
+  >
+    {children}
+  </StyledAnimatedChipContainer>
+);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/AnimationDivProps.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/AnimationDivProps.ts
diff --git a/...modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/...modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
 import { IconComponent } from 'twenty-ui';
 
-import { ANIMATION_DIV_PROPS } from '@/object-record/record-table/constants/AnimationDivProps';
+import { AnimatedContainer } from '@/object-record/record-table/components/AnimatedContainer';
 import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
 
-const StyledButtonContainer = styled(motion.div)`
+const StyledButtonContainer = styled.div`
   margin: ${({ theme }) => theme.spacing(1)};
 `;
 
@@ -18,12 +17,9 @@ export const RecordTableCellButton = ({
   onClick,
   Icon,
 }: RecordTableCellButtonProps) => (
-  <StyledButtonContainer
-    initial={ANIMATION_DIV_PROPS.initial}
-    animate={ANIMATION_DIV_PROPS.animate}
-    transition={ANIMATION_DIV_PROPS.transition}
-    whileHover={ANIMATION_DIV_PROPS.whileHover}
-  >
-    <FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
-  </StyledButtonContainer>
+  <AnimatedContainer>
+    <StyledButtonContainer>
+      <FloatingIconButton size="small" onClick={onClick} Icon={Icon} />
+    </StyledButtonContainer>
+  </AnimatedContainer>
 );
diff --git a/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx b/packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx
@@ -1,10 +1,9 @@
 import { ReactElement, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { offset, useFloating } from '@floating-ui/react';
-import { motion } from 'framer-motion';
 import { Chip, ChipVariant } from 'twenty-ui';
 
-import { ANIMATION_DIV_PROPS } from '@/object-record/record-table/constants/AnimationDivProps';
+import { AnimatedContainer } from '@/object-record/record-table/components/AnimatedContainer';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { ChildrenContainer } from '@/ui/layout/expandable-list/components/ChildrenContainer';
 import { getChildrenProperties } from '@/ui/layout/expandable-list/utils/getChildProperties';
@@ -37,8 +36,6 @@ const StyledRelationsListContainer = styled.div<{ withOutline?: boolean }>`
       : 'none'};
 `;
 
-const StyledAnimatedChipContainer = styled(motion.div)``;
-
 export type ExpandableListProps = {
   isHovered?: boolean;
   reference?: HTMLDivElement;
@@ -120,18 +117,13 @@ export const ExpandableList = ({
         {children}
       </ChildrenContainer>
       {displayHiddenCountChip && (
-        <StyledAnimatedChipContainer
-          initial={ANIMATION_DIV_PROPS.initial}
-          animate={ANIMATION_DIV_PROPS.animate}
-          transition={ANIMATION_DIV_PROPS.transition}
-          whileHover={ANIMATION_DIV_PROPS.whileHover}
-        >
+        <AnimatedContainer>
           <Chip
             label={`+${hiddenChildrenCount}`}
             variant={ChipVariant.Highlighted}
             onClick={openDropdownMenu}
           />
-        </StyledAnimatedChipContainer>
+        </AnimatedContainer>
       )}
       {isDropdownMenuOpen && (
         <DropdownMenu

diff --git a/...t/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx b/...t/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx