Skip to content

Conversation

@neil-morrison44
Copy link
Contributor

@neil-morrison44 neil-morrison44 commented Jun 30, 2023

Closes #23227

What I did

I've added a named container to the tab content so things which appear within tabs (e.g. addon panels) can size themselves based on that size & do media queries.
Container queries has decent coverage now: https://caniuse.com/css-container-queries & browsers that don't understand will skip it.

How to test

Since it's CSS & at the border of the Addons you'll probably need to check that addons can do things like

@container sidebar (min-width: 400px) {
  /* <stylesheet> */
}

and

  height: 100cqh;

(I've checked by adding them into a running storybook via dev tools and they work)

Before and after of one of my addons:

Before (height: 100%;):

Screenshot 2023-06-30 at 10 59 12

After (height: 100cqh;):

Screenshot 2023-06-30 at 11 00 15

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
  • Make sure to add/update documentation regarding your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Maintainers

  • If this PR should be tested against many or all sandboxes,
    make sure to add the ci:merged or ci:daily GH label to it.
  • Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

@ghengeveld ghengeveld changed the title Adds a named CSS container to the Content in tabs Core: Support container queries in addon panels Jun 24, 2025
@nx-cloud
Copy link

nx-cloud bot commented Jun 24, 2025

View your CI Pipeline Execution ↗ for commit 9452eba.

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

☁️ Nx Cloud last updated this comment at 2025-06-24 13:54:15 UTC

@storybook-app-bot
Copy link

storybook-app-bot bot commented Jun 24, 2025

Package Benchmarks

Commit: 7bbbf42, ran on 25 June 2025 at 15:35:41 UTC

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

storybook

Before After Difference
Dependency count 51 49 🎉 -2 🎉
Self size 31.72 MB 31.87 MB 🚨 +149 KB 🚨
Dependency size 17.43 MB 17.41 MB 🎉 -22 KB 🎉
Bundle Size Analyzer Link Link

sb

Before After Difference
Dependency count 52 50 🎉 -2 🎉
Self size 1 KB 1 KB 0 B
Dependency size 49.15 MB 49.27 MB 🚨 +126 KB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 218 216 🎉 -2 🎉
Self size 582 KB 582 KB 0 B
Dependency size 94.80 MB 94.89 MB 🚨 +94 KB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 187 185 🎉 -2 🎉
Self size 31 KB 31 KB 0 B
Dependency size 78.90 MB 79.03 MB 🚨 +126 KB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 1 1 0
Self size 12.50 MB 12.47 MB 🎉 -32 KB 🎉
Dependency size 98 KB 98 KB 0 B
Bundle Size Analyzer Link Link

@ghengeveld ghengeveld merged commit e7a815b into storybookjs:next Jun 25, 2025
49 of 51 checks passed
@github-project-automation github-project-automation bot moved this from Empathy Queue (prioritized) to Done in Core Team Projects Jun 25, 2025
@github-actions github-actions bot mentioned this pull request Jun 25, 2025
71 tasks
@ghengeveld ghengeveld added patch:yes Bugfix & documentation PR that need to be picked to main branch and removed patch:yes Bugfix & documentation PR that need to be picked to main branch labels Jun 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Add CSS container queries for the plugin panel for addons to use

4 participants