From d99bff983e5cd1d37b583719a0632bf962eaf1ef Mon Sep 17 00:00:00 2001 From: Baptiste Devessier Date: Mon, 23 Jun 2025 17:32:51 +0200 Subject: [PATCH] Fix styling inconsistency for FormSingleRecordFieldChip placeholder (#12795) ## Before ![CleanShot 2025-06-23 at 17 01 16@2x](https://github.com/user-attachments/assets/8fb40b91-a17a-48dc-8d5e-6657bdcf8434) ## After ![CleanShot 2025-06-23 at 17 01 01@2x](https://github.com/user-attachments/assets/a9781e13-200c-4aa2-9907-a0c8f4a1dd67) --- .../form-types/components/FormFieldPlaceholder.tsx | 8 ++++++++ .../components/FormMultiSelectFieldInput.tsx | 5 ++--- .../components/FormSingleRecordFieldChip.tsx | 5 ++--- .../form-types/components/TextVariableEditor.tsx | 4 ++-- .../form-types/constants/FormFieldPlaceholderStyles.ts | 10 ++++++++++ .../components/WorkflowEditActionFormBuilder.tsx | 5 ++--- 6 files changed, 26 insertions(+), 11 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx new file mode 100644 index 000000000..6326198c4 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx @@ -0,0 +1,8 @@ +import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles'; +import styled from '@emotion/styled'; + +const StyledPlaceholder = styled.div` + ${FORM_FIELD_PLACEHOLDER_STYLES} +`; + +export { StyledPlaceholder as FormFieldPlaceholder }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx index 947cb63ff..e1f5b2283 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled'; import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInnerContainer'; import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer'; +import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder'; import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone'; import { FormMultiSelectFieldInputHotKeyScope } from '@/object-record/record-field/form-types/constants/FormMultiSelectFieldInputHotKeyScope'; import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent'; @@ -59,9 +60,7 @@ const StyledSelectInputContainer = styled.div` top: ${({ theme }) => theme.spacing(9)}; `; -const StyledPlaceholder = styled.div` - color: ${({ theme }) => theme.font.color.light}; - font-weight: ${({ theme }) => theme.font.weight.medium}; +const StyledPlaceholder = styled(FormFieldPlaceholder)` width: 100%; `; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx index cb763dce8..b3f84bf42 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx @@ -1,4 +1,5 @@ import { RecordChip } from '@/object-record/components/RecordChip'; +import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder'; import { RecordId, Variable, @@ -12,9 +13,7 @@ const StyledRecordChip = styled(RecordChip)` margin: ${({ theme }) => theme.spacing(2)}; `; -const StyledPlaceholder = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.md}; +const StyledPlaceholder = styled(FormFieldPlaceholder)` margin: ${({ theme }) => theme.spacing(2)}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx index 191650c10..fa2716950 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx @@ -1,3 +1,4 @@ +import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles'; import styled from '@emotion/styled'; import { Editor, EditorContent } from '@tiptap/react'; @@ -30,9 +31,8 @@ const StyledEditor = styled.div<{ white-space: ${({ multiline }) => (multiline ? 'pre' : 'nowrap')}; p.is-editor-empty:first-of-type::before { + ${FORM_FIELD_PLACEHOLDER_STYLES} content: attr(data-placeholder); - color: ${({ theme }) => theme.font.color.light}; - font-weight: ${({ theme }) => theme.font.weight.medium}; float: left; height: 0; pointer-events: none; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts b/packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts new file mode 100644 index 000000000..dd48c0321 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts @@ -0,0 +1,10 @@ +import { css } from '@emotion/react'; +import { ThemeType } from 'twenty-ui/theme'; + +export const FORM_FIELD_PLACEHOLDER_STYLES = (props: { + theme: ThemeType; +}) => css` + color: ${props.theme.font.color.light}; + font-size: ${props.theme.font.size.md}; + font-weight: ${props.theme.font.weight.medium}; +`; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx index a1d4e2d72..f43b04568 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx @@ -1,6 +1,7 @@ import { FormFieldInputContainer } from '@/object-record/record-field/form-types/components/FormFieldInputContainer'; import { FormFieldInputInnerContainer } from '@/object-record/record-field/form-types/components/FormFieldInputInnerContainer'; import { FormFieldInputRowContainer } from '@/object-record/record-field/form-types/components/FormFieldInputRowContainer'; +import { FormFieldPlaceholder } from '@/object-record/record-field/form-types/components/FormFieldPlaceholder'; import { InputLabel } from '@/ui/input/components/InputLabel'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; @@ -111,9 +112,7 @@ const StyledFieldContainer = styled.div<{ `} `; -const StyledPlaceholder = styled.div` - color: ${({ theme }) => theme.font.color.light}; - font-weight: ${({ theme }) => theme.font.weight.medium}; +const StyledPlaceholder = styled(FormFieldPlaceholder)` width: 100%; `;