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

Fix placeholders in select (#9608)

Browse Source 
Before
<img width="537" alt="Capture d’écran 2025-01-14 à 14 36 59"
src="https://github.com/user-attachments/assets/b29cc4da-ac67-4ea7-83dd-03e1e68e7938"
/>
<img width="537" alt="Capture d’écran 2025-01-14 à 14 37 05"
src="https://github.com/user-attachments/assets/7645e905-0421-48e8-8f91-f1bb6064bb18"
/>


After
<img width="537" alt="Capture d’écran 2025-01-14 à 14 35 36"
src="https://github.com/user-attachments/assets/8b059fb5-9137-46e5-8c81-105e254831c2"
/>
<img width="537" alt="Capture d’écran 2025-01-14 à 14 35 44"
src="https://github.com/user-attachments/assets/aa0a754b-2fb7-4985-8154-e69ddef10596"
/>
<img width="537" alt="Capture d’écran 2025-01-14 à 14 35 56"
src="https://github.com/user-attachments/assets/d90d1f89-1480-4de9-b02b-519370a27bfe"
/>
<img width="537" alt="Capture d’écran 2025-01-14 à 14 36 11"
src="https://github.com/user-attachments/assets/67c25d62-d509-4e23-b2b6-c44d3b7cd37a"
/>
This commit is contained in:
Thomas Trompette
2025-01-14 15:30:47 +01:00
committed by GitHub
parent 6ab9b79bf3
commit b83793f9dc
6 changed files with 70 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-field/components/FormFieldInput.tsx
View File

@ -92,6 +92,7 @@ export const FormFieldInput = ({
options={field.metadata.options} options={field.metadata.options}
clearLabel={field.label} clearLabel={field.label}
readonly={readonly} readonly={readonly}
placeholder={field.label}
/> />
) : isFieldFullName(field) ? ( ) : isFieldFullName(field) ? (
<FormFullNameFieldInput <FormFullNameFieldInput
@ -157,6 +158,7 @@ export const FormFieldInput = ({
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
options={field.metadata.options} options={field.metadata.options}
readonly={readonly} readonly={readonly}
placeholder={field.label}
/> />
) : isFieldRawJson(field) ? ( ) : isFieldRawJson(field) ? (
<FormRawJsonFieldInput <FormRawJsonFieldInput

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

@ -59,6 +59,7 @@ export const FormCountrySelectInput = ({
defaultValue={selectedCountryName} defaultValue={selectedCountryName}
readonly={readonly} readonly={readonly}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
placeholder="Select a country"
preventDisplayPadding preventDisplayPadding
/> />
); );

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

@ -62,6 +62,7 @@ export const FormCurrencyFieldInput = ({
clearLabel={'Currency Code'} clearLabel={'Currency Code'}
VariablePicker={VariablePicker} VariablePicker={VariablePicker}
readonly={readonly} readonly={readonly}
placeholder="Select a currency"
preventDisplayPadding preventDisplayPadding
/> />
<FormNumberFieldInput <FormNumberFieldInput

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

@ -14,8 +14,9 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer'; import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString'; import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
import { useTheme } from '@emotion/react';
import { useId, useState } from 'react'; import { useId, useState } from 'react';
import { VisibilityHidden } from 'twenty-ui'; import { IconChevronDown, VisibilityHidden } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined'; import { isDefined } from '~/utils/isDefined';
type FormMultiSelectFieldInputProps = { type FormMultiSelectFieldInputProps = {
@ -25,6 +26,7 @@ type FormMultiSelectFieldInputProps = {
onPersist: (value: FieldMultiSelectValue | string) => void; onPersist: (value: FieldMultiSelectValue | string) => void;
VariablePicker?: VariablePickerComponent; VariablePicker?: VariablePickerComponent;
readonly?: boolean; readonly?: boolean;
placeholder?: string;
}; };
const StyledDisplayModeReadonlyContainer = styled.div` const StyledDisplayModeReadonlyContainer = styled.div`
@ -52,6 +54,12 @@ const StyledSelectInputContainer = styled.div`
top: ${({ theme }) => theme.spacing(8)}; 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 = ({ export const FormMultiSelectFieldInput = ({
label, label,
defaultValue, defaultValue,
@ -59,8 +67,10 @@ export const FormMultiSelectFieldInput = ({
onPersist, onPersist,
VariablePicker, VariablePicker,
readonly, readonly,
placeholder,
}: FormMultiSelectFieldInputProps) => { }: FormMultiSelectFieldInputProps) => {
const inputId = useId(); const inputId = useId();
const theme = useTheme();
const hotkeyScope = MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID; const hotkeyScope = MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID;
@ -163,6 +173,8 @@ export const FormMultiSelectFieldInput = ({
) )
: undefined; : undefined;
const placeholderText = placeholder ?? label;
return ( return (
<FormFieldInputContainer> <FormFieldInputContainer>
{label ? <InputLabel>{label}</InputLabel> : null} {label ? <InputLabel>{label}</InputLabel> : null}
@ -174,12 +186,18 @@ export const FormMultiSelectFieldInput = ({
{draftValue.type === 'static' ? ( {draftValue.type === 'static' ? (
readonly ? ( readonly ? (
<StyledDisplayModeReadonlyContainer> <StyledDisplayModeReadonlyContainer>
{isDefined(selectedOptions) && ( {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
<MultiSelectDisplay <MultiSelectDisplay
values={selectedNames} values={selectedNames}
options={selectedOptions} options={selectedOptions}
/> />
) : (
<StyledPlaceholder />
)} )}
<IconChevronDown
size={theme.icon.size.md}
color={theme.font.color.light}
/>
</StyledDisplayModeReadonlyContainer> </StyledDisplayModeReadonlyContainer>
) : ( ) : (
<StyledDisplayModeContainer <StyledDisplayModeContainer
@ -188,12 +206,18 @@ export const FormMultiSelectFieldInput = ({
> >
<VisibilityHidden>Edit</VisibilityHidden> <VisibilityHidden>Edit</VisibilityHidden>
{isDefined(selectedOptions) && ( {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
<MultiSelectDisplay <MultiSelectDisplay
values={selectedNames} values={selectedNames}
options={selectedOptions} options={selectedOptions}
/> />
) : (
<StyledPlaceholder>{placeholderText}</StyledPlaceholder>
)} )}
<IconChevronDown
size={theme.icon.size.md}
color={theme.font.color.tertiary}
/>
</StyledDisplayModeContainer> </StyledDisplayModeContainer>
) )
) : ( ) : (

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

@ -29,6 +29,7 @@ type FormSelectFieldInputProps = {
clearLabel?: string; clearLabel?: string;
readonly?: boolean; readonly?: boolean;
preventDisplayPadding?: boolean; preventDisplayPadding?: boolean;
placeholder?: string;
}; };
const StyledDisplayModeReadonlyContainer = styled.div` const StyledDisplayModeReadonlyContainer = styled.div`
@ -39,7 +40,6 @@ const StyledDisplayModeReadonlyContainer = styled.div`
font-family: inherit; font-family: inherit;
padding-inline: ${({ theme }) => theme.spacing(2)}; padding-inline: ${({ theme }) => theme.spacing(2)};
width: 100%; width: 100%;
justify-content: space-between;
`; `;
const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)` const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
@ -49,7 +49,12 @@ const StyledDisplayModeContainer = styled(StyledDisplayModeReadonlyContainer)`
&[data-open='true'] { &[data-open='true'] {
background-color: ${({ theme }) => theme.background.transparent.lighter}; 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` const StyledSelectInputContainer = styled.div`
@ -58,6 +63,11 @@ const StyledSelectInputContainer = styled.div`
top: ${({ theme }) => theme.spacing(8)}; top: ${({ theme }) => theme.spacing(8)};
`; `;
const StyledSelectDisplayContainer = styled.div`
display: flex;
width: 100%;
`;
export const FormSelectFieldInput = ({ export const FormSelectFieldInput = ({
label, label,
defaultValue, defaultValue,
@ -67,6 +77,7 @@ export const FormSelectFieldInput = ({
clearLabel, clearLabel,
readonly, readonly,
preventDisplayPadding, preventDisplayPadding,
placeholder,
}: FormSelectFieldInputProps) => { }: FormSelectFieldInputProps) => {
const inputId = useId(); const inputId = useId();
@ -215,6 +226,8 @@ export const FormSelectFieldInput = ({
...filteredOptions.map((option) => option.value), ...filteredOptions.map((option) => option.value),
]; ];
const placeholderText = placeholder ?? label;
return ( return (
<FormFieldInputContainer> <FormFieldInputContainer>
{label ? <InputLabel>{label}</InputLabel> : null} {label ? <InputLabel>{label}</InputLabel> : null}
@ -226,17 +239,21 @@ export const FormSelectFieldInput = ({
{draftValue.type === 'static' ? ( {draftValue.type === 'static' ? (
readonly ? ( readonly ? (
<StyledDisplayModeReadonlyContainer> <StyledDisplayModeReadonlyContainer>
{isDefined(selectedOption) && ( {isDefined(selectedOption) ? (
<SelectDisplay <StyledSelectDisplayContainer>
color={selectedOption.color ?? 'transparent'} <SelectDisplay
label={selectedOption.label} color={selectedOption.color ?? 'transparent'}
Icon={selectedOption.icon ?? undefined} label={selectedOption.label}
preventPadding={preventDisplayPadding} Icon={selectedOption.icon ?? undefined}
/> preventPadding={preventDisplayPadding}
/>
</StyledSelectDisplayContainer>
) : (
<StyledPlaceholder />
)} )}
<IconChevronDown <IconChevronDown
size={theme.icon.size.md} size={theme.icon.size.md}
color={theme.font.color.tertiary} color={theme.font.color.light}
/> />
</StyledDisplayModeReadonlyContainer> </StyledDisplayModeReadonlyContainer>
) : ( ) : (
@ -246,13 +263,17 @@ export const FormSelectFieldInput = ({
> >
<VisibilityHidden>Edit</VisibilityHidden> <VisibilityHidden>Edit</VisibilityHidden>
{isDefined(selectedOption) && ( {isDefined(selectedOption) ? (
<SelectDisplay <StyledSelectDisplayContainer>
color={selectedOption.color ?? 'transparent'} <SelectDisplay
label={selectedOption.label} color={selectedOption.color ?? 'transparent'}
Icon={selectedOption.icon ?? undefined} label={selectedOption.label}
preventPadding={preventDisplayPadding} Icon={selectedOption.icon ?? undefined}
/> preventPadding={preventDisplayPadding}
/>
</StyledSelectDisplayContainer>
) : (
<StyledPlaceholder>{placeholderText}</StyledPlaceholder>
)} )}
<IconChevronDown <IconChevronDown
size={theme.icon.size.md} size={theme.icon.size.md}

1
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx
View File

@ -222,6 +222,7 @@ export const WorkflowEditActionFormUpdateRecord = ({
onPersist={(fieldsToUpdate) => onPersist={(fieldsToUpdate) =>
handleFieldChange('fieldsToUpdate', fieldsToUpdate) handleFieldChange('fieldsToUpdate', fieldsToUpdate)
} }
placeholder="Select fields to update"
/> />
<HorizontalSeparator noMargin /> <HorizontalSeparator noMargin />