mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 01:41:07 +08:00
FIX some tabs issues
This commit is contained in:
Norbert de Langen
parent
502d5ec512
commit
93ecc72d7a
@ -6052,6 +6052,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-99 > *:first-child {
|
||||
@ -6538,6 +6544,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-99 > *:first-child {
|
||||
@ -6873,8 +6885,11 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-100"
|
||||
style="position:relative;height:calc(100vh);width:calc(100vw)"
|
||||
>
|
||||
<div
|
||||
class="emotion-100"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
data-simplebar="true"
|
||||
@ -7408,6 +7423,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -157,17 +157,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emotion-11 > *:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-10 {
|
||||
@ -175,7 +164,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-12"
|
||||
@ -507,17 +496,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emotion-11 > *:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-10 {
|
||||
@ -525,7 +503,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-12"
|
||||
@ -813,21 +791,10 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emotion-7 > *:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -1074,6 +1041,12 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-11 > *:first-child {
|
||||
@ -1093,6 +1066,8 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
|
||||
.emotion-12 {
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0,0,0,.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -1106,7 +1081,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-12"
|
||||
@ -1434,17 +1409,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emotion-11 > *:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-10 {
|
||||
@ -1454,11 +1418,13 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
|
||||
.emotion-12 {
|
||||
background-clip: padding-box;
|
||||
border: 1px solid rgba(0,0,0,.1);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-12"
|
||||
@ -1646,7 +1612,7 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
@ -1836,17 +1802,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.emotion-12 > *:first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-11 {
|
||||
@ -1854,7 +1809,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
style="height:calc(100vh - 20px)"
|
||||
style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
|
||||
>
|
||||
<div
|
||||
class="emotion-13"
|
||||
|
||||
@ -11,8 +11,9 @@ const Wrapper = styled.div(
|
||||
bordered
|
||||
? {
|
||||
backgroundClip: 'padding-box',
|
||||
borderRadius: theme.borderRadius,
|
||||
border: `1px solid ${theme.appBorderColor}`,
|
||||
borderRadius: theme.appBorderRadius,
|
||||
overflow: 'hidden',
|
||||
}
|
||||
: {},
|
||||
({ absolute }) =>
|
||||
@ -45,8 +46,17 @@ const Content = styled.div(
|
||||
({ theme }) => ({
|
||||
fontSize: theme.typography.size.s2 - 1,
|
||||
}),
|
||||
({ absolute }) => ({
|
||||
height: absolute ? 'calc(100% - 40px)' : 'auto',
|
||||
({ absolute }) =>
|
||||
absolute
|
||||
? {
|
||||
height: 'calc(100% - 40px)',
|
||||
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 40,
|
||||
overflow: 'auto',
|
||||
'& > *:first-child': {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
@ -56,7 +66,8 @@ const Content = styled.div(
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
},
|
||||
})
|
||||
}
|
||||
: {}
|
||||
);
|
||||
|
||||
const VisuallyHidden = styled.div(({ active }) =>
|
||||
|
||||
@ -110,7 +110,18 @@ const content = Object.entries(panels).map(([k, v]) => (
|
||||
));
|
||||
|
||||
storiesOf('Basics|Tabs', module)
|
||||
.addDecorator(s => <div style={{ height: 'calc(100vh - 20px)' }}>{s()}</div>)
|
||||
.addDecorator(s => (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
height: 'calc(100vh - 20px)',
|
||||
width: 'calc(100vw - 20px)',
|
||||
margin: 10,
|
||||
}}
|
||||
>
|
||||
{s()}
|
||||
</div>
|
||||
))
|
||||
.add('stateful - static', () => (
|
||||
<TabsState initial="test2">
|
||||
<div id="test1" title="With a function">
|
||||
|
||||
@ -227,6 +227,12 @@ exports[`Storyshots UI|Panel default 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-13 > *:first-child {
|
||||
|
||||
@ -153,6 +153,12 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-25 > *:first-child {
|
||||
@ -365,8 +371,11 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-26"
|
||||
style="position:relative;height:calc(100vh);width:calc(100vw)"
|
||||
>
|
||||
<div
|
||||
class="emotion-26"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
data-simplebar="true"
|
||||
@ -560,6 +569,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -716,6 +726,12 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-41 > *:first-child {
|
||||
@ -1645,8 +1661,11 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-42"
|
||||
style="position:relative;height:calc(100vh);width:calc(100vw)"
|
||||
>
|
||||
<div
|
||||
class="emotion-42"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
data-simplebar="true"
|
||||
@ -2028,6 +2047,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -2184,6 +2204,12 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.emotion-27 > *:first-child {
|
||||
@ -2876,8 +2902,11 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-28"
|
||||
style="position:relative;height:calc(100vh);width:calc(100vw)"
|
||||
>
|
||||
<div
|
||||
class="emotion-28"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
data-simplebar="true"
|
||||
@ -3097,5 +3126,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -10,6 +10,17 @@ const info = {
|
||||
|
||||
const actions = createActions('onClose');
|
||||
storiesOf('UI|Settings/AboutScreen', module)
|
||||
.addDecorator(s => (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
height: 'calc(100vh)',
|
||||
width: 'calc(100vw)',
|
||||
}}
|
||||
>
|
||||
{s()}
|
||||
</div>
|
||||
))
|
||||
.add('up to date', () => (
|
||||
<AboutScreen latest={{ version: '5.0.0', info }} current={{ version: '5.0.0' }} {...actions} />
|
||||
))
|
||||
|
||||
@ -14,6 +14,19 @@ const actions = makeActions(
|
||||
export default {
|
||||
component: ShortcutsScreen,
|
||||
title: 'UI|Settings/ShortcutsScreen',
|
||||
decorators: [
|
||||
s => (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
height: 'calc(100vh)',
|
||||
width: 'calc(100vw)',
|
||||
}}
|
||||
>
|
||||
{s()}
|
||||
</div>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user