Fix input action examples (#305)

* fix(Input): use _meta to identify action children * refactor(docs): use Select where possible
Semantic-Org · Jun 28, 2016 · 3ea4804 · 3ea4804
1 parent c34a1a3
commit 3ea4804
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js b/docs/app/Examples/collections/Form/Validation/FormSpecifyingValidationRulesExample.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Checkbox, Dropdown, Form, Input, Message } from 'stardust'
+import { Button, Checkbox, Select, Form, Input, Message } from 'stardust'
 
 const fields = {
   name: 'empty',
@@ -32,7 +32,7 @@ const FormSpecifyingValidationRulesExample = (props) => (
         <Input placeholder='First Name' name='name' type='text' />
       </Form.Field>
       <Form.Field label='Gender'>
-        <Dropdown selection name='gender' options={genderOptions} />
+        <Select name='gender' options={genderOptions} />
       </Form.Field>
     </Form.Fields>
     <Form.Fields evenlyDivided>
@@ -44,7 +44,7 @@ const FormSpecifyingValidationRulesExample = (props) => (
       </Form.Field>
     </Form.Fields>
     <Form.Field label='Skills'>
-      <Dropdown selection multiple name='skills' options={skillsOptions} />
+      <Select multiple name='skills' options={skillsOptions} />
     </Form.Field>
     <Form.Field className='inline'>
       <Checkbox name='terms' className='hidden' label='I agree to the terms and conditions' />

diff --git a/docs/app/Examples/elements/Input/Variations/InputActionExample.js b/docs/app/Examples/elements/Input/Variations/InputActionExample.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Button, Dropdown, Input } from 'stardust'
+import { Button, Select, Input } from 'stardust'
 
 export default class InputActionExample extends Component {
   render() {
@@ -10,7 +10,7 @@ export default class InputActionExample extends Component {
     ]
     return (
       <Input className='left icon action' icon='search' placeholder='Search...'>
-        <Dropdown compact selection options={options} defaultValue='articles' />
+        <Select compact options={options} defaultValue='articles' />
         <Button type='submit'>Search</Button>
       </Input>
     )

diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
@@ -39,13 +39,10 @@ export default class Input extends Component {
     const actionChildren = []
 
     Children.forEach(children, child => {
-      const isButton = child.type.name === 'Button'
-      const isDropdown = child.type.name === 'Dropdown'
-      // TODO: use child.type.name === 'Label' once Label component is merged.
-      const isLabel = _.isString(child.props.className) && !!child.props.className.match(/ui.*label$/)
-      const childIsAction = !isLabel && isButton || isDropdown
+      const isAction = _.includes(['Button', 'Dropdown', 'Select'], child.type._meta.name)
+      const isLabel = child.type._meta.name === 'Label'
 
-      if (childIsAction) {
+      if (isAction) {
         actionChildren.push(child)
       } else if (isLabel) {
         labelChildren.push(child)