docs(Menu): MenuItem icon and dropdown item example (#540)

* fix(MenuItem): render missing shorthand icon * fix(Attached): fix menu attached augmentation
Semantic-Org · Sep 23, 2016 · c624407 · c624407
1 parent 7621a1b
commit c624407
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/docs/app/Examples/collections/Menu/Types/Attached.js b/docs/app/Examples/collections/Menu/Types/Attached.js
@@ -7,7 +7,7 @@ const Attached = () => {
   return (
     <div>
       <Menu attached='top'>
-        <Menu.Item as={Dropdown} icon='wrench'>
+        <Dropdown as={Menu.Item} icon='wrench'>
           <Dropdown.Menu>
             <Dropdown.Item>
               <Icon name='dropdown icon' />
@@ -25,7 +25,7 @@ const Attached = () => {
             <Dropdown.Header>Export</Dropdown.Header>
             <Dropdown.Item>Share</Dropdown.Item>
           </Dropdown.Menu>
-        </Menu.Item>
+        </Dropdown>
 
         <Menu.Menu position='right'>
           <div className='ui right aligned category search item'>

diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
@@ -11,6 +11,7 @@ import {
   useKeyOnly,
   useKeyOrValueAndKey,
 } from '../../lib'
+import { createIcon } from '../../factories'
 
 function MenuItem(props) {
   const {
@@ -35,9 +36,18 @@ function MenuItem(props) {
   }
   const rest = getUnhandledProps(MenuItem, props)
 
+  if (children) {
+    return (
+      <ElementType {...rest} className={classes} onClick={handleClick}>
+        {children}
+      </ElementType>
+    )
+  }
+
   return (
     <ElementType {...rest} className={classes} onClick={handleClick}>
-      {children || content || _.startCase(name)}
+      {createIcon(icon)}
+      {content || _.startCase(name)}
     </ElementType>
   )
 }

diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
@@ -7,6 +7,7 @@ import { sandbox } from 'test/utils'
 
 describe('MenuItem', () => {
   common.isConformant(MenuItem)
+  common.implementsIconProp(MenuItem)
   common.propKeyOnlyToClassName(MenuItem, 'active')
   common.propValueOnlyToClassName(MenuItem, 'color')
   common.propKeyOrValueToClassName(MenuItem, 'fitted')