Skip to content

Conversation

@ghengeveld
Copy link
Member

@ghengeveld ghengeveld commented Dec 27, 2025

Closes #33279

What I did

Added checklistWidget feature to support disabling the Checklist sidebar widget through .storybook/main.ts:

export default defineMain({
  // ... other config
  features: {
    checklistWidget: false,
  },
});

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

  • Open a Storybook and ensure you see the checklist widget (open the Guide page to enable if needed)
  • Open .storybook/main.ts/js and update the features config according to the snippet above.
  • Restart Storybook and confirm the widget is no longer displayed, and the link to enable/disable it on the Guide page is no longer present.
  • Set checklistWidget to true, restart Storybook and confirm it's all displayed as normal.

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 publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • New Features

    • Added a feature flag (sidebarOnboardingChecklist, enabled by default) to toggle the onboarding checklist in the sidebar and guide pages.
  • Tests / Stories

    • Added a story variant demonstrating the UI with the onboarding checklist disabled.

✏️ Tip: You can customize this high-level summary in your review settings.

@nx-cloud
Copy link

nx-cloud bot commented Dec 27, 2025

View your CI Pipeline Execution ↗ for commit 72051d2

Command Status Duration Result
nx run-many -t compile,check,knip,test,pretty-d... ✅ Succeeded 8m 54s View ↗

☁️ Nx Cloud last updated this comment at 2026-01-08 13:02:43 UTC

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 27, 2025

📝 Walkthrough

Walkthrough

Adds a new feature flag sidebarOnboardingChecklist (default true) to the config and common preset, and gates rendering of the sidebar onboarding checklist widget and the guide page checklist footer behind that flag.

Changes

Cohort / File(s) Summary
Feature flag type
code/core/src/types/modules/core-common.ts
Added sidebarOnboardingChecklist?: boolean to StorybookConfigRaw.features with JSDoc (default true).
Preset default
code/core/src/core-server/presets/common-preset.ts
Included sidebarOnboardingChecklist: true in the returned features preset.
Sidebar UI
code/core/src/manager/components/sidebar/Sidebar.tsx
Added feature-flag gate: ChecklistWidget now requires global.FEATURES?.sidebarOnboardingChecklist !== false in addition to existing conditions.
Guide page UI
code/core/src/manager/settings/GuidePage.tsx
Wrapped rendering of the checklist footer in a global.FEATURES?.sidebarOnboardingChecklist !== false guard.
Sidebar stories
code/core/src/manager/components/sidebar/Sidebar.stories.tsx
Added SimpleNoChecklist story that temporarily disables global.FEATURES.sidebarOnboardingChecklist for testing.

Sequence Diagram(s)

(omitted — changes are UI gating and do not introduce a multi-component sequential flow worth diagramming)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

✨ Finishing touches
  • 📝 Generate docstrings

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 10787ac and 72051d2.

📒 Files selected for processing (5)
  • code/core/src/core-server/presets/common-preset.ts
  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
  • code/core/src/manager/components/sidebar/Sidebar.tsx
  • code/core/src/manager/settings/GuidePage.tsx
  • code/core/src/types/modules/core-common.ts
🚧 Files skipped from review as they are similar to previous changes (4)
  • code/core/src/manager/settings/GuidePage.tsx
  • code/core/src/manager/components/sidebar/Sidebar.tsx
  • code/core/src/types/modules/core-common.ts
  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

  • code/core/src/core-server/presets/common-preset.ts
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

  • code/core/src/core-server/presets/common-preset.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

  • code/core/src/core-server/presets/common-preset.ts
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/core-server/presets/common-preset.ts
code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

  • code/core/src/core-server/presets/common-preset.ts
🧠 Learnings (1)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: normal
  • GitHub Check: nx
  • GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/core/src/core-server/presets/common-preset.ts (1)

212-212: Feature flag properly implemented with type definitions and consumption sites verified.

The sidebarOnboardingChecklist feature flag is correctly integrated across the codebase:

  • Type definition in core-common.ts (line 461) properly declares the optional boolean flag
  • Feature preset sets default to true, maintaining backward compatibility
  • Consumption sites in GuidePage.tsx and Sidebar.tsx use consistent null-safe pattern: global.FEATURES?.sidebarOnboardingChecklist !== false
  • Test coverage includes the feature flag toggle in Sidebar.stories.tsx

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

@ghengeveld ghengeveld force-pushed the checklist-widget-feature-config branch from fc2463f to 7771d1f Compare December 27, 2025 16:08
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
code/core/src/manager/components/sidebar/Sidebar.stories.tsx (1)

211-222: LGTM! The story correctly tests the disabled checklist widget.

The implementation follows the established pattern from SimpleInProduction and properly saves/restores the global feature flags. The cleanup function ensures the test doesn't affect other stories.

Optional: Add play function to verify checklist is hidden

Consider adding a play function to programmatically verify the checklist widget is not rendered when the feature is disabled:

 export const SimpleNoChecklist: Story = {
   args: {
     showCreateStoryButton: false,
   },
   beforeEach: () => {
     const features = global.FEATURES;
     global.FEATURES = { ...features, checklistWidget: false };
     return () => {
       global.FEATURES = features;
     };
   },
+  play: async () => {
+    await waitFor(
+      () => expect(document.getElementById('storybook-checklist-widget')).toBeNull(),
+      { timeout: 2000 }
+    );
+  },
 };

This would make the test more robust by explicitly asserting the expected behavior, complementing visual regression testing.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7771d1f and 10787ac.

📒 Files selected for processing (1)
  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
🧠 Learnings (5)
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.

Applied to files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
📚 Learning: 2025-09-18T20:51:06.618Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/viewport/components/Tool.tsx:38-39
Timestamp: 2025-09-18T20:51:06.618Z
Learning: In viewport tool code, when using the `useGlobals` hook from storybook/manager-api, the third returned value `storyGlobals` is guaranteed by TypeScript to be defined (not undefined/null), making the `in` operator safe to use without additional null checks.

Applied to files:

  • code/core/src/manager/components/sidebar/Sidebar.stories.tsx
🧬 Code graph analysis (1)
code/core/src/manager/components/sidebar/Sidebar.stories.tsx (2)
code/core/src/csf/csf-factories.ts (1)
  • Story (123-155)
code/core/src/core-server/presets/common-preset.ts (1)
  • features (199-213)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: normal
  • GitHub Check: nx
  • GitHub Check: Core Unit Tests, windows-latest

@ndelangen ndelangen merged commit 81936bd into next Jan 9, 2026
69 checks passed
@ndelangen ndelangen deleted the checklist-widget-feature-config branch January 9, 2026 11:32
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.

4 participants