Add docs for links in collections and client side routing guide #5078
Conversation
| @@ -178,7 +178,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt | |||
| } | |||
| }; | |||
|
|
|||
| let linkProps = getSyntheticLinkProps(node.props); | |||
| let linkProps = itemStates.hasAction ? getSyntheticLinkProps(node.props) : {}; | |||
There was a problem hiding this comment.
Means data-href only applies when nothing is selected (in which case the action applies). This allows the cursor to change to pointer when it's actually a link.
| // Use props instead of state here. We don't want this to change due to long press. | ||
| let selectionBehavior = props.selectionBehavior || 'toggle'; | ||
| let linkBehavior = props.linkBehavior || (selectionBehavior === 'replace' ? 'action' : 'override'); | ||
| if (selectionBehavior === 'toggle' && linkBehavior === 'action') { |
There was a problem hiding this comment.
Fixed a bug that prevented long press on touch to select from working properly.
| @@ -72,7 +76,7 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe | |||
| let {metaKey, ctrlKey, altKey, shiftKey} = modifiers; | |||
| // WebKit does not support firing click events with modifier keys, but does support keyboard events. | |||
| // https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184 | |||
| let event = isWebKit() && process.env.NODE_ENV !== 'test' | |||
| let event = isWebKit() && isMac() && process.env.NODE_ENV !== 'test' | |||
There was a problem hiding this comment.
Fixed a bug causing VoiceOver on iOS not to be able to click links.
| <Item href="https://google.com/" target="_blank">Google</Item> | ||
| <Item href="https://microsoft.com/" target="_blank">Microsoft</Item> | ||
| </ListBox> | ||
| ``` |
There was a problem hiding this comment.
I don't like this example because you probably shouldn't use a listbox if you just have a list of links that doesn't support selection. But the example where the links drive the selection state via a client side router would be much larger...
|
|
||
| ```tsx example | ||
| <Picker label="Project"> | ||
| <Item href="https://example.com/" target="_blank">Create new…</Item> |
There was a problem hiding this comment.
Do we want to encourage this pattern?
There was a problem hiding this comment.
I think probably not... though cat may already be out of the bag in regards to this pattern?
Maybe direct people to combobox for this?
There was a problem hiding this comment.
Historically we've discouraged this kind of pattern but it does feel like a pretty common use case. I'm fine with the example as is since I've seen other teams already implement something like this with a custom dummy item.
|
Build successful! 🎉 |
# Conflicts: # packages/react-aria-components/src/index.ts
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Co-authored-by: Robert Snow <rsnow@adobe.com>
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
|
||
| ```tsx example | ||
| <Picker label="Project"> | ||
| <Item href="https://example.com/" target="_blank">Create new…</Item> |
There was a problem hiding this comment.
Historically we've discouraged this kind of pattern but it does feel like a pretty common use case. I'm fine with the example as is since I've seen other teams already implement something like this with a custom dummy item.
| if (router) { | ||
| contents = <RouterProvider {...router}>{contents}</RouterProvider>; | ||
| } |
There was a problem hiding this comment.
Ahhh, I was previously concerned that we weren't grabbing the router from the previous Provider's context but this check should work just fine
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } @react-aria/utilsuseFormReset-
+shouldClientNavigate {
+ link: HTMLAnchorElement
+ modifiers: Modifiers
+ returnVal: undefined
+}@react-spectrum/providerProviderContext ProviderProps {
breakpoints?: Breakpoints = {S:380,M:768,L:1024}
children: ReactNode
colorScheme?: ColorScheme
defaultColorScheme?: ColorScheme = 'light'
isDisabled?: boolean
isEmphasized?: boolean
isQuiet?: boolean
isReadOnly?: boolean
isRequired?: boolean
locale?: string = 'en-US'
+ router?: Router
scale?: Scale
theme?: Theme
validationState?: ValidationState
} |
Docs for #4993.
Open questions:
RouterProviderin RSP, or add thenavigateprop toProvider? Right now I also have a separate "Client side routing" guide in RSP, with content mostly copied from React Aria. If we merged with Provider, I guess we could put that in the Provider docs instead?<a>element would mean updating all of the code examples.