Allow Styled tags to be updated via withComponent #232
Conversation
ifyoumakeit
force-pushed
the
withComponent
branch
5 times, most recently
from
bab4bf4 to
6bdf000
Compare
ifyoumakeit
force-pushed
the
withComponent
branch
3 times, most recently
from
938bb62 to
fd75382
Compare
|
Fixing tests today. |
ifyoumakeit
force-pushed
the
withComponent
branch
from
fd75382 to
a548480
Compare
Codecov Report
@@ Coverage Diff @@
## master #232 +/- ##
==========================================
+ Coverage 97.33% 97.34% +0.01%
==========================================
Files 17 17
Lines 563 566 +3
Branches 134 134
==========================================
+ Hits 548 551 +3
Misses 11 11
Partials 4 4
Continue to review full report at Codecov.
|
ifyoumakeit
force-pushed
the
withComponent
branch
from
7dbac4f to
ecc3d6a
Compare
ifyoumakeit
force-pushed
the
withComponent
branch
2 times, most recently
from
29ee322 to
ba9d250
Compare
|
Running into some errors due to updates. Adding some documentation for |
ifyoumakeit
force-pushed
the
withComponent
branch
from
1b30e59 to
d3ecb31
Compare
- Add `withComponent` method to create new styled component - Update react test - Update snapshot
ifyoumakeit
force-pushed
the
withComponent
branch
from
3b7992c to
2e4c66d
Compare
|
Fixed up errors, but running into an issue where components created with See Avatar class name here: https://deploy-preview-232--emotion.netlify.com/#withcomponent Example. <span data-reactroot="" class="css-Circle-wrfx8o0 css-mzfoqi">
<img src="/a76dfa0d18a0536af9e917cdb8f873b9.png" class="css-1 css-mzfoqi">
</span>@tkh44 / @mitchellhamilton , could this cause collisions? I was able to get it to use the same class as Circle |
|
@ifyoumakeit This is because we create those unique classes with the identifier in the babel plugin. We could create a unique class for |
|
I need to think about this a bit more. We want to get this in version 8, but I want to do it right. |
|
Makes sense, definitely want to make sure the solution is performant/useful and fits in well with the future of emotion. |
docs/styled.md
Outdated
| @@ -66,3 +66,18 @@ const H2 = styled('h2')('some-other-class', { | |||
| }) | |||
|
|
|||
| ``` | |||
|
|
|||
| ### withComponent | |||
There was a problem hiding this comment.
I think we should make this its own file. Mention it and link to this new file. This way when we make docs pages withComponent will have its own page.
| @@ -90,6 +90,12 @@ export default function(tag, options: { e: string }) { | |||
| Styled.__emotion_styles = styles | |||
| Styled.__emotion_base = baseTag | |||
|
|
|||
| Styled.withComponent = nextTag => { | |||
| return createStyled(nextTag, options)(styles) | |||
There was a problem hiding this comment.
👍 this is much cleaner and more obvious from first glance. Thanks @mitchellhamilton .
What:
Added
withComponentmethod to allowstyledcomponents to update tag name. Components can also be extended via this method.Why:
Tags may need to be changed to comply with accessibility and HTML standards. One use case is headings (h1, h2, etc...) that may need to be swapped depending on document depth.
The method na
How:
Added a new method to the
Styledcomponent that re-callscreateStyledwith the new tag/component.Checklist: