UI: Allow showing or hiding the addon panel

[Sidnioulz]

Closes #14442

What I did

Added the same API endpoint for the addon panel as for the sidebar and toolbar, so it can be hidden for specific stories.

This makes sense for documentation workflows, for kitchen sink stories where all variants are grouped together, and for some real-world showcase stories with fixed args.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Caution

Not automatically tested. Same as for showSidebar and showToolbar, we no longer have good examples on how to test the whole manager UI with a mocked API like we had in SB 7.

Manual testing

1. Add the following to code/.storybook/manager.tsx:

addons.setConfig({
  layoutCustomisations: {
    showPanel(state, defaultValue) {
      const tags = state.index?.[state.storyId]?.tags ?? [];

      if (tags.includes('showcase')) {
        return false;
      }

      return defaultValue;
    },
  },
});

2. Add the 'autodocs' tag to code/core/src/components/components/IconButton/IconButton.stories.tsx on line 12
3. Go to http://localhost:6006/?path=/story/components-iconbutton--types
4. Notice the addon panel is hidden!

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-storybook/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>

Summary by CodeRabbit

• New Features
  • Add per-story control of the addon panel visibility via layoutCustomisations.showPanel, with sensible defaults when unspecified.
  • Panel layout updates respect the customised visibility while keeping default behavior unchanged for existing setups.
• Refactor
  • Rename configuration key from layout to layoutCustomisations, grouping showSidebar, showToolbar, and the new showPanel.
• Documentation
  • Update UI customization guide to cover showPanel with parameter details.
  • Add code snippets showing how to hide the panel for tagged stories (e.g., “showcase”, “kitchensink”).

[greptile-apps]

_{6 files reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f71856f

Command	Status	Duration	Result
nx run-many -t build --parallel=15	✅ Succeeded	7s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-24 13:57:05 UTC

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Adds a customizable showPanel control across manager API and UI: introduces API_LayoutCustomisations.showPanel, a SubAPI method getShowPanelWithCustomisations, integrates it in Layout rendering to compute panel visibility, updates addon config typing to layoutCustomisations with showPanel, and documents usage with examples and guides.

Changes

Cohort / File(s)	Summary
Manager API: layout customisation hook code/core/src/manager-api/modules/layout.ts	Adds SubAPI.getShowPanelWithCustomisations(showPanel: boolean) => boolean. Implements logic to consult state.layoutCustomisations.showPanel(state, showPanel) when provided; otherwise returns input. Adds documentation comment.
Manager UI: Layout usage code/core/src/manager/components/layout/Layout.tsx	Uses api.getShowPanelWithCustomisations to derive customisedShowPanel from isPanelShown. Replaces previous showPanel usage. Simplifies grid logic: panel visibility controlled solely by showPanel; panelless layout when false, otherwise based on panelPosition.
Types: API customisations code/core/src/types/modules/api.ts	Extends API_LayoutCustomisations with optional showPanel?: (state, defaultValue) => boolean
Types: Addon config surface code/core/src/types/modules/addons.ts	Renames layout → layoutCustomisations and adds optional showPanel alongside showSidebar/showToolbar in Addon_Config.
Docs: Snippets docs/_snippets/storybook-manager-addon-panel-hide-on-showcase.md	Adds JS/TS examples showing layoutCustomisations.showPanel to hide panel for tagged stories (e.g., showcase, kitchensink).
Docs: Features & behavior guide docs/configure/user-interface/features-and-behavior.mdx	Updates UI customisation docs to include showPanel. Adds section detailing parameters and references snippets. Adjusts examples and identifiers; inserts additional CodeSnippets.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User as User
  participant Layout as Manager UI Layout
  participant API as Manager SubAPI (layout)
  participant State as Manager State
  participant CustomFn as layoutCustomisations.showPanel

  User->>Layout: Navigate/change story
  Layout->>API: getShowPanelWithCustomisations(isPanelShown)
  API->>State: Read state.layoutCustomisations.showPanel
  alt Custom function provided
    API->>CustomFn: invoke(state, defaultValue)
    CustomFn-->>API: boolean | undefined
    alt returns boolean
      API-->>Layout: customised boolean
    else returns undefined/null
      API-->>Layout: defaultValue
    end
  else No custom function
    API-->>Layout: defaultValue
  end
  Layout->>Layout: Compute grid areas based on showPanel/panelPosition
  Layout-->>User: Render with/without addon panel

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A twitch of whiskers, panels hide and show,
I nibble configs where custom breezes blow.
With gentle hops through stateful clover green,
A toggle here—now cleaner grids are seen.
Carrot-orange tabs? Only when we choose—
In stories’ fields, the rabbit sets the views. 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	The PR introduces changes beyond adding per-story panel control: it renames the public Addon_Config.layout field to layoutCustomisations and adjusts layout grid logic (removing an explicit docs viewMode check), both of which may alter public API surface or default behavior and are not strictly required to satisfy the linked issue. Renaming a public config property is a breaking API change unless an alias/deprecation path is provided, and the altered grid logic could change how the panel behaves in docs view. These modifications appear out-of-scope for the narrow feature request and should be flagged for either justification or separation into a dedicated breaking-change/migration PR.	Revert or make the Addon_Config property change additive (keep layout as an alias and introduce layoutCustomisations with a deprecation warning), restore or explicitly document the previous docs-view behavior and add tests asserting it, and move public-surface renames or layout-default changes into a separate PR with clear migration notes and changelog entries.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues Check	✅ Passed	The changes implement a manager API (layoutCustomisations.showPanel and SubAPI.getShowPanelWithCustomisations) and accompanying docs/snippets that let the manager decide panel visibility per story by inspecting state (e.g., tags), which satisfies the linked issue's primary request to hide the addon panel on a per-story basis. The PR includes examples that demonstrate hiding the panel for specific stories and adds the necessary type and API surface to make this programmatic. However, it does not add an explicit story-level parameter like AllIcons.parameters = { showPanel: false } nor does it add per-tab hiding, so those specific alternatives requested in the issue remain unimplemented.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title is a concise, single sentence that accurately captures the primary change — adding UI support to show or hide the addon panel. It directly reflects the PR objectives (manager-side API and docs for per-story panel visibility) and uses clear, specific wording without extraneous details. The phrasing is appropriate for changelogs and repository history and is easy for teammates to scan.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sidnioulz/issue-14442-showAddonPanel

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sidnioulz]

I believe there was an error in the previous commit introducing layoutCustomisations and this should be the correct API key.

@ndelangen seeing as you know the API, do you agree this is correct?