Add address composite form field (#9022)

- Create FormCountrySelectInput using the existing FormSelectFieldInput
- Create AddressFormFieldInput component
- Fix FormSelectFieldInput dropdown + add leftIcon

<img width="554" alt="Capture d’écran 2024-12-11 à 15 56 32"
src="https://github.com/user-attachments/assets/c3019f29-af76-44e1-96bd-a0c6283674e1"
/>
This commit is contained in:
Thomas Trompette
2024-12-11 17:57:42 +01:00
committed by GitHub
parent 2c4a77a7b7
commit 4d9facb9bd
14 changed files with 312 additions and 65 deletions

View File

@ -27,7 +27,7 @@ const StyledTag = styled.h3<{
border-radius: ${BORDER_COMMON.radius.sm};
color: ${({ color, theme }) =>
color === 'transparent'
? theme.font.color.tertiary
? theme.font.color.secondary
: theme.tag.text[color]};
display: inline-flex;
font-size: ${({ theme }) => theme.font.size.md};

View File

@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';
import { IconCheck, Tag } from '@ui/display';
import { IconCheck, IconComponent, Tag } from '@ui/display';
import { ThemeColor } from '@ui/theme';
import { StyledMenuItemSelect } from './MenuItemSelect';
@ -14,6 +14,7 @@ type MenuItemSelectTagProps = {
color: ThemeColor | 'transparent';
text: string;
variant?: 'solid' | 'outline';
LeftIcon?: IconComponent | null;
};
export const MenuItemSelectTag = ({
@ -24,9 +25,9 @@ export const MenuItemSelectTag = ({
onClick,
text,
variant = 'solid',
LeftIcon,
}: MenuItemSelectTagProps) => {
const theme = useTheme();
return (
<StyledMenuItemSelect
onClick={onClick}
@ -35,7 +36,12 @@ export const MenuItemSelectTag = ({
isKeySelected={isKeySelected}
>
<StyledMenuItemLeftContent>
<Tag variant={variant} color={color} text={text} />
<Tag
variant={variant}
color={color}
text={text}
Icon={LeftIcon ?? undefined}
/>
</StyledMenuItemLeftContent>
{selected && <IconCheck size={theme.icon.size.sm} />}
</StyledMenuItemSelect>