feat(app-board): add estimation hover effect to see entire text

eficode · Feb 24, 2021 · 8e43904 · 8e43904
1 parent 1aa7cc2
commit 8e43904
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx b/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx
@@ -32,7 +32,11 @@ const estimationWrapperDefinition = keyframes`
   }
 `;
 
-export const EstimationWrapper = styled(Box)<{ state: 'opening' | 'open' | 'closed' | 'closing'; moving: boolean }>`
+export const EstimationWrapper = styled(Box)<{
+  state: 'opening' | 'open' | 'closed' | 'closing';
+  moving: boolean;
+  chars: number;
+}>`
   position: absolute;
   top: -50px;
   left: 0;
@@ -61,7 +65,12 @@ export const EstimationWrapper = styled(Box)<{ state: 'opening' | 'open' | 'clos
       top: 12px;
       height: 32px;
       width: 80px;
+      min-width: 80px;
       border-radius: 10px 20px 20px 10px;
+      transition: width 0.5s ease-in-out;
+      :hover {
+        width: ${props.chars + 1}ch;
+      }
     `}
 
   ${props =>

diff --git a/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.tsx b/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.tsx
@@ -58,12 +58,13 @@ const EstimationEditor: React.FC<Props> = ({
   }, []);
 
   return (
-    <EstimationWrapper state={state} moving={moving}>
+    <EstimationWrapper state={state} moving={moving} chars={estimation ? estimation.length : 0}>
       <EstimationInputContainer state={state}>
         <form onSubmit={submit}>
           <EstimationInput
             state={state}
             ref={inputRef}
+            maxLength={20}
             WrapperComponent={EstimationInputWrapper}
             value={estimation}
             onChange={onChange}