admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix styling inconsistency for FormSingleRecordFieldChip placeholder (#12795)

Browse Source 
## 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)
This commit is contained in:
Baptiste Devessier
2025-06-23 17:32:51 +02:00
committed by GitHub
parent 4c94fc2803
commit d99bff983e
6 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormFieldPlaceholder.tsx Normal file
View File

@ -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 };

5
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx
View File

@ -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%;
`;

5
packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordFieldChip.tsx
View File

@ -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)};
`;

4
packages/twenty-front/src/modules/object-record/record-field/form-types/components/TextVariableEditor.tsx
View File

@ -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;

10
packages/twenty-front/src/modules/object-record/record-field/form-types/constants/FormFieldPlaceholderStyles.ts Normal file
View File

@ -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};
`;

5
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx
View File

@ -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%;
`;