docs(evo-react): compact all-icons storybook example into a dense grid - #887
docs(evo-react): compact all-icons storybook example into a dense grid#887LuLaValva wants to merge 1 commit into
Conversation
Replaces the generated table with a dense icon grid. Clicking an icon toggles a bubble showing its selectable component tag; focus out closes it. The cells render through a storybook-only IconExample helper with CSS-module styles, excluded from the package build. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
|
Consolidated into #885 alongside the evo-marko changes. |
There was a problem hiding this comment.
Pull request overview
This PR updates the @evo-web/react icon Storybook documentation to replace the generated “all icons” table with a compact grid, using a Storybook-only IconExample helper (plus scoped CSS-module styles) and updating the icon generation script accordingly.
Changes:
- Add
IconGrid/IconExampleStorybook-only helper components to render a dense icon grid with a toggleable “component tag” bubble. - Update
scripts/import-svg.tsto generate theAllIconsstory using the new helper instead of a<table>. - Exclude the helper from production TS builds and ignore the generated
icon.stories.tsxin Prettier.
Reviewed changes
Copilot reviewed 5 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/evo-react/tsconfig.prod.json | Excludes the Storybook-only helper from prod type/build output. |
| packages/evo-react/src/icon/icon-example.tsx | Adds the grid/cell rendering and toggle behavior for the Storybook icon grid. |
| packages/evo-react/src/icon/icon-example.module.css | Provides scoped CSS-module styles for dense grid layout and bubble styling. |
| packages/evo-react/src/css-modules.d.ts | Adds TS module typing for *.module.css imports used by the Storybook helper. |
| packages/evo-react/scripts/import-svg.ts | Switches generated AllIcons story output from a table to the new helper-driven grid. |
| packages/evo-react/.prettierignore | Adds the generated src/icon/icon.stories.tsx to ignored files. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| onBlur={(e) => { | ||
| if (!e.currentTarget.contains(e.relatedTarget)) { | ||
| setOpen(false); | ||
| } | ||
| }} |
| <button | ||
| type="button" | ||
| aria-label={name} | ||
| aria-expanded={open} | ||
| className={styles.host} | ||
| onClick={(e) => { | ||
| e.currentTarget.focus(); | ||
| setOpen(!open); | ||
| }} | ||
| > | ||
| {children} | ||
| </button> | ||
| {open && ( | ||
| <span role="tooltip" tabIndex={-1} className={styles.bubble}> | ||
| {`<${name}/>`} | ||
| </span> | ||
| )} |
evo-react counterpart to #885: replaces the generated all-icons table with a dense grid. Clicking an icon toggles a bubble showing its selectable component tag (
<EvoIconFoo/>); clicking it again, another icon, or anywhere else closes it. The cells render through a storybook-onlyIconExamplehelper with CSS-module styles, excluded from the package build (verified absent fromdist/). The generated stories file joins the existing autogenerated entries in.prettierignore.Storybook-only; no changeset.
🤖 Generated with Claude Code