Fixed text input common container

twentyhq · Dec 16, 2024 · d2e7073 · d2e7073
1 parent 1a1658c
commit d2e7073
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 75 deletions.
diff --git a/...t/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx b/...t/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx
@@ -1,6 +1,7 @@
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
+import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
 import { useNumberField } from '../../hooks/useNumberField';
 
 export type FieldInputEvent = (persist: () => void) => void;
@@ -56,17 +57,19 @@ export const NumberFieldInput = ({
   };
 
   return (
-    <TextInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={draftValue?.toString() ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-      onChange={handleChange}
-    />
+    <FieldInputContainer>
+      <TextInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={draftValue?.toString() ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+        onChange={handleChange}
+      />
+    </FieldInputContainer>
   );
 };
diff --git a/...t/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/...t/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
@@ -18,7 +18,6 @@ export const DEFAULT_PHONE_COUNTRY_CODE = '1';
 
 const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
   font-family: ${({ theme }) => theme.font.family};
-  height: 32px;
   ${TEXT_INPUT_STYLE}
   padding: 0;
 

diff --git a/...ont/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx b/...ont/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx
@@ -3,6 +3,7 @@ import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';
 
+import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
 import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
 import {
   FieldInputClickOutsideEvent,
@@ -56,17 +57,19 @@ export const TextFieldInput = ({
   };
 
   return (
-    <TextAreaInput
-      placeholder={fieldDefinition.metadata.placeHolder}
-      autoFocus
-      value={draftValue ?? ''}
-      onClickOutside={handleClickOutside}
-      onEnter={handleEnter}
-      onEscape={handleEscape}
-      onShiftTab={handleShiftTab}
-      onTab={handleTab}
-      hotkeyScope={hotkeyScope}
-      onChange={handleChange}
-    />
+    <FieldInputContainer>
+      <TextAreaInput
+        placeholder={fieldDefinition.metadata.placeHolder}
+        autoFocus
+        value={draftValue ?? ''}
+        onClickOutside={handleClickOutside}
+        onEnter={handleEnter}
+        onEscape={handleEscape}
+        onShiftTab={handleShiftTab}
+        onTab={handleTab}
+        hotkeyScope={hotkeyScope}
+        onChange={handleChange}
+      />
+    </FieldInputContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
@@ -12,22 +12,18 @@ import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleT
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isDefined } from '~/utils/isDefined';
 
+import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
 
 const StyledContainer = styled.div`
-  align-items: center;
   display: flex;
   justify-content: space-between;
 
-  input {
-    width: 100%;
-  }
-
   & > input:last-child {
-    border-left: 1px solid ${({ theme }) => theme.border.color.medium};
+    border-left: 1px solid ${({ theme }) => theme.border.color.strong};
     padding-left: ${({ theme }) => theme.spacing(2)};
   }
 `;
@@ -186,39 +182,41 @@ export const DoubleTextInput = ({
   };
 
   return (
-    <StyledContainer ref={containerRef}>
-      <StyledTextInput
-        autoComplete="off"
-        autoFocus
-        onFocus={() => setFocusPosition('left')}
-        ref={firstValueInputRef}
-        placeholder={firstValuePlaceholder}
-        value={firstInternalValue}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          handleChange(
-            turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
-            secondInternalValue,
-          );
-        }}
-        onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
-          handleOnPaste(event)
-        }
-        onClick={handleClickToPreventParentClickEvents}
-      />
-      <StyledTextInput
-        autoComplete="off"
-        onFocus={() => setFocusPosition('right')}
-        ref={secondValueInputRef}
-        placeholder={secondValuePlaceholder}
-        value={secondInternalValue}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          handleChange(
-            firstInternalValue,
-            turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
-          );
-        }}
-        onClick={handleClickToPreventParentClickEvents}
-      />
-    </StyledContainer>
+    <FieldInputContainer>
+      <StyledContainer ref={containerRef}>
+        <StyledTextInput
+          autoComplete="off"
+          autoFocus
+          onFocus={() => setFocusPosition('left')}
+          ref={firstValueInputRef}
+          placeholder={firstValuePlaceholder}
+          value={firstInternalValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            handleChange(
+              turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
+              secondInternalValue,
+            );
+          }}
+          onPaste={(event: ClipboardEvent<HTMLInputElement>) =>
+            handleOnPaste(event)
+          }
+          onClick={handleClickToPreventParentClickEvents}
+        />
+        <StyledTextInput
+          autoComplete="off"
+          onFocus={() => setFocusPosition('right')}
+          ref={secondValueInputRef}
+          placeholder={secondValuePlaceholder}
+          value={secondInternalValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            handleChange(
+              firstInternalValue,
+              turnIntoEmptyStringIfWhitespacesOnly(event.target.value),
+            );
+          }}
+          onClick={handleClickToPreventParentClickEvents}
+        />
+      </StyledContainer>
+    </FieldInputContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldInputContainer.tsx
@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+// eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
+export const FieldInputContainer = styled.div`
+  align-items: center;
+  display: flex;
+  min-height: 32px;
+  min-width: 200px;
+  width: 100%;
+`;
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
@@ -37,14 +37,6 @@ const StyledTextArea = styled(TextareaAutosize)`
   line-height: 18px;
 `;
 
-const StyledTextAreaContainer = styled.div`
-  align-items: center;
-  display: flex;
-  min-height: 32px;
-  min-width: 200px;
-  width: 100%;
-`;
-
 const StyledLightIconButtonContainer = styled.div`
   background: transparent;
   position: absolute;
@@ -103,7 +95,7 @@ export const TextAreaInput = ({
   });
 
   return (
-    <StyledTextAreaContainer>
+    <>
       <StyledTextArea
         placeholder={placeholder}
         disabled={disabled}
@@ -119,6 +111,6 @@ export const TextAreaInput = ({
           <LightCopyIconButton copyText={internalText} />
         </StyledLightIconButtonContainer>
       )}
-    </StyledTextAreaContainer>
+    </>
   );
 };