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

Fix dropdown input design (#9439)

Browse Source 
### Context
Update to match Figma design for dropdown input - [standard
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-75034&t=4FdGFZfPLtvNq8La-4)
/ [custom phone
input](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=28562-74922&t=YIxM3jgx8kC9qiyQ-4)

### Preview
<img width="200" alt="Screenshot 2025-01-07 at 16 07 31"
src="https://github.com/user-attachments/assets/d61eb446-aa62-43e5-b3a4-95efc8e3997e"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 12"
src="https://github.com/user-attachments/assets/8e80658c-8e33-408c-96b7-733ca72de8cb"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 22"
src="https://github.com/user-attachments/assets/9c2b204d-aa97-4fb1-a884-54d64864c900"
/>

<img width="200" alt="Screenshot 2025-01-07 at 16 06 36"
src="https://github.com/user-attachments/assets/a47b0e49-3c25-4738-b6a6-c3f0af067bc7"
/>


closes #8904

---------

Co-authored-by: etiennejouan <jouan.etienne@gmail.com>
This commit is contained in:
Etienne
2025-01-08 16:16:46 +01:00
committed by GitHub
parent a1664fbc7b
commit 7036a8ccc3
7 changed files with 192 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
packages/twenty-front/src/modules/ui/field/input/components/PhoneInput.tsx
View File

@ -1,132 +0,0 @@
import styled from '@emotion/styled';
import { useEffect, useRef, useState } from 'react';
import ReactPhoneNumberInput from 'react-phone-number-input';
import { TEXT_INPUT_STYLE } from 'twenty-ui';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton';
import { E164Number } from 'libphonenumber-js';
import 'react-phone-number-input/style.css';
const StyledContainer = styled.div`
align-items: center;
border: none;
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
width: 100%;
display: flex;
justify-content: start;
`;
const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
font-family: ${({ theme }) => theme.font.family};
height: 32px;
${TEXT_INPUT_STYLE}
padding: 0;
.PhoneInputInput {
background: none;
border: none;
color: ${({ theme }) => theme.font.color.primary};
&::placeholder,
&::-webkit-input-placeholder {
color: ${({ theme }) => theme.font.color.light};
font-family: ${({ theme }) => theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.medium};
}
:focus {
outline: none;
}
}
& svg {
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 12px;
}
width: calc(100% - ${({ theme }) => theme.spacing(8)});
`;
const StyledLightIconButtonContainer = styled.div`
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
`;
export type PhoneInputProps = {
placeholder?: string;
autoFocus?: boolean;
value: string;
onEnter: (newText: string) => void;
onEscape: (newText: string) => void;
onTab?: (newText: string) => void;
onShiftTab?: (newText: string) => void;
onClickOutside: (event: MouseEvent | TouchEvent, inputValue: string) => void;
onChange?: (newText: string) => void;
hotkeyScope: string;
copyButton?: boolean;
};
export const PhoneInput = ({
autoFocus,
value,
onEnter,
onEscape,
onTab,
onShiftTab,
onClickOutside,
hotkeyScope,
onChange,
copyButton = true,
}: PhoneInputProps) => {
const [internalValue, setInternalValue] = useState<string | undefined>(value);
const wrapperRef = useRef<HTMLDivElement>(null);
const copyRef = useRef<HTMLDivElement>(null);
const handleChange = (newValue: E164Number) => {
setInternalValue(newValue);
onChange?.(newValue as string);
};
useEffect(() => {
setInternalValue(value);
}, [value]);
useRegisterInputEvents({
inputRef: wrapperRef,
copyRef: copyRef,
inputValue: internalValue ?? '',
onEnter,
onEscape,
onClickOutside,
onTab,
onShiftTab,
hotkeyScope,
});
return (
<StyledContainer ref={wrapperRef}>
<StyledCustomPhoneInput
autoFocus={autoFocus}
placeholder="Phone number"
value={value}
onChange={handleChange}
international={true}
withCountryCallingCode={true}
countrySelectComponent={PhoneCountryPickerDropdownButton}
/>
{copyButton && (
<StyledLightIconButtonContainer ref={copyRef}>
<LightCopyIconButton copyText={value} />
</StyledLightIconButtonContainer>
)}
</StyledContainer>
);
};

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

@ -21,7 +21,7 @@ const StyledDropdownButtonContainer = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none;
&:hover {
filter: brightness(0.95);
background-color: ${({ theme }) => theme.background.transparent.light};
}
`;

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

@ -27,16 +27,16 @@ const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
cursor: pointer;
display: flex;
height: 32px;
height: 30px;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
user-select: none;
border-right: 1px solid ${({ theme }) => theme.border.color.light};
border-right: 1px solid ${({ theme }) => theme.border.color.medium};
&:hover {
filter: brightness(0.95);
background-color: ${({ theme }) => theme.background.transparent.light};
}
`;