From 3b7a5178542bf3c4c5163e507bf26a30b4d7f313 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 13 Aug 2026 19:35:46 -0700 Subject: [PATCH] fix(icons): match folder icon optical size to sibling resource icons The folder icon read visibly smaller than the table/database icons beside it in resource rows despite an identical size-[14px] class, because the class sets the SVG box and not the artwork inside it. The folder outline only spanned 15 units of the shared -1 -2 24 24 box against 17.5-18 for its siblings. Scale the outline to a 17-unit extent on the same .25 grid and quarter circle corner radii, keeping the body path byte-identical across Folder, FolderOpen and FolderCode so the sidebar expand/collapse toggle does not shift. FolderCode's brackets move with the body they are centred on. --- packages/emcn/src/icons/folder-code.tsx | 12 ++++++------ packages/emcn/src/icons/folder-open.tsx | 8 ++++++-- packages/emcn/src/icons/folder.tsx | 9 ++++++++- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/emcn/src/icons/folder-code.tsx b/packages/emcn/src/icons/folder-code.tsx index 1cf2a0c2cba..6137efc597c 100644 --- a/packages/emcn/src/icons/folder-code.tsx +++ b/packages/emcn/src/icons/folder-code.tsx @@ -4,9 +4,9 @@ import type { SVGProps } from 'react' * FolderCode icon component - a {@link Folder} carrying code brackets * * Shares {@link Folder}'s body path verbatim so the folder family reads as one - * silhouette at one weight. The brackets are centred on the body (x 9.125, - * y 11.25) rather than on the viewBox, so they sit inside the folder rather - * than drifting toward the flap. + * silhouette at one weight. The brackets are centred on the body (x 9, y 11.5) + * rather than on the viewBox, so they sit inside the folder rather than + * drifting toward the flap. * * @param props - SVG properties including className, fill, etc. */ @@ -25,9 +25,9 @@ export function FolderCode(props: SVGProps) { aria-hidden='true' {...props} > - - - + + + ) } diff --git a/packages/emcn/src/icons/folder-open.tsx b/packages/emcn/src/icons/folder-open.tsx index 66ad48cb6b5..642f4ae7998 100644 --- a/packages/emcn/src/icons/folder-open.tsx +++ b/packages/emcn/src/icons/folder-open.tsx @@ -2,6 +2,10 @@ import type { SVGProps } from 'react' /** * FolderOpen icon component - folder with its front panel tilted open + * + * The body outline is {@link Folder}'s path verbatim up to the flap join, so + * the pair toggles in place without shifting. Keep the two in lockstep. + * * @param props - SVG properties including className, fill, etc. */ export function FolderOpen(props: SVGProps) { @@ -19,8 +23,8 @@ export function FolderOpen(props: SVGProps) { aria-hidden='true' {...props} > - - + + ) } diff --git a/packages/emcn/src/icons/folder.tsx b/packages/emcn/src/icons/folder.tsx index 9f0a3587492..f3ac3489d11 100644 --- a/packages/emcn/src/icons/folder.tsx +++ b/packages/emcn/src/icons/folder.tsx @@ -8,6 +8,13 @@ import type { SVGProps } from 'react' * place (sidebar folder rows), which makes any divergence read as the icon * changing size on expand. * + * The outline is drawn to the same optical extent as the sibling list icons + * ({@link Table}, {@link Database}) — ~17 units tall inside the shared + * `-1 -2 24 24` box. Drawn smaller it reads as a smaller icon in a resource + * row even at an identical `size-*` class, since the class sets the box, not + * the artwork. Any change here must be mirrored in {@link FolderOpen} and + * {@link FolderCode}, which reuse this outline verbatim. + * * @param props - SVG properties including className, fill, etc. */ export function Folder(props: SVGProps) { @@ -25,7 +32,7 @@ export function Folder(props: SVGProps) { aria-hidden='true' {...props} > - + ) }