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 ( + + ); +};