Automatically add data-cy and displayName classNames #40
Conversation
This update enhances the `styled()` factory to provide the component with `data-cy` and a `css-j21lkjf-COMPONENT_NAME` className, if applicable. `data-cy` will be added if the Component has a `displayName` or a `name`. HTML Tags like `span` or `div` will not receive `data-cy`. The displayName className will be added to all components. This is purely for identification/debugging purposes. No actual styles will be associated with these classNames.
| @@ -17,23 +17,6 @@ const Thing = styled('div')` | |||
| ` | |||
|
|
|||
| class Test extends React.Component { | |||
| componentDidMount() { | |||
|
cc'ing @ryan-mulrooney , as I think you'd be interested in this :) |
package.json
Outdated
| @@ -66,11 +66,11 @@ | |||
| "devDependencies": { | |||
| "@helpscout/hsds-react": "^2.5.6", | |||
| "@helpscout/zero": "^2.0.5", | |||
There was a problem hiding this comment.
Would it be worth it to update to Zero 3?
There was a problem hiding this comment.
@tinkertrain Zero@3 broke build of Fancy :(
I have a working fix for it :). Tracking the issue down took a while, but the solution isn't too bad
| @@ -63,7 +63,7 @@ type EmotionOptions = { | |||
| } | |||
|
|
|||
| function createEmotion( | |||
| context: {__SECRET_FANCY_EMOTION__?: Emotion}, | |||
| context: { __SECRET_FANCY_EMOTION__?: Emotion }, | |||
There was a problem hiding this comment.
What would a "Secret Fancy Emotion" be? "Elated", "Discombobulated"? Don't mind me it's Friday
There was a problem hiding this comment.
Hahaha... it's a secret ;)
For context... By default, Emotion generates a global variable called __SECRET_EMOTION__. We had an issue where a Fancy powered app (Beacon2) rendered into a user environment that happened to use Emotion as well.
Because of this... our modified version of Emotion broke their Emotion 😅
So! To prevent this from happening, we created our own __SECRET_FANCY_EMOTION__ namespace :)
|
Will follow up with this!! This would be handy to add in 💪 . Minor bump for sure! |
|
@knicklabs + @tinkertrain Thanks for the review!!! |
|
Deploy preview for hs-fancy ready! Built with commit 9e9fedc |
Automatically add data-cy and displayName classNames
This update enhances the
styled()factory to provide the component withdata-cyand acss-j21lkjf-COMPONENT_NAMEclassName, if applicable.data-cywill be added if the Component has adisplayNameor aname.HTML Tags like
spanordivwill not receivedata-cy.The displayName className will be added to all components. This is purely
for identification/debugging purposes. No actual styles will be associated
with these classNames.
Example: