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:
@ -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};
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user