Added reverse prop to Drawer component to enable rendering on rever…

…se side (if vertical then on the top instead of the bottom, otherwise on the left instead of the right side). Fixes palantir#3360
Ackos95 · Feb 28, 2019 · f93ac26 · f93ac26
1 parent b3c5c1f
commit f93ac26
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 36 deletions.
diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
@@ -28,6 +28,7 @@ export const MULTILINE = `${NS}-multiline`;
 export const ROUND = `${NS}-round`;
 export const SMALL = `${NS}-small`;
 export const VERTICAL = `${NS}-vertical`;
+export const REVERSED = `${NS}-reversed`;
 
 export const ELEVATION_0 = elevationClass(Elevation.ZERO);
 export const ELEVATION_1 = elevationClass(Elevation.ONE);

diff --git a/packages/core/src/components/drawer/_drawer.scss b/packages/core/src/components/drawer/_drawer.scss
@@ -24,49 +24,95 @@ $drawer-default-size: 50%;
   }
 
   &:not(.#{$ns}-vertical) {
-    @include react-transition-phase(
-      "#{$ns}-overlay",
-      "enter",
-      (transform: (translateX(100%), translateX(0))),
-      $pt-transition-duration * 2,
-      $pt-transition-ease,
-      $before: "&"
-    );
-    @include react-transition-phase(
-      "#{$ns}-overlay",
-      "exit",
-      (transform: (translateX(100%), translateX(0))),
-      $pt-transition-duration,
-      $before: "&"
-    );
-
     top: 0;
-    right: 0;
     bottom: 0;
     width: $drawer-default-size;
+
+    &:not(.#{$ns}-reversed) {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateX(100%), translateX(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateX(100%), translateX(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+
+      right: 0;
+    }
+
+    &.#{$ns}-reversed {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateX(-100%), translateX(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateX(-100%), translateX(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+
+      left: 0;
+    }
   }
 
   &.#{$ns}-vertical {
-    @include react-transition-phase(
-      "#{$ns}-overlay",
-      "enter",
-      (transform: (translateY(100%), translateY(0))),
-      $pt-transition-duration * 2,
-      $pt-transition-ease,
-      $before: "&"
-    );
-    @include react-transition-phase(
-      "#{$ns}-overlay",
-      "exit",
-      (transform: (translateY(100%), translateY(0))),
-      $pt-transition-duration,
-      $before: "&"
-    );
-
     right: 0;
-    bottom: 0;
     left: 0;
     height: $drawer-default-size;
+
+    &:not(.#{$ns}-reversed) {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateY(100%), translateY(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateY(100%), translateY(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+
+      bottom: 0;
+    }
+
+    &.#{$ns}-reversed {
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "enter",
+        (transform: (translateY(-100%), translateY(0))),
+        $pt-transition-duration * 2,
+        $pt-transition-ease,
+        $before: "&"
+      );
+      @include react-transition-phase(
+        "#{$ns}-overlay",
+        "exit",
+        (transform: (translateY(-100%), translateY(0))),
+        $pt-transition-duration,
+        $before: "&"
+      );
+
+      top: 0;
+    }
   }
 
   &.#{$ns}-dark,

diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx
@@ -37,6 +37,14 @@ export interface IDrawerProps extends IOverlayableProps, IBackdropProps, IProps
      */
     isOpen: boolean;
 
+    /**
+     * Whether the drawer should appear on the reversed side.
+     * Depending on the `vertical` prop, it will show on the left side (instead of the left),
+     * or on the top (instead of the bottom)
+     * @default false
+     */
+    reversed?: boolean;
+
     /**
      * CSS size of the drawer. This sets `width` if `vertical={false}` (default)
      * and `height` otherwise.
@@ -80,6 +88,7 @@ export class Drawer extends AbstractPureComponent<IDrawerProps, {}> {
     public static defaultProps: IDrawerProps = {
         canOutsideClickClose: true,
         isOpen: false,
+        reversed: false,
         style: {},
         vertical: false,
     };
@@ -89,8 +98,9 @@ export class Drawer extends AbstractPureComponent<IDrawerProps, {}> {
     public static readonly SIZE_LARGE = "90%";
 
     public render() {
-        const { size, style, vertical } = this.props;
-        const classes = classNames(Classes.DRAWER, { [Classes.VERTICAL]: vertical }, this.props.className);
+        const { size, style, vertical, reversed } = this.props;
+        const additionalClasses = { [Classes.VERTICAL]: vertical, [Classes.REVERSED]: reversed };
+        const classes = classNames(Classes.DRAWER, additionalClasses, this.props.className);
         const styleProp = size == null ? style : { ...style, [vertical ? "height" : "width"]: size };
         return (
             <Overlay {...this.props} className={Classes.OVERLAY_CONTAINER}>

diff --git a/packages/core/test/drawer/drawerTests.tsx b/packages/core/test/drawer/drawerTests.tsx
@@ -51,6 +51,15 @@ describe("<Drawer>", () => {
         assert.isTrue(drawer.find(`.${Classes.VERTICAL}`).exists());
     });
 
+    it("reversed adds class", () => {
+        const drawer = mount(
+            <Drawer isOpen={true} usePortal={false} reversed={true}>
+                {createDrawerContents()}
+            </Drawer>,
+        );
+        assert.isTrue(drawer.find(`.${Classes.REVERSED}`).exists());
+    });
+
     it("portalClassName appears on Portal", () => {
         const TEST_CLASS = "test-class";
         const drawer = mount(

diff --git a/packages/docs-app/src/examples/core-examples/drawerExample.tsx b/packages/docs-app/src/examples/core-examples/drawerExample.tsx
@@ -17,6 +17,7 @@ export interface IDrawerExampleState {
     enforceFocus: boolean;
     hasBackdrop: boolean;
     isOpen: boolean;
+    reversed: boolean;
     size: string;
     usePortal: boolean;
     vertical: boolean;
@@ -29,6 +30,7 @@ export class DrawerExample extends React.PureComponent<IExampleProps<IBlueprintE
         enforceFocus: true,
         hasBackdrop: true,
         isOpen: false,
+        reversed: false,
         size: undefined,
         usePortal: true,
         vertical: false,
@@ -40,6 +42,7 @@ export class DrawerExample extends React.PureComponent<IExampleProps<IBlueprintE
     private handleEscapeKeyChange = handleBooleanChange(canEscapeKeyClose => this.setState({ canEscapeKeyClose }));
     private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
+    private handleReversedChange = handleBooleanChange(reversed => this.setState({ reversed }));
     private handleVerticalChange = handleBooleanChange(vertical => this.setState({ vertical }));
     private handleSizeChange = handleStringChange(size => this.setState({ size }));
 
@@ -100,6 +103,7 @@ export class DrawerExample extends React.PureComponent<IExampleProps<IBlueprintE
                     <HTMLSelect options={SIZES} onChange={this.handleSizeChange} />
                 </Label>
                 <Switch checked={this.state.vertical} label="Vertical" onChange={this.handleVerticalChange} />
+                <Switch checked={this.state.reversed} label="Reversed" onChange={this.handleReversedChange} />
                 <Divider />
                 <Switch checked={autoFocus} label="Auto focus" onChange={this.handleAutoFocusChange} />
                 <Switch checked={enforceFocus} label="Enforce focus" onChange={this.handleEnforceFocusChange} />