improvement(emcn): normalize the chevron geometry and consolidate consumers - #6258
Conversation
…sumers The sidebar folder arrow read as much larger than the icons beside it. It was measurably so: `ChevronRight` was a triple outlier in the icon set. | | ChevronRight | house standard | |---|---|---| | viewBox | `0 0 6 10` | 24-based — 149 of 173 icons | | glyph fill | 80% of the box | 54% median | | strokeWidth | 1.2 | 1.55 — 153 of 173 | | cap/join | square/miter | round/round — 175/177 | Because the box was tight-cropped, a square `size-[16px]` scaled the glyph to 12.8px tall where a standard icon shows ~8.6px — about 50% larger, with a relatively ~85% heavier stroke. The lucide icon it replaced was a 24-box at 50% fill, which is why this only appeared after the migration. `chevron-down`, `chevron-right` and `chevron-left` are rebuilt as the exact mirror and transpose of `chevron-up`, which already sets the house standard, so their optical weight is identical to that sibling by construction rather than by eye. Changing the viewBox is not safe on its own: 36 call sites sized these to the old tight aspect (`h-[7px] w-[9px]`, `h-[6px] w-[10px]`, ...), which would letterbox against a square box. All of them move to `size-[14px]`, the documented default and the app's dominant size (212 uses). Every one of the 94 chevron call sites is now square-sized. Two of those were only reachable through indirection and would have regressed silently: `STYLES.chevron` in the terminal's structured output, and the sidebar-section chevron inside a multi-line `cn()`. The dropdown submenu chevron carried no size at all and was relying on the icon's intrinsic 6x10 — it would have jumped to 24x24. Also unifies `folder-input`, which carried both 1.55 and 2 within one icon. Docs consolidation, same theme — it was forking shared components: - `SidebarChevron` was a private inline copy of the old 6x10 chevron; it now wraps the shared `ChevronRight`. - `ThemeToggle` inlined lucide's sun and moon at strokeWidth 1.5; both now come from `@sim/emcn/icons` at the house 1.55. Docs inline `<svg>` files drop from 9 to 7; the remainder are the brand icon set, the logo, OG-image generation and bespoke hand-positioned shapes. Left alone: 16 icons whose stroke or box still differs. They are fill-based glyphs and brand marks (`sim`, `wordmark`, `folder`, `more-horizontal`, ...) where changing the stroke means redrawing the icon — that wants visual review, not a sweep. Verified: 23/23 type-check (--force), biome, api-validation, 18361 tests, and production builds of both apps.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Because the old icons were tight-cropped, call sites that used mixed Docs drops bespoke SVGs: the sidebar folder arrow uses shared ChevronRight, and ThemeToggle uses Sun/Moon from Reviewed by Cursor Bugbot for commit daf1b80. Configure here. |
Greptile SummaryThe PR normalizes directional chevrons to shared 24-based geometry and consolidates icon consumers around the EMCN icon set.
Confidence Score: 5/5The PR appears safe to merge. No blocking failure remains; the previously reported stale geometry documentation is corrected in the current code.
|
| Filename | Overview |
|---|---|
| packages/emcn/src/icons/chevron-down.tsx | Rebuilds the down chevron with normalized viewBox, stroke, cap, and join geometry. |
| packages/emcn/src/icons/chevron-left.tsx | Rebuilds the left chevron as the directional counterpart of the normalized icon family. |
| packages/emcn/src/icons/chevron-right.tsx | Rebuilds the right chevron with normalized geometry used by sidebar and submenu consumers. |
| packages/emcn/src/components/chip/chip-chevron.tsx | Updates the shared chip adornment and its TSDoc to consistently describe and render a 14px chevron. |
| apps/docs/components/docs-layout/sidebar-components.tsx | Replaces the private sidebar SVG with the shared normalized ChevronRight component. |
Reviews (2): Last reviewed commit: "docs(emcn): correct the chevron geometry..." | Re-trigger Greptile
ChipChevronDown's TSDoc still described centring a 10x6 glyph, and the enterprise sidebar's chip-parity comment still cited a 6x10 chevron. Both now read 14px, matching what the components actually render.
|
@cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit daf1b80. Configure here.
The sidebar folder arrow reads as much larger than the icons beside it. It measurably is —
ChevronRightwas a triple outlier in the icon set.0 0 6 101.21.55— 153 of 173square/miterround/round— 175 / 177Because the box is tight-cropped, a square
size-[16px]scales the glyph to 12.8px tall where a standard icon shows ~8.6px — about 50% larger, with a relatively ~85% heavier stroke. The lucide icon it replaced was a 24-box at 50% fill, which is why this only surfaced after #6241.The fix
chevron-down,chevron-rightandchevron-leftare rebuilt as the exact mirror and transpose ofchevron-up, which already sets the house standard. Their optical weight now matches that sibling by construction rather than by eye:Why the viewBox change alone would have broken things
36 call sites sized these to the old tight aspect (
h-[7px] w-[9px],h-[6px] w-[10px],h-[9px] w-[7px]), which would letterboxe against a square box. All move tosize-[14px]— the documented default and the app's dominant size (212 uses). All 94 chevron call sites are now square-sized.Three would have regressed silently, since they are only reachable through indirection:
STYLES.chevronin the terminal's structured output (a string constant)cn()6×10and would have jumped to24×24Also unifies
folder-input, which carried both1.55and2within a single icon.Docs consolidation (same theme)
Docs was forking shared components:
SidebarChevronwas a private inline copy of the old 6×10 chevron → now wraps the sharedChevronRightThemeToggleinlined lucide's sun and moon atstrokeWidth 1.5→ both now come from@sim/emcn/iconsat the house1.55Docs inline
<svg>files drop from 9 to 7; the rest are the brand icon set, the logo, OG-image generation, and bespoke hand-positioned shapes.Deliberately not touched
16 icons whose stroke or box still differs are fill-based glyphs and brand marks (
sim,wordmark,folder,more-horizontal,play,connections, …). Changing their stroke means redrawing the icon — that wants visual review, not a sweep. They are listed in the commit body.Verification
23/23
type-check --force, biome, api-validation, 18361 tests, and production builds of both apps. Merged lateststagingand re-verified.