feat(theme): add theme={} attribute to components that need it
#611
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
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.
Instead, use `prettier-plugin-tailwindcss`, which is sufficient.
Codecov ReportBase: 99.29% // Head: 99.35% // Increases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## main #611 +/- ##
==========================================
+ Coverage 99.29% 99.35% +0.06%
==========================================
Files 131 131
Lines 5794 6378 +584
Branches 480 480
==========================================
+ Hits 5753 6337 +584
Misses 41 41
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. |
tulup-conner
force-pushed
the
feat/component-theme-props
branch
from
fe795ab
to
dffb998
Compare
tulup-conner
force-pushed
the
feat/component-theme-props
branch
from
f3d3a55
to
7b093e5
Compare
…need it See notes in themesberg#566
…e strategies We have more powerful options to customize themes now, and they deserve proper documentation.
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.
tulup-conner
force-pushed
the
feat/component-theme-props
branch
from
7b093e5
to
5480e84
Compare
…>` 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 themesberg#594
So, I originally fixed this issue across every component in themesberg#124, but the bug was reintroduced by resolve themesberg#609
tulup-conner
force-pushed
the
feat/component-theme-props
branch
from
5480e84
to
cce0f8f
Compare
rluders
approved these changes
Feb 20, 2023
There was a problem hiding this comment.
This PR is huge. So, I'm trusting the unit test (we have a nice coverage here), and I also tested manually a little bit.
Since this will unblock some other PRs and as well it is a SUPER NICE feature and unblock us for the 0.4.0 release, I'm willing to take the risk to have to submit some patches in the sequence to fix any potential issues.
Thank you @tulup-conner
This was referenced Feb 21, 2023
Closed
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
This is a continuation of #566
The following components can now be customized with a
theme={}attribute inline: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
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
rootsection 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:Previously, the accordion theme was:
We've just moved the loose classes - for
<Accordion>s, that'saccordion.baseandaccordion.flush- intorootto make the theme more clearly reflect the relationship betweenflowbite-reactcomponents.How Has This Been Tested?
yarn testyarn start,yarn start:storybookWe 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: