Addon-docs: Support for iframeWidth parameter on stories #9149
Conversation
|
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/storybook/monorepo/54vd47zeb |
…feature/addons-docs-iframewidth
|
@tmeasday @ndelangen Any idea why that test fails? I did some research and danger-js seems to that have an ongoing issue related to that. (danger/danger-js#918) |
| @@ -7,5 +7,7 @@ export interface AnchorProps { | |||
| } | |||
|
|
|||
| export const Anchor: FC<AnchorProps> = ({ storyId, children }) => ( | |||
| <div id={anchorBlockIdFromId(storyId)}>{children}</div> | |||
| <div id={anchorBlockIdFromId(storyId)} style={{ textAlign: 'center' }}> | |||
There was a problem hiding this comment.
I added this so no matter what size the iFrame has, the component will always be centered on the Docs Page...
There was a problem hiding this comment.
| @@ -71,14 +73,15 @@ export const getStoryProps = ( | |||
| `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!` | |||
| ); | |||
| } | |||
|
|
|||
| return { | |||
| const newVar = { | |||
There was a problem hiding this comment.
After adding the width property to the StoryProps interface, TypeScript kept giving me the following error:
I kept getting the error whenever I would return the object like this:
After inserting the object into a constant and then returning it, the error cleared out.
| @@ -54,6 +54,7 @@ const PreviewContainer = styled.div<PreviewProps>( | |||
| position: 'relative', | |||
| overflow: 'hidden', | |||
| margin: '25px 0 40px', | |||
| display: 'inline-block', | |||
There was a problem hiding this comment.
It is necessary in order for the preview container to adjust to the iFrame's width.
Without it, it would look like this:
Instead of this:
There was a problem hiding this comment.
Using flexbox for this is a little more robust I think.
| id, | ||
| title, | ||
| height = '500px', | ||
| width = '950px', |
There was a problem hiding this comment.
Can we make this completely optional?
There was a problem hiding this comment.
That's actually just a default height and width. In case the IFrameStory component does not receive those parameters, it would just set it to 950x500 px...
Could you explain a little bit more about how this could be optional?
|
@shilman Do you mind taking a look at it? |
|
@alonsosfera busy trying to get 5.3 out right now. will take a look as soon as i've worked through my backlog. thanks for your patience! |
|
Picking this up this week. Sorry for the delay and thanks for your patience @alonsosfera |
|
I can't work out the merge conflicts, what can we do about this PR @shilman ? |
|
I'll take this one @ndelangen |
|
hi, guys, it would be nice to have this. Are you going to finally merge it? |
|
@m1lk1way yup, will merge in the next few days and release as 6.1-alpha |
|
Looks like the fork for this has been deleted and the PR is not in a mergeable state, so I'm going to close this for now. |
Issue: #8816
What I did
Enabled Story components to receive parameter
iframeWidthto configure the width of the iFrame shown in the Docs pageHow to test
Add parameter iframeWidth to
/storybook/examples/angularcli/src/stories/app.component.stories.tslike shown below:Run Angular-cli example, go to
App Component -> Component with separate template -> Docs pageand watch width of the iFrame changed as shown below.If your answer is yes to any of these, please make sure to include it in your PR.