feat(menu): pointing && vertical menu redlining

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)

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,

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',
+          },
+        }),
     }
   },
 

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 && {

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),