UI: Fix regression on addon panel empty content fontsize#33021
Conversation
📝 WalkthroughWalkthroughTwo styling-only changes: EmptyTabContent now conditionally wraps provided footer content in an internal Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes
✨ Finishing touches
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (4)**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (1)📓 Common learnings⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (2)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/core/src/components/components/Tabs/EmptyTabContent.tsx (1)
54-54: Consider conditional rendering for consistency.The
footerprop is always wrapped in theFootercomponent, even when undefined, which will render an empty<div>in the DOM. For consistency with howdescriptionis handled on line 52, consider conditional rendering.Apply this diff to match the pattern used for
description:- <Footer>{footer}</Footer> + {footer && <Footer>{footer}</Footer>}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/components/components/Tabs/EmptyTabContent.tsx(2 hunks)code/core/src/components/components/addon-panel/addon-panel.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,json,html,ts,tsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (useyarn lint:js:cmd <file>)
Files:
code/core/src/components/components/Tabs/EmptyTabContent.tsxcode/core/src/components/components/addon-panel/addon-panel.tsx
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Export functions from modules when they need to be unit-tested
Files:
code/core/src/components/components/Tabs/EmptyTabContent.tsxcode/core/src/components/components/addon-panel/addon-panel.tsx
code/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In application code, use Storybook loggers instead of
console.*(client code:storybook/internal/client-logger; server code:storybook/internal/node-logger)
Files:
code/core/src/components/components/Tabs/EmptyTabContent.tsxcode/core/src/components/components/addon-panel/addon-panel.tsx
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/components/components/Tabs/EmptyTabContent.tsxcode/core/src/components/components/addon-panel/addon-panel.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
📚 Learning: 2025-09-19T15:49:02.264Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32270
File: code/core/src/components/components/AriaTabs/AriaTabPanel.tsx:27-30
Timestamp: 2025-09-19T15:49:02.264Z
Learning: In AriaTabPanel component, when hasScrollbar=false, the Panel container intentionally maintains overflowY: hidden. This forces consumers to implement their own scrolling within tab content rather than relying on automatic browser scrolling, preventing double scrollbars and giving full control over scroll behavior.
Applied to files:
code/core/src/components/components/addon-panel/addon-panel.tsx
🧬 Code graph analysis (1)
code/core/src/components/components/addon-panel/addon-panel.tsx (1)
code/core/src/components/index.ts (1)
Div(10-10)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Danger JS
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (2)
code/core/src/components/components/Tabs/EmptyTabContent.tsx (1)
30-32: LGTM! Footer component applies theme-based font size.The new
Footerstyled component correctly applies the theme-based font size (theme.typography.size.s2 - 1), fixing the regression. The minimal styling (onlyfontSize) provides flexibility for footer content to supply its own color, weight, and alignment.code/core/src/components/components/addon-panel/addon-panel.tsx (1)
31-34: LGTM! Theme-based font size correctly applied.The
Divstyled component now derivesfontSizefrom the theme (theme.typography.size.s2 - 1), fixing the regression. The implementation is consistent with the pattern used inEmptyTabContent.tsxand preserves theheight: '100%'styling.
|
View your CI Pipeline Execution ↗ for commit 651e0d6
☁️ 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 | 2 | 2 | 0 |
| Self size | 414 KB | 479 KB | 🚨 +65 KB 🚨 |
| Dependency size | 2.97 MB | 2.97 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-docs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 18 | 18 | 0 |
| Self size | 1.65 MB | 1.89 MB | 🚨 +234 KB 🚨 |
| Dependency size | 10.21 MB | 10.21 MB | 🚨 +5 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-onboarding
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 326 KB | 368 KB | 🚨 +42 KB 🚨 |
| Dependency size | 673 B | 673 B | 0 B |
| Bundle Size Analyzer | Link | Link |
storybook-addon-pseudo-states
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 21 KB | 23 KB | 🚨 +2 KB 🚨 |
| Dependency size | 692 B | 692 B | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-vitest
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 6 | 6 | 0 |
| Self size | 442 KB | 508 KB | 🚨 +67 KB 🚨 |
| Dependency size | 1.53 MB | 1.53 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 11 | 11 | 0 |
| Self size | 292 KB | 330 KB | 🚨 +38 KB 🚨 |
| Dependency size | 1.30 MB | 1.30 MB | 🚨 +1 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 187 | 0 |
| Self size | 66 KB | 73 KB | 🚨 +6 KB 🚨 |
| Dependency size | 31.88 MB | 31.87 MB | 🎉 -17 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 44 | 44 | 0 |
| Self size | 21.64 MB | 24.16 MB | 🚨 +2.53 MB 🚨 |
| Dependency size | 17.39 MB | 17.39 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 187 | 0 |
| Self size | 114 KB | 126 KB | 🚨 +12 KB 🚨 |
| Dependency size | 30.01 MB | 30.00 MB | 🎉 -11 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 191 | 191 | 0 |
| Self size | 15 KB | 17 KB | 🚨 +1 KB 🚨 |
| Dependency size | 28.60 MB | 28.58 MB | 🎉 -11 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/html-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 14 | 0 |
| Self size | 22 KB | 23 KB | 🚨 +910 B 🚨 |
| Dependency size | 1.63 MB | 1.67 MB | 🚨 +40 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 533 | 533 | 0 |
| Self size | 646 KB | 749 KB | 🚨 +103 KB 🚨 |
| Dependency size | 58.80 MB | 58.91 MB | 🚨 +112 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 124 | 0 |
| Self size | 1.12 MB | 1.27 MB | 🚨 +154 KB 🚨 |
| Dependency size | 21.71 MB | 21.87 MB | 🚨 +162 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 14 | 0 |
| Self size | 13 KB | 14 KB | 🚨 +983 B 🚨 |
| Dependency size | 1.61 MB | 1.65 MB | 🚨 +40 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 156 | 156 | 0 |
| Self size | 30 KB | 31 KB | 🚨 +1 KB 🚨 |
| Dependency size | 22.89 MB | 23.05 MB | 🚨 +162 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 35 KB | 37 KB | 🚨 +2 KB 🚨 |
| Dependency size | 19.51 MB | 19.67 MB | 🚨 +161 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 273 | 273 | 0 |
| Self size | 24 KB | 25 KB | 🚨 +1 KB 🚨 |
| Dependency size | 43.76 MB | 43.87 MB | 🚨 +112 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 19 | 19 | 0 |
| Self size | 56 KB | 59 KB | 🚨 +3 KB 🚨 |
| Dependency size | 26.75 MB | 26.79 MB | 🚨 +42 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 20 | 0 |
| Self size | 56 KB | 58 KB | 🚨 +2 KB 🚨 |
| Dependency size | 26.80 MB | 26.85 MB | 🚨 +45 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 109 | 0 |
| Self size | 36 KB | 38 KB | 🚨 +3 KB 🚨 |
| Dependency size | 43.90 MB | 43.95 MB | 🚨 +45 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 15 | 15 | 0 |
| Self size | 19 KB | 20 KB | 🚨 +910 B 🚨 |
| Dependency size | 1.65 MB | 1.70 MB | 🚨 +41 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 188 | 188 | 0 |
| Self size | 829 KB | 929 KB | 🚨 +100 KB 🚨 |
| Dependency size | 71.51 MB | 74.14 MB | 🚨 +2.63 MB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 170 | 170 | 0 |
| Self size | 30 KB | 35 KB | 🚨 +5 KB 🚨 |
| Dependency size | 68.04 MB | 70.57 MB | 🚨 +2.53 MB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 45 | 45 | 0 |
| Self size | 1.45 MB | 1.55 MB | 🚨 +96 KB 🚨 |
| Dependency size | 39.03 MB | 41.55 MB | 🚨 +2.53 MB 🚨 |
| Bundle Size Analyzer | node | node |
@storybook/csf-plugin
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 9 | 9 | 0 |
| Self size | 8 KB | 9 KB | 🚨 +1 KB 🚨 |
| Dependency size | 1.27 MB | 1.27 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/react-dom-shim
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 0 | 0 | 0 |
| Self size | 19 KB | 22 KB | 🚨 +3 KB 🚨 |
| Dependency size | 791 B | 791 B | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-create-react-app
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 68 | 68 | 0 |
| Self size | 33 KB | 36 KB | 🚨 +4 KB 🚨 |
| Dependency size | 5.98 MB | 5.98 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 170 | 170 | 0 |
| Self size | 18 KB | 21 KB | 🚨 +2 KB 🚨 |
| Dependency size | 31.20 MB | 31.20 MB | 🚨 +1 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-server-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 10 | 10 | 0 |
| Self size | 7 KB | 8 KB | 🚨 +2 KB 🚨 |
| Dependency size | 1.20 MB | 1.20 MB | 🚨 +1 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 57 | 57 | 0 |
| Self size | 715 KB | 833 KB | 🚨 +118 KB 🚨 |
| Dependency size | 12.92 MB | 12.92 MB | 🚨 +3 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 3 | 3 | 0 |
| Self size | 55 KB | 61 KB | 🚨 +6 KB 🚨 |
| Dependency size | 211 KB | 211 KB | 0 B |
| Bundle Size Analyzer | Link | Link |
2 participants
What I did
https://www.chromatic.com/test?appId=635781f3500dd2c49e189caf&id=6913769e99ba81e2674e541c
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
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 publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit