Skip to content
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.

Sign up for GitHub

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

ADD default backgrounds to official example #5585

Merged
merged 2 commits into from
Feb 14, 2019
Merged

ADD default backgrounds to official example #5585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
991adb3
ADD default backgrounds to official example
ndelangen Feb 14, 2019
dfad77b
FIX snapshots
ndelangen Feb 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions examples/official-storybook/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -35,7 +35,7 @@ addDecorator(withNotes);

addDecorator(fn => (
<ThemeProvider theme={themes.normal}>
<Global styles={createGlobal} />
<Global styles={createReset} />
{fn()}
</ThemeProvider>
));
Expand All @@ -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 = {};
Expand Down
15 changes: 15 additions & 0 deletions examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions lib/theming/src/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -97,6 +95,8 @@ export const createGlobal = memoize(1)(
...resetStyles.body,
color: color.defaultText,
background: background.app,
overflowY: 'auto',
overflowX: 'hidden',
},

hr: {
Expand Down
116 changes: 54 additions & 62 deletions lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
`;
14 changes: 0 additions & 14 deletions lib/ui/src/components/panel/panel.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down