UI: Add VRTs to FileSearchModal in light theme

[Sidnioulz]

What I did

https://github.com/storybookjs/storybook/pull/new/a11y/file-search-modal-light-vrt

Checklist for Contributors

Testing

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

• stories

Manual testing

http://localhost:6006/?path=/story/manager-sidebar-filesearchmodal--with-search-results-and-error-light

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

• Tests
  • Added light theme variants to component test stories for comprehensive theme coverage across different UI states.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 83b2b48

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

---

☁️ Nx Cloud last updated this comment at 2025-11-12 12:31:59 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds seven light-themed story variants to the FileSearchModal component stories by creating new exports that extend existing stories with a light theme global override. No changes to core story logic or component behavior.

Changes

Cohort / File(s)	Summary
Storybook Light Theme Variants code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx	Added seven new story exports (InitialStateLight, LoadingLight, LoadingWithPreviousResultsLight, EmptyLight, WithSearchResultsLight, WithSearchResultsAndErrorLight, WithSearchResultsAndMultiLineErrorLight) that extend base stories with globals: { sb_theme: 'light' } using Object.assign.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5–10 minutes

• Repetitive pattern across all seven variants with consistent structure
• No logic changes or component modifications
• Straightforward theme override application via Object.assign
• May require verification that theme globals are correctly applied to each story variant

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx (1)

44-46: LGTM! Consider using spread syntax for consistency.

The light-themed story variants correctly extend their base stories with the light theme global. The approach is clear and achieves the PR's objective of adding VRTs for the light theme.

For better consistency with modern JavaScript practices, consider using the spread operator instead of Object.assign:

-export const InitialStateLight = Object.assign({}, InitialState, {
-  globals: { sb_theme: 'light' },
-});
+export const InitialStateLight = {
+  ...InitialState,
+  globals: { sb_theme: 'light' },
+};

Additionally, the formatting varies between single-line and multi-line styles across the variants. Standardizing on one format would improve consistency.

Also applies to: 57-57, 68-70, 81-81, 110-112, 123-125, 139-143

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8a6dc2e and 83b2b48.

📒 Files selected for processing (1)

• code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx (7 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,json,html,ts,tsx,mjs}

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

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx

**/*.{ts,tsx,js,jsx,mjs}

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

Export functions from modules when they need to be unit-tested

Files:

• code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx

code/**/*.{ts,tsx,js,jsx,mjs}

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

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

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

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/FileSearchModal.stories.tsx

🧠 Learnings (2)

📓 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.

📚 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/FileSearchModal.stories.tsx

🧬 Code graph analysis (1)

code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx (1)

code/core/src/manager/components/sidebar/FileSearchList.stories.tsx (1)

• Empty (31-38)

⏰ 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: Danger JS
• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest