Squashed commit of the following:

commit 8de5974 Author: Alin Voinea <contact@avoinea.com> Date: Fri Jul 1 12:40:52 2022 +0300 Move border style to eea design system to keep backward compatibility commit a9edffb Author: Alin Voinea <contact@avoinea.com> Date: Fri Jul 1 11:41:07 2022 +0300 Refactoring border options
eea · Jul 1, 2022 · ca241f5 · ca241f5
1 parent e8d4c12
commit ca241f5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 24 deletions.
diff --git a/src/components/templates/default/Edit.jsx b/src/components/templates/default/Edit.jsx
@@ -287,9 +287,10 @@ const Edit = (props) => {
           vertical: menuPosition.vertical,
           className: cx(
             data.menuAlign,
-            menuPosition.direction === 'left'
-              ? 'borderRight'
-              : menuPosition.direction === 'right' && 'borderLeft',
+            menuPosition.direction === 'left' ? 'border-right' : '',
+            menuPosition.direction === 'right' ? 'border-left' : '',
+            menuPosition.direction === 'top' ? 'border-bottom' : '',
+            menuPosition.direction === 'bottom' ? 'border-top' : '',
             { container: isContainer },
           ),
         }}

diff --git a/src/components/templates/default/View.jsx b/src/components/templates/default/View.jsx
@@ -167,9 +167,10 @@ const View = (props) => {
           vertical: menuPosition.vertical,
           className: cx(
             data.menuAlign,
-            menuPosition.direction === 'left'
-              ? 'borderRight'
-              : menuPosition.direction === 'right' && 'borderLeft',
+            menuPosition.direction === 'left' ? 'border-right' : '',
+            menuPosition.direction === 'right' ? 'border-left' : '',
+            menuPosition.direction === 'top' ? 'border-bottom' : '',
+            menuPosition.direction === 'bottom' ? 'border-top' : '',
             { container: isContainer },
           ),
         }}

diff --git a/src/less/menu.less b/src/less/menu.less
@@ -23,23 +23,6 @@
       justify-content: flex-start;
     }
 
-    &.borderLeft {
-      border-right-width: 0;
-      border-left-width: 0.0625rem;
-      border-left-style: solid;
-      border-left-color: #bcbec0;
-
-      .item.active {
-        border-right-width: 0rem;
-        border-left-style: solid;
-        margin: 0em 0em 0em -0.2rem;
-      }
-
-      .item:active {
-        border-right-width: 0rem;
-      }
-    }
-
     &.right {
       justify-content: flex-end;
     }

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -17,9 +17,12 @@ const getMenuPosition = (data) => {
   if (['bottom'].includes(position)) {
     return {
       attached: position,
+      direction: position,
     };
   }
-  return {};
+  return {
+    direction: position,
+  };
 };
 
 const toggleItem = (container, item, hidden) => {