Skip to content

Conversation

@reidbarber
Copy link
Member

@reidbarber reidbarber commented Oct 29, 2025

Adds an icons tag to the search menu where you can search icons and copy the imports (same as on the Icons page).

Also adds skeleton loading placeholders as the suspense fallback.

We may want to add vertical divider before the Icons tag in the menu to indicate that icons won't show up in the "All" search, open to feedback on this.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Open the search menu, select the Icons tag, and begin searching: https://reactspectrum.blob.core.windows.net/reactspectrum/dff65bb6d444e26b0914dd4f90c440419d2978e7/s2-docs/index.html

🧢 Your Project:

yihuiliao
yihuiliao previously approved these changes Oct 30, 2025
Copy link
Member

@yihuiliao yihuiliao left a comment

Choose a reason for hiding this comment

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

I think a vertical divider would be nice because otherwise it's a little weird. So something to indicate some separation would be helpful.

Have we thought about adding something like a toast or tooltip to indicate that you've copied the import when you click on the icon? Otherwise I feel like it's unclear what happens when you select an icon

@rspbot
Copy link

rspbot commented Oct 30, 2025

@rspbot
Copy link

rspbot commented Oct 31, 2025

@yihuiliao
Copy link
Member

hmm it's still a bit hard to see in dark mode even with the additional thickness (better tho). if you think it's alright then happy to approve but yeah this is what it looks like
Screenshot 2025-10-31 at 11 03 31 AM

@reidbarber
Copy link
Member Author

@yihuiliao I agree, but also size="L" seems a bit much for how small the height is.

Screenshot 2025-10-31 at 2 52 04 PM

I'll try adding something custom that's somewhere in between.

@snowystinger
Copy link
Member

I think the current thickness is fine, it's made a little more obvious by the additional padding around it. You can compare to the S1 Toolbar we have, because that's what this appears to be now

snowystinger
snowystinger previously approved these changes Nov 2, 2025
@rspbot
Copy link

rspbot commented Nov 3, 2025

import {ComponentCardView} from './ComponentCardView';
import {getLibraryFromPage, getLibraryFromUrl} from './library';
import {iconAliases} from './iconAliases.js';
import {iconList, IconSearchSkeleton} from './IconSearchView';
Copy link
Member

Choose a reason for hiding this comment

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

I think you need to move IconSearchSkeleton into a separate file otherwise the lazy import below won't do anything (it already got bundled in synchronously).

Copy link
Member Author

Choose a reason for hiding this comment

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

Will fix in a follow-up

@reidbarber reidbarber added this pull request to the merge queue Nov 3, 2025
Merged via the queue into main with commit 31b8bb5 Nov 3, 2025
33 checks passed
@reidbarber reidbarber deleted the s2-docs-icons-search-menu branch November 3, 2025 20:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants