UI: Overhaul layout engine #20412

ndelangen · 2022-12-25T19:05:37Z

Resolves #14916
Closes #24215
Closes #24252
Closes #24253

Works on #24124

Storybook.layout.demo.mp4

What we did

This PR completely overhauls the layout engine, and how sidebar/panels are sized and positioned. Mobile/responsive UI does not work here, that's being worked on in follow-up PRs: #24124

Switch from using absolute positioning of all panels to using CSS grid.
Don't re-render Canvas when resizing to a mobile viewport
... In fact don't use resize observers at all, but rely on matching media queries instead, which is more performant and less error prone.
Enable users to drag panels to the edge to toggle them off completely, which is easier than using the menu or remembering keyboard shortcuts - both of which still works. The sidebar and right panel still have a minimum width though.
Change the layout state to not have booleans for the panels but instead actual sizes, to ensure you can't get into "impossible states" like { isFullscreen: true, showNav: true }. The new size state properties are accompanies by recentVisisbleSizes properties that are used when restoring panels back from a non-shown state
Changed how layout state is synced, so the Layout component has an internal state of the size that is synced to the manager API when dragging stops. There's also a sync the other way, when sizes are changed via the manager API.

This PR was first done by @ndelangen but then finished 6 months later by @JReinhold and @cdedreuille, so not all changes might make sense together anymore.

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!

Compile and run any sandbox
Resize panels with dragging
Toggle panels with the menu and with keyboard shortcuts (A, S, D and F)
Use query params to set initial layout state as per documentation.

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>

ndelangen · 2022-12-25T19:06:19Z

A bit of a Christmas present 🎁

ghengeveld · 2022-12-25T21:33:25Z

A bit of a Christmas present 🎁

What are you doing working on Christmas?!

IanVS

I'm not too familiar with the manager UI, so I don't feel qualified to give this a ✅, but it's definitely pretty exciting looking! I left a few niggly comments and questions, from a brief skim-through.

code/ui/manager/src/components/layout/Layout.tsx

code/ui/manager/src/container/Panel.tsx

code/ui/manager/src/settings/index.tsx

code/ui/manager/src/components/layout/Layout.types.ts

shilman · 2022-12-26T05:37:37Z

Amazing work here @ndelangen -- I'm excited to work through the comments and see if we can get this merged for 7.0

Nice suggestions across the board @IanVS! Merry christmas!!! 🎄

… into norbert/panel-size

JReinhold · 2023-09-18T21:23:41Z

code/lib/manager-api/src/modules/layout.ts

+    getIsNavShown() {
+      return getIsNavShown(store.getState());
+    },
+
    setOptions: (options: any) => {


the changes below just reverses the condition for readability, nothing else.

JReinhold · 2023-09-18T21:25:02Z

code/lib/manager-api/src/modules/layout.ts

@@ -284,7 +389,6 @@ export const init: ModuleFn = ({ store, provider, singleStory, fullAPI }) => {
    api,
    state: merge(api.getInitialOptions(), persisted),
    init: () => {
-      api.setOptions(merge(api.getInitialOptions(), persisted));


this makes setting layout from URL work again, similar to #23750

JReinhold · 2023-09-18T21:30:06Z

code/ui/manager/src/app.stories.tsx

We should re-add this back in a later iteration

ndelangen · 2023-09-19T09:06:04Z

@JReinhold I assume you're taking this PR to it's conclusion? Do you need anything from me?

… into norbert/panel-size

ndelangen added 10 commits December 22, 2022 00:14

making changes

ae1d7a1

improvements

eafbdfb

make zoom work nicer

0604499

use proper mobile nav bar

44bbd4f

Merge branch 'next' into norbert/panel-size

69f307b

connect it up to global state

544bc47

improvements

0773caf

cleanup

c354cab

fix react warning

f2bed35

replace the old

83ac400

ndelangen requested review from ghengeveld and IanVS December 25, 2022 19:05

ndelangen requested a review from shilman December 25, 2022 19:06

ndelangen self-assigned this Dec 25, 2022

ndelangen added feature request ui labels Dec 25, 2022

ndelangen added 7 commits December 25, 2022 20:07

Merge branch 'next' into norbert/panel-size

d534e08

cleanup

5bad257

rename part 1

7fdfd4c

renames part 2

4e6ec72

rename part 3

4671b08

rename part 4

751398e

set parameters for preview component

6ec8679

ndelangen added 2 commits December 25, 2022 22:41

remove viewports 900

6874797

this doesn't seem to work, let's just drop it or now

f335da2

IanVS reviewed Dec 26, 2022

View reviewed changes

shilman changed the title ~~Overhaul panel payout~~ Overhaul panel layout Dec 26, 2022

cdedreuille and others added 5 commits September 18, 2023 10:26

Fix Toolbar styling

2f4efd2

Merge branch 'norbert/panel-size' of github.com:storybookjs/storybook…

e40ebfc

… into norbert/panel-size

Merge branch 'next' into norbert/panel-size

998f3f5

fix for removing showNav, isFullscreen, showPanel manager states

7970677

Merge branch 'norbert/panel-size' of github.com:storybookjs/storybook…

6c417b8

… into norbert/panel-size

JReinhold requested review from kylegach and jonniebigodes as code owners September 18, 2023 11:58

cdedreuille mentioned this pull request Sep 18, 2023

UI: Add the new structure for the mobile layout #24214

Closed

8 tasks

cdedreuille changed the base branch from next to new-layout September 18, 2023 14:45

cdedreuille approved these changes Sep 18, 2023

View reviewed changes

add layout tests

162f69b

JReinhold added the ci:normal label Sep 18, 2023

JReinhold reviewed Sep 18, 2023

View reviewed changes

code/ui/manager/src/app.stories.tsx Outdated

Copy link

Contributor

JReinhold Sep 18, 2023 •

edited

Loading

Choose a reason for hiding this comment

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

We should re-add this back in a later iteration

cleanup

c1e87c5

JReinhold approved these changes Sep 18, 2023

View reviewed changes

cleanup

47bad99

JReinhold changed the title ~~UI: Overhaul panel layout~~ UI: Overhaul layout engine Sep 19, 2023

JReinhold added 2 commits September 19, 2023 09:30

add migration notes for layout state

ea7c444

fix types

0b413ac

cdedreuille approved these changes Sep 19, 2023

View reviewed changes

cdedreuille mentioned this pull request Sep 19, 2023

UI: Add the new structure for the mobile layout #24227

Merged

8 tasks

cdedreuille and others added 4 commits September 19, 2023 11:09

Adjust the minimum size of the preview

e4848a3

Remove animations

d374b91

improve e2e coverage of layout

5bbc1e0

Merge branch 'norbert/panel-size' of github.com:storybookjs/storybook…

096a6d2

… into norbert/panel-size

JReinhold merged commit a01591e into new-layout Sep 19, 2023
49 of 50 checks passed

JReinhold deleted the norbert/panel-size branch September 19, 2023 12:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Overhaul layout engine #20412

UI: Overhaul layout engine #20412

ndelangen commented Dec 25, 2022 •

edited by cdedreuille

Loading

ndelangen commented Dec 25, 2022

ghengeveld commented Dec 25, 2022

IanVS left a comment

shilman commented Dec 26, 2022 •

edited

Loading

JReinhold Sep 18, 2023

JReinhold Sep 18, 2023

JReinhold Sep 18, 2023 •

edited

Loading

ndelangen commented Sep 19, 2023

UI: Overhaul layout engine #20412

UI: Overhaul layout engine #20412

Conversation

ndelangen commented Dec 25, 2022 • edited by cdedreuille Loading

What we 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

ndelangen commented Dec 25, 2022

ghengeveld commented Dec 25, 2022

IanVS left a comment

Choose a reason for hiding this comment

shilman commented Dec 26, 2022 • edited Loading

JReinhold Sep 18, 2023

Choose a reason for hiding this comment

JReinhold Sep 18, 2023

Choose a reason for hiding this comment

JReinhold Sep 18, 2023 • edited Loading

Choose a reason for hiding this comment

ndelangen commented Sep 19, 2023

ndelangen commented Dec 25, 2022 •

edited by cdedreuille

Loading

shilman commented Dec 26, 2022 •

edited

Loading

JReinhold Sep 18, 2023 •

edited

Loading