Fix placeholders in select (#9608)

Before <img width="537" alt="Capture d’écran 2025-01-14 à 14 36 59" src="https://github.com/user-attachments/assets/b29cc4da-ac67-4ea7-83dd-03e1e68e7938" /> <img width="537" alt="Capture d’écran 2025-01-14 à 14 37 05" src="https://github.com/user-attachments/assets/7645e905-0421-48e8-8f91-f1bb6064bb18" /> After <img width="537" alt="Capture d’écran 2025-01-14 à 14 35 36" src="https://github.com/user-attachments/assets/8b059fb5-9137-46e5-8c81-105e254831c2" /> <img width="537" alt="Capture d’écran 2025-01-14 à 14 35 44" src="https://github.com/user-attachments/assets/aa0a754b-2fb7-4985-8154-e69ddef10596" /> <img width="537" alt="Capture d’écran 2025-01-14 à 14 35 56" src="https://github.com/user-attachments/assets/d90d1f89-1480-4de9-b02b-519370a27bfe" /> <img width="537" alt="Capture d’écran 2025-01-14 à 14 36 11" src="https://github.com/user-attachments/assets/67c25d62-d509-4e23-b2b6-c44d3b7cd37a" />
2025-01-14 15:30:47 +01:00
parent 6ab9b79bf3
commit b83793f9dc
6 changed files with 70 additions and 20 deletions
--- 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) ? (
    <FormFullNameFieldInput
@ -157,6 +158,7 @@ export const FormFieldInput = ({
      VariablePicker={VariablePicker}
      options={field.metadata.options}
      readonly={readonly}
+      placeholder={field.label}
    />
  ) : isFieldRawJson(field) ? (
    <FormRawJsonFieldInput
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormCountrySelectInput.tsx
@ -59,6 +59,7 @@ export const FormCountrySelectInput = ({
      defaultValue={selectedCountryName}
      readonly={readonly}
      VariablePicker={VariablePicker}
+      placeholder="Select a country"
      preventDisplayPadding
    />
  );
--- 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
        />
        <FormNumberFieldInput
--- 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
@ -14,8 +14,9 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
+import { useTheme } from '@emotion/react';
 import { useId, useState } from 'react';
-import { VisibilityHidden } from 'twenty-ui';
+import { IconChevronDown, VisibilityHidden } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';

 type FormMultiSelectFieldInputProps = {
@ -25,6 +26,7 @@ type FormMultiSelectFieldInputProps = {
  onPersist: (value: FieldMultiSelectValue | string) => 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 (
    <FormFieldInputContainer>
      {label ? <InputLabel>{label}</InputLabel> : null}
@ -174,12 +186,18 @@ export const FormMultiSelectFieldInput = ({
          {draftValue.type === 'static' ? (
            readonly ? (
              <StyledDisplayModeReadonlyContainer>
-                {isDefined(selectedOptions) && (
+                {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
                  <MultiSelectDisplay
                    values={selectedNames}
                    options={selectedOptions}
                  />
+                ) : (
+                  <StyledPlaceholder />
                )}
+                <IconChevronDown
+                  size={theme.icon.size.md}
+                  color={theme.font.color.light}
+                />
              </StyledDisplayModeReadonlyContainer>
            ) : (
              <StyledDisplayModeContainer
@ -188,12 +206,18 @@ export const FormMultiSelectFieldInput = ({
              >
                <VisibilityHidden>Edit</VisibilityHidden>

-                {isDefined(selectedOptions) && (
+                {isDefined(selectedOptions) && selectedOptions.length > 0 ? (
                  <MultiSelectDisplay
                    values={selectedNames}
                    options={selectedOptions}
                  />
+                ) : (
+                  <StyledPlaceholder>{placeholderText}</StyledPlaceholder>
                )}
+                <IconChevronDown
+                  size={theme.icon.size.md}
+                  color={theme.font.color.tertiary}
+                />
              </StyledDisplayModeContainer>
            )
          ) : (
--- 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 (
    <FormFieldInputContainer>
      {label ? <InputLabel>{label}</InputLabel> : null}
@ -226,17 +239,21 @@ export const FormSelectFieldInput = ({
          {draftValue.type === 'static' ? (
            readonly ? (
              <StyledDisplayModeReadonlyContainer>
-                {isDefined(selectedOption) && (
-                  <SelectDisplay
-                    color={selectedOption.color ?? 'transparent'}
-                    label={selectedOption.label}
-                    Icon={selectedOption.icon ?? undefined}
-                    preventPadding={preventDisplayPadding}
-                  />
+                {isDefined(selectedOption) ? (
+                  <StyledSelectDisplayContainer>
+                    <SelectDisplay
+                      color={selectedOption.color ?? 'transparent'}
+                      label={selectedOption.label}
+                      Icon={selectedOption.icon ?? undefined}
+                      preventPadding={preventDisplayPadding}
+                    />
+                  </StyledSelectDisplayContainer>
+                ) : (
+                  <StyledPlaceholder />
                )}
                <IconChevronDown
                  size={theme.icon.size.md}
-                  color={theme.font.color.tertiary}
+                  color={theme.font.color.light}
                />
              </StyledDisplayModeReadonlyContainer>
            ) : (
@ -246,13 +263,17 @@ export const FormSelectFieldInput = ({
              >
                <VisibilityHidden>Edit</VisibilityHidden>

-                {isDefined(selectedOption) && (
-                  <SelectDisplay
-                    color={selectedOption.color ?? 'transparent'}
-                    label={selectedOption.label}
-                    Icon={selectedOption.icon ?? undefined}
-                    preventPadding={preventDisplayPadding}
-                  />
+                {isDefined(selectedOption) ? (
+                  <StyledSelectDisplayContainer>
+                    <SelectDisplay
+                      color={selectedOption.color ?? 'transparent'}
+                      label={selectedOption.label}
+                      Icon={selectedOption.icon ?? undefined}
+                      preventPadding={preventDisplayPadding}
+                    />
+                  </StyledSelectDisplayContainer>
+                ) : (
+                  <StyledPlaceholder>{placeholderText}</StyledPlaceholder>
                )}
                <IconChevronDown
                  size={theme.icon.size.md}
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormUpdateRecord.tsx
@ -222,6 +222,7 @@ export const WorkflowEditActionFormUpdateRecord = ({
          onPersist={(fieldsToUpdate) =>
            handleFieldChange('fieldsToUpdate', fieldsToUpdate)
          }
+          placeholder="Select fields to update"
        />

        <HorizontalSeparator noMargin />