feat: Add support for animated selection indicators #8876
Conversation
|
Build successful! 🎉 |
| } | ||
| ``` | ||
|
|
||
| ### Animation |
There was a problem hiding this comment.
Wasn't quite sure where to document this. For Tabs I just built the animation into the starter kits so it is present in all the examples. For ToggleButtonGroup, it doesn't really make sense for multi-selection, so not sure if it should be in the starter. So I created a separate example here to show it. Thoughts?
There was a problem hiding this comment.
For posterity, we discussed this as team and figured that we'd have a single example in the Selection page and then link to it in other pages like Tree. This example will stay as is since this seems like a more common use case for this kind of animation.
There was a problem hiding this comment.
Haha, the animation for changing the orientation of Tabs in s2 is pretty amusing
Include for Radios? they only have single selection as well, and i could see someone building a segmented control equivalent with that instead, or those carousel controls since they nicely change selection on focus.
| border-inline-end: 1px solid gray; | ||
|
|
||
| .react-aria-Tab { | ||
| .react-aria-SelectionIndicator { |
There was a problem hiding this comment.
move this css farther up the page?
| } | ||
| ``` | ||
|
|
||
| ### Animation |
There was a problem hiding this comment.
For posterity, we discussed this as team and figured that we'd have a single example in the Selection page and then link to it in other pages like Tree. This example will stay as is since this seems like a more common use case for this kind of animation.
devongovett
dismissed stale reviews from snowystinger and LFDanLu
via
80b9c16
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:SelectionIndicator+SelectionIndicator {
+ children?: ChildrenOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps>
+ isSelected?: boolean
+ style?: StyleOrFunction<SharedElementRenderProps>
+}/react-aria-components:SelectionIndicatorContext+SelectionIndicatorContext {
+ UNTYPED
+}/react-aria-components:SharedElementTransition+SharedElementTransition {
+ children: ReactNode
+}/react-aria-components:SharedElement+SharedElement {
+ children?: ChildrenOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps>
+ isVisible?: boolean
+ name: string
+ style?: StyleOrFunction<SharedElementRenderProps>
+}/react-aria-components:SelectionIndicatorProps+SelectionIndicatorProps {
+ children?: ChildrenOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps>
+ isSelected?: boolean
+ style?: StyleOrFunction<SharedElementRenderProps>
+}/react-aria-components:SharedElementTransitionProps+SharedElementTransitionProps {
+ children: ReactNode
+}/react-aria-components:SharedElementProps+SharedElementProps {
+ children?: ChildrenOrFunction<SharedElementRenderProps>
+ className?: ClassNameOrFunction<SharedElementRenderProps>
+ isVisible?: boolean
+ name: string
+ style?: StyleOrFunction<SharedElementRenderProps>
+}/react-aria-components:SharedElementRenderProps+SharedElementRenderProps {
+ isEntering: boolean
+ isExiting: boolean
+} |
| collection={state.collection} | ||
| persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} | ||
| scrollRef={ref} /> | ||
| <SharedElementTransition> |
There was a problem hiding this comment.
should this be wherever there is a GroupSelectionManager? or setup by Section?
This generalizes the animation code from S2 Tabs and SegmentedControl into a reusable
SelectionIndicatorcomponent. This is rendered within a selectable item, and only mounts when that item is selected. When the selection changes, we store a snapshot of the previous item's rectangle and style attributes, and the new item animates from this state to its current state. This supports any CSS property listed intransition-property.SelectionIndicatoris actually a shorthand for an even more general pattern called aSharedElementTransition. This creates a scope within which one or moreSharedElementcomponents can be rendered, each with a uniquename. When aSharedElementmoves to a different parent within the same scope, it is automatically animated.SharedElementalso supports enter and exit transitions when the first instance mounts or the last instance unmounts.