Skip to content
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

Merged
merged 13 commits into from
Oct 17, 2023
Merged

Add styled examples for React Aria Components #5226

merged 13 commits into from
Oct 17, 2023

Conversation

devongovett
Copy link
Member

@devongovett devongovett commented Oct 9, 2023

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.

@rspbot
Copy link

rspbot commented Oct 9, 2023


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">
Copy link
Member Author

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?

Copy link
Member

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

Copy link
Member Author

@devongovett devongovett Oct 10, 2023

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", "..."],
Copy link
Member Author

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.

@rspbot
Copy link

rspbot commented Oct 9, 2023

packages/dev/docs/src/docs.css Show resolved Hide resolved
@@ -393,6 +394,10 @@ A `GridList` uses the following components, which may also be used standalone or

</section>

## Examples

<ExampleList tag="gridlist" />
Copy link
Member

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to standardize/match the height of the card image across these two
Screenshot 2023-10-10 at 11 18 31 AM


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">
Copy link
Member

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

reidbarber
reidbarber previously approved these changes Oct 11, 2023
Copy link
Member

@reidbarber reidbarber left a 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.

@rspbot
Copy link

rspbot commented Oct 13, 2023

@rspbot
Copy link

rspbot commented Oct 13, 2023

reidbarber
reidbarber previously approved these changes Oct 13, 2023
snowystinger
snowystinger previously approved these changes Oct 16, 2023
@rspbot
Copy link

rspbot commented Oct 16, 2023

@rspbot
Copy link

rspbot commented Oct 17, 2023

@rspbot
Copy link

rspbot commented Oct 17, 2023

@rspbot
Copy link

rspbot commented Oct 17, 2023

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

@devongovett devongovett merged commit 0ea96bb into main Oct 17, 2023
26 checks passed
@devongovett devongovett deleted the rac-examples2 branch October 17, 2023 00:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants