docs(Autocomplete): add RAC Autocomplete docs #7784
Conversation
There was a problem hiding this comment.
somehow we need to find a way to emphasize that Autocomplete works with both TextField and SearchField, and with both Menu and ListBox. Right now the examples suggest it works only with SearchField and Menu. Maybe we should mix them up a bit and provide some more varied examples that people might google for as well? Searchable menu, Command palette, Filterable Select (like the story we have), etc.
| Autocomplete follows the [Collection Components API](collections.html), accepting both static and dynamic collections. | ||
| The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections, | ||
| as shown below, can be used when the options come from an external data source such as an API call, or update over time. | ||
|
|
There was a problem hiding this comment.
this is really about menu/listbox rather than autocomplete itself... we may want to emphasize somehow that Autocomplete works with Menu or ListBox and this isn't specific to either one of those or autocomplete itself.
The Reusable Wrappers example also sort of suggests it requires a Menu. Not sure what the best way is to show that it works with both...
reidbarber
changed the title
|
|
||
| # Command Palette | ||
|
|
||
| A Command Palette is an interface that allows users to quickly run commands or navigate to content within an application. This example uses the [`Autocomplete`](../Autocomplete.html) component from React Aria Components to filter a list of commands and display them in a [`Menu`](../Menu.html). The [`TextField`](../TextField.html) is used to capture user input and filter the list of available commands. |
There was a problem hiding this comment.
This is a little long. Maybe create a sub-heading ## Example like some of the other example pages and put the second sentence on under that?
|
|
||
| return ( | ||
| <div className="bg-linear-to-r from-indigo-500 to-violet-500 p-8 h-[340px] rounded-lg flex flex-col items-center justify-center"> | ||
| <div className="flex flex-col gap-1 w-[320px] rounded-md bg-white shadow-lg"> |
There was a problem hiding this comment.
Do we want to make this into a Dialog that you could open with Command K (or by clicking a button)?
| <Menu /> {/* or <ListBox /> */} | ||
| </Autocomplete> | ||
| ``` | ||
|
|
There was a problem hiding this comment.
I think we need to add outline: none by default in SearchField.mdx to prevent the browser default focus ring from showing up (except when [data-focused])?
This reverts commit 4710c1b.
…um into rac-autocomplete-docs
| return ( | ||
| <div className="bg-linear-to-r from-indigo-500 to-violet-500 p-8 h-[340px] rounded-lg flex items-center justify-center"> | ||
| {isOpen ? | ||
| <div className="flex flex-col gap-1 w-[320px] rounded-md bg-white shadow-lg"> |
There was a problem hiding this comment.
Should we use the Modal/Dialog components for this? Might be a bit more like a real implementation that way
| </Menu> | ||
| </Autocomplete> | ||
| </div> | ||
| : <span className="text-white text-lg">Press <kbd>⌘</kbd> + <kbd>K</kbd> to open the command palette.</span> |
There was a problem hiding this comment.
We should have this be a button (with a DialogTrigger I guess) so you can also open it on touch devices
## API Changes
react-aria-components/react-aria-components:UNSTABLE_Autocomplete-UNSTABLE_Autocomplete {
- children: ReactNode
- defaultInputValue?: string
- filter?: (string, string) => boolean
- inputValue?: string
- onInputChange?: (string) => void
- slot?: string | null
-}/react-aria-components:UNSTABLE_AutocompleteContext-UNSTABLE_AutocompleteContext {
- UNTYPED
-}/react-aria-components:UNSTABLE_AutocompleteStateContext-UNSTABLE_AutocompleteStateContext {
- UNTYPED
-}/react-aria-components:Autocomplete+Autocomplete {
+ children: ReactNode
+ defaultInputValue?: string
+ filter?: (string, string) => boolean
+ inputValue?: string
+ onInputChange?: (string) => void
+ slot?: string | null
+}/react-aria-components:AutocompleteContext+AutocompleteContext {
+ UNTYPED
+}/react-aria-components:AutocompleteStateContext+AutocompleteStateContext {
+ UNTYPED
+} |
| <div className="bg-linear-to-r from-indigo-500 to-violet-500 p-8 h-[340px] rounded-lg flex items-center justify-center"> | ||
| <DialogTrigger isOpen={isOpen} onOpenChange={setOpen}> | ||
| <Button className="inline-flex items-center justify-center rounded-xl bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"> | ||
| Press here or type <kbd class="px-2 py-1 text-xs font-semibold border border-gray-200 rounded-lg m-2">Ctrl</kbd> + <kbd class="px-2 py-1 text-xs font-semibold border border-gray-200 rounded-lg m-2">K</kbd> to open command palette |
There was a problem hiding this comment.
on Mac it appears it's actually Cmd + k
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: