docs(Dropdown): update options to items

docs/app/Examples/addons/Select/Types/SelectExample.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Select } from 'semantic-ui-react'
 
-import { countryOptions } from '../common'
+import { countryItems } from '../common'
 // [{ key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' }, ...{}]
 
 const SelectExample = () => (
-  <Select placeholder='Select your country' options={countryOptions} />
+  <Select placeholder='Select your country' items={countryItems} />
 )
 
 export default SelectExample

docs/app/Examples/addons/Select/common.js

@@ -1,4 +1,4 @@
-export const countryOptions = [
+export const countryItems = [
   { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' },
   { key: 'ax', value: 'ax', flag: 'ax', text: 'Aland Islands' },
   { key: 'al', value: 'al', flag: 'al', text: 'Albania' },

docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControl.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Button, Checkbox, Form, Input, Radio, Select, TextArea } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'm', text: 'Male', value: 'male' },
   { key: 'f', text: 'Female', value: 'female' },
 ]
@@ -18,7 +18,7 @@ class FormExampleFieldControl extends Component {
         <Form.Group widths='equal'>
           <Form.Field control={Input} label='First name' placeholder='First name' />
           <Form.Field control={Input} label='Last name' placeholder='Last name' />
-          <Form.Field control={Select} label='Gender' options={options} placeholder='Gender' />
+          <Form.Field control={Select} label='Gender' items={items} placeholder='Gender' />
         </Form.Group>
         <Form.Group inline>
           <label>Quantity</label>

docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Form } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'm', text: 'Male', value: 'male' },
   { key: 'f', text: 'Female', value: 'female' },
 ]
@@ -18,7 +18,7 @@ class FormExampleSubComponentControl extends Component {
         <Form.Group widths='equal'>
           <Form.Input label='First name' placeholder='First name' />
           <Form.Input label='Last name' placeholder='Last name' />
-          <Form.Select label='Gender' options={options} placeholder='Gender' />
+          <Form.Select label='Gender' items={items} placeholder='Gender' />
         </Form.Group>
         <Form.Group inline>
           <label>Size</label>

docs/app/Examples/collections/Form/States/FormExampleFieldError.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Checkbox, Form, Input, Select } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'm', text: 'Male', value: 'male' },
   { key: 'f', text: 'Female', value: 'female' },
 ]
@@ -12,7 +12,7 @@ const FormExampleFieldError = () => (
       <Form.Input label='First name' placeholder='First name' error />
       <Form.Input label='Last name' placeholder='Last name' />
     </Form.Group>
-    <Form.Select options={options} placeholder='Gender' error />
+    <Form.Select items={items} placeholder='Gender' error />
     <Form.Checkbox label='I agree to the Terms and Conditions' error />
   </Form>
 )

docs/app/Examples/collections/Form/Types/FormExampleOnSubmit.js

@@ -36,9 +36,9 @@ class FormExampleOnSubmit extends Component {
       <Form onSubmit={this.handleSubmit}>
         <Form.Group widths='equal'>
           <Form.Input label='Name' name='name' placeholder='Name' />
-          <Form.Select label='Gender' name='gender' options={genders} placeholder='Gender' />
+          <Form.Select label='Gender' name='gender' items={genders} placeholder='Gender' />
         </Form.Group>
-        <Form.Select label='Products' name='products' options={products} placeholder='Search...' search multiple />
+        <Form.Select label='Products' name='products' items={products} placeholder='Search...' search multiple />
         <Form.Group widths='2'>
           <Form.Field>
             <label>Plan</label>

docs/app/Examples/elements/Input/Variations/InputExampleActionDropdown.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import { Dropdown, Input } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'page', text: 'This Page', value: 'page' },
   { key: 'org', text: 'This Organization', value: 'org' },
   { key: 'site', text: 'Entire Site', value: 'site' },
 ]
 
 const InputExampleActionDropdown = () => (
   <Input
-    action={<Dropdown basic floating options={options} defaultValue='page' />}
+    action={<Dropdown basic floating items={items} defaultValue='page' />}
     icon='search'
     iconPosition='left'
     placeholder='Search...'

docs/app/Examples/elements/Input/Variations/InputExampleActions.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Select, Input } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'all', text: 'All', value: 'all' },
   { key: 'articles', text: 'Articles', value: 'articles' },
   { key: 'products', text: 'Products', value: 'products' },
@@ -10,7 +10,7 @@ const options = [
 const InputExampleActions = () => (
   <Input type='text' placeholder='Search...' action>
     <input />
-    <Select compact options={options} defaultValue='articles' />
+    <Select compact items={items} defaultValue='articles' />
     <Button type='submit'>Search</Button>
   </Input>
 )

docs/app/Examples/elements/Input/Variations/InputExampleRightLabeled.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import { Dropdown, Input } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: '.com', text: '.com', value: '.com' },
   { key: '.net', text: '.net', value: '.net' },
   { key: '.org', text: '.org', value: '.org' },
 ]
 
 const InputExampleRightLabeled = () => (
   <Input
-    label={<Dropdown defaultValue='.com' options={options} />}
+    label={<Dropdown defaultValue='.com' items={items} />}
     labelPosition='right'
     placeholder='Find domain'
   />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleDescription.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleDescription = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleDivider.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleDivider = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleFloatedContent.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Icon } from 'semantic-ui-react'
 
 const DropdownExampleFloatedContent = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleHeader.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleHeader = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Item>Important</Dropdown.Item>

docs/app/Examples/modules/Dropdown/Content/DropdownExampleIcon.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleIcon = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleImage.js

@@ -1,14 +1,13 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-import { friendOptions } from '../common'
+import { friendItems } from '../common'
 
 const DropdownExampleImage = () => (
-  <Dropdown text='Add user' floating labeled button className='icon'>
-    {/* <i class="add user icon"></i> */}
+  <Dropdown icon='add user' text='Add user' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header content='People You Might Know' />
-      {friendOptions.map((option) => <Dropdown.Item key={option.value} {...option} />)}
+      {friendItems.map((item) => <Dropdown.Item key={item.value} {...item} />)}
     </Dropdown.Menu>
   </Dropdown>
 )

docs/app/Examples/modules/Dropdown/Content/DropdownExampleInput.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Input } from 'semantic-ui-react'
 
 const DropdownExampleInput = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header content='Search Issues' />
       <Input icon='search' iconPosition='left' name='search' />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleLabel.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
 const DropdownExampleLabel = () => (
-  <Dropdown text='Filter' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Filter' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Dropdown.Header icon='tags' content='Filter by tag' />
       <Dropdown.Divider />

docs/app/Examples/modules/Dropdown/Content/DropdownExampleMessage.js

@@ -2,8 +2,7 @@ import React from 'react'
 import { Dropdown, Message } from 'semantic-ui-react'
 
 const DropdownExampleMessage = () => (
-  <Dropdown text='Login' floating labeled button className='icon'>
-    {/* <i class="filter icon"></i> */}
+  <Dropdown icon='filter' text='Login' floating labeled button className='icon'>
     <Dropdown.Menu>
       <Message error header='Error' content='You must log-in to see all categories' />
     </Dropdown.Menu>

docs/app/Examples/modules/Dropdown/Types/DropdownExampleInline.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-import { friendOptions } from '../common'
-// friendOptions = [
+import { friendItems } from '../common'
+// friendItems = [
 //   {
 //     text: 'Jenny Hess',
 //     value: 'Jenny Hess',
@@ -15,7 +15,7 @@ const DropdownExampleInline = () => (
   <span>
     Show me posts by
     {' '}
-    <Dropdown inline options={friendOptions} defaultValue={friendOptions[0].value} />
+    <Dropdown inline items={friendItems} defaultValue={friendItems[0].value} />
   </span>
 )
 

docs/app/Examples/modules/Dropdown/Types/DropdownExampleInlineTwo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Dropdown, Header, Icon } from 'semantic-ui-react'
 
-const options = [
+const items = [
   {
     key: 'today',
     text: 'today',
@@ -28,7 +28,7 @@ const DropdownExampleInlineTwo = () => (
     <Header.Content>
       Trending repos
       {' '}
-      <Dropdown inline header='Adjust time span' options={options} defaultValue={options[0].value} />
+      <Dropdown inline header='Adjust time span' items={items} defaultValue={items[0].value} />
     </Header.Content>
   </Header>
 )

docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchInMenu.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Dropdown, Input } from 'semantic-ui-react'
 
-import { tagOptions } from '../common'
-// tagOptions = [
+import { tagItems } from '../common'
+// tagItems = [
 //   {
 //     text: 'Important',
 //     value: 'Important',
@@ -11,16 +11,14 @@ import { tagOptions } from '../common'
 //   ...
 // ]
 
-
 const DropdownExampleMultipleSearchInMenu = () => (
   <Dropdown text='Filter Posts' multiple>
-    {/* <i class="filter icon"></i> */}
     <Dropdown.Menu>
       <Input icon='search' iconPosition='left' className='search' />
       <Dropdown.Divider />
       <Dropdown.Header icon='tags' content='Tag Label' />
       <Dropdown.Menu scrolling>
-        {tagOptions.map((option) => <Dropdown.Item key={option.value} {...option} />)}
+        {tagItems.map((item) => <Dropdown.Item key={item.value} {...item} />)}
       </Dropdown.Menu>
     </Dropdown.Menu>
   </Dropdown>

docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchSelection.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-import { stateOptions } from '../common'
-// stateOptions = [ { key: 'AL', value: 'AL', text: 'Alabama' }, ...  ]
+import { stateItems } from '../common'
+// stateItems = [ { key: 'AL', value: 'AL', text: 'Alabama' }, ...  ]
 
 const DropdownExampleMultipleSearchSelection = () => (
-  <Dropdown placeholder='State' fluid multiple search selection options={stateOptions} />
+  <Dropdown placeholder='State' fluid multiple search selection items={stateItems} />
 )
 
 export default DropdownExampleMultipleSearchSelection

docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSearchSelectionTwo.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-import { countryOptions } from '../common'
-// countryOptions = [ { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' }, ...  ]
+import { countryItems } from '../common'
+// countryItems = [ { key: 'af', value: 'af', flag: 'af', text: 'Afghanistan' }, ...  ]
 
 const DropdownExampleMultipleSearchSelectionTwo = () => (
-  <Dropdown placeholder='Select Country' fluid multiple search selection options={countryOptions} />
+  <Dropdown placeholder='Select Country' fluid multiple search selection items={countryItems} />
 )
 
 export default DropdownExampleMultipleSearchSelectionTwo

docs/app/Examples/modules/Dropdown/Types/DropdownExampleMultipleSelection.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-const options = [
+const items = [
   { key: 'angular', text: 'Angular', value: 'angular' },
   { key: 'css', text: 'CSS', value: 'css' },
   { key: 'design', text: 'Graphic Design', value: 'design' },
@@ -23,7 +23,7 @@ const options = [
 ]
 
 const DropdownExampleMultipleSelection = () => (
-  <Dropdown placeholder='Skills' fluid multiple selection options={options} />
+  <Dropdown placeholder='Skills' fluid multiple selection items={items} />
 )
 
 export default DropdownExampleMultipleSelection

docs/app/Examples/modules/Dropdown/Types/DropdownExampleSearchDropdown.js

@@ -1,18 +1,21 @@
 import React from 'react'
 import { Dropdown } from 'semantic-ui-react'
 
-import { languageOptions } from '../common'
-// languageOptions = [ { key: 'Arabic', text: 'Arabic', value: 'Arabic' }, ...  ]
+import { languageItems } from '../common'
+// languageItems = [ { key: 'Arabic', text: 'Arabic', value: 'Arabic' }, ...  ]
 
-/**
- * NOTE: In this example, the dropdown should contain a label on the
- * left of the text:
- * <i class="world icon"></i>
- *
- * @returns {Element}
- */
 const DropdownExampleSearchDropdown = () => (
-  <Dropdown text='Select Language' search floating labeled button className='icon' options={languageOptions} />
+  <Dropdown
+    text='Select Language'
+    icon='world'
+    search
+    floating
+    labeled
+    button
+    // TODO: remove className once button/icon API is in place
+    className='icon'
+    items={languageItems}
+  />
 )
 
 export default DropdownExampleSearchDropdown