diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx index 9f0480927..75fd09a47 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx @@ -92,6 +92,7 @@ export const FormFieldInput = ({ options={field.metadata.options} clearLabel={field.label} readonly={readonly} + placeholder={field.label} /> ) : isFieldFullName(field) ? ( ) : isFieldRawJson(field) ? ( ); diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx index 06cc9a2b5..c23672611 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCurrencyFieldInput.tsx @@ -62,6 +62,7 @@ export const FormCurrencyFieldInput = ({ clearLabel={'Currency Code'} VariablePicker={VariablePicker} readonly={readonly} + placeholder="Select a currency" preventDisplayPadding /> void; VariablePicker?: VariablePickerComponent; readonly?: boolean; + placeholder?: string; }; const StyledDisplayModeReadonlyContainer = styled.div` @@ -52,6 +54,12 @@ const StyledSelectInputContainer = styled.div` top: ${({ theme }) => theme.spacing(8)}; `; +const StyledPlaceholder = styled.div` + color: ${({ theme }) => theme.font.color.light}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + width: 100%; +`; + export const FormMultiSelectFieldInput = ({ label, defaultValue, @@ -59,8 +67,10 @@ export const FormMultiSelectFieldInput = ({ onPersist, VariablePicker, readonly, + placeholder, }: FormMultiSelectFieldInputProps) => { const inputId = useId(); + const theme = useTheme(); const hotkeyScope = MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID; @@ -163,6 +173,8 @@ export const FormMultiSelectFieldInput = ({ ) : undefined; + const placeholderText = placeholder ?? label; + return ( {label ? {label} : null} @@ -174,12 +186,18 @@ export const FormMultiSelectFieldInput = ({ {draftValue.type === 'static' ? ( readonly ? ( - {isDefined(selectedOptions) && ( + {isDefined(selectedOptions) && selectedOptions.length > 0 ? ( + ) : ( + )} + ) : ( Edit - {isDefined(selectedOptions) && ( + {isDefined(selectedOptions) && selectedOptions.length > 0 ? ( + ) : ( + {placeholderText} )} + ) ) : ( diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx index 37b42aad4..c302478a8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx @@ -29,6 +29,7 @@ type FormSelectFieldInputProps = { clearLabel?: string; readonly?: boolean; preventDisplayPadding?: boolean; + placeholder?: string; }; const StyledDisplayModeReadonlyContainer = styled.div` @@ -39,7 +40,6 @@ const StyledDisplayModeReadonlyContainer = styled.div` font-family: inherit; padding-inline: ${({ theme }) => theme.spacing(2)}; width: 100%; - justify-content: space-between; `; const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)` @@ -49,7 +49,12 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)` &[data-open='true'] { background-color: ${({ theme }) => theme.background.transparent.lighter}; } - justify-content: space-between; +`; + +const StyledPlaceholder = styled.div` + color: ${({ theme }) => theme.font.color.light}; + font-weight: ${({ theme }) => theme.font.weight.medium}; + width: 100%; `; const StyledSelectInputContainer = styled.div` @@ -58,6 +63,11 @@ const StyledSelectInputContainer = styled.div` top: ${({ theme }) => theme.spacing(8)}; `; +const StyledSelectDisplayContainer = styled.div` + display: flex; + width: 100%; +`; + export const FormSelectFieldInput = ({ label, defaultValue, @@ -67,6 +77,7 @@ export const FormSelectFieldInput = ({ clearLabel, readonly, preventDisplayPadding, + placeholder, }: FormSelectFieldInputProps) => { const inputId = useId(); @@ -215,6 +226,8 @@ export const FormSelectFieldInput = ({ ...filteredOptions.map((option) => option.value), ]; + const placeholderText = placeholder ?? label; + return ( {label ? {label} : null} @@ -226,17 +239,21 @@ export const FormSelectFieldInput = ({ {draftValue.type === 'static' ? ( readonly ? ( - {isDefined(selectedOption) && ( - + {isDefined(selectedOption) ? ( + + + + ) : ( + )} ) : ( @@ -246,13 +263,17 @@ export const FormSelectFieldInput = ({ > Edit - {isDefined(selectedOption) && ( - + {isDefined(selectedOption) ? ( + + + + ) : ( + {placeholderText} )} handleFieldChange('fieldsToUpdate', fieldsToUpdate) } + placeholder="Select fields to update" />