Merge pull request #122 from Ultimaker/fix-context-menu

fix context menu direction

src/components/__tests__/__snapshots__/context_menu.test.tsx.snap

@@ -2,9 +2,10 @@
 
 exports[`The ContextMenu component should render 1`] = `
 <div
-  className="context-menu context-menu--south"
+  className="context-menu"
 >
   <DropDownMenuBase
+    menuDirection="south"
     menuStyle={
       Object {
         "right": -30,

src/components/__tests__/__snapshots__/drop_down_menu.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`The DropDownMenu component should render 1`] = `
   className="drop-down-menu"
 >
   <DropDownMenuBase
+    menuDirection="south"
     onToggleMenuHandler={[Function]}
     showMenu={false}
     triggerElement={

src/components/__tests__/__snapshots__/drop_down_menu_base.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`The DropDownMenuBase component should render 1`] = `
 <div
-  className="drop-down-menu-base"
+  className="drop-down-menu-base drop-down-menu-base--south"
   onClick={[Function]}
 >
   <Button

src/components/__tests__/__snapshots__/user_account_menu.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`The UserAccountMenu component should display other section 1`] = `
   className="user-account-menu"
 >
   <DropDownMenuBase
+    menuDirection="south"
     onToggleMenuHandler={[Function]}
     showMenu={false}
     triggerElement={
@@ -92,6 +93,7 @@ exports[`The UserAccountMenu component should render 1`] = `
   className="user-account-menu"
 >
   <DropDownMenuBase
+    menuDirection="south"
     onToggleMenuHandler={[Function]}
     showMenu={false}
     triggerElement={
@@ -169,6 +171,7 @@ exports[`The UserAccountMenu component should render sign in button 1`] = `
   className="user-account-menu"
 >
   <DropDownMenuBase
+    menuDirection="south"
     onToggleMenuHandler={[Function]}
     showMenu={true}
     triggerElement={

src/components/__tests__/context_menu.test.tsx

@@ -31,8 +31,7 @@ describe('The ContextMenu component', () => {
 
     it('should render to north', () => {
         wrapper.setProps({ menuDirection: 'north' });
-        expect(wrapper.find('.context-menu--north')).toHaveLength(1);
-        expect(wrapper.find('.context-menu--south').exists()).toBe(false);
+        expect(wrapper.find(DropDownMenuBase).prop('menuDirection')).toBe('north');
     });
 
     it('should render for a panel', () => {

src/components/context_menu.tsx

@@ -2,10 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 // components
-import DropDownMenuBase from './drop_down_menu_base';
+import { DropDownMenuBase, MenuDirection } from './drop_down_menu_base';
 
 export type MenuOffsetDirection = 'left' | 'right';
-export type MenuDirection = 'north' | 'south';
 
 export interface ContextMenuProps {
     /** Width of the menu in pixels */
@@ -119,7 +118,7 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
         const { menuOffset, showMenu } = this.state;
 
         const classes = classNames(
-            `context-menu context-menu--${menuDirection}`,
+            'context-menu',
             { 'context-menu--panel': positionMenuInPanel },
         );
         const menuStyle = ContextMenu._getMenuStyle(menuOffset, menuOffsetDirection, menuWidth);
@@ -132,6 +131,7 @@ export class ContextMenu extends React.Component<ContextMenuProps, ContextMenuSt
                     triggerElement={<div style={{ width: triggerWidth }} />}
                     menuStyle={menuStyle}
                     onToggleMenuHandler={newShowMenu => this._onToggleMenuHandler(newShowMenu)}
+                    menuDirection={menuDirection}
                 >
                     {children}
                 </DropDownMenuBase>

src/components/drop_down_menu_base.tsx

@@ -5,7 +5,7 @@ import { Collapse } from 'react-collapse';
 // components
 import Button from './button';
 
-export type MenuDirection = 'left' | 'right';
+export type MenuDirection = 'north' | 'south';
 
 export interface DropDownMenuBaseProps {
     /** Whether the menu should be visible */
@@ -23,6 +23,10 @@ export interface DropDownMenuBaseProps {
 }
 
 export class DropDownMenuBase extends React.Component<DropDownMenuBaseProps, {}> {
+    public static defaultProps: Partial<DropDownMenuBaseProps> = {
+        menuDirection: 'south',
+    };
+
     static _stopPropagation(e): void {
         e.stopPropagation();
     }

src/stories/menu.stories.tsx

@@ -22,8 +22,8 @@ const offsetOptions = {
 const offsetDefaultValue = 'left';
 
 const directionOptions = {
-    Left: 'north',
-    Right: 'south',
+    North: 'north',
+    South: 'south',
 };
 const directionDefaultValue = 'south';
 

src/stylesheets/_context_menu.scss

@@ -40,7 +40,6 @@
         top: 0;
         right: 0;
         bottom: 0;
-        left: 0;
 
         .drop-down-menu-base {
             height: 100%;