fix(contextMenu): fixes for context menu icon (#3275)

platform/ui/src/assets/icons/chevron-menu.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="13px" viewBox="0 0 8 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-menu</title>
+    <g id="Form-fields" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard" transform="translate(-454.000000, -76.000000)" stroke="#348CFD" stroke-width="1.25">
+            <g id="chevron-menu" transform="translate(455.000000, 77.000000)">
+                <line x1="0.5" y1="0.5" x2="5.5" y2="5.5" id="Line"></line>
+                <line x1="0.5" y1="5.5" x2="5.5" y2="10.5" id="Line" transform="translate(3.000000, 8.000000) scale(1, -1) translate(-3.000000, -8.000000) "></line>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/src/components/ContextMenu/ContextMenu.tsx

@@ -19,14 +19,11 @@ const ContextMenu = ({ items, ...props }) => {
           key={index}
           data-cy="context-menu-item"
           onClick={() => item.action(item, props)}
+          style={{ justifyContent: 'space-between' }}
           className="flex px-4 py-3 cursor-pointer items-center transition duration-300 hover:bg-primary-dark border-b border-primary-dark last:border-b-0"
         >
-          <Typography>
-            {item.label}
-            {item.iconRight && (
-              <Icon name={item.iconRight} className="inline" />
-            )}
-          </Typography>
+          <Typography>{item.label}</Typography>
+          {item.iconRight && <Icon name={item.iconRight} className="inline" />}
         </div>
       ))}
     </div>

platform/ui/src/components/Icon/getIcon.js

@@ -13,6 +13,7 @@ import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';
 import chevronLeft from './../../assets/icons/chevron-left.svg';
+import chevronMenu from './../../assets/icons/chevron-menu.svg';
 import chevronNext from './../../assets/icons/chevron-next.svg';
 import chevronPrev from './../../assets/icons/chevron-prev.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
@@ -130,6 +131,7 @@ const ICONS = {
   'circled-checkmark': circledCheckmark,
   'chevron-down': chevronDown,
   'chevron-left': chevronLeft,
+  'chevron-menu': chevronMenu,
   'chevron-next': chevronNext,
   'chevron-prev': chevronPrev,
   'chevron-right': chevronRight,

platform/ui/src/types/ContextMenuItem.ts

@@ -3,5 +3,7 @@ export type ContextMenuItem = {
   label: string;
   // An icon to show the on right of the text - typically used for submenus
   iconRight?: string;
-  action: (item, component) => void;
+  // item is the menu item (eg the instance of this that is clicked on)
+  // props is the remaining properties passed to the context menu
+  action: (item, props) => void;
 };