fix: (menu & menuitem): vertical menu theming updates

CHANGELOG.md

@@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fixed Shift+Tab navigation from `DropdownSelectedItem` @silviuavram ([#1004](https://github.com/stardust-ui/react/pull/1004))
 - Fixed color of the `timestamp` in `ChatMessages` marked as `mine` in Teams theme @mnajdova ([#1010](https://github.com/stardust-ui/react/pull/1010))
 - Updated table `Icon` & search `Icon` ([#1011](https://github.com/stardust-ui/react/pull/1011))
+- Improve `Menu` styling, vertical menu in Teams theme ([#934](https://github.com/stardust-ui/react/pull/934))
 
 ### Features
 - Add `delay` prop for `Loader` component @layershifter ([#969](https://github.com/stardust-ui/react/pull/969))

docs/src/components/Sidebar/Sidebar.tsx

@@ -134,12 +134,14 @@ class Sidebar extends React.Component<any, any> {
       paddingRight: '0em',
       paddingTop: '0em',
       paddingBottom: '0em',
+      background: '#201f1f',
     }
 
     const menuSectionStyles: ICSSInJSStyle = {
       fontWeight: fontWeightBold,
       margin: '0 0 .5rem',
       padding: '0 1.2857rem',
+      background: '#201f1f',
       color: 'white',
       ':hover': {
         background: 'none',
@@ -157,6 +159,7 @@ class Sidebar extends React.Component<any, any> {
       fontSize: '0.85714286em',
       fontWeight: 400,
       color: '#ffffff80',
+      background: '#201f1f',
       ':hover': {
         color: 'white',
         backgroundColor: 'none',
@@ -170,11 +173,13 @@ class Sidebar extends React.Component<any, any> {
     const dividerStyles: ICSSInJSStyle = {
       marginTop: '.5em',
       paddingBottom: '.5em',
+      background: '#201f1f',
     }
 
     const navBarStyles: ICSSInJSStyle = {
       color: '#ffffff80',
       padding: '0px',
+      backgroundColor: '#201f1f',
     }
 
     const logoStyles: ICSSInJSStyle = {

docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx

@@ -66,26 +66,58 @@ const items = [
     'aria-label': 'Book Tool',
   },
   {
-    key: 'menuButton',
+    key: 'menuButton2',
     icon: {
       name: 'more',
       outline: true,
     },
     accessibility: toolbarButtonBehavior,
     'aria-label': 'More options',
     indicator: false,
-    menu: [
-      { key: '1', content: 'item1' },
-      {
-        key: '2',
-        content: 'item2',
-      },
-      {
-        key: '3',
-        content: 'item3',
-        menu: [{ key: '1', content: 'item3.1' }, { key: '2', content: 'item3.2' }],
-      },
-    ],
+    menu: {
+      items: [
+        {
+          key: '5',
+          content: 'item1',
+          icon: {
+            name: 'bookmark',
+            outline: true,
+          },
+        },
+        {
+          key: 'divider',
+          kind: 'divider',
+        },
+        {
+          key: '6',
+          content: 'item2',
+          icon: {
+            name: 'mark-as-unread',
+            outline: true,
+          },
+        },
+        {
+          key: '7',
+          content: 'item3',
+          icon: {
+            name: 'translation',
+            outline: true,
+          },
+        },
+        {
+          key: 'divider2',
+          kind: 'divider',
+        },
+        {
+          key: '8',
+          content: 'item3',
+          icon: {
+            name: 'trash-can',
+            outline: true,
+          },
+        },
+      ],
+    },
   },
 ]
 

packages/react/src/components/Menu/Menu.tsx

@@ -166,6 +166,7 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
             vertical,
             variables,
             styles: styles.divider,
+            inSubmenu: submenu,
           },
         })
       }

packages/react/src/components/Menu/MenuDivider.tsx

@@ -30,6 +30,7 @@ export interface MenuDividerProps
   vertical?: boolean
   primary?: boolean
   secondary?: boolean
+  inSubmenu?: boolean
 }
 
 /**
@@ -52,6 +53,7 @@ class MenuDivider extends UIComponent<ReactProps<MenuDividerProps>> {
     primary: PropTypes.bool,
     secondary: PropTypes.bool,
     vertical: PropTypes.bool,
+    inSubmenu: PropTypes.bool,
   }
 
   renderComponent({ ElementType, classes, unhandledProps, accessibility }) {

packages/react/src/themes/teams-dark/components/Menu/menuVariables.ts

@@ -1,9 +1,16 @@
-export interface MenuVariables {
-  color: string
-}
-
-export default (siteVars: any): MenuVariables => {
-  return {
-    color: siteVars.colors.white,
-  }
-}
+import { pxToRem } from '../../../../lib'
+import { MenuVariables } from '../../../teams/components/Menu/menuVariables'
+
+export default (siteVars: any): Partial<MenuVariables> => ({
+  verticalBorderColor: siteVars.black,
+
+  focusedBorder: `solid ${pxToRem(1)} ${siteVars.colors.white}`,
+  focusedBackgroundColor: 'transparent',
+
+  hoverBackgroundColor: siteVars.gray08,
+
+  activeColor: siteVars.colors.white,
+  activeBackgroundColor: siteVars.gray08,
+
+  verticalBackgroundColor: siteVars.gray10,
+})

packages/react/src/themes/teams-dark/siteVariables.ts

@@ -30,11 +30,6 @@ export const red = '#d74654' // no mapping color
 export const red08 = '#4f232b' // no mapping color
 export const green04 = naturalColors.lightGreen[900]
 
-//
-// SHADOW LEVELS
-//
-export const shadowLevel1 = '0 .2rem .4rem -.075rem rgba(255, 255, 255, 0.1)'
-
 //
 // SEMANTIC ASSIGNMENTS
 //

packages/react/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts

@@ -1,27 +1,50 @@
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { MenuVariables } from './menuVariables'
+import { MenuVariables } from '../../../teams/components/Menu/menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
 
 type MenuItemPropsAndState = MenuItemProps & MenuItemState
 
 const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
-  wrapper: ({ props, variables }): ICSSInJSStyle => {
-    const { iconOnly, isFromKeyboard } = props
+  wrapper: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const { iconOnly, isFromKeyboard, vertical, active, underlined, primary } = p
 
     return {
-      ...(iconOnly && {
-        // focus styles
+      ':hover': {
+        color: v.activeColor,
+        ...(!active && {
+          background: v.focusedBackgroundColor,
+        }),
+      },
+
+      ...(active && {
+        background: v.activeBackgroundColor,
+        color: v.activeColor,
+      }),
+
+      ...((iconOnly || vertical) && {
         ...(isFromKeyboard && {
-          color: variables.activeColor,
-          background: variables.activeBackgroundColor,
+          color: v.activeColor,
+          background: v.focusedBackgroundColor,
+        }),
+
+        ...(active && {
+          color: v.activeColor,
+          background: v.activeBackgroundColor,
         }),
 
-        // hover styles
         ':hover': {
-          color: variables.activeColor,
-          background: variables.activeBackgroundColor,
+          color: v.activeColor,
+          background: v.focusedBackgroundColor,
         },
       }),
+
+      ...((underlined || primary) && {
+        ...(!active && {
+          ':hover': {
+            color: v.color,
+          },
+        }),
+      }),
     }
   },
 

packages/react/src/themes/teams-high-contrast/components/Menu/menuVariables.ts

@@ -1,13 +1,10 @@
-export interface MenuVariables {
-  color: string
-  activeColor: string
-  activeBackgroundColor: string
-}
+import { MenuVariables } from '../../../teams/components/Menu/menuVariables'
 
-export default (siteVars: any): MenuVariables => {
-  return {
-    color: siteVars.white,
-    activeColor: siteVars.black,
-    activeBackgroundColor: siteVars.accessibleYellow,
-  }
-}
+export default (siteVars: any): Partial<MenuVariables> => ({
+  color: siteVars.white,
+  activeColor: siteVars.black,
+  focusedBackgroundColor: siteVars.accessibleYellow,
+  activeBackgroundColor: siteVars.accessibleCyan,
+
+  verticalBackgroundColor: siteVars.colors.black,
+})

packages/react/src/themes/teams/components/Menu/menuDividerStyles.ts

@@ -19,6 +19,10 @@ const menuDividerStyles: ComponentSlotStylesInput<MenuDividerProps, MenuVariable
           ...(!p.vertical && {
             alignSelf: 'stretch',
           }),
+          ...(p.vertical &&
+            p.inSubmenu && {
+              margin: '8px 0',
+            }),
         }
   },
 }