Core: Add default selection for tags in main config#32373
Merged
Conversation
…nent - Introduced 'play-fn' and 'test-fn' tags with default selection in common-preset. - Enhanced Sidebar component to utilize tag presets for managing selected tags. - Updated TagsFilter to initialize selected tags based on tag presets. - Modified TagsFilter stories to reflect new tag preset functionality.
yannbf
added
ui
tags
ci:normal
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+67
to
+71
| useEffect(() => { | ||
| const tags = Object.keys(tagPresets); | ||
| const selectedTags = tags.filter((tag) => tagPresets[tag].defaultSelected); | ||
| setSelectedTags(selectedTags); | ||
| }, [tagPresets]); |
Contributor
There was a problem hiding this comment.
logic: This useEffect completely ignores initialSelectedTags and overwrites any initially selected tags. Consider merging both sources or prioritizing one over the other.
|
View your CI Pipeline Execution ↗ for commit 8d18419
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 198 | 198 | 0 |
| Self size | 80 KB | 80 KB | 0 B |
| Dependency size | 31.43 MB | 31.45 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 203 | 203 | 0 |
| Self size | 28 KB | 28 KB | 0 B |
| Dependency size | 28.17 MB | 28.18 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 538 | 538 | 0 |
| Self size | 903 KB | 903 KB | 0 B |
| Dependency size | 59.34 MB | 59.35 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 286 | 286 | 0 |
| Self size | 25 KB | 25 KB | 0 B |
| Dependency size | 43.75 MB | 43.77 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 210 | 210 | 0 |
| Self size | 17 KB | 17 KB | 0 B |
| Dependency size | 32.70 MB | 32.72 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 177 | 177 | 0 |
| Self size | 24 KB | 24 KB | 0 B |
| Dependency size | 30.59 MB | 30.61 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
yannbf
force-pushed
the
yann/add-tags-preset-to-main
branch
from
b50b279 to
24253d8
Compare
yannbf
commented
Sep 2, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Finalizes #32268
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam 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>Greptile Summary
Updated On: 2025-09-02 13:45:35 UTC
This PR implements tag preset functionality to allow users to control which tags are selected by default in the Storybook sidebar through main.ts configuration. The changes introduce a new
defaultSelectedproperty to theTagOptionsinterface, enabling users to specify initial tag selection state in their configuration.The implementation follows a clear data flow: users configure tag options with
defaultSelected: truein their main.ts file, which gets processed by the common preset system and made available viaglobal.TAGS_OPTIONS. The Sidebar component transforms this configuration intotagPresetsand passes it to the TagsFilter component. The TagsFilter component then uses a new useEffect hook to automatically select tags based on the preset configuration when the component mounts or when tagPresets change.The changes also update the TagsFilter stories to demonstrate the new functionality, including a new story that tests the inversion feature. A documentation comment was added to the common preset to clarify the intended ordering for default selected tags, ensuring users can still override preset configurations.
This feature addresses issue #32268 and provides a more structured approach to tag filtering UX, moving away from relying solely on hardcoded initial selected tags to a configurable preset system that integrates with Storybook's existing configuration architecture.
Confidence score: 2/5
code/core/src/manager/components/sidebar/TagsFilter.tsxwhich contains the problematic logic