Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Fix sidebar not wrapping #29055

Merged
merged 2 commits into from
Sep 6, 2024
Merged

UI: Fix sidebar not wrapping #29055

merged 2 commits into from
Sep 6, 2024

Conversation

JReinhold
Copy link
Contributor

@JReinhold JReinhold commented Sep 5, 2024

Closes #27206

fix-sidebar.mp4

What I did

Upgraded @radix-ui/react-scroll-area to the latest rc, to get the upstream fix in from radix-ui/primitives#2945 it uses display: flex instead of display: table - see the elaborate descriptions in #27234 and #29049 for why that change fixes the issue.

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

  1. Open a sandbox that has composition, eg. react-vite/default-ts
  2. Modify the heading of the composed title to be long, eg. from "Storybook 8.0.0" to "Storybook 8.0.0 loong loong loong" (edit the DOM in DevTools)
  3. Shrink the sidebar, see that the play button is still visible, and the title gets proper ellipses (...) - which it didn't before.

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/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 76.5 MB 76.5 MB 172 B 1.08 0%
initSize 161 MB 161 MB 48.9 kB -0.41 0%
diffSize 84.6 MB 84.7 MB 48.7 kB -0.6 0.1%
buildSize 7.48 MB 7.51 MB 36.2 kB 210.45 0.5%
buildSbAddonsSize 1.62 MB 1.62 MB 0 B 1.24 0%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.31 MB 2.34 MB 30.5 kB 12459.74 1.3%
buildSbPreviewSize 352 kB 352 kB 0 B - 0%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.47 MB 4.5 MB 30.5 kB 2048.18 0.7%
buildPreviewSize 3 MB 3.01 MB 5.69 kB 29.9 0.2%
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 7.6s 24.1s 16.4s 2.04 🔺68.4%
generateTime 20.1s 22.7s 2.6s 0.36 11.6%
initTime 16.9s 17.4s 447ms -0.44 2.6%
buildTime 10.7s 11.9s 1.1s -0.04 9.9%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 7.4s 6s -1s -368ms -1.09 -22.6%
devManagerResponsive 4.4s 3.9s -478ms -0.9 -12%
devManagerHeaderVisible 753ms 698ms -55ms -0.73 -7.9%
devManagerIndexVisible 788ms 730ms -58ms -0.78 -7.9%
devStoryVisibleUncached 1.2s 1.2s -30ms -0.42 -2.4%
devStoryVisible 789ms 733ms -56ms -0.75 -7.6%
devAutodocsVisible 699ms 638ms -61ms -0.68 -9.6%
devMDXVisible 707ms 613ms -94ms -0.97 -15.3%
buildManagerHeaderVisible 686ms 655ms -31ms -1.03 -4.7%
buildManagerIndexVisible 753ms 662ms -91ms -1.3 🔰-13.7%
buildStoryVisible 751ms 724ms -27ms -0.78 -3.7%
buildAutodocsVisible 637ms 593ms -44ms -1.07 -7.4%
buildMDXVisible 686ms 658ms -28ms -0.4 -4.3%

Greptile Summary

Updated the @radix-ui/react-scroll-area dependency to fix sidebar wrapping issues.

  • Upgraded @radix-ui/react-scroll-area from 1.0.5 to 1.2.0-rc.7 in code/core/package.json
  • Added 'WithRefsNarrow' story in Sidebar.stories.tsx to test long ref titles in narrow viewports
  • This change addresses the issue of hidden 'Run tests' and 'Settings' buttons when sidebar width is reduced
  • Improves visibility of story status badges in narrow sidebar configurations

@JReinhold JReinhold self-assigned this Sep 5, 2024
Copy link

nx-cloud bot commented Sep 5, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d5d5f68. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

@JReinhold JReinhold marked this pull request as ready for review September 5, 2024 19:13
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings

Comment on lines +155 to +166
parameters: {
viewport: {
options: {
narrow: {
name: 'narrow',
styles: {
width: '400px',
height: '800px',
},
},
},
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Consider using a more specific width for the narrow viewport, e.g. '320px' to match common mobile device widths

Copy link
Contributor

@cdedreuille cdedreuille left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@JReinhold JReinhold merged commit e610404 into next Sep 6, 2024
61 of 62 checks passed
@JReinhold JReinhold deleted the jeppe/fix-sidebar-min-width branch September 6, 2024 10:23
@github-actions github-actions bot mentioned this pull request Sep 6, 2024
4 tasks
Copy link

@baxitfund baxitfund left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Sidebar doesn't wrap which hides the "Run tests" and "Settings" buttons
3 participants