feat(ContextMenu): Match design to Sketch component

Royal-Navy · Oct 27, 2020 · 86ba9ff · 86ba9ff
1 parent b734ed2
commit 86ba9ff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 23 deletions.
diff --git a/packages/react-component-library/src/components/ContextMenu/ContextMenu.tsx b/packages/react-component-library/src/components/ContextMenu/ContextMenu.tsx
@@ -14,19 +14,20 @@ interface StyledContextMenuProps {
   left: number
 }
 
-const { color } = selectors
+const { color, spacing } = selectors
 
 const StyledContextMenu = styled.ol<StyledContextMenuProps>`
   position: fixed;
   top: ${({ top }) => `${top}px`};
   left: ${({ left }) => `${left}px`};
-  width: 12rem;
-  padding: 0;
+  min-width: 120px;
+  max-width: 240px;
+  padding: ${spacing('2')};
   list-style-type: none;
   background-color: ${color('neutral', 'white')};
   border-radius: 4px;
   border: 1px solid ${color('neutral', '200')};
-  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
 `
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({

diff --git a/packages/react-component-library/src/components/ContextMenu/ContextMenuDivider.tsx b/packages/react-component-library/src/components/ContextMenu/ContextMenuDivider.tsx
@@ -5,10 +5,9 @@ import { selectors } from '@royalnavy/design-tokens'
 const { color, spacing } = selectors
 
 const StyledContextMenuDivider = styled.div`
-  width: 100%;
   height: 1px;
   background-color: ${color('neutral', '100')};
-  margin: ${spacing('2')} 0;
+  margin: ${spacing('2')} -${spacing('2')};
 `
 
 export const ContextMenuDivider: React.FC = () => {

diff --git a/packages/react-component-library/src/components/ContextMenu/ContextMenuItem.tsx b/packages/react-component-library/src/components/ContextMenu/ContextMenuItem.tsx
@@ -15,23 +15,16 @@ interface StyledTextProps {
 const { color, fontSize, spacing } = selectors
 
 const StyledContextMenuItem = styled.li`
-  &:first-of-type {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-  }
-
-  &:last-of-type {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-
+  border-radius: 2px;
   > * {
+    text-overflow: ellipsis;
     display: flex;
-    padding: ${spacing('4')} ${spacing('6')};
+    padding: ${spacing('3')} ${spacing('4')};
+    line-height: 1.2;
   }
 
   &:hover {
-    background-color: ${color('neutral', '000')};
+    background-color: ${color('neutral', '100')};
 
     > * {
       text-decoration: none;
@@ -42,18 +35,22 @@ const StyledContextMenuItem = styled.li`
 const StyledIcon = styled.div`
   display: inline-flex;
   align-items: center;
-  margin-right: ${spacing('4')};
+  margin-right: ${spacing('2')};
 
   svg {
-    color: ${color('neutral', '500')};
+    color: ${color('neutral', '300')};
   }
 `
 
 const StyledText = styled.div<StyledTextProps>`
-  color: ${color('neutral', '300')};
+  color: ${color('neutral', '400')};
   font-weight: 600;
-  font-size: ${fontSize('s')};
-  ${({ hasIcon }) => !hasIcon && `margin-left: 1.5rem;`}
+  font-size: ${fontSize('base')};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  ${({ hasIcon }) => !hasIcon && `margin-left: 1.25rem;`}
 
   ${StyledContextMenuItem}:hover & {
     color: ${color('neutral', '400')};