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

Merge pull request #5689 from storybooks/fix/bar-scrollbar-persistence

Browse Source 
Fix/bar scrollbar persistence
This commit is contained in:
Michael Shilman 2019-02-21 14:26:22 +08:00 committed by Michael Shilman
parent 1254bdd509
commit a02fb7238b
6 changed files with 296 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View File

@ -3353,11 +3353,30 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-8:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-8::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-8:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-8::-webkit-scrollbar-track {
@ -3865,11 +3884,30 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-8:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-8::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-8:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-8::-webkit-scrollbar-track {

11
lib/components/src/bar/bar.js
View File

@ -45,11 +45,22 @@ export const Bar = styled.div(
scrollbarWidth: ['slim', 3],
scrollbarColor: 'transparent transparent',
'&:hover': {
scrollbarWidth: ['none', 0],
},
'&::-webkit-scrollbar': {
height: 3,
width: 3,
background: 'transparent',
boxShadow: 'none',
display: 'none',
},
'&:hover::-webkit-scrollbar': {
height: 3,
width: 3,
background: 'transparent',
display: 'block',
},
'&::-webkit-scrollbar-track': {

133
lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
View File

@ -22,11 +22,30 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-9:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-9::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-9:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-9::-webkit-scrollbar-track {
@ -355,11 +374,30 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-9:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-9::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-9:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-9::-webkit-scrollbar-track {
@ -644,11 +682,30 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-5:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-5::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-5:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-5::-webkit-scrollbar-track {
@ -891,11 +948,30 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-9:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-9::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-9:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-9::-webkit-scrollbar-track {
@ -1241,11 +1317,30 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-9:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-9::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-9:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-9::-webkit-scrollbar-track {
@ -1603,11 +1698,30 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-9:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-9::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-9:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-9::-webkit-scrollbar-track {
@ -1938,11 +2052,30 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-10:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-10::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-10:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-10::-webkit-scrollbar-track {

19
lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
View File

@ -35,11 +35,30 @@ exports[`Storyshots UI|Panel default 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-12:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-12::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-12:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-12::-webkit-scrollbar-track {

38
lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
View File

@ -116,11 +116,30 @@ Array [
tranform: translateY(0px);
}
.emotion-23:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-23::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-23:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-23::-webkit-scrollbar-track {
@ -560,11 +579,30 @@ Array [
tranform: translateY(0px);
}
.emotion-29:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-29::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-29:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-29::-webkit-scrollbar-track {

57
lib/ui/src/settings/__snapshots__/about.stories.storyshot
View File

@ -35,11 +35,30 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-8:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-8::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-8:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-8::-webkit-scrollbar-track {
@ -585,11 +604,30 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-8:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-8::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-8:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-8::-webkit-scrollbar-track {
@ -1954,11 +1992,30 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
}
.emotion-8:hover {
-webkit-scrollbar-width: none;
-moz-scrollbar-width: none;
-ms-scrollbar-width: none;
scrollbar-width: none;
-webkit-scrollbar-width: 0;
-moz-scrollbar-width: 0;
-ms-scrollbar-width: 0;
scrollbar-width: 0;
}
.emotion-8::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
box-shadow: none;
display: none;
}
.emotion-8:hover::-webkit-scrollbar {
height: 3px;
width: 3px;
background: transparent;
display: block;
}
.emotion-8::-webkit-scrollbar-track {