docs: Add examples section #9094
Conversation
| let press = pressScale(domRef, UNSAFE_style); | ||
| if (ElementType === 'div' && !isSkeleton && props.href) { | ||
| // Standalone Card that has an href should be rendered as a Link. | ||
| // NOTE: In this case, the card must not contain interactive elements. |
There was a problem hiding this comment.
We don't really have a way to enforce this...
| let estimatedSize = true; | ||
| if (oldLayoutInfo) { | ||
| height = oldLayoutInfo.rect.height; | ||
| height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth; |
There was a problem hiding this comment.
If the card size changes (e.g. user drags slider in photo library example), re-calculate the height proportionally.
| // Figure out which column to place the item in, and compute its position. | ||
| // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed. | ||
| let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined; | ||
| let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined; |
There was a problem hiding this comment.
Don't preserve the column if the index within the collection changed. When filtering the photo library, the cards were staying where they were previously, resulting in "holes" appearing. We want to re-flow in this case.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
|
||
| # Gesture Driven Sheet | ||
|
|
||
| <PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription> |
There was a problem hiding this comment.
| <PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription> | |
| <PageDescription>An iOS-style gesture driven sheet built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/).</PageDescription> |
|
|
||
| # iOS List View | ||
|
|
||
| <PageDescription>A re-creation of the iOS List View built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription> |
There was a problem hiding this comment.
| <PageDescription>A re-creation of the iOS List View built with React Aria Components, [Framer Motion](https://www.framer.com/motion/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription> | |
| <PageDescription>A re-creation of the iOS List View built with React Aria Components, [Motion](https://motion.dev/), and [Tailwind CSS](https://tailwindcss.com/) with support for swipe gestures, layout animations, and multiple selection mode.</PageDescription> |
| export const keywords = ['react-aria', 'example', 'gridlist', 'gesture', 'framer motion', 'tailwind']; | ||
| export const description = 'A GridList with Framer Motion swipe gestures and layout animations.'; | ||
|
|
||
| # iOS List View |
There was a problem hiding this comment.
not getting a focus ring for the items
There was a problem hiding this comment.
Approving for testing, mainly did a quick sweep of the examples and mentioned fixes, somethings I noticed:
- noticed the code file picker's underline is too wide in the emoji picker example
- the modal sheet example makes the "shell" of the site black even though it isn't open
- the photo library's tree chevrons don't rotate in place, such that they become indented when expanded
- I'm not sure we have an example of a standalone link S2 card? I created one locally to verify the behavior
| @@ -0,0 +1,45 @@ | |||
| import {Layout} from '../../../src/Layout'; | |||
There was a problem hiding this comment.
Thumbnail images in the search menu cards are broken
| let files = await fs.readdir('../../../' + dir); | ||
| return ( | ||
| <div className={style({marginTop: 32, backgroundColor: 'layer-1', borderRadius: 'xl', padding: {default: 12, lg: 24}})}> | ||
| <Files files={files.map(f => path.join(dir, f))} defaultSelected={defaultSelected ? path.join(dir, defaultSelected) : undefined} maxLines={Infinity} /> |
There was a problem hiding this comment.
It might be nice to have more prominent "Download ZIP", "Open in CodeSandbox", etc. buttons on this page instead of just having them in the menu within the code.
| import ogImage from 'url:../../assets/ReactAriaOpenGraph.webp'; | ||
| import reactAriaFavicon from 'url:../../assets/react-aria.ico'; | ||
|
|
||
| export const section = 'Getting started'; |
There was a problem hiding this comment.
It might be nice to link to the example pages next to the examples here.
| export const keywords = ['react-aria', 'example', 'dialog', 'modal', 'sheet', 'motion', 'tailwind']; | ||
| export const description = 'An iOS-style gesture driven modal sheet built with Framer Motion.'; | ||
|
|
||
| # Gesture Driven Sheet |
There was a problem hiding this comment.
The page background is black on page load for me (using MacOS Chrome in light mode).
Adds examples section to new RAC docs. Ports over a few examples from the old docs, and adds a few new ones.
A few other bug fixes are included:
size()macro to returncalcdirectly without wrapping in square brackets, enabling it to be interpolated into CSS strings.font-variation-settingsfrom the Spectrum macro theme now that the Typekit issue has been fixed for a while. This was causing incorrect fonts to display in Tailwind and Vanilla CSS examples which were not overriding it.href. Such cards must not have interactive elements within them.