From a2cc28c7db805259a9f9918dbb1a9f30f0d600c2 Mon Sep 17 00:00:00 2001 From: domyen Date: Fri, 15 Feb 2019 18:04:19 -0500 Subject: [PATCH 01/18] Re-add SimpleBar for nicer scrollbars #5421 --- .../__snapshots__/storyshots.test.js.snap | 1662 +++++++++-------- lib/components/package.json | 3 +- lib/components/src/bar/bar.js | 94 +- .../tabs/__snapshots__/tabs.stories.storyshot | 1418 +++++++------- lib/ui/package.json | 1 + .../__snapshots__/panel.stories.storyshot | 212 +-- .../__snapshots__/preview.stories.storyshot | 640 +++---- lib/ui/src/components/sidebar/Sidebar.js | 18 +- .../sidebar/SidebarSimpleBarStyles.js | 192 ++ .../__snapshots__/about.stories.storyshot | 504 +++-- yarn.lock | 31 +- 11 files changed, 2407 insertions(+), 2368 deletions(-) create mode 100644 lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap index 3cdd355530e3..578a43bd79c5 100644 --- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap +++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap @@ -3334,72 +3334,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` .emotion-8 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-8::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-8::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-7 { @@ -3412,7 +3352,9 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -3421,6 +3363,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -3491,6 +3434,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -3865,72 +3809,12 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` .emotion-8 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-8::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-8::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-7 { @@ -3943,7 +3827,9 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -3952,6 +3838,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -4022,6 +3909,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -4390,42 +4278,86 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = ` title="bar" >
+
+
+
- +
+
+
+
+ +
+
+
+ +
+
+
+
+
- +
+
+
+
@@ -5949,430 +5881,474 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = ` class="container emotion-84" >
- - +
+
+
- - - - - - - - - - - - - -
-
- -
-
-
-
- + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+ + + + + + loading story + +
+
+
+
+
+
+
+
+
+
+
- - - - - loading story -
- - - - - - loading story -
- - - - - - loading story -
+
+
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
- - - - - - loading story - -
-
-
-
-
-
-
-
-
-
-
- 🎉 Storybook is cool! -
-
+
+ 🎉 Storybook is cool! +
+
@@ -7441,290 +7417,334 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = ` class="container emotion-55" >
- - - - - - - - - - - - - - - -
-
- -
-
-
-
- - - - - -
-
- Root 1 -
-
- - - - - - Child A2 - -
- + class="simplebar-height-auto-observer" + /> +
-
- - - - - - GrandChild A1.1 - -
- - - +
+ +
+
+
- - - - GrandChild A1.2 - +
+ + + + + +
+
+
+ Root 1 +
+ +
+ + + + + + Child A2 + +
+ +
+ +
+ + + + + + GrandChild A1.1 + +
+ + +
+ + + + + + GrandChild A1.2 + +
+ +
+
+
+
+ Root 3 +
+ +
+ + + + + + Child A2 + +
+ +
+
+
+ Others +
+ +
+ + + + + + Group 1 + +
+ +
+
+
+
+
+
+
- + - -
- Root 3 -
- -
- - - - - - Child A2 - -
- -
-
+ +
- Others -
- -
- - - - - - Group 1 - -
- -
- -
+ class="simplebar-scrollbar" + /> +
diff --git a/lib/components/package.json b/lib/components/package.json index ea206eaf010c..6cd8789f4b29 100644 --- a/lib/components/package.json +++ b/lib/components/package.json @@ -44,7 +44,8 @@ "react-textarea-autosize": "^7.0.4", "reactjs-popup": "^1.3.2", "recompose": "^0.30.0", - "render-fragment": "^0.1.1" + "render-fragment": "^0.1.1", + "simplebar-react": "^0.1.4" }, "peerDependencies": { "react": "*", diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js index 4d5f054e51d3..38ac1487591c 100644 --- a/lib/components/src/bar/bar.js +++ b/lib/components/src/bar/bar.js @@ -2,9 +2,12 @@ import React, { Children } from 'react'; import PropTypes from 'prop-types'; import { styled } from '@storybook/theming'; +import SimpleBar from 'simplebar-react'; + const Side = styled.div( { display: 'flex', + whiteSpace: 'nowrap', flexBasis: 'auto', flexShrink: 0, }, @@ -30,72 +33,18 @@ Side.displayName = 'Side'; export const Bar = styled.div( ({ theme }) => ({ - // display: 'flex', - // justifyContent: 'space-between', - // background: theme.barBg, color: theme.barTextColor, + width: '100%', height: 40, + overflowX: 'auto', + overflowY: 'hidden', }), - ({ theme, scroll = true }) => - scroll - ? { - overflow: 'auto', - overflowX: 'auto', - overflowY: 'hidden', - 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': { - borderRadius: 0, - background: 'transparent', - opacity: 0, - border: '0 none', - boxShadow: 'none', - height: 0, - width: 0, - }, - '&::-webkit-scrollbar-thumb': { - borderRadius: 0, - background: theme.color.border, - boxShadow: 'none', - }, - '&::-webkit-scrollbar-track-piece': { - display: 'none', - border: '0 none', - opacity: 0, - visibility: 'hidden', - }, - } - : { - overflow: 'visible', - overflowX: 'visible', - overflowY: 'visible', - }, ({ theme, border }) => border ? { - background: `${theme.barBg} linear-gradient(to bottom, transparent calc(100% - 1px), ${ - theme.appBorderColor - } calc(100% - 1px))`, + boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, + background: theme.barBg, } : {} ); @@ -105,7 +54,7 @@ const BarInner = styled.div({ display: 'flex', justifyContent: 'space-between', position: 'relative', - whiteSpace: 'nowrap', + flexWrap: 'nowrap', height: 40, }); @@ -113,16 +62,23 @@ export const FlexBar = ({ children, ...rest }) => { const [left, right] = Children.toArray(children); return ( - - - {left} - - {right ? ( - - {right} + {/* TODO: + - Fix vertical scrollbar showing + - Add SimpleBar CSS to globalReset styles + - Ensure SimpleBar CSS is accessible inside the SB iframe via .storybook/config.js + */} + + + + {left} - ) : null} - + {right ? ( + + {right} + + ) : null} + + ); }; diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot index ec79f2959e47..fc6f1e418bdd 100644 --- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot +++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot @@ -3,72 +3,12 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` .emotion-9 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-9::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-9::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-8 { @@ -81,7 +21,9 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -90,6 +32,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -226,59 +169,103 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
@@ -355,72 +342,12 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = ` exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` .emotion-9 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-9::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-9::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-8 { @@ -433,7 +360,9 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -442,6 +371,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -578,59 +508,103 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
@@ -663,72 +637,12 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = ` exports[`Storyshots Basics|Tabs stateful - static 1`] = ` .emotion-5 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-5::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-5::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-4 { @@ -741,7 +655,9 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -750,6 +666,7 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -882,31 +799,75 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = ` title="bar" >
- -
+
+
- With markup - +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
@@ -929,72 +890,12 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = ` exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` .emotion-9 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-9::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-9::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-8 { @@ -1007,7 +908,9 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -1016,6 +919,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -1169,59 +1073,103 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
@@ -1298,72 +1246,12 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = ` exports[`Storyshots Basics|Tabs stateless - bordered 1`] = ` .emotion-9 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-9::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-9::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-8 { @@ -1376,7 +1264,9 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -1385,6 +1275,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -1523,59 +1414,103 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
@@ -1679,72 +1614,12 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = ` exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = ` .emotion-9 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-9::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-9::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-8 { @@ -1757,7 +1632,9 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -1766,6 +1643,7 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -1904,59 +1782,103 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+
+
@@ -2033,72 +1955,12 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = ` exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` .emotion-10 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-10::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-10::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-9 { @@ -2111,7 +1973,9 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -2120,6 +1984,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -2235,6 +2100,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -2274,74 +2140,118 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = ` title="bar" >
- - - - - -
+
+
- Tab title #6 - +
+
+
+
+ + + + + + +
+
+
+ + +
+
+
+
+
- - +
+
+
+
diff --git a/lib/ui/package.json b/lib/ui/package.json index 5f6770a10263..6e420b715299 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -56,6 +56,7 @@ "react-resize-detector": "^3.2.1", "recompose": "^0.30.0", "semver": "^5.6.0", + "simplebar-react": "^0.1.4", "to-camel-case": "^1.0.0", "util-deprecate": "^1.0.2" }, diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot index 64a6e9de7402..1d1b338cb7d5 100644 --- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot +++ b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot @@ -16,72 +16,12 @@ exports[`Storyshots UI|Panel default 1`] = ` .emotion-12 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-12::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-12::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-11 { @@ -94,7 +34,9 @@ exports[`Storyshots UI|Panel default 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -103,6 +45,7 @@ exports[`Storyshots UI|Panel default 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -218,6 +161,7 @@ exports[`Storyshots UI|Panel default 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -288,64 +232,108 @@ exports[`Storyshots UI|Panel default 1`] = ` title="bar" >
- -
+
+
- Test 2 - +
+
+
+
+ + +
+
+
+ + +
+
+
+
+
- - +
+
+
+
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot index 58d47410daad..3016738d98bd 100644 --- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot +++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot @@ -12,7 +12,9 @@ Array [ -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -21,6 +23,7 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -38,6 +41,7 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -88,23 +92,12 @@ Array [ .emotion-23 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px)); + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; position: absolute; left: 0; right: 0; @@ -116,55 +109,6 @@ 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-23::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-23::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; -} - .emotion-9 { width: 1px; height: 24px; @@ -189,107 +133,151 @@ Array [ title="bar" >
- - -
+
- - - - - +
+
+ + + + + +
+
+ + + +
+
+
+
+
+
-
- - +
+
+
-
, @@ -377,7 +365,9 @@ Array [ -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -386,6 +376,7 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -501,6 +492,7 @@ Array [ display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -551,23 +543,12 @@ Array [ .emotion-29 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px)); + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; position: absolute; left: 0; right: 0; @@ -579,55 +560,6 @@ 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-29::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-29::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; -} - .emotion-5 { width: 1px; height: 24px; @@ -659,134 +591,178 @@ Array [ title="bar" >
- - - - +
+
+
- - +
+
+
+ + + + + + +
+ + + + + + +
+
+ + + +
+
+
+
- - - - - +
+
-
- - -
, diff --git a/lib/ui/src/components/sidebar/Sidebar.js b/lib/ui/src/components/sidebar/Sidebar.js index 2bce763cc25a..b33c4004ca0a 100644 --- a/lib/ui/src/components/sidebar/Sidebar.js +++ b/lib/ui/src/components/sidebar/Sidebar.js @@ -1,6 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { styled } from '@storybook/theming'; +import { styled, Global } from '@storybook/theming'; + +import SimpleBar from 'simplebar-react'; +import { getSimpleBarStyles } from './SidebarSimpleBarStyles'; import NotificationList, { NotificationListSpacer } from './NotificationList'; import SidebarHeading from './SidebarHeading'; @@ -42,12 +45,15 @@ export const Notifications = styled.div({ const Sidebar = ({ storyId, notifications = [], stories, menu, menuHighlighted, loading }) => ( - - + + + + - - - + + + + diff --git a/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js b/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js new file mode 100644 index 000000000000..9245a3828eee --- /dev/null +++ b/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js @@ -0,0 +1,192 @@ +// manually import CSS instead of using "import 'simplebar/dist/simplebar.css';" +// customize scrollbar here +import { css } from '@storybook/theming'; + +// export const simplebarStyles = css` +export const getSimpleBarStyles = theme => css` + [data-simplebar] { + position: relative; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + align-items: flex-start; + width: inherit; + height: inherit; + max-width: inherit; + max-height: inherit; + } + + .simplebar-wrapper { + overflow: hidden; + width: inherit; + height: inherit; + max-width: inherit; + max-height: inherit; + } + + .simplebar-mask { + direction: inherit; + position: absolute; + overflow: hidden; + padding: 0; + margin: 0; + left: 0; + top: 0; + bottom: 0; + right: 0; + width: auto !important; + height: auto !important; + z-index: 0; + } + + .simplebar-offset { + direction: inherit !important; + box-sizing: inherit !important; + resize: none !important; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + -webkit-overflow-scrolling: touch; + } + + .simplebar-content { + direction: inherit; + box-sizing: border-box !important; + position: relative; + display: block; + height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */ + width: auto; + visibility: visible; + overflow: scroll; /* Scroll on this element otherwise element can't have a padding applied properly */ + max-width: 100%; /* Not required for horizontal scroll to trigger */ + max-height: 100%; /* Needed for vertical scroll to trigger */ + } + + .simplebar-placeholder { + max-height: 100%; + max-width: 100%; + width: 100%; + pointer-events: none; + } + + .simplebar-height-auto-observer-wrapper { + box-sizing: inherit !important; + height: 100%; + width: inherit; + max-width: 1px; + position: relative; + float: left; + max-height: 1px; + overflow: hidden; + z-index: -1; + padding: 0; + margin: 0; + pointer-events: none; + flex-grow: inherit; + flex-shrink: 0; + flex-basis: 0; + } + + .simplebar-height-auto-observer { + box-sizing: inherit; + display: block; + opacity: 0; + position: absolute; + top: 0; + left: 0; + height: 1000%; + width: 1000%; + min-height: 1px; + min-width: 1px; + overflow: hidden; + pointer-events: none; + z-index: -1; + } + + .simplebar-track { + z-index: 1; + position: absolute; + right: 0; + bottom: 0; + pointer-events: none; + } + + .simplebar-scrollbar { + position: absolute; + right: 2px; + width: 6px; + min-height: 10px; + } + + .simplebar-scrollbar:before { + position: absolute; + content: ''; + background: ${theme.base === 'light' ? theme.color.darkest : theme.color.lightest}; + border-radius: 6px; + left: 0; + right: 0; + opacity: 0; + transition: opacity 0.2s linear; + } + + .simplebar-track .simplebar-scrollbar.simplebar-visible:before { + /* When hovered, remove all transitions from drag handle */ + opacity: 0.2; + transition: opacity 0s linear; + } + + .simplebar-track.simplebar-vertical { + top: 0; + width: 10px; + right: 4px; + } + + .simplebar-track.simplebar-vertical .simplebar-scrollbar:before { + top: 2px; + bottom: 2px; + } + + .simplebar-track.simplebar-horizontal { + left: 0; + height: 10px; + bottom: 0; + } + + .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before { + height: 100%; + left: 2px; + right: 2px; + } + + .simplebar-track.simplebar-horizontal .simplebar-scrollbar { + right: auto; + left: 0; + top: 2px; + height: 6px; + min-height: 0; + min-width: 10px; + width: auto; + } + + /* Rtl support */ + [data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical { + right: auto; + left: 0; + } + + .hs-dummy-scrollbar-size { + direction: rtl; + position: fixed; + opacity: 0; + visibility: hidden; + height: 500px; + width: 500px; + overflow-y: hidden; + overflow-x: scroll; + } +`; diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot index 3078db253789..73118359318a 100644 --- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot +++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot @@ -16,72 +16,12 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = ` .emotion-8 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-8::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-8::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-7 { @@ -94,7 +34,9 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -103,6 +45,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -173,6 +116,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -416,42 +360,86 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = ` title="bar" >
+
+
+
- +
+
+
+
+ +
+
+
+ +
+
+
+
+
- +
+
+
+
@@ -585,72 +573,12 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` .emotion-8 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-8::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-8::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-7 { @@ -663,7 +591,9 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -672,6 +602,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -742,6 +673,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -1698,42 +1630,86 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = ` title="bar" >
+
+
+
- +
+
+
+
+ +
+
+
+ +
+
+
+
+
- +
+
+
+
@@ -1973,72 +1949,12 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = ` .emotion-8 { color: #999999; + width: 100%; height: 40px; - overflow: auto; overflow-x: auto; overflow-y: hidden; - -webkit-scrollbar-width: slim; - -moz-scrollbar-width: slim; - -ms-scrollbar-width: slim; - scrollbar-width: slim; - -webkit-scrollbar-width: 3px; - -moz-scrollbar-width: 3px; - -ms-scrollbar-width: 3px; - scrollbar-width: 3px; - -webkit-scrollbar-color: transparent transparent; - -moz-scrollbar-color: transparent transparent; - -ms-scrollbar-color: transparent transparent; - scrollbar-color: transparent transparent; - 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 { - border-radius: 0; - background: transparent; - opacity: 0; - border: 0 none; - box-shadow: none; - height: 0; - width: 0; -} - -.emotion-8::-webkit-scrollbar-thumb { - border-radius: 0; - background: rgba(0,0,0,.1); - box-shadow: none; -} - -.emotion-8::-webkit-scrollbar-track-piece { - display: none; - border: 0 none; - opacity: 0; - visibility: hidden; + box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset; + background: #FFFFFF; } .emotion-7 { @@ -2051,7 +1967,9 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = ` -ms-flex-pack: justify; justify-content: space-between; position: relative; - white-space: nowrap; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; height: 40px; } @@ -2060,6 +1978,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -2130,6 +2049,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + white-space: nowrap; -webkit-flex-basis: auto; -ms-flex-preferred-size: auto; flex-basis: auto; @@ -2849,42 +2769,86 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = ` title="bar" >
+
+
+
- +
+
+
+
+ +
+
+
+ +
+
+
+
+
- +
+
+
+
diff --git a/yarn.lock b/yarn.lock index 06862083be05..6ab4ca6e7f80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1936,7 +1936,6 @@ "@types/common-tags@^1.8.0": version "1.8.0" resolved "https://registry.yarnpkg.com/@types/common-tags/-/common-tags-1.8.0.tgz#79d55e748d730b997be5b7fce4b74488d8b26a6b" - integrity sha512-htRqZr5qn8EzMelhX/Xmx142z218lLyGaeZ3YR8jlze4TATRU9huKKvuBmAJEW4LCC4pnY1N6JAm6p85fMHjhg== "@types/core-js@^2.5.0": version "2.5.0" @@ -5456,6 +5455,10 @@ can-symlink@^1.0.0: dependencies: tmp "0.0.28" +can-use-dom@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a" + caniuse-api@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0" @@ -6996,7 +6999,6 @@ deep-is@~0.1.3: deep-object-diff@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a" - integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw== deepmerge@3.0.0: version "3.0.0" @@ -18015,7 +18017,7 @@ reselect@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147" -resize-observer-polyfill@^1.5.1: +resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464" @@ -18457,6 +18459,10 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" +scrollbarwidth@^0.1.3: + version "0.1.3" + resolved "https://registry.yarnpkg.com/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz#1b0de64e288c38c427f4a01fe00a462a04b94fdf" + scss-tokenizer@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" @@ -18784,6 +18790,25 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +simplebar-react@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-0.1.4.tgz#6b795166840b1cce55c2d45a0a9c7ede6cb59cee" + dependencies: + prop-types "^15.6.1" + simplebar "^3.1.3" + +simplebar@^3.1.3: + version "3.1.3" + resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-3.1.3.tgz#fa6c669d080d1a7514b277b2e27807bba1a6e118" + dependencies: + can-use-dom "^0.1.0" + core-js "^2.6.2" + lodash.debounce "^4.0.8" + lodash.memoize "^4.1.2" + lodash.throttle "^4.1.1" + resize-observer-polyfill "^1.5.0" + scrollbarwidth "^0.1.3" + sisteransi@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-0.1.1.tgz#5431447d5f7d1675aac667ccd0b865a4994cb3ce" From 4293b7bbad4f00382bbc9573fc9bde20cab1deae Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 25 Feb 2019 12:35:03 -0500 Subject: [PATCH 02/18] Add ScrollArea component and stories --- lib/components/src/ScrollArea/ScrollArea.js | 26 +++ .../src/ScrollArea/ScrollArea.stories.js | 70 +++++++ .../src/ScrollArea/ScrollAreaStyles.js | 192 ++++++++++++++++++ lib/components/src/index.js | 2 + 4 files changed, 290 insertions(+) create mode 100644 lib/components/src/ScrollArea/ScrollArea.js create mode 100644 lib/components/src/ScrollArea/ScrollArea.stories.js create mode 100644 lib/components/src/ScrollArea/ScrollAreaStyles.js diff --git a/lib/components/src/ScrollArea/ScrollArea.js b/lib/components/src/ScrollArea/ScrollArea.js new file mode 100644 index 000000000000..ff5648d3d90b --- /dev/null +++ b/lib/components/src/ScrollArea/ScrollArea.js @@ -0,0 +1,26 @@ +// Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar +// Note: "SimpleBar can't be used on the ,