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<{
withRightComponent?: boolean;
hasError?: boolean;
hasItem: boolean;
}>`
${TEXT_INPUT_STYLE}
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.border.color.medium};
${({ hasItem, theme }) =>
hasItem &&
css`
background-color: ${theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${theme.border.color.medium};
`}
box-sizing: border-box;
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -70,6 +75,7 @@ export type MultiItemBaseInputProps = HTMLInputProps & {
}) => React.ReactNode;
error?: string | null;
hasError?: boolean;
hasItem: boolean;
};
export const MultiItemBaseInput = forwardRef<
@ -93,6 +99,7 @@ export const MultiItemBaseInput = forwardRef<
renderInput,
error = '',
hasError = false,
hasItem,
},
ref,
) => {
@ -129,6 +136,7 @@ export const MultiItemBaseInput = forwardRef<
onChange={onChange}
ref={combinedRef}
withRightComponent={!!rightComponent}
hasItem={hasItem}
/>
)}
{!!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}
hasItem={!!items.length}
rightComponent={
items.length ? (
<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 { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
import { css } from '@emotion/react';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { stripSimpleQuotesFromString } from '~/utils/string/stripSimpleQuotesFromString';
export const DEFAULT_PHONE_CALLING_CODE = '1';
const StyledCustomPhoneInputContainer = styled.div`
background-color: ${({ theme }) => theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${({ theme }) => theme.border.color.medium};
height: 30px;
const StyledCustomPhoneInputContainer = styled.div<{
hasItem: boolean;
}>`
${({ hasItem, theme }) =>
hasItem &&
css`
background-color: ${theme.background.transparent.lighter};
border-radius: 4px;
border: 1px solid ${theme.border.color.medium};
height: 30px;
`}
`;
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
@ -130,7 +137,7 @@ export const PhonesFieldInput = ({
)}
renderInput={({ value, onChange, autoFocus, placeholder }) => {
return (
<StyledCustomPhoneInputContainer>
<StyledCustomPhoneInputContainer hasItem={!!phones.length}>
<StyledCustomPhoneInput
autoFocus={autoFocus}
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;
display: flex;
height: 30px;
height: 32px;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};