feat(theme): adding theme prop to components

[rluders]

Description

The following components can now be customized with a theme={} attribute inline:

• Accordion
  • Accordion.Content
  • Accordion.Title
• Alert
• Avatar
  • Avatar.Group
  • Avatar.GroupCounter
• Badge
• Breadcrumb
  • Breadcrumb.Item
• Button
  • Button.Group
• Card
• Carousel
• Checkbox
• DarkThemeToggle
• Dropdown
  • Dropdown.Item
• FileInput
• Footer
  • Footer.Brand
  • Footer.Copyright
  • Footer.Divider
  • Footer.Icon
  • Footer.Link
  • Footer.LinkGroup
  • Footer.Title
• HelperText
• Label
• ListGroup
  • ListGroup.Item
• Modal
  • Modal.Body
  • Modal.Footer
  • Modal.Header
• Navbar
  • Navbar.Brand
  • Navbar.Collapse
  • Navbar.Link
  • Navbar.Toggle
• Pagination
  • Pagination.Button
• Progress
• Radio
• RangeSlider
• Rating
  • Rating.Advanced
  • Rating.Star
• Select
• Sidebar
  • Sidebar.Collapse
  • Sidebar.CTA
  • Sidebar.Item
  • Sidebar.Logo
• Spinner
• Tabs.Group
• Table
  • Table.Body
  • Table.Cell
  • Table.Head
  • Table.HeadCell
  • Table.Row
• Textarea
• TextInput
• Timeline
  • Timeline.Body
  • Timeline.Content
  • Timeline.Item
  • Timeline.Point
  • Timeline.Time
  • Timeline.Title
• Toast
  • Toast.Toggle
• ToggleSwitch
• Tooltip

Please note that components you do NOT see on this list can STILL be customized by simply adding a className. These components do not have any default classes or complex structure and thus don't need a theme at all.

This behavior is still considered a work in progress, and in general, we are still experimenting with how to provide users with the best way to customize components. You can expect that this API might change at any time. We also need your feedback on how to improve it.

Related to #465

Type of change

• New feature (non-breaking change which adds functionality)

Breaking changes

We are also finishing the process of converting components to a new theme structure, so you can expect the themes of almost all components to change in expected behavior.

Now, components that can have children will have a root section which contains the classes that apply only to the parent component. That's kind of a complicated sentence, so here's an example.

<Accordion>s can contain any number of <Accordion.Title>s and <Accordion.Content>s as children. The new accordion theme looks like:

export interface FlowbiteAccordionTheme {
  root: FlowbiteAccordionRootTheme; /* classes that apply to <Accordion> itself only */
  content: FlowbiteAccordionComponentTheme; /* <Accordion.Content> classes */
  title: FlowbiteAccordionTitleTheme; /* <Accordion.Title> classes */
}

Previously, the accordion theme was:

export interface FlowbiteAccordionTheme {
  base: string; /* class that applies to <Accordion> itself only */
  flush: string; /* another class that applies to <Accordion>s */
  content: FlowbiteAccordionComponentTheme; /* <Accordion.Content> classes */
  title: FlowbiteAccordionTitleTheme; /* <Accordion.Title> classes */
}

We've just moved the loose classes - for <Accordion>s, that's accordion.base and accordion.flush - into root to make the theme more clearly reflect the relationship between flowbite-react components.

How Has This Been Tested?

• yarn test
• Visual inspection of local servers at yarn start, yarn start:storybook

We should consider adding tests using the theme={} attribute in every component where it is allowed. The specific benefit of that is to ensure that the expected theme format actually works.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings