UI: Review FileSearchList tooltip behavior and align style with sidebar

[Sidnioulz]

Caution

Must base onto next once the IconButton branch is merged! ⚠️⚠️⚠️

What I did

Tooltip

Tidied up FileSearchList's UI a little bit. There's an error tooltip appearing in some entries that can't be selected/expanded, that only appears when clicking the seemingly disabled entry.

By making the tooltip appear on hover (like we do for disabled buttons elsewhere), we can provide more immediate feedback. Complete change list:

• Changed trigger to hover so I know this is an actual Tooltip when splitting WithTooltip uses between Popover and Tooltip later (actual reason to touch this)
• Added show/hide delays for more immediate feedback
• Shortened copy to match style used in disabled buttons elsewhere
• Aligned positioning to start of trigger
• Removed unnecessary code

UI

What I did:

• Switched chevrons to small variants and aligned sizes to 14px
• Positioned chevrons to left and reworked margins/paddings to match sidebar tree
• Fixed up color of export texts (not quite visible in dark mode but it looked disabled in light mode)
• Switched export icon to match the story icon, not the component one
• Removed chevrons from stories as they are not expandable
• Fixed small CLS on hover on the default export tag (which was due to the chevron insert)

Before

After

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

1. Go to http://localhost:6006/?path=/story/manager-sidebar-filesearchmodal--loading-with-previous-results
2. Play a bit with the UI, compare to sidebar

Documentation

N/A

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>

Greptile Summary

Updated On: 2025-09-03 19:25:08 UTC

This PR introduces UI improvements and architectural changes to Storybook's file search and component selection systems. The changes fall into two main categories:

Tooltip and UI Cleanup

The PR modernizes the FileSearchList component by switching error tooltips from click-triggered to hover-triggered behavior, providing more immediate feedback when users encounter disabled entries. The tooltip improvements include adding show/hide delays, shortening tooltip text, and aligning positioning. Visual enhancements include switching chevron icons to smaller variants, repositioning them to the left to match sidebar tree patterns, fixing text color contrast in dark mode, and replacing component icons with bookmark icons for exports.

Select Component Refactoring

A significant architectural change replaces the WithTooltipPure implementation in the Select component with a custom MinimalistPopover using React Aria libraries. This introduces new dependencies (react-aria-components, @react-aria/utils, react-aria, react-stately) and fundamentally changes how dropdown overlays are rendered - moving from a portal-based tooltip system to a controlled popover implementation with improved keyboard handling and accessibility patterns.

The changes align the file search interface with existing Storybook UI patterns and represent part of a broader effort to distinguish between true tooltips (informational hover overlays) and interactive popovers throughout the codebase.

Confidence score: 3/5

• This PR introduces significant architectural changes in the Select component that could impact dropdown behavior across Storybook
• Score reflects the substantial shift from react-popper-tooltip to React Aria libraries and the complete restructuring of how dropdowns render
• Pay close attention to code/core/src/components/components/Select/Select.tsx for potential keyboard navigation or accessibility regressions

[greptile-apps]

_{4 files reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

[greptile-apps]

logic: Chevrons now appear for all items, even when they have no exports and can't be expanded. This could confuse users since the chevron suggests expandability.

Suggested change

	{itemSelected ? (
	<TreeCollapseIconStyled size={14} />
	) : (
	<TreeExpandIconStyled size={14} />
	)}
	{(searchResult.exportedComponents && searchResult.exportedComponents.length > 0) && (
	itemSelected ? (
	<TreeCollapseIconStyled size={14} />
	) : (
	<TreeExpandIconStyled size={14} />
	)
	)}

[ghengeveld]

I think this is valid. If consistency with the sidebar is what you were after, then items without children shouldn't have a chevron. It seems in the original version the chevron was doing double-duty as an expand indicator as well as a "continue" or "next" icon. That was honestly confusing because you couldn't tell whether clicking a row would generate a story or expand to reveal children. We should fix that. Maybe keep the larger chevron on the right as an indicator for leaf nodes (i.e. this will generate a story). I'd also be fine with some other indicator. Would be even better to get some sort of confirmation screen before actually generating the story. @MichaelArestad WDYT?

[nx-cloud]

View your CI Pipeline Execution ↗ for commit d020218

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

---

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

[ghengeveld]

I think this is valid. If consistency with the sidebar is what you were after, then items without children shouldn't have a chevron. It seems in the original version the chevron was doing double-duty as an expand indicator as well as a "continue" or "next" icon. That was honestly confusing because you couldn't tell whether clicking a row would generate a story or expand to reveal children. We should fix that. Maybe keep the larger chevron on the right as an indicator for leaf nodes (i.e. this will generate a story). I'd also be fine with some other indicator. Would be even better to get some sort of confirmation screen before actually generating the story. @MichaelArestad WDYT?

[Sidnioulz]

@ghengeveld my understanding is that clicking a leaf causes that story to be copied as a basis for the new story? If so, we could use a sort of UI representation that means "duplicate/copy".

I feel the tree structure (now that it's recognisable) already makes it a little bit clear that leaf nodes trigger an action, but not what action will occur. I think we could add a short paragraph above the search bar that tells the user what will happen, e.g.:

Select an existing story to use as a template for the new story.

Adding a paragraph above will make it clearer earlier what users are selecting, with more available real estate, and it won't force us to cram more details into the tree UI and to repeat those details on every leaf node. Though I don't entirely understand how this UI works, it confuses me, so I don't know what copy to provide.