fix(MenuItem): do not add icon class given name or content (#585)

* fix(MenuItem): add space between icon and content * test(MenuItem): add icon className tests
Semantic-Org · Oct 2, 2016 · 241ef5e · 241ef5e
1 parent 34df69a
commit 241ef5e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
@@ -20,7 +20,7 @@ function MenuItem(props) {
   const classes = cx(
     useKeyOnly(active, 'active'),
     useKeyOrValueAndKey(fitted, 'fitted'),
-    useKeyOnly(icon, 'icon'),
+    useKeyOnly(icon === true || icon && !(name || content), 'icon'),
     useKeyOnly(header, 'header'),
     useKeyOnly(link, 'link'),
     color,

diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
@@ -38,6 +38,21 @@ describe('MenuItem', () => {
     })
   })
 
+  describe('icon', () => {
+    it('does not add `icon` className if there is also `name`', () => {
+      shallow(<MenuItem icon='user' name='users' />)
+        .should.not.have.className('icon')
+    })
+    it('does not add `icon` className if there is also `content`', () => {
+      shallow(<MenuItem icon='user' content='Users' />)
+        .should.not.have.className('icon')
+    })
+    it('adds `icon` className if there is an `icon` without `name` or `content`', () => {
+      shallow(<MenuItem icon='user' />)
+        .should.have.className('icon')
+    })
+  })
+
   describe('onClick', () => {
     it('can be omitted', () => {
       const click = () => mount(<MenuItem />).simulate('click')