Object icon visual parity (#19374)
## Summary Aligns **object metadata** icons with the **tinted tile** look everywhere we show a workspace object, and **retires** the navigation-only `NavigationMenuItemStyleIcon` wrapper in favor of **shared** UI primitives under `@/ui/display` and `@/object-metadata`. ## What changed ### Global tinted icon building blocks (`@/ui/display`) - **`TintedIconTile`** / **`StyledTintedIconTileContainer`** support optional **`size`** and **`stroke`**, and grow the tile when **`size`** is set so layouts match previous `theme.icon` usage. - Shared helpers and constants for theme color parsing and tinted backgrounds/borders/icon color (e.g. **`getTintedIconTileStyleFromColor`**, **`parseThemeColor`**, **`getColorFromTheme`**, related constants). ### Object metadata icon (`@/object-metadata`) - **`ObjectMetadataIcon`** composes **`TintedIconTile`** with **`getObjectColorWithFallback`**, forwards optional **`size`** / **`stroke`** for **visual parity** with old `getIcon` + explicit sizing. - **`getSelectOptionIconFromObjectMetadataItem`** returns an **`IconComponent`** for selects/menus that expect a component, not a React node. ### Navigation module cleanup - **Removed** **`NavigationMenuItemStyleIcon`**; call sites use **`ObjectMetadataIcon`**, **`TintedIconTile`**, and/or the shared **`getTintedIconTileStyleFromColor`** pipeline so the same treatment is **not** tied to the navigation package. - **`NavigationMenuItemIcon`**, view/link overlays, DnD handle, and sidebar editor flows updated to use the shared pattern where they render object (or tinted) icons. ### Product surfaces updated (non-exhaustive) - **Settings:** role object picker/rows, data model tables/graph/overview, object preview summary, webhooks entity list, morph relation multiselect. - **Workflows:** create/update/delete/upsert/find records, triggers, filters, variables dropdowns, AI agent object rows, object dropdowns. - **Shell:** side panel object filter / data sources / folder chrome where object icons appear. - **Records:** index header icon, show breadcrumb styling. - **Activity:** timeline event icon when linked object metadata applies. - **`NavigationDrawerItem`:** tinted branch aligned with shared **`TintedIconTile`** behavior. --------- Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com>
This commit is contained in:
+9
-4
@@ -2,6 +2,7 @@ import { isNonEmptyString } from '@sniptt/guards';
|
||||
|
||||
import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
|
||||
import { CoreObjectNameSingular } from 'twenty-shared/types';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
|
||||
|
||||
const SYSTEM_OBJECT_COLOR: ThemeColor = 'gray';
|
||||
@@ -37,11 +38,15 @@ const getColorForCustomObject = (seed: string): ThemeColor => {
|
||||
};
|
||||
|
||||
export const getObjectColorWithFallback = (
|
||||
objectMetadataItem: Pick<
|
||||
EnrichedObjectMetadataItem,
|
||||
'nameSingular' | 'color' | 'isSystem'
|
||||
>,
|
||||
objectMetadataItem:
|
||||
| Pick<EnrichedObjectMetadataItem, 'nameSingular' | 'color' | 'isSystem'>
|
||||
| null
|
||||
| undefined,
|
||||
): ThemeColor => {
|
||||
if (!isDefined(objectMetadataItem)) {
|
||||
return SYSTEM_OBJECT_COLOR;
|
||||
}
|
||||
|
||||
if (objectMetadataItem.isSystem) {
|
||||
return SYSTEM_OBJECT_COLOR;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user