From c75f10bc33050257a058d2f521f99f6a400b49d5 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Thu, 5 Jun 2025 20:54:49 +0200 Subject: [PATCH] Fix filter sub-field icons (#12456) This PR fixes filter sub-field icons, with more relevant icons. Fixes https://github.com/twentyhq/core-team-issues/issues/1006 --- .../AdvancedFilterSubFieldSelectMenu.tsx | 18 ++++++++++++--- .../constants/DefaultAnySubFieldIconName.ts | 1 + .../constants/IconNameByAnySubField.ts | 13 +++++++++++ .../constants/IconNameBySubField.ts | 23 +++++++++++++------ .../display/icon/components/TablerIcons.ts | 9 ++++---- .../icon/providers/internal/AllIcons.ts | 2 ++ packages/twenty-ui/src/display/index.ts | 9 ++++---- 7 files changed, 57 insertions(+), 18 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts create mode 100644 packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx index b967f225d..36cbe7edd 100644 --- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterSubFieldSelectMenu.tsx @@ -11,6 +11,8 @@ import { objectFilterDropdownIsSelectingCompositeFieldComponentState } from '@/o import { objectFilterDropdownSubMenuFieldTypeComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSubMenuFieldTypeComponentState'; import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel'; import { getFilterableFieldTypeLabel } from '@/object-record/object-filter-dropdown/utils/getFilterableFieldTypeLabel'; +import { DEFAULT_ANY_SUB_FIELD_ICON_NAME } from '@/object-record/record-filter/constants/DefaultAnySubFieldIconName'; +import { ICON_NAME_BY_ANY_SUB_FIELD } from '@/object-record/record-filter/constants/IconNameByAnySubField'; import { ICON_NAME_BY_SUB_FIELD } from '@/object-record/record-filter/constants/IconNameBySubField'; import { areCompositeTypeSubFieldsFilterable } from '@/object-record/record-filter/utils/areCompositeTypeSubFieldsFilterable'; import { isCompositeTypeFilterableByAnySubField } from '@/object-record/record-filter/utils/isCompositeTypeFilterableByAnySubField'; @@ -23,7 +25,7 @@ import { SelectableList } from '@/ui/layout/selectable-list/components/Selectabl import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2'; -import { IconApps, IconChevronLeft, useIcons } from 'twenty-ui/display'; +import { IconChevronLeft, useIcons } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; type AdvancedFilterSubFieldSelectMenuProps = { @@ -110,6 +112,16 @@ export const AdvancedFilterSubFieldSelectMenu = ({ ...subFieldNames.map((subFieldName) => subFieldName), ]; + const iconNameForAnySubField = isDefined(fieldMetadataItemUsedInDropdown) + ? ICON_NAME_BY_ANY_SUB_FIELD[fieldMetadataItemUsedInDropdown?.type] + : (null ?? null); + + const anySubFieldIcon = getIcon( + iconNameForAnySubField ?? + fieldMetadataItemUsedInDropdown?.icon ?? + DEFAULT_ANY_SUB_FIELD_ICON_NAME, + ); + return ( { handleSelectFilter(fieldMetadataItemUsedInDropdown); }} - LeftIcon={IconApps} - text={`Any ${getFilterableFieldTypeLabel(objectFilterDropdownSubMenuFieldType)} field`} + LeftIcon={anySubFieldIcon} + text={`Any ${fieldMetadataItemUsedInDropdown.label} field`} /> )} diff --git a/packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts b/packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts new file mode 100644 index 000000000..2ab90e44b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-filter/constants/DefaultAnySubFieldIconName.ts @@ -0,0 +1 @@ +export const DEFAULT_ANY_SUB_FIELD_ICON_NAME = 'IconApps'; diff --git a/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts b/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts new file mode 100644 index 000000000..e31dbdb40 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameByAnySubField.ts @@ -0,0 +1,13 @@ +import { FieldMetadataType } from 'twenty-shared/types'; + +export const ICON_NAME_BY_ANY_SUB_FIELD: Partial< + Record +> = { + [FieldMetadataType.LINKS]: 'IconLink', + [FieldMetadataType.EMAILS]: 'IconMail', + [FieldMetadataType.PHONES]: 'IconPhone', + [FieldMetadataType.ADDRESS]: 'IconMap', + [FieldMetadataType.ACTOR]: 'IconCreativeCommonsSa', + [FieldMetadataType.FULL_NAME]: 'IconUser', + [FieldMetadataType.POSITION]: 'IconBriefcase', +}; diff --git a/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameBySubField.ts b/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameBySubField.ts index b9b7ebba9..3b8fc1582 100644 --- a/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameBySubField.ts +++ b/packages/twenty-front/src/modules/object-record/record-filter/constants/IconNameBySubField.ts @@ -5,13 +5,22 @@ export const ICON_NAME_BY_SUB_FIELD: Partial< > = { currencyCode: 'IconCurrencyDollar', amountMicros: 'IconNumber95Small', - name: 'IconAlignJustified', - source: 'IconFileArrowLeft', + name: 'IconTextSize', + source: 'IconTransferIn', primaryEmail: 'IconMail', - additionalEmails: 'IconList', - primaryLinkLabel: 'IconLabel', + additionalEmails: 'IconMailPlus', + primaryLinkLabel: 'IconTextSize', primaryLinkUrl: 'IconLink', - secondaryLinks: 'IconList', - primaryPhoneCallingCode: 'IconPlus', - additionalPhones: 'IconList', + secondaryLinks: 'IconLinkPlus', + primaryPhoneNumber: 'IconPhoneCall', + primaryPhoneCallingCode: 'IconFlag', + additionalPhones: 'IconPhonePlus', + addressCity: 'IconMapPin', + addressCountry: 'IconMapPin', + addressPostcode: 'IconMapPin', + addressStreet1: 'IconMapPin', + addressStreet2: 'IconMapPin', + addressState: 'IconMapPin', + firstName: 'IconTextSize', + lastName: 'IconTextSize', }; diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts index d68a1a3c6..600ae4887 100644 --- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts +++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts @@ -4,18 +4,18 @@ export { IconAlertCircle, IconAlertTriangle, IconApi, - IconApps, IconAppWindow, + IconApps, IconArchive, IconArchiveOff, IconArrowBackUp, IconArrowDown, IconArrowLeft, IconArrowRight, - IconArrowsDiagonal, - IconArrowsVertical, IconArrowUp, IconArrowUpRight, + IconArrowsDiagonal, + IconArrowsVertical, IconAt, IconBaselineDensitySmall, IconBell, @@ -47,8 +47,8 @@ export { IconChevronDown, IconChevronLeft, IconChevronRight, - IconChevronsRight, IconChevronUp, + IconChevronsRight, IconCircleDot, IconCircleOff, IconCirclePlus, @@ -190,6 +190,7 @@ export { IconLifebuoy, IconLink, IconLinkOff, + IconLinkPlus, IconList, IconListCheck, IconListDetails, diff --git a/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts index d0d2f6470..75b2b442c 100644 --- a/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts +++ b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts @@ -2530,6 +2530,7 @@ import { IconLineHeight, IconLink, IconLinkOff, + IconLinkPlus, IconList, IconListCheck, IconListDetails, @@ -6714,6 +6715,7 @@ export const ALL_ICONS = { IconLineDotted, IconLineHeight, IconLink, + IconLinkPlus, IconLinkOff, IconList, IconListCheck, diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index 8c2ff1744..907f1eac1 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -65,18 +65,18 @@ export { IconAlertCircle, IconAlertTriangle, IconApi, - IconApps, IconAppWindow, + IconApps, IconArchive, IconArchiveOff, IconArrowBackUp, IconArrowDown, IconArrowLeft, IconArrowRight, - IconArrowsDiagonal, - IconArrowsVertical, IconArrowUp, IconArrowUpRight, + IconArrowsDiagonal, + IconArrowsVertical, IconAt, IconBaselineDensitySmall, IconBell, @@ -108,8 +108,8 @@ export { IconChevronDown, IconChevronLeft, IconChevronRight, - IconChevronsRight, IconChevronUp, + IconChevronsRight, IconCircleDot, IconCircleOff, IconCirclePlus, @@ -251,6 +251,7 @@ export { IconLifebuoy, IconLink, IconLinkOff, + IconLinkPlus, IconList, IconListCheck, IconListDetails,