mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 14:11:26 +08:00
Merge pull request #5711 from storybooks/5597-toolbar-separators
5597 toolbar separators
This commit is contained in:
Michael Shilman
Michael Shilman
parent
d3edcf43dc
commit
16332ee5e8
@ -4427,14 +4427,13 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
@ -4451,7 +4450,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
class="emotion-5"
|
||||
|
||||
@ -30,9 +30,6 @@ Side.displayName = 'Side';
|
||||
|
||||
export const Bar = styled.div(
|
||||
({ theme }) => ({
|
||||
// display: 'flex',
|
||||
// justifyContent: 'space-between',
|
||||
// background: theme.barBg,
|
||||
color: theme.barTextColor,
|
||||
height: 40,
|
||||
}),
|
||||
@ -112,16 +109,10 @@ const BarInner = styled.div({
|
||||
export const FlexBar = ({ children, ...rest }) => {
|
||||
const [left, right] = Children.toArray(children);
|
||||
return (
|
||||
<Bar {...rest} title="bar">
|
||||
<Bar {...rest}>
|
||||
<BarInner>
|
||||
<Side left title="side left">
|
||||
{left}
|
||||
</Side>
|
||||
{right ? (
|
||||
<Side right title="side right">
|
||||
{right}
|
||||
</Side>
|
||||
) : null}
|
||||
<Side left>{left}</Side>
|
||||
{right ? <Side right>{right}</Side> : null}
|
||||
</BarInner>
|
||||
</Bar>
|
||||
);
|
||||
|
||||
@ -31,12 +31,6 @@ export const Separator = styled.span(
|
||||
'& + &': {
|
||||
display: 'none',
|
||||
},
|
||||
'&:first-of-type': {
|
||||
display: 'none',
|
||||
},
|
||||
'&:last-of-type': {
|
||||
display: 'none',
|
||||
},
|
||||
}
|
||||
);
|
||||
Separator.displayName = 'Separator';
|
||||
|
||||
@ -223,14 +223,13 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -575,14 +574,13 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -879,14 +877,13 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-5"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-4"
|
||||
>
|
||||
<div
|
||||
class="emotion-3"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
@ -1166,14 +1163,13 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -1520,14 +1516,13 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -1901,14 +1896,13 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -2271,14 +2265,13 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-10"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-9"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-6"
|
||||
@ -2330,7 +2323,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-8"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -291,14 +291,13 @@ exports[`Storyshots UI|Panel default 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-12"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-11"
|
||||
>
|
||||
<div
|
||||
class="emotion-3"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
@ -322,7 +321,6 @@ exports[`Storyshots UI|Panel default 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-10"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
class="emotion-6"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`Storyshots UI|Preview/Preview no tabs 1`] = `
|
||||
Array [
|
||||
.emotion-22 {
|
||||
.emotion-21 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -33,7 +33,7 @@ Array [
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.emotion-21 {
|
||||
.emotion-20 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -47,7 +47,7 @@ Array [
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.emotion-21 > * {
|
||||
.emotion-20 > * {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@ Array [
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-23 {
|
||||
.emotion-22 {
|
||||
color: #999999;
|
||||
height: 40px;
|
||||
overflow: auto;
|
||||
@ -122,7 +122,7 @@ Array [
|
||||
tranform: translateY(0px);
|
||||
}
|
||||
|
||||
.emotion-23:hover {
|
||||
.emotion-22:hover {
|
||||
-webkit-scrollbar-width: none;
|
||||
-moz-scrollbar-width: none;
|
||||
-ms-scrollbar-width: none;
|
||||
@ -133,7 +133,7 @@ Array [
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
.emotion-23::-webkit-scrollbar {
|
||||
.emotion-22::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
@ -141,14 +141,14 @@ Array [
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-23:hover::-webkit-scrollbar {
|
||||
.emotion-22:hover::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.emotion-23::-webkit-scrollbar-track {
|
||||
.emotion-22::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
@ -158,13 +158,13 @@ Array [
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.emotion-23::-webkit-scrollbar-thumb {
|
||||
.emotion-22::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emotion-23::-webkit-scrollbar-track-piece {
|
||||
.emotion-22::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
border: 0 none;
|
||||
opacity: 0;
|
||||
@ -205,24 +205,14 @@ Array [
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-9:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-9:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-23"
|
||||
title="bar"
|
||||
class="emotion-22"
|
||||
>
|
||||
<div
|
||||
class="emotion-22"
|
||||
class="emotion-21"
|
||||
>
|
||||
<div
|
||||
class="emotion-13"
|
||||
title="side left"
|
||||
>
|
||||
<button
|
||||
class="emotion-2"
|
||||
@ -285,8 +275,7 @@ Array [
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-21"
|
||||
title="side right"
|
||||
class="emotion-20"
|
||||
>
|
||||
<button
|
||||
class="emotion-16"
|
||||
@ -302,12 +291,9 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="emotion-9"
|
||||
/>
|
||||
<button
|
||||
class="emotion-2"
|
||||
title="Open component in new tab"
|
||||
title="Go full screen"
|
||||
>
|
||||
<svg
|
||||
class="emotion-1"
|
||||
@ -315,7 +301,7 @@ Array [
|
||||
>
|
||||
<path
|
||||
class="emotion-0"
|
||||
d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
|
||||
d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
@ -396,7 +382,7 @@ Array [
|
||||
|
||||
exports[`Storyshots UI|Preview/Preview with tabs 1`] = `
|
||||
Array [
|
||||
.emotion-28 {
|
||||
.emotion-27 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -525,7 +511,7 @@ Array [
|
||||
border-bottom-color: #1EA7FD;
|
||||
}
|
||||
|
||||
.emotion-27 {
|
||||
.emotion-26 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -539,7 +525,7 @@ Array [
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.emotion-27 > * {
|
||||
.emotion-26 > * {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@ -584,7 +570,7 @@ Array [
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.emotion-29 {
|
||||
.emotion-28 {
|
||||
color: #999999;
|
||||
height: 40px;
|
||||
overflow: auto;
|
||||
@ -614,7 +600,7 @@ Array [
|
||||
tranform: translateY(0px);
|
||||
}
|
||||
|
||||
.emotion-29:hover {
|
||||
.emotion-28:hover {
|
||||
-webkit-scrollbar-width: none;
|
||||
-moz-scrollbar-width: none;
|
||||
-ms-scrollbar-width: none;
|
||||
@ -625,7 +611,7 @@ Array [
|
||||
scrollbar-width: 0;
|
||||
}
|
||||
|
||||
.emotion-29::-webkit-scrollbar {
|
||||
.emotion-28::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
@ -633,14 +619,14 @@ Array [
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-29:hover::-webkit-scrollbar {
|
||||
.emotion-28:hover::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.emotion-29::-webkit-scrollbar-track {
|
||||
.emotion-28::-webkit-scrollbar-track {
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
@ -650,13 +636,13 @@ Array [
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.emotion-29::-webkit-scrollbar-thumb {
|
||||
.emotion-28::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.emotion-29::-webkit-scrollbar-track-piece {
|
||||
.emotion-28::-webkit-scrollbar-track-piece {
|
||||
display: none;
|
||||
border: 0 none;
|
||||
opacity: 0;
|
||||
@ -697,14 +683,6 @@ Array [
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-5:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-5:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.emotion-1 {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
@ -713,15 +691,13 @@ Array [
|
||||
}
|
||||
|
||||
<div
|
||||
class="emotion-29"
|
||||
title="bar"
|
||||
class="emotion-28"
|
||||
>
|
||||
<div
|
||||
class="emotion-28"
|
||||
class="emotion-27"
|
||||
>
|
||||
<div
|
||||
class="emotion-19"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-4"
|
||||
@ -811,8 +787,7 @@ Array [
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="emotion-27"
|
||||
title="side right"
|
||||
class="emotion-26"
|
||||
>
|
||||
<button
|
||||
class="emotion-22"
|
||||
@ -828,12 +803,9 @@ Array [
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span
|
||||
class="emotion-5"
|
||||
/>
|
||||
<button
|
||||
class="emotion-8"
|
||||
title="Open component in new tab"
|
||||
title="Go full screen"
|
||||
>
|
||||
<svg
|
||||
class="emotion-7"
|
||||
@ -841,7 +813,7 @@ Array [
|
||||
>
|
||||
<path
|
||||
class="emotion-6"
|
||||
d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
|
||||
d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { window } from 'global';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import memoize from 'memoizerific';
|
||||
@ -6,7 +5,7 @@ import memoize from 'memoizerific';
|
||||
import { styled } from '@storybook/theming';
|
||||
import { SET_CURRENT_STORY } from '@storybook/core-events';
|
||||
import { types } from '@storybook/addons';
|
||||
import { Icons, IconButton, TabButton, TabBar, interleaveSeparators } from '@storybook/components';
|
||||
import { Icons, IconButton, TabButton, TabBar, Separator } from '@storybook/components';
|
||||
|
||||
import Helmet from 'react-helmet-async';
|
||||
|
||||
@ -78,33 +77,39 @@ const defaultWrappers = [
|
||||
];
|
||||
|
||||
const getTools = memoize(10)(
|
||||
(getElements, panels, actions, options, storyId, viewMode, location, path, baseUrl) => {
|
||||
(getElements, panels, actions, options, storyId, viewMode, location, path) => {
|
||||
const tools = getElementList(getElements, types.TOOL, [
|
||||
panels.filter(p => p.id !== 'canvas').length
|
||||
? {
|
||||
render: () => (
|
||||
<TabBar key="tabs" scroll={false}>
|
||||
{panels.map((t, index) => {
|
||||
const to = t.route({ storyId, viewMode, path, location });
|
||||
const isActive = t.match({ storyId, viewMode, path, location });
|
||||
return (
|
||||
<S.UnstyledLink key={t.id || `l${index}`} to={to}>
|
||||
<TabButton active={isActive}>{t.title}</TabButton>
|
||||
</S.UnstyledLink>
|
||||
);
|
||||
})}
|
||||
</TabBar>
|
||||
<Fragment>
|
||||
<TabBar key="tabs" scroll={false}>
|
||||
{panels.map((t, index) => {
|
||||
const to = t.route({ storyId, viewMode, path, location });
|
||||
const isActive = t.match({ storyId, viewMode, path, location });
|
||||
return (
|
||||
<S.UnstyledLink key={t.id || `l${index}`} to={to}>
|
||||
<TabButton active={isActive}>{t.title}</TabButton>
|
||||
</S.UnstyledLink>
|
||||
);
|
||||
})}
|
||||
</TabBar>
|
||||
<Separator />
|
||||
</Fragment>
|
||||
),
|
||||
}
|
||||
: null,
|
||||
{
|
||||
match: p => p.viewMode === 'story',
|
||||
render: () => (
|
||||
<ZoomConsumer>
|
||||
{({ set, value }) => (
|
||||
<Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
|
||||
)}
|
||||
</ZoomConsumer>
|
||||
<Fragment>
|
||||
<ZoomConsumer>
|
||||
{({ set, value }) => (
|
||||
<Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
|
||||
)}
|
||||
</ZoomConsumer>
|
||||
<Separator />
|
||||
</Fragment>
|
||||
),
|
||||
},
|
||||
{
|
||||
@ -143,11 +148,11 @@ const getTools = memoize(10)(
|
||||
match: p => p.viewMode === 'story',
|
||||
render: () => (
|
||||
<IconButton
|
||||
key="opener"
|
||||
onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
|
||||
title="Open component in new tab"
|
||||
key="full"
|
||||
onClick={actions.toggleFullscreen}
|
||||
title={options.isFullscreen ? 'Exit full screen' : 'Go full screen'}
|
||||
>
|
||||
<Icons icon="share" />
|
||||
<Icons icon={options.isFullscreen ? 'close' : 'expand'} />
|
||||
</IconButton>
|
||||
),
|
||||
},
|
||||
@ -156,8 +161,22 @@ const getTools = memoize(10)(
|
||||
const filter = item =>
|
||||
item && (!item.match || item.match({ storyId, viewMode, location, path }));
|
||||
|
||||
const left = interleaveSeparators(tools.filter(filter));
|
||||
const right = interleaveSeparators(extraTools.filter(filter));
|
||||
const displayItems = list =>
|
||||
list.reduce(
|
||||
(acc, item, index) =>
|
||||
item ? (
|
||||
<Fragment key={item.id || item.key || `f-${index}`}>
|
||||
{acc}
|
||||
{item.render() || item}
|
||||
</Fragment>
|
||||
) : (
|
||||
acc
|
||||
),
|
||||
null
|
||||
);
|
||||
|
||||
const left = displayItems(tools.filter(filter));
|
||||
const right = displayItems(extraTools.filter(filter));
|
||||
|
||||
return { left, right };
|
||||
}
|
||||
|
||||
@ -413,14 +413,13 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
@ -437,7 +436,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
class="emotion-5"
|
||||
@ -1695,14 +1693,13 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
@ -1719,7 +1716,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
class="emotion-5"
|
||||
@ -2846,14 +2842,13 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
|
||||
>
|
||||
<div
|
||||
class="emotion-8"
|
||||
title="bar"
|
||||
title="flexbar"
|
||||
>
|
||||
<div
|
||||
class="emotion-7"
|
||||
>
|
||||
<div
|
||||
class="emotion-2"
|
||||
title="side left"
|
||||
>
|
||||
<div
|
||||
class="emotion-1"
|
||||
@ -2870,7 +2865,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="emotion-6"
|
||||
title="side right"
|
||||
>
|
||||
<button
|
||||
class="emotion-5"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user