;
+
+export const Default: Story = {
+ args: {
+ selectedCountryName: 'Canada',
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ await canvas.findByText('Country');
+ await canvas.findByText('Canada');
+ },
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
index bd30e957d..cc192ddbc 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
@@ -60,30 +60,28 @@ export const SelectFieldInput = ({
];
return (
-
- {
- const option = filteredOptions.find(
- (option) => option.value === itemId,
- );
- if (isDefined(option)) {
- onSubmit?.(() => persistField(option.value));
- resetSelectedItem();
- }
- }}
- onOptionSelected={handleSubmit}
- options={fieldDefinition.metadata.options}
- onCancel={onCancel}
- defaultOption={selectedOption}
- onFilterChange={setFilteredOptions}
- onClear={
- fieldDefinition.metadata.isNullable ? handleClearField : undefined
+ {
+ const option = filteredOptions.find(
+ (option) => option.value === itemId,
+ );
+ if (isDefined(option)) {
+ onSubmit?.(() => persistField(option.value));
+ resetSelectedItem();
}
- clearLabel={fieldDefinition.label}
- />
-
+ }}
+ onOptionSelected={handleSubmit}
+ options={fieldDefinition.metadata.options}
+ onCancel={onCancel}
+ defaultOption={selectedOption}
+ onFilterChange={setFilteredOptions}
+ onClear={
+ fieldDefinition.metadata.isNullable ? handleClearField : undefined
+ }
+ clearLabel={fieldDefinition.label}
+ />
);
};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
index 9c7cc5ff2..626ed9680 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
@@ -94,7 +94,7 @@ export type SelectOption = {
// Disabled option when already select
disabled?: boolean;
// Option color
- color?: ThemeColor;
+ color?: ThemeColor | 'transparent';
};
export type Input = {
diff --git a/packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx
index c9ed54603..13ac37aa3 100644
--- a/packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx
+++ b/packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx
@@ -1,10 +1,11 @@
-import { Tag, ThemeColor } from 'twenty-ui';
+import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
type SelectDisplayProps = {
- color: ThemeColor;
+ color: ThemeColor | 'transparent';
label: string;
+ Icon?: IconComponent;
};
-export const SelectDisplay = ({ color, label }: SelectDisplayProps) => {
- return ;
+export const SelectDisplay = ({ color, label, Icon }: SelectDisplayProps) => {
+ return ;
};
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index ac30ef19c..c8bc395f6 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -260,6 +260,7 @@ export const AddressInput = ({
onFocus={getFocusHandler('addressPostcode')}
/>
diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
index 819d33028..249692646 100644
--- a/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx
@@ -109,7 +109,7 @@ export const SelectInput = ({
selected={false}
text={`No ${clearLabel}`}
color="transparent"
- variant="outline"
+ variant={'outline'}
onClick={() => {
setSelectedOption(undefined);
onClear();
@@ -122,8 +122,9 @@ export const SelectInput = ({
key={option.value}
selected={selectedOption?.value === option.value}
text={option.label}
- color={option.color as TagColor}
+ color={(option.color as TagColor) ?? 'transparent'}
onClick={() => handleOptionChange(option)}
+ LeftIcon={option.icon}
/>
);
})}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
index ce9861e92..9d18f2129 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
@@ -6,9 +6,11 @@ import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'
import { Select, SelectOption } from '@/ui/input/components/Select';
export const CountrySelect = ({
+ label,
selectedCountryName,
onChange,
}: {
+ label: string;
selectedCountryName: string;
onChange: (countryCode: string) => void;
}) => {
@@ -36,7 +38,7 @@ export const CountrySelect = ({
fullWidth
dropdownId={SELECT_COUNTRY_DROPDOWN_ID}
options={options}
- label="COUNTRY"
+ label={label}
withSearchInput
onChange={onChange}
value={selectedCountryName}
diff --git a/packages/twenty-ui/src/display/tag/components/Tag.tsx b/packages/twenty-ui/src/display/tag/components/Tag.tsx
index a8ab14dd3..a90ad9875 100644
--- a/packages/twenty-ui/src/display/tag/components/Tag.tsx
+++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx
@@ -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};
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
index aec752d80..1217f1199 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
@@ -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 (
-
+
{selected && }