fix(Dropdown): use item instead of as={Menu.Item} (Semantic-Org#659)

fix(Dropdown): use `item` instead of `as={Menu.Item}`
harel · Feb 18, 2017 · 32afa40 · 32afa40
1 parent 2598fc4
commit 32afa40
Show file tree

Hide file tree

Showing 13 changed files with 17 additions and 16 deletions.
diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js b/docs/app/Examples/collections/Menu/Content/MenuExampleDropdownItem.js
@@ -4,7 +4,7 @@ import { Dropdown, Menu } from 'semantic-ui-react'
 const MenuExampleDropdownItem = () => {
   return (
     <Menu vertical>
-      <Dropdown as={Menu.Item} text='Categories'>
+      <Dropdown item text='Categories'>
         <Dropdown.Menu>
           <Dropdown.Item>Electronics</Dropdown.Item>
           <Dropdown.Item>Automotive</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Content/MenuExampleSubMenu.js b/docs/app/Examples/collections/Menu/Content/MenuExampleSubMenu.js
@@ -39,7 +39,7 @@ export default class MenuExampleSubMenu extends Component {
           Messages
         </Menu.Item>
 
-        <Dropdown as={Menu.Item} text='More'>
+        <Dropdown item text='More'>
           <Dropdown.Menu>
             <Dropdown.Item icon='edit' text='Edit Profile' />
             <Dropdown.Item icon='globe' text='Choose Language' />

diff --git a/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js b/docs/app/Examples/collections/Menu/Types/MenuExampleAttached.js
@@ -7,7 +7,7 @@ const MenuExampleAttached = () => {
   return (
     <div>
       <Menu attached='top'>
-        <Dropdown as={Menu.Item} icon='wrench' simple>
+        <Dropdown item icon='wrench' simple>
           <Dropdown.Menu>
             <Dropdown.Item>
               <Icon name='dropdown' />

diff --git a/docs/app/Examples/collections/Menu/Types/MenuExampleVerticalDropdown.js b/docs/app/Examples/collections/Menu/Types/MenuExampleVerticalDropdown.js
@@ -13,7 +13,7 @@ export default class MenuExampleVerticalDropdown extends Component {
       <Menu secondary vertical>
         <Menu.Item name='account' active={activeItem === 'account'} onClick={this.handleItemClick} />
         <Menu.Item name='settings' active={activeItem === 'settings'} onClick={this.handleItemClick} />
-        <Dropdown as={Menu.Item} text='Display Options'>
+        <Dropdown item text='Display Options'>
           <Dropdown.Menu>
             <Dropdown.Header>Text Size</Dropdown.Header>
             <Dropdown.Item>Small</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeHuge.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeHuge.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeHuge extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeLarge.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeLarge.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeLarge extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeMassive.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeMassive.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeMassive extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeMini.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeMini.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeMini extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeSmall.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeSmall.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeSmall extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeTiny.js b/docs/app/Examples/collections/Menu/Variations/MenuExampleSizeTiny.js
@@ -15,7 +15,7 @@ export default class MenuExampleSizeTiny extends Component {
         <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
 
         <Menu.Menu position='right'>
-          <Dropdown as={Menu.Item} text='Language'>
+          <Dropdown item text='Language'>
             <Dropdown.Menu>
               <Dropdown.Item>English</Dropdown.Item>
               <Dropdown.Item>Russian</Dropdown.Item>

diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
@@ -35,6 +35,7 @@ const _meta = {
 
 /**
  * A menu displays grouped navigation actions.
+ * @see Dropdown
  */
 class Menu extends Component {
   static propTypes = {

diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -39,6 +39,7 @@ const _meta = {
  * A dropdown allows a user to select a value from a series of options.
  * @see Form
  * @see Select
+ * @see Menu
  */
 export default class Dropdown extends Component {
   static propTypes = {
@@ -136,7 +137,8 @@ export default class Dropdown extends Component {
     /** A dropdown can be labeled. */
     labeled: PropTypes.bool,
 
-    // linkItem: PropTypes.bool,
+    /** A dropdown can be formatted as a Menu item. */
+    item: PropTypes.bool,
 
     /** A dropdown can show that it is currently loading data. */
     loading: PropTypes.bool,
@@ -1140,8 +1142,8 @@ export default class Dropdown extends Component {
       floating,
       icon,
       inline,
+      item,
       labeled,
-      // linkItem,
       multiple,
       pointing,
       search,
@@ -1174,8 +1176,7 @@ export default class Dropdown extends Component {
       // TODO: the icon class is only required when a dropdown is a button
       // useKeyOnly(icon, 'icon'),
       useKeyOnly(labeled, 'labeled'),
-      // TODO: linkItem is required only when Menu child, add dynamically
-      // useKeyOnly(linkItem, 'link item'),
+      useKeyOnly(item, 'item'),
       useKeyOnly(multiple, 'multiple'),
       useKeyOnly(search, 'search'),
       useKeyOnly(selection, 'selection'),

diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -89,8 +89,7 @@ describe('Dropdown Component', () => {
   // TODO: See Dropdown cx notes
   // common.propKeyOnlyToClassName(Dropdown, 'icon')
   common.propKeyOnlyToClassName(Dropdown, 'labeled')
-  // TODO: See Dropdown cx notes
-  // common.propKeyOnlyToClassName(Dropdown, 'link item')
+  common.propKeyOnlyToClassName(Dropdown, 'item')
   common.propKeyOnlyToClassName(Dropdown, 'multiple')
   common.propKeyOnlyToClassName(Dropdown, 'search')
   common.propKeyOnlyToClassName(Dropdown, 'selection')