-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Addon-info: deep merge passed styles with default ones #2449
Addon-info: deep merge passed styles with default ones #2449
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks @jennvoss
Please run |
thanks @Hypnosphi, i will do that. Also found a deeper issue with this - if you don't include properties that contain nested objects from the stylesheet object (https://github.com/storybooks/storybook/blob/master/addons/info/src/components/Story.js#L19) such as "button", "header" , or "source" then the storybook will throw an error. Will try to look into this more over the weekend. |
Codecov Report
@@ Coverage Diff @@
## release/3.3 #2449 +/- ##
===============================================
+ Coverage 19.51% 19.51% +<.01%
===============================================
Files 386 386
Lines 8707 8706 -1
Branches 942 954 +12
===============================================
Hits 1699 1699
+ Misses 6276 6255 -21
- Partials 732 752 +20
Continue to review full report at Codecov.
|
Update: I changed the |
addons/info/src/components/Story.js
Outdated
@@ -382,7 +383,7 @@ Story.propTypes = { | |||
showInline: PropTypes.bool, | |||
showHeader: PropTypes.bool, | |||
showSource: PropTypes.bool, | |||
styles: PropTypes.func.isRequired, | |||
styles: PropTypes.object, // eslint-disable-line react/forbid-prop-types |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's rather make it PropTypes.oneOfType(PropTypes.func, PropTypes.object)
and add a runtime check. If user supplies a function we call it, otherwise do a deep merge.
That way we won't introduce any breaking changes, all the old code will keep working
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good call, will update
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, we actually do that runtime check already:
https://github.com/storybooks/storybook/blob/master/addons/info/src/index.js#L56
Let's just replace the default s => s
function with deep merge (s => nestedObjectAssign({}, s, styles)
)
I changed the base of this PR to |
Styles option as function is still worth documenting, and the example should indicate that default stylesheet is passed as argument. It can look like that:
This is more verbose than just passing an object that would be deep merged, but at the same time gives more control. This is kinda like Extend vs Full Control mode for custom webpack config: https://storybook.js.org/configurations/custom-webpack-config/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good, just add the style function backwards compatibility and we're good to go :)
7a49de8
to
bd83798
Compare
addons/info/src/components/Story.js
Outdated
@@ -384,7 +384,7 @@ Story.propTypes = { | |||
showInline: PropTypes.bool, | |||
showHeader: PropTypes.bool, | |||
showSource: PropTypes.bool, | |||
styles: PropTypes.func.isRequired, | |||
styles: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like this proptype may be left as is (we actually pass a function anyway)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 done
Please update the storyshots one more time |
When i run |
Looks like i needed to run |
Issue:
The styles option for addon-info was improperly documented
#2144
What I did
Updated addon-info docs to include the proper reference for the styles option and updated the example in cra-kitchen-sink