[READ-ONLY] Mirror of https://github.com/lukebennett88/luke-ui. luke-ui.pages.dev

Add an Iconography overview page with a searchable icon gallery (#315) master

* Add an Iconography overview page with a searchable icon gallery Browsing the icon set previously meant reading the Icon component page or the icons directory. Add an overview page, parallel to Typography, whose job is finding an icon and taking its name away. The gallery renders all 27 icons in a ruled grid with a name filter, a live count, and a size toggle that scales the glyph without reflowing the grid. Each cell carries two copy targets, JSX and the bare name, revealed on hover and on keyboard focus, and shown permanently on touch devices where there is no hover. Move the spritesheet setup out of the Icon component page, which keeps its API, createIcon, and accessibility sections, and cross-link the two. * Rewrite the Iconography page and keep the copy buttons visible The page followed no established shape and skipped the topics that other design systems cover. Rewrite it around browse, use, size, colour, accessibility, setup, and what to do when the set has no matching icon. Write the prose in Simplified Technical English. Drop the bundler tour from the spritesheet section. State the requirement, that the bundler must give a URL and must not inline the file, and give one Vite line as an example. Move the spritesheet regeneration command to docs/COMPONENTS.md. It is a maintainer task, and the docs are for consumers of the package. Replace the hover-revealed copy chips with a ruled two-column footer that is always present. The chips contradicted the hairline grid and needed a separate touch code path. The footer uses one behaviour on every input method, and the glyph is never covered. * Fix renamed prop * Address review on the Iconography page and gallery Render the icon examples with ExampleBlock instead of static code fences, and add size, shared size, colour, and informative examples. Drop the paragraph that explained how to use the gallery UI, the resolved pixel values for the themeable size tokens, and the request to contact the maintainers. Derive the gallery's size union from IconProps rather than repeating it. Fold the copy feedback and its announcement into one reducer, since they always change together. Replace the hand-rolled announcement debounce with useDeferredValue, and hold a ref to the filter input itself rather than querying the field wrapper on each clear.


+496 -33
10 changed files