-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add styled examples for React Aria Components #5226
Conversation
Build successful! 🎉 |
|
||
return ( | ||
<div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2"> | ||
<ResizableTableContainer className="max-h-[280px] w-full overflow-auto relative bg-white rounded-lg shadow text-gray-600"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like we have a bug in column resizing where the columns jump to a different size the first time you mouse down. Should I pull this example until we get that fixed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like they go from their assigned default to all being 1FR after the last frozen column (the one we're currently resizing)
I'll look into it this afternoon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have a potential fix locally. I think this particular case is RAC specific because the collection isn't filled until the second render. But looks like we are missing some logic for when the columns change (ie added/removed), which would be general I think.
@@ -9,6 +9,7 @@ | |||
"bundle-text:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"], | |||
"*.{md,mdx}": ["parcel-transformer-mdx-docs"], | |||
"*.svg": ["@parcel/transformer-svg-react"], | |||
"*.global.css": ["parcel-transformer-css-global", "..."], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This hack will go away once parcel-bundler/parcel#9301 lands.
Build successful! 🎉 |
@@ -393,6 +394,10 @@ A `GridList` uses the following components, which may also be used standalone or | |||
|
|||
</section> | |||
|
|||
## Examples | |||
|
|||
<ExampleList tag="gridlist" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just a heads up that after deleting items from the list, focus is lost to the body because the button is hidden
|
||
<section className={styles.cardGroup} data-size="small"> | ||
|
||
<ExampleCard |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
|
||
return ( | ||
<div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2"> | ||
<ResizableTableContainer className="max-h-[280px] w-full overflow-auto relative bg-white rounded-lg shadow text-gray-600"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like they go from their assigned default to all being 1FR after the last frozen column (the one we're currently resizing)
I'll look into it this afternoon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, my only input is that I think the Examples page grid should fill the width, or be centered.
Build successful! 🎉 |
Build successful! 🎉 |
c61de91
Build successful! 🎉 |
Build successful! 🎉 |
Build successful! 🎉 |
## API Changes
unknown top level export { type: 'identifier', name: 'Column' } |
This adds an examples page that includes fully styled examples integrating various libraries. Each example is on a separate page within the docs, and they are also linked to from the relevant component pages. The examples include the tailwind examples from our example app, plus some that I had already built in codesandbox. Moving them into the docs makes them more discoverable, and easier for us to test and maintain.
I have some additional examples in the works which will come later. This initial batch works without any code changes so we should be able to deploy before the next release.