diff --git a/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/TextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/TextFieldInput.tsx
index ea83380c4..ad63974f3 100644
--- a/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/TextFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/TextFieldInput.tsx
@@ -1,7 +1,7 @@
import { useSaveFieldEditModeValue } from '@/object-record/field/hooks/useSaveFieldEditModeValue';
-import { TextInput } from '@/ui/field/input/components/TextInput';
+import { FieldTextAreaOverlay } from '@/ui/field/input/components/FieldTextAreaOverlay';
+import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
import { usePersistField } from '../../../hooks/usePersistField';
import { useTextField } from '../../hooks/useTextField';
@@ -55,8 +55,8 @@ export const TextFieldInput = ({
};
return (
-
-
+
-
+
);
};
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
index d7fa508a8..62e4c5ed9 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx
@@ -1,3 +1,5 @@
+import { OverflowingTextWithTooltip } from '../../../display/tooltip/OverflowingTextWithTooltip';
+
import { EllipsisDisplay } from './EllipsisDisplay';
type TextDisplayProps = {
@@ -6,5 +8,7 @@ type TextDisplayProps = {
};
export const TextDisplay = ({ text, maxWidth }: TextDisplayProps) => (
- {text}
+
+
+
);
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
new file mode 100644
index 000000000..62e1f4fd8
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledFieldTextAreaOverlay = styled.div`
+ border-radius: ${({ theme }) => theme.border.radius.sm};
+ background: ${({ theme }) => theme.background.transparent.secondary};
+ backdrop-filter: blur(8px);
+ display: flex;
+ height: 32px;
+ margin: -1px;
+ width: 100%;
+`;
+
+export const FieldTextAreaOverlay = StyledFieldTextAreaOverlay;
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
index 22c4ab374..7b3687665 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
@@ -13,6 +13,7 @@ const StyledContainer = styled.div`
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
+ box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
justify-content: center;
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
new file mode 100644
index 000000000..4cf3821b6
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
@@ -0,0 +1,79 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import styled from '@emotion/styled';
+
+import { useRegisterInputEvents } from '@/object-record/field/meta-types/input/hooks/useRegisterInputEvents';
+import { textInputStyle } from '@/ui/theme/constants/effects';
+
+export type TextAreaInputProps = {
+ disabled?: boolean;
+ className?: string;
+ placeholder?: string;
+ autoFocus?: boolean;
+ value: string;
+ onEnter: (newText: string) => void;
+ onEscape: (newText: string) => void;
+ onTab?: (newText: string) => void;
+ onShiftTab?: (newText: string) => void;
+ onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
+ hotkeyScope: string;
+ onChange?: (newText: string) => void;
+};
+
+const StyledTextArea = styled(TextareaAutosize)`
+ ${textInputStyle}
+ width: 100%;
+ resize: none;
+ box-shadow: ${({ theme }) => theme.boxShadow.strong};
+ border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+ padding: ${({ theme }) => theme.spacing(2)};
+ background-color: ${({ theme }) => theme.background.primary};
+ border-radius: ${({ theme }) => theme.border.radius.sm};
+`;
+
+export const TextAreaInput = ({
+ disabled,
+ className,
+ placeholder,
+ autoFocus,
+ value,
+ hotkeyScope,
+ onEnter,
+ onEscape,
+ onTab,
+ onShiftTab,
+ onClickOutside,
+ onChange,
+}: TextAreaInputProps) => {
+ const [internalText, setInternalText] = useState(value);
+
+ const handleChange = (event: ChangeEvent) => {
+ setInternalText(event.target.value);
+ onChange?.(event.target.value);
+ };
+
+ const wrapperRef = useRef(null);
+
+ useRegisterInputEvents({
+ inputRef: wrapperRef,
+ inputValue: internalText,
+ onEnter,
+ onEscape,
+ onClickOutside,
+ onTab,
+ onShiftTab,
+ hotkeyScope,
+ });
+
+ return (
+
+ );
+};