Blocks: IconGallery improvement #30743

leeovictor · 2025-03-03T21:45:42Z

What I did

I tried to improve the IconGallery using an approach that tries to balance between displaying the content of the icon label as much as possible and keeping the gallery layout consistent with long labels. This means that if the label is long it will be displayed on up to 2 lines, but if it is so long that it does not fit on 2 lines the content will be truncated, prioritizing the visual consistency of the gallery layout.

In addition, I changed the gallery layout implementation using CSS grid and reduced the font size of the label so that more cases where the label content is too long will not be truncated.

I added two cases in the block stories for example. Here are some screenshots:

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Run the storybook on the 'code' directory: yarn storybook:ui
Open Storybook in your browser
Access the 'http://localhost:6006/?path=/story/blocks-components-icongallery--default-style' story (IconGallery story)

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	79.9 MB	80 MB	59.5 kB	14.14	0.1%
initSize	79.9 MB	80 MB	59.5 kB	14.14	0.1%
diffSize	97 B	97 B	0 B	-	0%
buildSize	7.47 MB	7.45 MB	-25.3 kB	-1.03	-0.3%
buildSbAddonsSize	1.98 MB	1.9 MB	-80.7 kB	-1.1	-4.3%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	-3 B	-Infinity	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.06 MB	3.97 MB	-80.7 kB	-1.1	-2%
buildPreviewSize	3.42 MB	3.47 MB	55.3 kB	-0.65	1.6%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	11.5s	25.1s	13.5s	1.1	54%
generateTime	20.2s	18.5s	-1s -715ms	-0.73	-9.2%
initTime	4.9s	4.6s	-359ms	-0.31	-7.8%
buildTime	9.1s	10.1s	951ms	0.9	9.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.6s	5.1s	536ms	0.02	10.4%
devManagerResponsive	4.4s	4.9s	498ms	0.02	10.1%
devManagerHeaderVisible	782ms	796ms	14ms	-0.17	1.8%
devManagerIndexVisible	793ms	809ms	16ms	-0.31	2%
devStoryVisibleUncached	2.7s	2.3s	-385ms	-0.97	-16.4%
devStoryVisible	1.2s	1.2s	24ms	-0.23	2%
devAutodocsVisible	1.1s	1s	-33ms	-0.38	-3%
devMDXVisible	1.1s	1.2s	82ms	0.11	6.7%
buildManagerHeaderVisible	880ms	798ms	-82ms	-0.58	-10.3%
buildManagerIndexVisible	885ms	818ms	-67ms	-0.53	-8.2%
buildStoryVisible	869ms	789ms	-80ms	-0.57	-10.1%
buildAutodocsVisible	618ms	757ms	139ms	-0.29	18.4%
buildMDXVisible	666ms	714ms	48ms	-0.45	6.7%

Greptile Summary

Improved IconGallery component to handle long icon labels by implementing CSS grid layout and text truncation after two lines, ensuring consistent visual presentation.

Switched from flexbox to CSS grid in code/lib/blocks/src/components/IconGallery.tsx for better layout control
Added text truncation with ellipsis after 2 lines for ItemLabel styled component
Reduced font size from s2 to s1 for better label fitting
Added test cases in IconGallery.stories.tsx with long icon names to demonstrate truncation
Set fixed width and grid auto-rows for uniform item sizing across the gallery

_{💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!}

greptile-apps

LGTM

_{2 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps

LGTM

_{2 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

nx-cloud · 2025-03-03T21:50:46Z

View your CI Pipeline Execution ↗ for commit b58f98b.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 56s	View ↗

☁️ Nx Cloud last updated this comment at 2025-03-03 21:50:45 UTC

leeovictor · 2025-03-03T21:51:49Z

I was thinking about maybe adding an option to customize the overall layout of the gallery, with an option to organize items vertically. Here's a screenshot with a quick example I prototyped (I could do this in another CL)
maybe something like that:

<IconGalery itemOrientation="vertical">

greptile-apps

LGTM

_{2 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings | Greptile}

storybook-pr-benchmarking · 2025-03-10T14:18:33Z

Package Benchmarks

^{Commit: b58f98b, ran on 10 March 2025 at 14:18:30 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	3	54	🚨 +51 🚨
Self size	445 KB	445 KB	🚨 +44 B 🚨
Dependency size	2.81 MB	12.47 MB	🚨 +9.66 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-interactions`

	Before	After	Difference
Dependency count	5	54	🚨 +49 🚨
Self size	129 KB	129 KB	🚨 +70 B 🚨
Dependency size	3.11 MB	12.49 MB	🚨 +9.39 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/experimental-addon-test`

	Before	After	Difference
Dependency count	0	58	🚨 +58 🚨
Self size	0 B	845 KB	🚨 +845 KB 🚨
Dependency size	0 B	13.95 MB	🚨 +13.95 MB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	98	51	🎉 -47 🎉
Self size	21.54 MB	19.39 MB	🎉 -2.15 MB 🎉
Dependency size	21.69 MB	14.26 MB	🎉 -7.43 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	141	180	🚨 +39 🚨
Self size	215 KB	236 KB	🚨 +21 KB 🚨
Dependency size	39.38 MB	49.14 MB	🚨 +9.76 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	540	584	🚨 +44 🚨
Self size	219 KB	475 KB	🚨 +257 KB 🚨
Dependency size	58.82 MB	83.40 MB	🚨 +24.58 MB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	172	172	0
Self size	35 KB	45 KB	🚨 +10 KB 🚨
Dependency size	24.32 MB	24.31 MB	🎉 -8 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	122	124	🚨 +2 🚨
Self size	31 KB	15 KB	🎉 -16 KB 🎉
Dependency size	20.47 MB	20.49 MB	🚨 +21 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	131	131	0
Self size	61 KB	23 KB	🎉 -38 KB 🎉
Dependency size	36.55 MB	36.56 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-webpack5`

	Before	After	Difference
Dependency count	311	311	0
Self size	9 KB	7 KB	🎉 -2 KB 🎉
Dependency size	40.61 MB	40.62 MB	🚨 +7 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	139	139	0
Self size	100 KB	48 KB	🎉 -52 KB 🎉
Dependency size	39.89 MB	39.87 MB	🎉 -24 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	104	104	0
Self size	34 KB	17 KB	🎉 -17 KB 🎉
Dependency size	42.74 MB	42.75 MB	🚨 +9 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-webpack5`

	Before	After	Difference
Dependency count	495	495	0
Self size	24 KB	7 KB	🎉 -17 KB 🎉
Dependency size	57.01 MB	57.02 MB	🚨 +9 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-vite`

	Before	After	Difference
Dependency count	12	12	0
Self size	20 KB	6 KB	🎉 -14 KB 🎉
Dependency size	1.94 MB	1.94 MB	🚨 +7 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/web-components-webpack5`

	Before	After	Difference
Dependency count	245	245	0
Self size	20 KB	7 KB	🎉 -14 KB 🎉
Dependency size	32.62 MB	32.62 MB	🚨 +7 KB 🚨
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	99	52	🎉 -47 🎉
Self size	1 KB	1 KB	0 B
Dependency size	43.24 MB	33.65 MB	🎉 -9.58 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	388	356	🎉 -32 🎉
Self size	284 KB	281 KB	🎉 -3 KB 🎉
Dependency size	93.38 MB	84.30 MB	🎉 -9.08 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	309	274	🎉 -35 🎉
Self size	614 KB	617 KB	🚨 +3 KB 🚨
Dependency size	74.99 MB	65.89 MB	🎉 -9.10 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/test`

	Before	After	Difference
Dependency count	48	51	🚨 +3 🚨
Self size	1.82 MB	1.82 MB	🚨 +24 B 🚨
Dependency size	7.42 MB	7.85 MB	🚨 +425 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/html`

	Before	After	Difference
Dependency count	2	2	0
Self size	38 KB	47 KB	🚨 +9 KB 🚨
Dependency size	32 KB	32 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/vue3`

	Before	After	Difference
Dependency count	13	13	0
Self size	78 KB	87 KB	🚨 +9 KB 🚨
Dependency size	6.13 MB	6.13 MB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/web-components`

	Before	After	Difference
Dependency count	3	3	0
Self size	55 KB	62 KB	🚨 +7 KB 🚨
Dependency size	47 KB	47 KB	0 B
Bundle Size Analyzer	Link	Link

leeovictor added 2 commits March 3, 2025 18:17

use grid layout on the IconGallery block

1eccd77

add some IconItem cases with very long labels

b58f98b

greptile-apps bot reviewed Mar 3, 2025

View reviewed changes

leeovictor changed the title ~~Controls: Icon gallery improvement~~ Blocks: IconGallery improvement Mar 4, 2025

greptile-apps bot reviewed Mar 4, 2025

View reviewed changes

valentinpalkovic assigned MichaelArestad and ghengeveld Mar 10, 2025

valentinpalkovic added bug components ci:normal labels Mar 10, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: IconGallery improvement #30743

Blocks: IconGallery improvement #30743

leeovictor commented Mar 3, 2025 •

edited by storybook-pr-benchmarking bot

Loading

greptile-apps bot left a comment

greptile-apps bot left a comment

nx-cloud bot commented Mar 3, 2025

leeovictor commented Mar 3, 2025 •

edited

Loading

greptile-apps bot left a comment

storybook-pr-benchmarking bot commented Mar 10, 2025

Blocks: IconGallery improvement #30743

Are you sure you want to change the base?

Blocks: IconGallery improvement #30743

Conversation

leeovictor commented Mar 3, 2025 • edited by storybook-pr-benchmarking bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

nx-cloud bot commented Mar 3, 2025

leeovictor commented Mar 3, 2025 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

storybook-pr-benchmarking bot commented Mar 10, 2025

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-interactions

@storybook/experimental-addon-test

storybook

@storybook/experimental-nextjs-vite

@storybook/nextjs

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/svelte-vite

@storybook/svelte-webpack5

@storybook/sveltekit

@storybook/vue3-vite

@storybook/vue3-webpack5

@storybook/web-components-vite

@storybook/web-components-webpack5

sb

@storybook/cli

@storybook/codemod

@storybook/test

@storybook/html

@storybook/vue3

@storybook/web-components

leeovictor commented Mar 3, 2025 •

edited by storybook-pr-benchmarking bot

Loading

leeovictor commented Mar 3, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-interactions`

`@storybook/experimental-addon-test`

`storybook`

`@storybook/experimental-nextjs-vite`

`@storybook/nextjs`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/svelte-vite`

`@storybook/svelte-webpack5`

`@storybook/sveltekit`

`@storybook/vue3-vite`

`@storybook/vue3-webpack5`

`@storybook/web-components-vite`

`@storybook/web-components-webpack5`

`sb`

`@storybook/cli`

`@storybook/codemod`

`@storybook/test`

`@storybook/html`

`@storybook/vue3`

`@storybook/web-components`