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

fix: fix regression on multiItem input field when no item (#9543)

Browse Source 
### Context
Fix on [8904 issue](https://github.com/twentyhq/twenty/issues/8904)
([PR](https://github.com/twentyhq/twenty/pull/9439)) introduces a
regression when field has no item.
Background should be lighter.
<img width="250" alt="Screenshot 2025-01-10 at 16 08 03"
src="https://github.com/user-attachments/assets/1eb39455-f24a-4301-9a72-7a9a8f5c8382"
/>


### Solution
Conditional styling, displayed only when MultiInput has item
<img width="250" alt="Screenshot 2025-01-10 at 16 08 20"
src="https://github.com/user-attachments/assets/6bc02aa0-0430-4207-8163-c31d66751f3e"
/>

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
This commit is contained in:
Etienne
2025-01-10 18:32:52 +01:00
committed by GitHub
parent 4ca03d0066
commit 11a47264a7
4 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx
View File

@ -9,12 +9,17 @@ import { useCombinedRefs } from '~/hooks/useCombinedRefs';
const StyledInput = styled.input<{ const StyledInput = styled.input<{
withRightComponent?: boolean; withRightComponent?: boolean;
hasError?: boolean; hasError?: boolean;
hasItem: boolean;
}>` }>`
${TEXT_INPUT_STYLE} ${TEXT_INPUT_STYLE}
background-color: ${({ theme }) => theme.background.transparent.lighter}; ${({ hasItem, theme }) =>
border-radius: 4px; hasItem &&
border: 1px solid ${({ theme }) => theme.border.color.medium}; css`
background-color: ${theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${theme.border.color.medium};
`}
box-sizing: border-box; box-sizing: border-box;
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
@ -70,6 +75,7 @@ export type MultiItemBaseInputProps = HTMLInputProps & {
}) => React.ReactNode; }) => React.ReactNode;
error?: string | null; error?: string | null;
hasError?: boolean; hasError?: boolean;
hasItem: boolean;
}; };
export const MultiItemBaseInput = forwardRef< export const MultiItemBaseInput = forwardRef<
@ -93,6 +99,7 @@ export const MultiItemBaseInput = forwardRef<
renderInput, renderInput,
error = '', error = '',
hasError = false, hasError = false,
hasItem,
}, },
ref, ref,
) => { ) => {
@ -129,6 +136,7 @@ export const MultiItemBaseInput = forwardRef<
onChange={onChange} onChange={onChange}
ref={combinedRef} ref={combinedRef}
withRightComponent={!!rightComponent} withRightComponent={!!rightComponent}
hasItem={hasItem}
/> />
)} )}
{!!rightComponent && ( {!!rightComponent && (

1
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx
View File

@ -199,6 +199,7 @@ export const MultiItemFieldInput = <T,>({
) )
} }
onEnter={handleSubmitInput} onEnter={handleSubmitInput}
hasItem={!!items.length}
rightComponent={ rightComponent={
items.length ? ( items.length ? (
<LightIconButton <LightIconButton

19
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx
View File

@ -10,16 +10,23 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils'; import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils';
import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton'; import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
import { css } from '@emotion/react';
import { FieldMetadataType } from '~/generated-metadata/graphql'; import { FieldMetadataType } from '~/generated-metadata/graphql';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString'; import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
export const DEFAULT_PHONE_CALLING_CODE = '1'; export const DEFAULT_PHONE_CALLING_CODE = '1';
const StyledCustomPhoneInputContainer = styled.div` const StyledCustomPhoneInputContainer = styled.div<{
background-color: ${({ theme }) => theme.background.transparent.lighter}; hasItem: boolean;
border-radius: 4px; }>`
border: 1px solid ${({ theme }) => theme.border.color.medium}; ${({ hasItem, theme }) =>
height: 30px; hasItem &&
css`
background-color: ${theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${theme.border.color.medium};
height: 30px;
`}
`; `;
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)` const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
@ -130,7 +137,7 @@ export const PhonesFieldInput = ({
)} )}
renderInput={({ value, onChange, autoFocus, placeholder }) => { renderInput={({ value, onChange, autoFocus, placeholder }) => {
return ( return (
<StyledCustomPhoneInputContainer> <StyledCustomPhoneInputContainer hasItem={!!phones.length}>
<StyledCustomPhoneInput <StyledCustomPhoneInput
autoFocus={autoFocus} autoFocus={autoFocus}
placeholder={placeholder} placeholder={placeholder}

2
packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx
View File

@ -27,7 +27,7 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
cursor: pointer; cursor: pointer;
display: flex; display: flex;
height: 30px; height: 32px;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};