Extend context menu alignment without chevrons

For context menus without chevrons, this changes the menu components to still
set default styles that align the menu based on the edges used to specify the
menu's position. This is not intended to change the positioning of any existing
menus.

res/css/structures/_ContextualMenu.scss

@@ -39,7 +39,11 @@ limitations under the License.
     z-index: 5001;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_right {
+.mx_ContextualMenu_right {
+    right: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
     right: 8px;
 }
 
@@ -66,7 +70,11 @@ limitations under the License.
     right: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_left {
+.mx_ContextualMenu_left {
+    left: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
     left: 8px;
 }
 
@@ -93,7 +101,11 @@ limitations under the License.
     left: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_top {
+.mx_ContextualMenu_top {
+    top: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
     top: 8px;
 }
 
@@ -120,7 +132,11 @@ limitations under the License.
     top: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_bottom {
+.mx_ContextualMenu_bottom {
+    bottom: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
     bottom: 8px;
 }
 

src/components/structures/ContextualMenu.js

@@ -183,11 +183,14 @@ export default class ContextualMenu extends React.Component {
 
         const menuClasses = classNames({
             'mx_ContextualMenu': true,
-            'mx_ContextualMenu_noChevron': chevronFace === 'none',
-            'mx_ContextualMenu_left': chevronFace === 'left',
-            'mx_ContextualMenu_right': chevronFace === 'right',
-            'mx_ContextualMenu_top': chevronFace === 'top',
-            'mx_ContextualMenu_bottom': chevronFace === 'bottom',
+            'mx_ContextualMenu_left': !hasChevron && position.left,
+            'mx_ContextualMenu_right': !hasChevron && position.right,
+            'mx_ContextualMenu_top': !hasChevron && position.top,
+            'mx_ContextualMenu_bottom': !hasChevron && position.bottom,
+            'mx_ContextualMenu_withChevron_left': chevronFace === 'left',
+            'mx_ContextualMenu_withChevron_right': chevronFace === 'right',
+            'mx_ContextualMenu_withChevron_top': chevronFace === 'top',
+            'mx_ContextualMenu_withChevron_bottom': chevronFace === 'bottom',
         });
 
         const menuStyle = {};