From c00fd9550b888c49be1f2f808cbf0b027f145189 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Mon, 25 Feb 2019 13:27:49 -0500
Subject: [PATCH] Integrate ScrollArea

---
 .../__snapshots__/storyshots.test.js.snap     | 246 ++++++++++++++++--
 lib/components/src/bar/bar.js                 |  12 +-
 lib/ui/src/components/sidebar/Sidebar.js      |  16 +-
 .../sidebar/SidebarSimpleBarStyles.js         | 192 --------------
 4 files changed, 244 insertions(+), 222 deletions(-)
 delete 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 578a43bd79c..426e693326d 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -2535,6 +2535,198 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
 </div>
 `;
 
+exports[`Storyshots Basics|ScrollArea horizontal 1`] = `
+<div
+  style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
+>
+  <div
+    data-simplebar="true"
+    data-simplebar-auto-hide="false"
+    data-simplebar-force-visible="true"
+  >
+    <div
+      class="simplebar-wrapper"
+    >
+      <div
+        class="simplebar-height-auto-observer-wrapper"
+      >
+        <div
+          class="simplebar-height-auto-observer"
+        />
+      </div>
+      <div
+        class="simplebar-mask"
+      >
+        <div
+          class="simplebar-offset"
+        >
+          <div
+            class="simplebar-content"
+          >
+            <b>
+              HORIZONTAL
+            </b>
+            <span
+              style="white-space:nowrap"
+            >
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="simplebar-placeholder"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-horizontal"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-vertical"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Basics|ScrollArea vertical 1`] = `
+<div
+  style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
+>
+  <div
+    data-simplebar="true"
+    data-simplebar-auto-hide="false"
+    data-simplebar-force-visible="true"
+  >
+    <div
+      class="simplebar-wrapper"
+    >
+      <div
+        class="simplebar-height-auto-observer-wrapper"
+      >
+        <div
+          class="simplebar-height-auto-observer"
+        />
+      </div>
+      <div
+        class="simplebar-mask"
+      >
+        <div
+          class="simplebar-offset"
+        >
+          <div
+            class="simplebar-content"
+          >
+            <b>
+              VERTICAL
+            </b>
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
+          </div>
+        </div>
+      </div>
+      <div
+        class="simplebar-placeholder"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-horizontal"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-vertical"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Basics|ScrollArea verticalCustomStyling 1`] = `
+.emotion-0 .simplebar-scrollbar:before {
+  background: purple;
+}
+
+.emotion-0 .simplebar-track.simplebar-vertical {
+  right: 20px;
+}
+
+.emotion-0 .simplebar-scrollbar:before {
+  background: purple;
+}
+
+.emotion-0 .simplebar-track.simplebar-vertical {
+  right: 20px;
+}
+
+<div
+  style="width:240px;height:240px;overflow:auto;background:papayawhip;margin:1rem"
+>
+  <div
+    class="emotion-0"
+    data-simplebar="true"
+    data-simplebar-auto-hide="false"
+    data-simplebar-force-visible="true"
+  >
+    <div
+      class="simplebar-wrapper"
+    >
+      <div
+        class="simplebar-height-auto-observer-wrapper"
+      >
+        <div
+          class="simplebar-height-auto-observer"
+        />
+      </div>
+      <div
+        class="simplebar-mask"
+      >
+        <div
+          class="simplebar-offset"
+        >
+          <div
+            class="simplebar-content"
+          >
+            <b>
+              VERTICAL CUSTOM STYLING
+            </b>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus congue, nulla sed consectetur ornare, nibh dui accumsan risus, vel ullamcorper elit ipsum eget libero. Aenean dictum nisi a rutrum convallis. Nullam id viverra diam. Vivamus ut augue eget urna commodo vulputate. Donec ullamcorper lectus a nulla malesuada, eget suscipit dui molestie. Suspendisse ac nulla in mi dignissim ornare id quis est. Morbi ut condimentum lorem, eu porta mi. Proin lacinia ac neque ultricies dictum. Mauris placerat ornare bibendum. Fusce porttitor quis ante ac consectetur. Sed finibus eu magna eu sollicitudin. Vivamus tellus tortor, tincidunt sed arcu tempus, suscipit feugiat est. Ut sit amet libero eget odio euismod tempor et nec velit.
+          </div>
+        </div>
+      </div>
+      <div
+        class="simplebar-placeholder"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-horizontal"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+    <div
+      class="simplebar-track simplebar-vertical"
+    >
+      <div
+        class="simplebar-scrollbar"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Core|Events Force re-render 1`] = `
 .emotion-0 {
   border: 0;
@@ -5117,7 +5309,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   fill: currentColor;
 }
 
-.emotion-81 {
+.emotion-82 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -5139,7 +5331,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   display: none;
 }
 
-.emotion-84 {
+.emotion-85 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -5152,6 +5344,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   overflow-x: hidden;
 }
 
+.emotion-80 .simplebar-track.simplebar-vertical {
+  right: 4px;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5314,7 +5510,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   height: 48px;
 }
 
-.emotion-83 {
+.emotion-84 {
   position: fixed;
   display: block;
   bottom: 20px;
@@ -5523,7 +5719,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   fill: currentColor;
 }
 
-.emotion-81 {
+.emotion-82 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -5545,7 +5741,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   display: none;
 }
 
-.emotion-84 {
+.emotion-85 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -5558,6 +5754,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   overflow-x: hidden;
 }
 
+.emotion-80 .simplebar-track.simplebar-vertical {
+  right: 4px;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5720,7 +5920,7 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
   height: 48px;
 }
 
-.emotion-83 {
+.emotion-84 {
   position: fixed;
   display: block;
   bottom: 20px;
@@ -5878,9 +6078,10 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
 }
 
 <nav
-  class="container emotion-84"
+  class="container emotion-85"
 >
   <div
+    class="emotion-80"
     data-simplebar="true"
   >
     <div
@@ -6335,13 +6536,13 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
     </div>
   </div>
   <div
-    class="emotion-83"
+    class="emotion-84"
   >
     <div
       class="emotion-78"
     >
       <div
-        class="emotion-81"
+        class="emotion-82"
       >
         <div
           class="emotion-79"
@@ -6367,7 +6568,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   fill: currentColor;
 }
 
-.emotion-52 {
+.emotion-53 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -6389,7 +6590,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   display: none;
 }
 
-.emotion-55 {
+.emotion-56 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -6402,6 +6603,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   overflow-x: hidden;
 }
 
+.emotion-51 .simplebar-track.simplebar-vertical {
+  right: 4px;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -6871,7 +7076,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   height: 48px;
 }
 
-.emotion-54 {
+.emotion-55 {
   position: fixed;
   display: block;
   bottom: 20px;
@@ -6896,7 +7101,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   fill: currentColor;
 }
 
-.emotion-52 {
+.emotion-53 {
   display: block;
   padding: 16px 20px;
   border-radius: 10px;
@@ -6918,7 +7123,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   display: none;
 }
 
-.emotion-55 {
+.emotion-56 {
   position: absolute;
   z-index: 1;
   left: 0;
@@ -6931,6 +7136,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   overflow-x: hidden;
 }
 
+.emotion-51 .simplebar-track.simplebar-vertical {
+  right: 4px;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7400,7 +7609,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
   height: 48px;
 }
 
-.emotion-54 {
+.emotion-55 {
   position: fixed;
   display: block;
   bottom: 20px;
@@ -7414,9 +7623,10 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
 }
 
 <nav
-  class="container emotion-55"
+  class="container emotion-56"
 >
   <div
+    class="emotion-51"
     data-simplebar="true"
   >
     <div
@@ -7749,13 +7959,13 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
     </div>
   </div>
   <div
-    class="emotion-54"
+    class="emotion-55"
   >
     <div
       class="emotion-49"
     >
       <div
-        class="emotion-52"
+        class="emotion-53"
       >
         <div
           class="emotion-31"
diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
index 38ac1487591..1747a6fe4c5 100644
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.js
@@ -2,7 +2,7 @@ import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-import SimpleBar from 'simplebar-react';
+import { ScrollArea } from '../ScrollArea/ScrollArea';
 
 const Side = styled.div(
   {
@@ -63,11 +63,11 @@ export const FlexBar = ({ children, ...rest }) => {
   return (
     <Bar {...rest} title="bar">
       {/* TODO:
-        - Fix vertical scrollbar showing
-        - Add SimpleBar CSS to globalReset styles
-        - Ensure SimpleBar CSS is accessible inside the SB iframe via .storybook/config.js
+        - Fix vertical scrollbar when we only want to see the horizontal bar
+        - Likely caused because we're appending toolbar icons after the initial load 
+        - https://github.com/Grsmto/simplebar#notifying-the-plugin-of-content-changes
        */}
-      <SimpleBar>
+      <ScrollArea>
         <BarInner>
           <Side left title="side left">
             {left}
@@ -78,7 +78,7 @@ export const FlexBar = ({ children, ...rest }) => {
             </Side>
           ) : null}
         </BarInner>
-      </SimpleBar>
+      </ScrollArea>
     </Bar>
   );
 };
diff --git a/lib/ui/src/components/sidebar/Sidebar.js b/lib/ui/src/components/sidebar/Sidebar.js
index b33c4004ca0..69c6ec42556 100644
--- a/lib/ui/src/components/sidebar/Sidebar.js
+++ b/lib/ui/src/components/sidebar/Sidebar.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled, Global } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 
-import SimpleBar from 'simplebar-react';
-import { getSimpleBarStyles } from './SidebarSimpleBarStyles';
+import { ScrollArea } from '@storybook/components';
 
 import NotificationList, { NotificationListSpacer } from './NotificationList';
 import SidebarHeading from './SidebarHeading';
@@ -43,17 +42,22 @@ export const Notifications = styled.div({
   zIndex: 2,
 });
 
+const CustomScrollArea = styled(ScrollArea)({
+  '.simplebar-track.simplebar-vertical': {
+    right: '4px',
+  },
+});
+
 const Sidebar = ({ storyId, notifications = [], stories, menu, menuHighlighted, loading }) => (
   <Container className="container">
-    <Global styles={getSimpleBarStyles} />
-    <SimpleBar>
+    <CustomScrollArea>
       <Heading menuHighlighted={menuHighlighted} menu={menu} />
       <Stories stories={stories} storyId={storyId} loading={loading} />
 
       <Foot>
         <NotificationListSpacer notifications={notifications} />
       </Foot>
-    </SimpleBar>
+    </CustomScrollArea>
 
     <Notifications>
       <NotificationList notifications={notifications} />
diff --git a/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js b/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js
deleted file mode 100644
index 9245a3828ee..00000000000
--- a/lib/ui/src/components/sidebar/SidebarSimpleBarStyles.js
+++ /dev/null
@@ -1,192 +0,0 @@
-// 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;
-  }
-`;