Merge pull request #3914 from storybooks/ndelangen/split-tweak

REFACTOR layout and REMOVE usplit component

lib/components/src/layout/__snapshots__/index.stories.storyshot

@@ -14,7 +14,7 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
         style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-1kbxkw2"
+          class="css-7r9jvr"
         >
           <div
             class="css-9in0fq"
@@ -25,20 +25,10 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
               Stories
             </div>
           </div>
-          <div
-            class="css-owlojx"
-            direction="vertical"
-          >
-            <div
-              class="css-19oxd4p"
-              direction="vertical"
-            />
-          </div>
         </div>
       </div>
       <span
         class="Resizer vertical "
-        style="cursor:col-resize;height:auto;width:10px;z-index:1"
       />
       <div
         class="Pane vertical Pane2  "
@@ -71,7 +61,6 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
           </div>
           <span
             class="Resizer vertical "
-            style="cursor:col-resize;height:100%;width:10px;z-index:1"
           />
           <div
             class="Pane vertical Pane2  "
@@ -80,15 +69,6 @@ exports[`Storyshots Components|Layout addon panel in right 1`] = `
             <div
               class="css-1929wko"
             >
-              <div
-                class="css-nq4yle"
-                direction="vertical"
-              >
-                <div
-                  class="css-19oxd4p"
-                  direction="vertical"
-                />
-              </div>
               <div
                 style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
               >
@@ -119,7 +99,7 @@ exports[`Storyshots Components|Layout default 1`] = `
         style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-1kbxkw2"
+          class="css-7r9jvr"
         >
           <div
             class="css-9in0fq"
@@ -130,20 +110,10 @@ exports[`Storyshots Components|Layout default 1`] = `
               Stories
             </div>
           </div>
-          <div
-            class="css-owlojx"
-            direction="vertical"
-          >
-            <div
-              class="css-19oxd4p"
-              direction="vertical"
-            />
-          </div>
         </div>
       </div>
       <span
         class="Resizer vertical "
-        style="cursor:col-resize;height:auto;width:10px;z-index:1"
       />
       <div
         class="Pane vertical Pane2  "
@@ -176,7 +146,6 @@ exports[`Storyshots Components|Layout default 1`] = `
           </div>
           <span
             class="Resizer horizontal "
-            style="cursor:row-resize;height:10px;width:100%;z-index:1"
           />
           <div
             class="Pane horizontal Pane2  "
@@ -185,15 +154,6 @@ exports[`Storyshots Components|Layout default 1`] = `
             <div
               class="css-hys0kv"
             >
-              <div
-                class="css-1fpokv0"
-                direction="horizontal"
-              >
-                <div
-                  class="css-1nvj8jd"
-                  direction="horizontal"
-                />
-              </div>
               <div
                 style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
               >
@@ -224,7 +184,7 @@ exports[`Storyshots Components|Layout full screen 1`] = `
         style="flex:none;position:relative;outline:none;width:1px"
       >
         <div
-          class="css-1aqo4nl"
+          class="css-1yb218t"
         >
           <div
             class="css-9in0fq"
@@ -235,20 +195,10 @@ exports[`Storyshots Components|Layout full screen 1`] = `
               Stories
             </div>
           </div>
-          <div
-            class="css-owlojx"
-            direction="vertical"
-          >
-            <div
-              class="css-19oxd4p"
-              direction="vertical"
-            />
-          </div>
         </div>
       </div>
       <span
         class="Resizer vertical disabled"
-        style="height:auto;width:10px;z-index:1"
       />
       <div
         class="Pane vertical Pane2  "
@@ -281,7 +231,6 @@ exports[`Storyshots Components|Layout full screen 1`] = `
           </div>
           <span
             class="Resizer horizontal disabled"
-            style="height:10px;width:100%;z-index:1"
           />
           <div
             class="Pane horizontal Pane2  "
@@ -290,15 +239,6 @@ exports[`Storyshots Components|Layout full screen 1`] = `
             <div
               class="css-1yfjvq7"
             >
-              <div
-                class="css-1fpokv0"
-                direction="horizontal"
-              >
-                <div
-                  class="css-1nvj8jd"
-                  direction="horizontal"
-                />
-              </div>
               <div
                 style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
               >
@@ -407,7 +347,7 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
         style="flex:none;position:relative;outline:none;width:250px"
       >
         <div
-          class="css-1kbxkw2"
+          class="css-7r9jvr"
         >
           <div
             class="css-9in0fq"
@@ -418,20 +358,10 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
               Stories
             </div>
           </div>
-          <div
-            class="css-owlojx"
-            direction="vertical"
-          >
-            <div
-              class="css-19oxd4p"
-              direction="vertical"
-            />
-          </div>
         </div>
       </div>
       <span
         class="Resizer vertical "
-        style="cursor:col-resize;height:auto;width:10px;z-index:1"
       />
       <div
         class="Pane vertical Pane2  "
@@ -464,7 +394,6 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
           </div>
           <span
             class="Resizer horizontal disabled"
-            style="height:10px;width:100%;z-index:1"
           />
           <div
             class="Pane horizontal Pane2  "
@@ -473,15 +402,6 @@ exports[`Storyshots Components|Layout no addon panel 1`] = `
             <div
               class="css-1yfjvq7"
             >
-              <div
-                class="css-1fpokv0"
-                direction="horizontal"
-              >
-                <div
-                  class="css-1nvj8jd"
-                  direction="horizontal"
-                />
-              </div>
               <div
                 style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
               >
@@ -512,7 +432,7 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
         style="flex:none;position:relative;outline:none;width:1px"
       >
         <div
-          class="css-1aqo4nl"
+          class="css-1yb218t"
         >
           <div
             class="css-9in0fq"
@@ -523,20 +443,10 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
               Stories
             </div>
           </div>
-          <div
-            class="css-owlojx"
-            direction="vertical"
-          >
-            <div
-              class="css-19oxd4p"
-              direction="vertical"
-            />
-          </div>
         </div>
       </div>
       <span
         class="Resizer vertical disabled"
-        style="height:auto;width:10px;z-index:1"
       />
       <div
         class="Pane vertical Pane2  "
@@ -569,7 +479,6 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
           </div>
           <span
             class="Resizer horizontal "
-            style="cursor:row-resize;height:10px;width:100%;z-index:1"
           />
           <div
             class="Pane horizontal Pane2  "
@@ -578,15 +487,6 @@ exports[`Storyshots Components|Layout no stories panel 1`] = `
             <div
               class="css-hys0kv"
             >
-              <div
-                class="css-1fpokv0"
-                direction="horizontal"
-              >
-                <div
-                  class="css-1nvj8jd"
-                  direction="horizontal"
-                />
-              </div>
               <div
                 style="position:absolute;height:100%;width:100%;color:white;background:#fc4a1a"
               >

lib/components/src/layout/desktop.js

@@ -2,15 +2,64 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { localStorage, window } from 'global';
 
+import { injectGlobal } from 'emotion';
 import styled from 'react-emotion';
 import throttle from 'lodash.throttle';
 
 import SplitPane from 'react-split-pane';
 
-import USplit from './usplit';
 import Dimensions from './dimensions';
 
+// eslint-disable-next-line no-unused-expressions
+injectGlobal`
+.Resizer {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Resizer.horizontal {
+  height: 10px;
+  margin: -5px 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  cursor: row-resize;
+  width: 100%;
+}
+.Resizer.horizontal::after {
+  content: '';
+  display: block;
+  height: 2px;
+  width: 20px;
+  border-top: 1px solid rgba(0,0,0, 0.2);
+  border-bottom: 1px solid rgba(0,0,0, 0.2);
+}
+
+.Resizer.vertical {
+  width: 10px;
+  margin: 0 -5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  cursor: col-resize;
+}
+.Resizer.vertical::after {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 20px;
+  border-left: 1px solid rgba(0,0,0, 0.2);
+  border-right: 1px solid rgba(0,0,0, 0.2);
+}
+
+.Resizer.disabled {
+  visibility: hidden;
+}
+`;
+
 const StoriesPanelWrapper = styled('div')(({ showStoriesPanel, storiesPanelOnTop }) => ({
+  boxSizing: 'border-box',
   width: '100%',
   height: '100%',
   display: showStoriesPanel ? 'flex' : 'none',
@@ -42,22 +91,6 @@ const AddonPanelWrapper = styled('div')(
   })
 );
 
-const resizerCursor = isVert => (isVert ? 'col-resize' : 'row-resize');
-
-const storiesResizerStyle = (showStoriesPanel, storiesPanelOnTop) => ({
-  cursor: showStoriesPanel ? resizerCursor(!storiesPanelOnTop) : undefined,
-  height: storiesPanelOnTop ? 10 : 'auto',
-  width: storiesPanelOnTop ? '100%' : 10,
-  zIndex: 1,
-});
-
-const addonResizerStyle = (showAddonPanel, addonPanelInRight) => ({
-  cursor: showAddonPanel ? resizerCursor(addonPanelInRight) : undefined,
-  height: addonPanelInRight ? '100%' : 10,
-  width: addonPanelInRight ? 10 : '100%',
-  zIndex: 1,
-});
-
 const ContentPanel = styled('div')(
   ({ addonPanelInRight, storiesPanelOnTop, theme: { layoutMargin } }) => ({
     position: 'absolute',
@@ -239,7 +272,6 @@ class Layout extends Component {
         maxSize={-400}
         size={showStoriesPanel ? storiesPanelDefaultSize : 1}
         defaultSize={storiesPanelDefaultSize}
-        resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)}
         onDragStarted={this.onDragStart}
         onDragFinished={this.onDragEnd}
         onChange={size => this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)}
@@ -248,7 +280,6 @@ class Layout extends Component {
           <StoriesPanelInner>
             <StoriesPanel />
           </StoriesPanelInner>
-          <USplit shift={5} split={storiesSplit} />
         </StoriesPanelWrapper>
         <SplitPane
           split={addonSplit}
@@ -258,7 +289,6 @@ class Layout extends Component {
           maxSize={-200}
           size={showAddonPanel ? addonPanelDefaultSize : 1}
           defaultSize={addonPanelDefaultSize}
-          resizerStyle={addonResizerStyle(showAddonPanel, addonPanelInRight)}
           onDragStarted={this.onDragStart}
           onDragFinished={this.onDragEnd}
           onChange={size => this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down', size)}
@@ -281,7 +311,6 @@ class Layout extends Component {
             </PreviewWrapper>
           </ContentPanel>
           <AddonPanelWrapper {...{ showAddonPanel, addonPanelInRight }}>
-            <USplit shift={-5} split={addonSplit} />
             <AddonPanel />
           </AddonPanelWrapper>
         </SplitPane>

lib/components/src/layout/usplit.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import styled from 'react-emotion';
-
-const gripSize = 1;
-const splitSize = 10;
-
-const Wrapper = styled('div')(({ shift, direction }) => {
-  switch (direction) {
-    case 'horizontal': {
-      return {
-        height: splitSize,
-        marginTop: shift - splitSize / 2,
-        marginBottom: -shift - splitSize / 2,
-        position: 'relative',
-      };
-    }
-    case 'vertical':
-    default: {
-      return {
-        width: splitSize,
-        marginLeft: shift - splitSize / 2,
-        marginRight: -shift - splitSize / 2,
-        position: 'relative',
-      };
-    }
-  }
-});
-
-const Inner = styled('div')(({ direction, theme }) => {
-  switch (direction) {
-    case 'horizontal': {
-      return {
-        height: gripSize,
-        width: 20,
-        top: splitSize / 2 - (gripSize + 2) / 2,
-        left: '50%',
-        position: 'absolute',
-        borderTop: theme.mainBorder,
-        borderBottom: theme.mainBorder,
-        borderTopWidth: 1,
-        borderBottomWidth: 1,
-      };
-    }
-    case 'vertical':
-    default: {
-      return {
-        width: gripSize,
-        height: 20,
-        left: splitSize / 2 - (gripSize + 2) / 2,
-        top: '50%',
-        position: 'absolute',
-        borderLeft: theme.mainBorder,
-        borderRight: theme.mainBorder,
-        borderLeftWidth: 1,
-        borderRightWidth: 1,
-      };
-    }
-  }
-});
-
-const USplit = ({ shift, split }) => (
-  <Wrapper direction={split} shift={shift}>
-    <Inner direction={split} />
-  </Wrapper>
-);
-
-USplit.propTypes = {
-  shift: PropTypes.number,
-  split: PropTypes.oneOf(['vertical', 'horizontal']),
-};
-
-USplit.defaultProps = {
-  shift: 0,
-  split: 'vertical',
-};
-
-export default USplit;