Revert "EVER-1474 modify sidetray to allow outside click and margin t…

…op for header to be visible" and bump version

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@cision/rover-ui",
-  "version": "0.1.0-alpha.18",
+  "version": "0.1.0-alpha.19",
   "publishConfig": {
-    "tag": "v0.1.0-alpha.18"
+    "tag": "v0.1.0-alpha.19"
   },
   "description": "UI Component Library",
   "author": "Matthew Wells (https://github.com/mdespuits)",

src/components/SideTray/README.md

@@ -2,7 +2,7 @@
 
 **A configurable slide-out tray component that automatically triggers onClose when escape key pressed or clicked outside**
 
-This component is used for a full-height (by default) dialog box that slides from the right. A <SideTray> can be used on its own (and filled with custom children), but best results are to use the following structure:
+This component is used for a full-height dialog box that slides from the right. A <SideTray> can be used on its own (and filled with custom children), but best results are to use the following structure:
 
 ```
 <SideTray>
@@ -15,5 +15,3 @@ This component is used for a full-height (by default) dialog box that slides fro
 This will result in a header that is always at the top, a footer that is always at the bottom, and a body block that scrolls if the interior content extends outside the height of the parent. If you'd like a header or footer that scrolls with the overflow content, you can easily add that within the <SideTray.Body> component.
 
 Width is currently fixed at 400px but would be great for that to be a prop in the future.
-
-For a SideTray that is not the full height of the viewport, wrapperStyle argument can be used to add padding to the wrapper element. Example, wrapperStyle={{paddingTop: '45px'}} will add 45px of padding above the SideTray (and the backdrop), allowing access to a header.

src/components/SideTray/index.js

@@ -10,13 +10,11 @@ import style from './style.css';
 const SideTray = ({
   children,
   className,
-  closeOnOutsideClick,
   direction,
   height,
   onClose,
   visible,
   width,
-  wrapperStyle,
   ...passedProps
 }) => {
   // Close tray when the user hits "Escape"
@@ -44,10 +42,9 @@ const SideTray = ({
 
   // Handle clicking backdrop to close tray
   // TODO: Click and drag from inside to outside the tray shouldn't close it
-  const clickOffBackdrop =
-    visible && closeOnOutsideClick ? (
-      <button className={style.backdrop} onClick={onClose} />
-    ) : null;
+  const clickOffBackdrop = visible ? (
+    <button className={style.backdrop} onClick={onClose} />
+  ) : null;
 
   // Handle custom widths / heights / directions
   const parsedHeight = parseCssSize({ size: height });
@@ -84,53 +81,41 @@ const SideTray = ({
   }
 
   return (
-    <div
-      className={style.wrapper}
-      style={{
-        ...wrapperStyle,
-        ...(!visible ? { display: 'none' } : {}),
-      }}
-    >
-      <div className={style.container}>
-        <div
-          {...passedProps}
-          style={{
-            ...sideTrayStyles,
-            ...(!visible ? { transform: hideTransformStyle } : {}),
-            ...passedProps.style,
-          }}
-          className={`${style.SideTray} ${className}`}
-        >
-          <div className={style.content}>{children}</div>
-        </div>
-        {clickOffBackdrop}
+    <React.Fragment>
+      <div
+        {...passedProps}
+        style={{
+          ...sideTrayStyles,
+          ...(!visible ? { transform: hideTransformStyle } : {}),
+          ...passedProps.style,
+        }}
+        className={`${style.SideTray} ${className}`}
+      >
+        <div className={style.container}>{children}</div>
       </div>
-    </div>
+      {clickOffBackdrop}
+    </React.Fragment>
   );
 };
 
 SideTray.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
-  closeOnOutsideClick: PropTypes.bool,
   direction: PropTypes.oneOf(['t', 'r', 'b', 'l']),
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onClose: PropTypes.func.isRequired,
   style: PropTypes.object,
   visible: PropTypes.bool,
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  wrapperStyle: PropTypes.object,
 };
 
 SideTray.defaultProps = {
   className: '',
-  closeOnOutsideClick: true,
   direction: 'r',
   height: '100vh',
   style: {},
   visible: false,
   width: '400px',
-  wrapperStyle: {},
 };
 
 const Header = props => (

src/components/SideTray/style.css

@@ -1,29 +1,14 @@
 .SideTray {
   background-color: var(--rvr-white);
-  position: absolute;
+  position: fixed;
   transition: transform 0.3s var(--rvr-slideout);
   overflow: auto;
   z-index: var(--rvr-zindex-sidetray);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
   transform: translate3d(0, 0, 0);
 }
 
-.wrapper {
-  height: 100vh;
-  width: 100vw;
-  box-sizing: border-box;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
 .container {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-}
-
-.content {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -34,12 +19,12 @@
   visibility: visible;
   border: none;
   user-select: none;
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  height: 100%;
+  height: 100vh;
   width: 100vw;
   z-index: var(--rvr-zindex-sidetray-backdrop);
   background-color: rgba(0, 0, 0, 0.3);

src/components/SideTray/test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import SideTray from './';
 
@@ -13,27 +13,4 @@ describe('SideTray', () => {
 
     expect(wrapper.text()).toEqual('Hey I am a sidetray!');
   });
-
-  it('correctly sets wrapperStyle', () => {
-    const wrapper = mount(
-      <SideTray
-        visible
-        onClose={() => {}}
-        wrapperStyle={{ paddingTop: '45px' }}
-      >
-        I am a sidetray with marginTop!
-      </SideTray>
-    );
-    expect(wrapper.html()).toContain('padding-top: 45px;');
-  });
-
-  it('does not include backdrop if closeOnOutsideClick is false', () => {
-    const wrapper = mount(
-      <SideTray visible onClose={() => {}} closeOnOutsideClick={false}>
-        I am a sidetray that does not close on outside click!
-      </SideTray>
-    );
-
-    expect(wrapper.contains(<button />)).toBe(false);
-  });
 });