feat(theme): adding theme support per component #500
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rluders
force-pushed
the
feat/theme-components
branch
from
53a0771
to
aab07f5
Compare
Codecov ReportBase: 98.96% // Head: 99.27% // Increases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## main #500 +/- ##
==========================================
+ Coverage 98.96% 99.27% +0.30%
==========================================
Files 127 127
Lines 5530 5668 +138
Branches 466 469 +3
==========================================
+ Hits 5473 5627 +154
+ Misses 57 41 -16
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
11 tasks
rluders
force-pushed
the
feat/theme-components
branch
from
4aa8f2c
to
98ba8d3
Compare
added 9 commits
January 11, 2023 13:49
rluders
force-pushed
the
feat/theme-components
branch
from
98ba8d3
to
1bee99a
Compare
This was referenced Jan 19, 2023
tulup-conner
added a commit
to tulup-conner/flowbite-react
that referenced
this pull request
Feb 19, 2023
Follow up to themesberg#500 BREAKING CHANGE: Like in themesberg#500, this version permanently changes the `FlowbiteTheme` for numerous components. The philosophy is that themes will more clearly reflect the component's structure. For example, an `<Accordion>` can contain any number of `<Accordion.Title>` or `<Accordion.Content>` sections. The theme used to look like: ```js accordion: { base: "..", content: "..", flush: "..", title: "..", } ``` And now, the theme for an `<Accordion>` looks like: ``` js accordion: { root: { base: "..", flush: "..", }, content: "..", title: "..", } ``` So now the options in the theme which apply to the `<Accordion>` itself will always be found under `root`. Likewise, `<Accordion.Content>` can be themed via the `content` subsection. This ultimately will apply to all components.
rluders
pushed a commit
that referenced
this pull request
Feb 20, 2023
* feat(theme): adding theme prop to components * feat(/theme/default): finish migrating components to use a `root` theme Follow up to #500 BREAKING CHANGE: Like in #500, this version permanently changes the `FlowbiteTheme` for numerous components. The philosophy is that themes will more clearly reflect the component's structure. For example, an `<Accordion>` can contain any number of `<Accordion.Title>` or `<Accordion.Content>` sections. The theme used to look like: ```js accordion: { base: "..", content: "..", flush: "..", title: "..", } ``` And now, the theme for an `<Accordion>` looks like: ``` js accordion: { root: { base: "..", flush: "..", }, content: "..", title: "..", } ``` So now the options in the theme which apply to the `<Accordion>` itself will always be found under `root`. Likewise, `<Accordion.Content>` can be themed via the `content` subsection. This ultimately will apply to all components. * ci(eslint): remove `prettier` plugins for `eslint` Instead, use `prettier-plugin-tailwindcss`, which is sufficient. * refactor(/lib/*): use `yarn prettier` with `prettier-plugin-tailwindcss` * fix(/lib/components/*.spec): resolve test errors caused by migrating theme * feat(/lib/components/*): add `theme={}` attribute to components that need it See notes in #566 * fix(/lib/components/accordion): fix `<Accordion theme={}` types wrong interface * docs(/pages/theme): update `/theme` documentation to include new theme strategies We have more powerful options to customize themes now, and they deserve proper documentation. * ci(eslint): fix `eslint` configured to ignore `src/lib/` Well this sucks! We've not been linting the vast majority of the actual code of the library due to a misconfigured `.eslintignore`. Mass-fix coming. * ci(eslint): resolve outstanding `eslint` issues * fix(/lib/components/footer/footertitle): allow `<Footer.Title as="..">` to not use `<h2>` You can cast the component to a component of your own, or a generic HTML element, e.g., `<Footer.Title as="h3">`. resolve #594 * fix(/lib/components/modal): fix `Modal` expects `document` to exist So, I originally fixed this issue across every component in #124, but the bug was reintroduced by resolve #609 * ci(.github/workflows/build): upgrade `codecov-action` -> `v3` --------- Co-authored-by: Ricardo Lüders <rluders@redhat.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add the
theme={}property to the listed components.Related to #465 and #443
Type of change
Please delete options that are not relevant.
Breaking changes
Yes! This breaks the current theme structure. All main components now have their own styles under
rootobject.How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Test Configuration:
N/A
Checklist: