[Bug]: showPanel: false not working (v8.0.0-beta.0)

[aaronadamsCA]

Describe the bug

.storybook/manager.ts

import { addons } from "@storybook/manager-api";
import { create } from "@storybook/theming/create";

addons.setConfig({
  showPanel: false,
  theme: create({
    base: "dark",
  }),
});

After upgrading to v8.0.0-beta.0, the addons panel appears when I start Storybook, even though I've turned it off.

I still get a dark theme, which indicates manager.ts is still being read and understood; it's just the showPanel: false setting that isn't being respected.

To Reproduce

https://stackblitz.com/edit/github-izp6au-fo1t1m?file=.storybook%2Fmanager.ts

StackBlitz takes about a year to run Storybook, but the issue does reproduce. You'll have to open up the right pane wide enough to confirm.

System

No response

Additional context

No response

[vanessayuenn]

@aaronadamsCA thanks for trying out Storybook 8 beta! Indeed, starting from Storybook 8, showPanel is no longer a valid option. It has instead been split out to bottomPanelHeight: number and rightPanelWidth: number, where the numbers represents the size of the panel in pixels. Here is the relevant migration notes section, and the API docs.

[aaronadamsCA]

I humbly submit that MIGRATION.md has grown way, way too long! Missing that section is completely on me—except I didn't even realize I'd missed it.

[gossi]

I followed the bug report to this discussion and the new API is not working for me.

I set bottomPanelHeight: 350 for one story and bottomPanelHeight: 0 for another in the same file. I cannot say when storybook will give the panel some height or not, but it would show the panel for both stories or it would hide it for both, but wouldn't switch between.

Second, the API is somewhat inconsistent, no? I can set:

export default {
  // ...
  parameters: {
    options: {
      rightPanelWidth: 200,
      bottomPanelHeight: 350
    }
  }
};

"Oh yes, please do both!" - I assume some field takes precedence but that is not visible to the user as per API.

A more prescriptive API is this:

export default {
  // ...
  parameters: {
    options: {
      panelSize: 200, // similar to flex-basis
      panelPosition: 'right'
    }
  }
};

I would make it:

panelSize: number | boolean;

• number - giving an explicit size over the control
• boolean - true - show it, to whatever size it was before and false to hide it

And for most stories I've written I actually didn't care that much about the size. This API would benefit both use-cases, while giving guarantees about what is actually happening.

[aaronadamsCA]

I will add my +1 that the new "improved" API for this is very clearly worse than before!