Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more context to the styled component displayName #361

Merged
merged 4 commits into from
Sep 30, 2017

Conversation

tkh44
Copy link
Member

@tkh44 tkh44 commented Sep 30, 2017

What:
Add the base_tag displayName to the styled component

Why:
So they show up in React dev tools.
#358

How:
Append the property

Checklist:

  • Documentation
  • Tests
  • Code complete

closes #358

Styled.contextTypes = contextTypes

Styled.__emotion_styles = styles
Styled.__emotion_base = baseTag
Styled.__emotion_real = Styled

Styled.displayName = `Styled(${typeof baseTag === 'string'
? baseTag
: baseTag.displayName || 'Component'})`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should baseTag.name also be here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure where name comes from.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screen shot 2017-09-30 at 1 31 59 pm

@codecov
Copy link

codecov bot commented Sep 30, 2017

Codecov Report

Merging #361 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #361      +/-   ##
==========================================
+ Coverage   97.73%   97.74%   +<.01%     
==========================================
  Files          22       22              
  Lines         663      664       +1     
  Branches      151      152       +1     
==========================================
+ Hits          648      649       +1     
  Misses         11       11              
  Partials        4        4
Impacted Files Coverage Δ
packages/react-emotion/src/index.js 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3bb2c54...0ab60ad. Read the comment docs.

@emmatown emmatown merged commit 04ee243 into master Sep 30, 2017
@emmatown emmatown deleted the 358-better-displayName branch September 30, 2017 05:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Better displayNames for React DevTools
2 participants