mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 13:01:07 +08:00
Merge pull request #5585 from storybooks/fix/add-background-official
ADD default backgrounds to official example
This commit is contained in:
Norbert de Langen
GitHub
commit
5158d13ff2
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
|
||||
import { Global, ThemeProvider, themes, createGlobal } from '@storybook/theming';
|
||||
import { Global, ThemeProvider, themes, createReset } from '@storybook/theming';
|
||||
|
||||
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
||||
import { withCssResources } from '@storybook/addon-cssresources';
|
||||
@ -35,7 +35,7 @@ addDecorator(withNotes);
|
||||
|
||||
addDecorator(fn => (
|
||||
<ThemeProvider theme={themes.normal}>
|
||||
<Global styles={createGlobal} />
|
||||
<Global styles={createReset} />
|
||||
{fn()}
|
||||
</ThemeProvider>
|
||||
));
|
||||
@ -52,6 +52,11 @@ addParameters({
|
||||
...INITIAL_VIEWPORTS,
|
||||
...extraViewports,
|
||||
},
|
||||
backgrounds: [
|
||||
{ name: 'storybook app', value: themes.normal.background.app, default: true },
|
||||
{ name: 'light', value: '#eeeeee' },
|
||||
{ name: 'dark', value: '#222222' },
|
||||
],
|
||||
});
|
||||
|
||||
let previousExports = {};
|
||||
|
||||
@ -2123,6 +2123,21 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
|
||||
"type": "tablet"
|
||||
}
|
||||
},
|
||||
"backgrounds": [
|
||||
{
|
||||
"name": "storybook app",
|
||||
"value": "#F6F9FC",
|
||||
"default": true
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"value": "#eeeeee"
|
||||
},
|
||||
{
|
||||
"name": "dark",
|
||||
"value": "#222222"
|
||||
}
|
||||
],
|
||||
"globalParameter": "globalParameter",
|
||||
"chapterParameter": "chapterParameter",
|
||||
"storyParameter": "storyParameter",
|
||||
|
||||
@ -14,8 +14,6 @@ export const createReset = memoize(1)(
|
||||
fontFamily: typography.fonts.base,
|
||||
fontSize: typography.size.s3,
|
||||
margin: 0,
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
MozOsxFontSmoothing: 'grayscale',
|
||||
@ -97,6 +95,8 @@ export const createGlobal = memoize(1)(
|
||||
...resetStyles.body,
|
||||
color: color.defaultText,
|
||||
background: background.app,
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
},
|
||||
|
||||
hr: {
|
||||
|
||||
@ -208,79 +208,75 @@ exports[`Storyshots UI|Panel default 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
|
||||
class="emotion-13"
|
||||
id="storybook-panel-root"
|
||||
>
|
||||
<div
|
||||
class="emotion-13"
|
||||
id="storybook-panel-root"
|
||||
class="emotion-11"
|
||||
>
|
||||
<div
|
||||
class="emotion-11"
|
||||
class="emotion-3"
|
||||
>
|
||||
<div
|
||||
class="emotion-3"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
class="emotion-0"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
Test 1
|
||||
</button>
|
||||
<button
|
||||
class="emotion-1"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
Test 2
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-10"
|
||||
class="emotion-2"
|
||||
role="tablist"
|
||||
>
|
||||
<button
|
||||
class="emotion-6"
|
||||
title="Change orientation"
|
||||
class="emotion-0"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="emotion-5"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
<path
|
||||
class="emotion-4"
|
||||
d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
|
||||
/>
|
||||
</svg>
|
||||
Test 1
|
||||
</button>
|
||||
<button
|
||||
class="emotion-6"
|
||||
title="Hide addons"
|
||||
class="emotion-1"
|
||||
role="tab"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
class="emotion-5"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
<path
|
||||
class="emotion-4"
|
||||
d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
|
||||
/>
|
||||
</svg>
|
||||
Test 2
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-12"
|
||||
class="emotion-10"
|
||||
>
|
||||
<div
|
||||
id="test2"
|
||||
<button
|
||||
class="emotion-6"
|
||||
title="Change orientation"
|
||||
>
|
||||
TEST 2
|
||||
</div>
|
||||
<svg
|
||||
class="emotion-5"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
<path
|
||||
class="emotion-4"
|
||||
d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="emotion-6"
|
||||
title="Hide addons"
|
||||
>
|
||||
<svg
|
||||
class="emotion-5"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
<path
|
||||
class="emotion-4"
|
||||
d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-12"
|
||||
>
|
||||
<div
|
||||
id="test2"
|
||||
>
|
||||
TEST 2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -299,16 +295,12 @@ exports[`Storyshots UI|Panel no panels 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="position:relative;width:800px;height:300px;margin:1rem auto;padding:20px;background:papayawhip"
|
||||
class="emotion-1"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
class="emotion-0"
|
||||
>
|
||||
<div
|
||||
class="emotion-0"
|
||||
>
|
||||
Nothing found
|
||||
</div>
|
||||
Nothing found
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -32,20 +32,6 @@ const toggleVisibility = action('toggleVisibility');
|
||||
const togglePosition = action('togglePosition');
|
||||
|
||||
storiesOf('UI|Panel', module)
|
||||
.addDecorator(storyFn => (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: '800px',
|
||||
height: '300px',
|
||||
margin: '1rem auto',
|
||||
padding: '20px',
|
||||
background: 'papayawhip',
|
||||
}}
|
||||
>
|
||||
{storyFn()}
|
||||
</div>
|
||||
))
|
||||
.add('default', () => (
|
||||
<Panel
|
||||
panels={panels}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user