fix(menu): iconOnly does not overlap big icons (#486)

* fix(menu): iconOnly does not overlap big icons

* - fixed focus styles
- added changelog

Author: Alexandru Buliga

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix incorrect and missing filled or outline versions of Teams SVG icons @codepretty ([#552](https://github.com/stardust-ui/react/pull/552))
 - Fix truncate styles in Teams team for the `Button`'s `content` prop used as element @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551))
 - Fix HTML preview in the editor @layershifter ([#555](https://github.com/stardust-ui/react/pull/555))
+- Fix icon overlapping for `iconOnly` prop in `Menu` component with @Bugaa92 ([#486](https://github.com/stardust-ui/react/pull/486))
 
 ### Features
 - Add `render` callback as an option for shorthand value @kuzhelov ([#519](https://github.com/stardust-ui/react/pull/519))

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -121,7 +121,16 @@ const pointingBeak: ComponentSlotStyleFunction<MenuItemPropsAndState, MenuVariab
 
 const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariables> = {
   wrapper: ({ props, variables: v, theme }): ICSSInJSStyle => {
-    const { active, isFromKeyboard, pills, pointing, secondary, underlined, vertical } = props
+    const {
+      active,
+      iconOnly,
+      isFromKeyboard,
+      pills,
+      pointing,
+      secondary,
+      underlined,
+      vertical,
+    } = props
 
     return {
       color: v.defaultColor,
@@ -155,7 +164,6 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
       ...(pointing &&
         vertical && {
-          border: '1px solid transparent',
           borderTopLeftRadius: `${pxToRem(3)}`,
           borderTopRightRadius: `${pxToRem(3)}`,
           ...(pointing === 'end'
@@ -164,6 +172,10 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
           marginBottom: `${pxToRem(12)}`,
         }),
 
+      ...(iconOnly && {
+        display: 'flex',
+      }),
+
       ...itemSeparator({ props, variables: v, theme }),
 
       // active styles
@@ -194,16 +206,16 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
       display: 'block',
       cursor: 'pointer',
 
+      ...(((pointing && vertical) || iconOnly) && { border: '1px solid transparent' }),
+
       ...(underlined
         ? { padding: `${pxToRem(4)} 0` }
         : pointing && vertical
           ? { padding: `${pxToRem(8)} ${pxToRem(18)}` }
           : { padding: `${pxToRem(14)} ${pxToRem(18)}` }),
 
       ...(iconOnly && {
-        width: v.iconsMenuItemSize,
-        height: v.iconsMenuItemSize || '100%',
-        padding: 0,
+        padding: pxToRem(8),
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',

src/themes/teams/components/Menu/menuStyles.ts

@@ -11,6 +11,7 @@ export default {
     const { iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props
     return {
       display: 'flex',
+      ...(iconOnly && { alignItems: 'center' }),
       ...(vertical && {
         flexDirection: 'column',
         ...(!fluid && { width: pxToRem(200) }),

src/themes/teams/components/Menu/menuVariables.ts

@@ -16,7 +16,6 @@ export interface MenuVariables {
   primaryHoverBorderColor: string
   primaryUnderlinedBorderColor: string
 
-  iconsMenuItemSize?: string
   circularRadius: string
   lineHeightBase: string
 }
@@ -38,7 +37,6 @@ export default (siteVars: any): MenuVariables => {
     primaryHoverBorderColor: siteVars.gray08,
     primaryUnderlinedBorderColor: siteVars.gray08,
 
-    iconsMenuItemSize: pxToRem(32),
     circularRadius: pxToRem(999),
     lineHeightBase: siteVars.lineHeightBase,
   }