fix: prevent icon from shrinking when label text overflows

dhis2 · May 19, 2020 · ccd86bc · ccd86bc
1 parent d398881
commit ccd86bc
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/MenuItem/MenuItemContent.js b/src/MenuItem/MenuItemContent.js
@@ -72,8 +72,8 @@ const MenuItemContent = forwardRef(
                     target={target}
                     {...linkElementProps}
                 >
-                    {icon}
-                    <div className="label">{label}</div>
+                    {icon && <span className="icon">{icon}</span>}
+                    <span className="label">{label}</span>
 
                     {showChevron && (
                         <ChevronRight className={subChevron.className} />

diff --git a/src/__demo__/Menu.stories.js b/src/__demo__/Menu.stories.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import { Menu, MenuItem, Divider, Switch } from '../index.js'
+import { ArrowUp } from '../icons/Arrow.js'
 
 const Wrapper = fn => <div style={{}}>{fn()}</div>
 
@@ -53,13 +54,15 @@ storiesOf('Menu', module)
             <MenuItem
                 label="This is a long menu item name, that should span onto multiple lines"
                 value="two"
+                icon={<ArrowUp />}
                 onClick={val => {
                     alert(`this is ${val}`)
                 }}
             />
             <MenuItem
                 label="Three"
                 value="three"
+                icon={<ArrowUp />}
                 onClick={val => {
                     alert(`this is ${val}`)
                 }}