GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:21:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9942 from lmaze/9938-fix-ie11-loading-error

Browse Source 
Fix to load Storybook in IE11
This commit is contained in:
Norbert de Langen 2020-03-16 12:04:00 +01:00 committed by GitHub
commit 1cdfe8fb8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/addons/src/types.ts
View File

@ -24,6 +24,8 @@ export type ViewMode = 'story' | 'docs';
export interface Parameters {
fileName?: string;
options?: OptionsParameter;
layout?: 'centered' | 'fullscreen' | 'padded';
docsOnly?: boolean;
[key: string]: any;
}

46
lib/core/src/client/preview/StoryRenderer.tsx
View File

@ -19,8 +19,26 @@ interface RenderMetadata {
viewMode: ViewMode;
}
type Layout = 'centered' | 'fullscreen' | 'padded';
type StyleKeyValue = { centered: string; fullscreen: string; padded: string };
type Layout = keyof typeof layouts;
const layouts = {
centered: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
margin: 0,
padding: '1rem',
boxSizing: 'border-box',
},
fullscreen: {
margin: 0,
},
padded: {
margin: 0,
padding: '1rem',
},
} as const;
const classes = {
MAIN: 'sb-show-main',
@ -47,7 +65,7 @@ export class StoryRenderer {
previousMetadata?: RenderMetadata;
previousStyles?: string;
previousStyles?: typeof layouts[keyof typeof layouts];
constructor({
render,
@ -97,7 +115,7 @@ export class StoryRenderer {
const metadata: RenderMetadata = {
id,
kind,
viewMode: docsOnly ? 'docs' : (urlViewMode as ViewMode),
viewMode: docsOnly ? 'docs' : urlViewMode,
revision: storyStore.getRevision(),
};
@ -201,28 +219,10 @@ export class StoryRenderer {
}
applyLayout(layout: Layout) {
const layouts: StyleKeyValue = {
centered: `
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 1rem;
box-sizing: border-box;
`,
fullscreen: `
margin: 0;
`,
padded: `
margin: 0;
padding: 1rem;
`,
};
const styles = layouts[layout] || layouts.padded;
if (styles !== this.previousStyles) {
document.body.style = styles;
Object.assign(document.body.style, styles);
this.previousStyles = styles;
}
}