Add ability to add custom css classes/styles to all components about components HOT 7 CLOSED

Hi, I'd love to contribute to this if that's ok. It'd be my first time working on this project, but I took a look around to get an idea of the process. I'd like to make sure I understand what's needed to solve this issue, feel free to correct me if this is wrong:

1. Add className and style props to each component.
2. Add a story and test for className per component.
3. Add a story and test for style per component.
4. Edit the docs (is this automated?)

from components.

You got it @CVVPK! I've assigned this to you.

from components.

Hi @CVVPK and thanks for contributing!
All of your assumptions are correct. For the 4th point, you just have to comment the code in the right way and it will be generated for you. Just take a look at the comments that are already there. :)

from components.

@jackcmeyer The number of changes is getting pretty massive and I was wondering if you'd prefer I submit individual PRs or everything in one big chunk. Here's a status report of my progress so far:

Completed:

• Alert
• Badge
• Breadcrumb
• BreadcrumbItem
• Button
• Icon
• Label
• List
• ListItem
• Pill
• Radio
• Select
• Switch
• TextField
• TextInput
• Checkbox
• Layout

To do:

• Navbar (In progress...)
• Image (?)
• DateTimePicker (?)
• Modal (?)
• Toaster (?)
• Graph (Unsure if required)
• Spinner (Unsure if required)
• VideoPlayer (Unsure if required)
• RichText (Unable to add the props to current implementation)
• Calendar (Unable to add the props to current implementation)

I have some question regarding the following ones:

1. Image:

• Already able to receive the props implicitly through imgAttributes, should we make it explicit?

2. DateTimePicker:

• #159 added className for InputGroup, should className be added for the DatePicker?

3. Modal:

• A Modal could have three different buttons, do we want to style each of them individually?
• A Modal could have a header, body and footer, do we want to style each of them individually?

from components.

@CVVPK feel free to open as many or few pull requests as you want! Whatever is easiest for you!

from components.

🎉 This issue has been resolved in version 0.23.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from components.

🎉 This issue has been resolved in version 0.27.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from components.