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 css classnames #1429

Merged
merged 8 commits into from
Mar 4, 2022
Merged

Add css classnames #1429

merged 8 commits into from
Mar 4, 2022

Conversation

jacoblogan
Copy link
Contributor

Description of changes

Update documentation to include target classes of all primitives

Issue #932

Description of how you validated changes

Checklist

  • PR description included
  • yarn test passes
  • Tests are updated
  • Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@changeset-bot
Copy link

changeset-bot bot commented Feb 28, 2022

🦋 Changeset detected

Latest commit: 8a86324

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@aws-amplify/ui-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 11:45 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 11:45 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 11:45 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 18:27 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 18:27 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 18:27 Inactive
@jacoblogan jacoblogan temporarily deployed to ci February 28, 2022 18:27 Inactive
Copy link
Contributor

@dbanksdesign dbanksdesign left a comment

Choose a reason for hiding this comment

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

I love the simplification to the docs this adds. Nothing blocking, just one thing we should thing about with the constants.

})
.map((value: any) => (
<TableRow key={value.className}>
<TableCell>{value.className}</TableCell>
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we wrap the {value.className} in a <code> to be the same as the table was before?

@@ -126,6 +127,10 @@ Use the `onDismiss` prop to pass a function that will run when the Alert is dism

## CSS Styling

### Target classes

<ComponentClassTable componentName="Alert" />
Copy link
Contributor

Choose a reason for hiding this comment

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

Ah this is so much easier to document!

Copy link
Contributor

Choose a reason for hiding this comment

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

Totally! Thanks for doing this, @jacoblogan

Alert: {
className: 'amplify-alert',
components: ['Alert'],
description: 'Top level element that wraps the Alert primitive',
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't have a better solution, what are people's thoughts about using a JS object here? This would be included in customers' bundles since it is a JS object as opposed to a TS enum. I think this is probably fine for now, its not too much extra JS to ship and it makes it much easier to document. We could think about using JSDoc/TSDoc comments for this depending on the investigation into generating documentation from TS/doc comments. I don't think it is blocking and it is not a 1-way door because customers shouldn't be using this object anyways.

Copy link
Contributor

Choose a reason for hiding this comment

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

Good point. I agree that it's probably fine for now though.

@jacoblogan jacoblogan temporarily deployed to ci March 2, 2022 17:43 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 2, 2022 17:43 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 2, 2022 17:43 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 2, 2022 17:43 Inactive
Copy link
Contributor

@joebuono joebuono left a comment

Choose a reason for hiding this comment

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

This looks great, thank you for taking this on!

I'm requesting changes because when I run your branch locally, I keep getting an unhandled runtime error. See comment in ComponentClassTable.tsx file

Copy link
Contributor

@joebuono joebuono left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link
Contributor

@reesscot reesscot left a comment

Choose a reason for hiding this comment

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

This is great, thanks for making it easy to document our CSS classes!

@jacoblogan jacoblogan temporarily deployed to ci March 3, 2022 18:40 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 3, 2022 18:40 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 3, 2022 18:40 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 3, 2022 18:40 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 4, 2022 16:23 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 4, 2022 16:23 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 4, 2022 16:23 Inactive
@jacoblogan jacoblogan temporarily deployed to ci March 4, 2022 16:23 Inactive
@jacoblogan jacoblogan merged commit 5202eba into main Mar 4, 2022
@jacoblogan jacoblogan deleted the add-css-classnames branch March 4, 2022 16:51
@github-actions github-actions bot mentioned this pull request Mar 4, 2022
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