docs(evo-icon): compact all-icons storybook example into a dense grid - #885
docs(evo-icon): compact all-icons storybook example into a dense grid#885LuLaValva wants to merge 2 commits into
Conversation
Replaces the labeled-tile grid with a dense icon grid built from a local icon-example tag with scoped styles. Clicking an icon toggles a tooltip showing its selectable tag name; focus out closes it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
There was a problem hiding this comment.
Pull request overview
Updates the evo-icon (evo-marko) Storybook example generation to display all icons in a compact, dense grid by generating wrapper tags (icon-grid, icon-example) and switching the importSVG script to output the new structure.
Changes:
- Add
icon-gridtag to wrap generated examples in a scoped CSS grid layout. - Add
icon-exampletag to render each icon as a button that toggles anevo-tooltipshowing the icon’s tag name. - Update
scripts/import-svg.tsto generate the new icon example markup and run Prettier on the generated example file.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/evo-marko/src/tags/evo-icon/examples/tags/icon-grid.marko | New scoped grid wrapper used by the generated all-icons example. |
| packages/evo-marko/src/tags/evo-icon/examples/tags/icon-example.marko | New per-icon cell wrapper that toggles an evo-tooltip via a button host. |
| packages/evo-marko/scripts/import-svg.ts | Switches icon example output to icon-grid/icon-example and formats the generated example with Prettier. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
PR Preview DeployedWebsite • commit 84b354a |
HenriqueLimas
left a comment
HenriqueLimas
left a comment
There was a problem hiding this comment.
could you add the same for evo-react 🥹
LuLaValva
changed the title
c86724f to
7b435b1
Compare
LuLaValva
changed the title
I will, but after |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
@LuLaValva I meant just the grid layout |
|
The grid layout is great, but we need to surface the icon names somehow! I used tooltips in |
Replaces the evo-marko all-icons Storybook example (a spread-out grid of labeled tiles) with a dense grid: each icon is a button that toggles an
evo-tooltipshowing its selectable tag name (<evo-icon-foo/>), closing on focus out. The cells are generated byimportSVGas a localicon-exampletag with scoped styles, so nothing leaks into the global Storybook CSS and the generated example shrinks to three lines per icon. Storybook-only; no changeset.In Safari, closing by clicking elsewhere relies on the click-to-focus fix in #884.
🤖 Generated with Claude Code