[Core] Add position prop to Drawer component, deprecate vertical prop

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);

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,

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 right),
+     * 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}>

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(

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} />