-
Notifications
You must be signed in to change notification settings - Fork 314
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
Add css classnames #1429
Conversation
🦋 Changeset detectedLatest commit: 8a86324 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
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 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> |
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.
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" /> |
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.
Ah this is so much easier to document!
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.
Totally! Thanks for doing this, @jacoblogan
Alert: { | ||
className: 'amplify-alert', | ||
components: ['Alert'], | ||
description: 'Top level element that wraps the Alert primitive', |
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 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.
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.
Good point. I agree that it's probably fine for now though.
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 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
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
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 is great, thanks for making it easy to document our CSS classes!
Description of changes
Update documentation to include target classes of all primitives
Issue #932
Description of how you validated changes
Checklist
yarn test
passesBy submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.