fix(icons): match folder icon optical size to sibling resource icons (#6692)

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.
This commit is contained in:
Waleed
2026-08-13 19:47:17 -07:00
committed by GitHub
parent fa394e5e07
commit 9aa36a424f
3 changed files with 20 additions and 9 deletions
+6 -6
View File
@@ -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<SVGSVGElement>) {
aria-hidden='true'
{...props}
>
<path d='M3.75 17.25A2 2 0 0 1 1.75 15.25V4.25A2 2 0 0 1 3.75 2.25H7L9.5 5.25H14.5A2 2 0 0 1 16.5 7.25V15.25A2 2 0 0 1 14.5 17.25Z' />
<path d='M7.75 9.5L6 11.25L7.75 13' />
<path d='M10.5 9.5L12.25 11.25L10.5 13' />
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V16A2.25 2.25 0 0 1 15 18.25Z' />
<path d='M7.5 9.5L5.5 11.5L7.5 13.5' />
<path d='M10.5 9.5L12.5 11.5L10.5 13.5' />
</svg>
)
}
+6 -2
View File
@@ -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<SVGSVGElement>) {
@@ -19,8 +23,8 @@ export function FolderOpen(props: SVGProps<SVGSVGElement>) {
aria-hidden='true'
{...props}
>
<path d='M3.75 17.25A2 2 0 0 1 1.75 15.25V4.25A2 2 0 0 1 3.75 2.25H7L9.5 5.25H14.5A2 2 0 0 1 16.5 7.25V9.25' />
<path d='M6.25 9.25H18.75L16.25 17.25H3.75Z' />
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V9.25' />
<path d='M5.75 9.25H19.75L17 18.25H3Z' />
</svg>
)
}
+8 -1
View File
@@ -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<SVGSVGElement>) {
@@ -25,7 +32,7 @@ export function Folder(props: SVGProps<SVGSVGElement>) {
aria-hidden='true'
{...props}
>
<path d='M3.75 17.25A2 2 0 0 1 1.75 15.25V4.25A2 2 0 0 1 3.75 2.25H7L9.5 5.25H14.5A2 2 0 0 1 16.5 7.25V15.25A2 2 0 0 1 14.5 17.25Z' />
<path d='M3 18.25A2.25 2.25 0 0 1 0.75 16V3.5A2.25 2.25 0 0 1 3 1.25H6.5L9.5 4.75H15A2.25 2.25 0 0 1 17.25 7V16A2.25 2.25 0 0 1 15 18.25Z' />
</svg>
)
}