feature: Create Search Results component

eryc-cc commented 1 year ago

Summary

We need a "Search Results" box. We can use Radix UI for this, since they already have accessibility figured out.

Inspect this Figma Frame

Once the user types on the search input, the box will open to show the results.

Note: We might have different UI for each type of result, eg:

If we're showing repositories, we might have Repo Title, Repo PR
If we're showing members, we might have Profile Picture, Name, Description
If we're showing PRs, we might have Icon (open/closed/merged...), PR name, number of commits, etc.

cc @SunGoldTech @brandonroberts

The Results scoped in this issue are for repositories, but we should allow other types of components to be added to the results.

Results States:

Default: The default repository in Preview Image below
Hover/Focus: Orange repository in Preview Image below

Props for Repository Results:

Profile image
Org/User Name text
Repository Name text
Open Issues number
Open PRs number

Preview:

Screen Shot 2022-10-21 at 3 49 16 PM

OgDev-01 commented 1 year ago

We need a "Search Results" box. We can use Radix UI for this since they already have accessibility figured out.

@pixelsbyeryc, don't know if I'm wrong on this one, but radix UI provides limited components with accessibility... and I'm not sure how to use in achieving a component not listed in their docs. Can you give more context on achieving this with radix?

eryc-cc commented 1 year ago

@SunGoldTech I would use the same component that Radix uses to build their documentation search. If you type anything, you'll see the results. That's the type of navigation/functionality we want.

We're searching, and getting a list of results under a "dropdown"

@brandonroberts @0-vortex can Sunday use the dropdown menu to build it?

0-vortex commented 1 year ago

@SunGoldTech I would use the same component that Radix uses to build their documentation search. If you type anything, you'll see the results. That's the type of navigation/functionality we want.

We're searching, and getting a list of results under a "dropdown"

@brandonroberts @0-vortex can Sunday use the dropdown menu to build it?

My natural response is "sure" 🍕

brandonroberts commented 1 year ago

Seems reasonable to me

OgDev-01 commented 1 year ago

In that case, I'll look into it 😎😎

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.16.0-beta.13 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.16.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

open-sauced / app