From b50927bbdf51797ea5596e3d825d3b343db9b85f Mon Sep 17 00:00:00 2001
From: Jaanus Post <jaanuspost@hotmail.com>
Date: Fri, 29 Mar 2019 14:37:42 +0200
Subject: [PATCH] feat(menu): pointing && vertical menu redlining (#1116)

* Vertical pointing menu redlining

* Pointing & vertical margin update

* changelog entry

* Removing pointing indicator in HC theme

* Primary active bordercolor --> brand06

* Vertical pointing menu spacing --> regular vertical menu spacing

* No unused variables

* Renaming confusing menuVariable

* Breaking apart hard to read ternaries

* PR Feedback

* Changelog entry moved to Unreleased
---
 CHANGELOG.md                                  |  3 ++
 .../components/Menu/menuVariables.ts          |  2 ++
 .../components/Menu/menuItemStyles.ts         |  9 ++++-
 .../teams/components/Menu/menuItemStyles.ts   | 36 ++++++++++---------
 .../teams/components/Menu/menuVariables.ts    |  4 +++
 5 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36b334420b..b1faa6d8af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Update vertical && pointing `Menu` styles @jaanus03 ([#1116](https://github.com/stardust-ui/react/pull/1116))
+
 <!--------------------------------[ v0.25.1 ]------------------------------- -->
 ## [v0.25.1](https://github.com/stardust-ui/react/tree/v0.25.1) (2019-03-29)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.25.0...v0.25.1)
diff --git a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts
index 4f5937ea75..43d341926c 100644
--- a/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts
+++ b/packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts
@@ -7,6 +7,8 @@ export default (siteVars: any): Partial<MenuVariables> => ({
   focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`,
   focusedBackgroundColor: 'transparent',
 
+  pointingIndicatorBackgroundColor: siteVars.brand06,
+
   hoverBackgroundColor: siteVars.gray08,
 
   activeColor: siteVars.colors.white,
diff --git a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts
index c9e3aa6d45..1ce285356a 100644
--- a/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts
+++ b/packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts
@@ -6,7 +6,7 @@ type MenuItemPropsAndState = MenuItemProps & MenuItemState
 
 const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
   wrapper: ({ props: p, variables: v }): ICSSInJSStyle => {
-    const { iconOnly, isFromKeyboard, vertical, active, underlined, primary } = p
+    const { iconOnly, isFromKeyboard, vertical, active, underlined, primary, pointing } = p
 
     return {
       ':hover': {
@@ -45,6 +45,13 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
           },
         }),
       }),
+
+      ...(pointing &&
+        vertical && {
+          '::before': {
+            display: 'none',
+          },
+        }),
     }
   },
 
diff --git a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
index ffc737a3a2..958e88a67b 100644
--- a/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuItemStyles.ts
@@ -48,7 +48,7 @@ const getFocusedStyles = ({
   variables: MenuVariables
   color: string
 }): ICSSInJSStyle => {
-  const { primary, underlined, isFromKeyboard, active, vertical, pointing } = props
+  const { primary, underlined, isFromKeyboard, active, vertical } = props
   if (active && !underlined && !vertical) return {}
   return {
     ...(underlined && !isFromKeyboard
@@ -65,7 +65,7 @@ const getFocusedStyles = ({
           background: v.hoverBackgroundColor,
         }),
 
-    ...(vertical && isFromKeyboard && !pointing && !primary
+    ...(vertical && isFromKeyboard && !primary
       ? {
           border: v.focusedBorder,
           outline: v.focusedOutline,
@@ -179,16 +179,6 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         boxShadow: 'none',
       }),
 
-      ...(pointing &&
-        vertical && {
-          borderTopLeftRadius: `${pxToRem(3)}`,
-          borderTopRightRadius: `${pxToRem(3)}`,
-          ...(pointing === 'end'
-            ? { borderRight: `${pxToRem(3)} solid transparent` }
-            : { borderLeft: `${pxToRem(3)} solid transparent` }),
-          marginBottom: verticalPointingBottomMargin,
-        }),
-
       // item separator
       ...(!vertical &&
         !pills &&
@@ -202,11 +192,23 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
         ...getActionStyles({ props, variables: v, color: v.color }),
 
         ...(pointing &&
-          (vertical
-            ? pointing === 'end'
-              ? { borderRight: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
-              : { borderLeft: `${pxToRem(3)} solid ${v.primaryActiveBorderColor}` }
-            : pointingBeak({ props, variables: v, theme, colors }))),
+          vertical &&
+          !isFromKeyboard && {
+            '::before': {
+              content: `''`,
+              position: 'absolute',
+              width: pxToRem(3),
+              height: `calc(100% + ${pxToRem(4)})`,
+              top: pxToRem(-2),
+              backgroundColor: v.pointingIndicatorBackgroundColor,
+              ...(pointing === 'end' ? { right: pxToRem(-2) } : { left: pxToRem(-2) }),
+            },
+          }),
+
+        ...(pointing &&
+          !vertical && {
+            ...pointingBeak({ props, variables: v, theme, colors }),
+          }),
       }),
 
       ...(iconOnly && {
diff --git a/packages/react/src/themes/teams/components/Menu/menuVariables.ts b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
index d7a4c315a2..e9e146ff7b 100644
--- a/packages/react/src/themes/teams/components/Menu/menuVariables.ts
+++ b/packages/react/src/themes/teams/components/Menu/menuVariables.ts
@@ -36,6 +36,8 @@ export interface MenuVariables {
   verticalDividerMargin: string
   verticalItemBorder: string
 
+  pointingIndicatorBackgroundColor: string
+
   underlinedBottomBorderWidth: string
 
   dividerHeight: string
@@ -79,6 +81,8 @@ export default (siteVars: any): MenuVariables => {
     verticalDividerMargin: `${pxToRem(8)} 0`,
     verticalItemBorder: `solid ${pxToRem(2)} transparent`,
 
+    pointingIndicatorBackgroundColor: siteVars.colors.primary[500],
+
     underlinedBottomBorderWidth: pxToRem(2),
 
     dividerHeight: pxToRem(1),