Skip to content

Commit a9e6eb4

Browse files
stefan-ernststefan-ernst
committed
fix(frontend): standardize item type icons
1 parent fd39eaa commit a9e6eb4

25 files changed

Lines changed: 59 additions & 154 deletions

‎frontend/src/lib/components/ItemTypeIcon.svelte‎

Lines changed: 14 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,10 @@
11
<script>
22
import { itemTypeIconMap } from '../utils/icons.js';
33
4-
// Named sizes keep tile and icon in sync across every usage:
5-
// xs 16/12 (dense rows, board cards), sm 20/14 (list rows), md 24/16 (admin lists),
6-
// lg 28/18 (search results, pickers).
7-
const SIZES = {
8-
xs: { tile: 16, icon: 12 },
9-
sm: { tile: 20, icon: 14 },
10-
md: { tile: 24, icon: 16 },
11-
lg: { tile: 28, icon: 18 },
12-
};
13-
144
let {
155
itemType = null,
166
icon = null,
177
color = null,
18-
size = 'md',
19-
variant = 'tile',
208
title = undefined,
219
ariaLabel = undefined,
2210
testId = undefined,
@@ -25,63 +13,29 @@
2513
2614
const resolvedIconName = $derived(String(icon || itemType?.icon || ''));
2715
const ResolvedIcon = $derived(itemTypeIconMap[resolvedIconName] || itemTypeIconMap.FileText);
28-
const resolvedColor = $derived(color || itemType?.color || (variant === 'tile' ? '#3b82f6' : '#6b7280'));
16+
const resolvedColor = $derived(color || itemType?.color || 'var(--ds-icon-subtle, #6b7280)');
2917
const resolvedTitle = $derived(title ?? itemType?.name);
30-
31-
const tokens = $derived(SIZES[size] || SIZES.md);
32-
const iconSize = $derived(typeof size === 'number' ? size : tokens.icon);
33-
const radius = $derived(variant === 'tinted' && tokens.tile >= 24 ? '50%' : (tokens.tile <= 20 ? '3px' : '5px'));
3418
</script>
3519
36-
{#if variant === 'plain'}
37-
<span
38-
class="item-type-icon-plain {className}"
39-
style="color: {resolvedColor};"
40-
title={resolvedTitle}
41-
aria-label={ariaLabel}
42-
aria-hidden={ariaLabel ? undefined : 'true'}
43-
data-testid={testId}
44-
>
45-
<ResolvedIcon size={iconSize} strokeWidth={1.9} />
46-
</span>
47-
{:else if variant === 'tinted'}
48-
<span
49-
class="item-type-icon {className}"
50-
style="width: {tokens.tile}px; height: {tokens.tile}px; border-radius: {radius}; color: {resolvedColor}; background-color: color-mix(in srgb, {resolvedColor} 14%, transparent);"
51-
title={resolvedTitle}
52-
aria-label={ariaLabel}
53-
aria-hidden={ariaLabel ? undefined : 'true'}
54-
data-testid={testId}
55-
>
56-
<ResolvedIcon size={iconSize} strokeWidth={1.9} />
57-
</span>
58-
{:else}
59-
<span
60-
class="item-type-icon {className}"
61-
style="width: {tokens.tile}px; height: {tokens.tile}px; border-radius: {radius}; background-color: {resolvedColor};"
62-
title={resolvedTitle}
63-
aria-label={ariaLabel}
64-
aria-hidden={ariaLabel ? undefined : 'true'}
65-
data-testid={testId}
66-
>
67-
<ResolvedIcon size={iconSize} strokeWidth={1.9} />
68-
</span>
69-
{/if}
20+
<span
21+
class="item-type-icon {className}"
22+
style="color: {resolvedColor};"
23+
title={resolvedTitle}
24+
aria-label={ariaLabel}
25+
aria-hidden={ariaLabel ? undefined : 'true'}
26+
data-testid={testId}
27+
>
28+
<ResolvedIcon size={16} strokeWidth={2} />
29+
</span>
7030
7131
<style>
7232
.item-type-icon {
7333
display: inline-flex;
7434
align-items: center;
7535
justify-content: center;
76-
overflow: hidden;
77-
flex-shrink: 0;
78-
color: #fff;
79-
}
80-
81-
.item-type-icon-plain {
82-
display: inline-flex;
83-
align-items: center;
84-
justify-content: center;
36+
width: 16px;
37+
height: 16px;
8538
flex-shrink: 0;
39+
line-height: 0;
8640
}
8741
</style>

‎frontend/src/lib/dialogs/LinkItemSearchResult.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@
2525
<ItemTypeIcon
2626
icon={result.item_type_icon}
2727
color={result.item_type_color}
28-
variant="tinted"
29-
size="lg"
3028
/>
3129

3230
<div class="flex-1 min-w-0">

‎frontend/src/lib/features/collections/BoardItemCard.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@
136136
{#if itemType}
137137
<ItemTypeIcon
138138
{itemType}
139-
size="xs"
140139
testId={`board-card-type-icon-${item.id}`}
141140
/>
142141
{/if}

‎frontend/src/lib/features/collections/CollectionBoard.svelte‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
import { Plus, ChevronDown, ChevronRight, MoreHorizontal, Layers, ArrowDownUp } from '@lucide/svelte';
1414
import ItemPicker from '../../pickers/ItemPicker.svelte';
1515
import { buildIterationPickerConfig } from '../iterations/iterationPickerUtils.js';
16-
import { getItemTypeIcon } from '../../utils/icons.js';
1716
import ItemTypeIcon from '../../components/ItemTypeIcon.svelte';
1817
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
1918
import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -864,8 +863,7 @@
864863
testid: `board-group-by-type-${type.id}`,
865864
title: type.name,
866865
subtitle: 'Use these items as swimlanes',
867-
icon: getItemTypeIcon(type.icon),
868-
iconColor: type.color,
866+
itemType: type,
869867
badge: groupByItemTypeId === type.id ? 'Selected' : '',
870868
onClick: () => setGroupByItemType(type.id)
871869
}))
@@ -1569,7 +1567,6 @@
15691567
<ItemTypeIcon
15701568
icon={selectedGroupByItemType.icon}
15711569
color={lane.isUnassigned ? 'var(--ds-background-neutral-bold, #6b7280)' : selectedGroupByItemType.color}
1572-
size="sm"
15731570
title={selectedGroupByItemType.name}
15741571
/>
15751572
{/if}

‎frontend/src/lib/features/collections/CollectionMap.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -608,7 +608,7 @@
608608
{#if breadcrumb.level === 'root'}
609609
<Home class="w-3.5 h-3.5" />
610610
{:else if breadcrumb.itemType}
611-
<ItemTypeIcon itemType={breadcrumb.itemType} size="xs" />
611+
<ItemTypeIcon itemType={breadcrumb.itemType} />
612612
{/if}
613613
614614
<!-- Text -->
@@ -669,7 +669,7 @@
669669
<div class="flex items-center justify-between">
670670
<div class="flex items-center gap-2">
671671
{#if itemType}
672-
<ItemTypeIcon {itemType} size="xs" />
672+
<ItemTypeIcon {itemType} />
673673
{/if}
674674
<ItemKey item={backboneItem} {workspace}
675675
onClick={(e) => handleKeyClick(backboneItem, e)}
@@ -761,7 +761,7 @@
761761
<div class="flex items-center justify-between">
762762
<div class="flex items-center gap-2">
763763
{#if childItemType}
764-
<ItemTypeIcon itemType={childItemType} size="xs" />
764+
<ItemTypeIcon itemType={childItemType} />
765765
{/if}
766766
<ItemKey item={childItem} {workspace}
767767
onClick={(e) => handleKeyClick(childItem, e)}

‎frontend/src/lib/features/collections/CollectionRoadmap.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1376,8 +1376,6 @@
13761376
<ItemTypeIcon
13771377
icon={typeInfo.iconName}
13781378
color={typeInfo.color}
1379-
variant="plain"
1380-
size="sm"
13811379
title={typeInfo.label}
13821380
/>
13831381

‎frontend/src/lib/features/collections/CollectionTree.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,6 @@
486486
<ItemTypeIcon
487487
icon={typeInfo.iconName}
488488
color={typeInfo.color}
489-
size="xs"
490489
title={typeInfo.label}
491490
/>
492491
</div>

‎frontend/src/lib/features/collections/ListCellRenderer.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@
136136
{#if item.item_type_id && itemTypes.length > 0}
137137
{@const itemType = itemTypes.find(type => type.id === item.item_type_id)}
138138
{#if itemType}
139-
<ItemTypeIcon {itemType} size="xs" />
139+
<ItemTypeIcon {itemType} />
140140
{/if}
141141
{/if}
142142
<div class="flex-1 min-w-0" data-testid={`workspace-item-title-${item.id}`}>

‎frontend/src/lib/features/collections/QuickAddForm.svelte‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,6 @@
240240
<ItemTypeIcon
241241
icon={selectedItemType.icon}
242242
color={selectedItemType.color}
243-
variant="plain"
244-
size="md"
245243
/>
246244
{:else}
247245
<Package class="w-4 h-4" style="color: var(--ds-icon);" />
@@ -261,7 +259,6 @@
261259
<ItemTypeIcon
262260
icon={selectedItemType.icon}
263261
color={selectedItemType.color}
264-
size="xs"
265262
title={selectedItemType.name}
266263
/>
267264
{:else}
@@ -288,7 +285,7 @@
288285
onmouseenter={(e) => e.currentTarget.style.backgroundColor = 'var(--ds-background-selected)'}
289286
onmouseleave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
290287
>
291-
<ItemTypeIcon {itemType} size="sm" />
288+
<ItemTypeIcon {itemType} />
292289
<span class="truncate">{itemType.name}</span>
293290
</button>
294291
{/each}

‎frontend/src/lib/features/items/ItemDetailBreadcrumbs.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@
269269
{#if parent.itemType}
270270
<Tooltip content={parent.itemType.name}>
271271
{#snippet children()}
272-
<ItemTypeIcon itemType={parent.itemType} size="xs" class="cursor-help" />
272+
<ItemTypeIcon itemType={parent.itemType} class="cursor-help" />
273273
{/snippet}
274274
</Tooltip>
275275
{/if}
@@ -460,7 +460,7 @@
460460
<div class="flex items-center gap-2">
461461
<!-- Item Type Icon -->
462462
{#if resultItemType}
463-
<ItemTypeIcon itemType={resultItemType} size="xs" />
463+
<ItemTypeIcon itemType={resultItemType} />
464464
{/if}
465465
466466
<!-- Item Key -->
@@ -494,7 +494,7 @@
494494
class="rounded cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500"
495495
title="Change item type"
496496
>
497-
<ItemTypeIcon itemType={currentItemType} size="xs" />
497+
<ItemTypeIcon itemType={currentItemType} />
498498
</button>
499499
{/snippet}
500500
</Tooltip>
@@ -541,7 +541,7 @@
541541
class="w-full px-3 py-2 text-left flex items-center gap-2 disabled:opacity-50"
542542
style:background={hasHierarchyMismatch && fitsCurrentParent ? 'var(--ds-background-success-subtle, var(--ds-surface))' : undefined}
543543
>
544-
<ItemTypeIcon itemType={type} size="xs" />
544+
<ItemTypeIcon itemType={type} />
545545
<span class="min-w-0 flex-1">
546546
<span class="block truncate text-sm" style="color: var(--ds-text);">{type.name}</span>
547547
<span

0 commit comments

Comments
 (0)