feat(Input): update to v1 API

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -14,21 +14,27 @@ const showCodeStyle = {
   right: '1rem',
 }
 
-const descriptionStyle = {
-  marginRight: '5em',
-}
-
 const codeIconStyle = {
   fontWeight: 'bold',
 }
 
 const titleStyle = {
-  marginBottom: 0,
+  margin: 0,
 }
 
 const headerColumnStyle = {
   // provide room for absolutely positions toggle code icons
   minHeight: '4em',
+  paddingRight: '7em',
+}
+
+const childrenStyle = {
+  paddingTop: 0,
+}
+
+const renderedExampleStyle = {
+  paddingTop: 0,
+  paddingBottom: 0,
 }
 
 /**
@@ -109,6 +115,8 @@ export default class ComponentExample extends Component {
     return (
       <Grid style={style} divided={active} columns='1'>
         <Grid.Column style={headerColumnStyle}>
+          {title && <Header as='h3' style={titleStyle}>{title}</Header>}
+          {description && <p>{description}</p>}
           <div style={showCodeStyle}>
             <Icon
               link
@@ -126,11 +134,16 @@ export default class ComponentExample extends Component {
               onClick={this.toggleShowHTML}
             />
           </div>
-          {title && <Header as='h3' style={titleStyle}>{title}</Header>}
-          {description && <p style={descriptionStyle}>{description}</p>}
-          {children}
         </Grid.Column>
-        <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
+        {children && (
+          <Grid.Column style={childrenStyle}>
+            {children}
+          </Grid.Column>
+        )}
+        <Grid.Column
+          className={`rendered-example ${this.getKebabExamplePath()}`}
+          style={renderedExampleStyle}
+        >
           {createElement(this.component, rest)}
         </Grid.Column>
         {showCode && this.renderCode()}

docs/app/Components/Sidebar/Sidebar.js

@@ -51,12 +51,21 @@ export default class Sidebar extends Component {
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleDocumentKeyDown)
+    this.setSearchInput()
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.setSearchInput()
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleDocumentKeyDown)
   }
 
+  setSearchInput() {
+    this._searchInput = findDOMNode(this).querySelector('.ui.input input')
+  }
+
   handleDocumentKeyDown = (e) => {
     const code = keyboardKey.getCode(e)
     const isAZ = code >= 65 && code <= 90
@@ -197,9 +206,6 @@ export default class Sidebar extends Component {
             value={query}
             onChange={this.handleSearchChange}
             onKeyDown={this.handleSearchKeyDown}
-            ref={(c) => {
-              if (c !== null) this._searchInput = findDOMNode(c).querySelector('input')
-            }}
           />
         </div>
         {query ? this.renderSearchItems() : this.menuItemsByType}

docs/app/Examples/collections/Menu/Content/Inputs.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Button, Input, Menu } from 'stardust'
-
-// TODO: Update <Input> usage after update to v1 API
+import { Input, Menu } from 'stardust'
 
 const Inputs = () => {
   return (
@@ -11,9 +9,7 @@ const Inputs = () => {
       </Menu.Item>
 
       <Menu.Item position='right'>
-        <Input className='action' placeholder='Navigate to...'>
-          <Button type='submit'>Go</Button>
-        </Input>
+        <Input action={{ type: 'submit', content: 'Go' }} placeholder='Navigate to...' />
       </Menu.Item>
     </Menu>
   )

docs/app/Examples/collections/Menu/Types/Pointing.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Menu, Segment } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Pointing extends Component {
   state = { activeItem: 'home' }
 
@@ -19,7 +17,7 @@ export default class Pointing extends Component {
           <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
           <Menu.Menu position='right'>
             <Menu.Item>
-              <Input className='icon' icon='search' placeholder='Search...' />
+              <Input icon='search' placeholder='Search...' />
             </Menu.Item>
           </Menu.Menu>
         </Menu>

docs/app/Examples/collections/Menu/Types/Secondary.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Secondary extends Component {
   state = { activeItem: 'home' }
 
@@ -18,7 +16,7 @@ export default class Secondary extends Component {
         <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
         <Menu.Menu position='right'>
           <Menu.Item>
-            <Input className='icon' icon='search' placeholder='Search...' />
+            <Input icon='search' placeholder='Search...' />
           </Menu.Item>
           <Menu.Item name='logout' active={activeItem === 'logout'} onClick={this.handleItemClick} />
         </Menu.Menu>

docs/app/Examples/collections/Menu/Types/TabularOnTop.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
-import { Menu, Segment } from 'stardust'
-
-// TODO: Update <Input /> usage after its will implemented
+import { Input, Menu, Segment } from 'stardust'
 
 export default class TabularOnTop extends Component {
   state = { activeItem: 'bio' }
@@ -18,10 +16,7 @@ export default class TabularOnTop extends Component {
           <Menu.Item name='photos' active={activeItem === 'photos'} onClick={this.handleItemClick} />
           <Menu.Menu position='right'>
             <Menu.Item>
-              <div className='ui transparent icon input'>
-                <input type='text' placeholder='Search users...' />
-                <i className='search link icon' />
-              </div>
+              <Input transparent icon={{ name: 'search', link: 'true' }} placeholder='Search users...' />
             </Menu.Item>
           </Menu.Menu>
         </Menu>

docs/app/Examples/collections/Menu/Types/Vertical.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class Vertical extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class Vertical extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalLarge.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalLarge extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalLarge extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalMassive.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeLargeMassive extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeLargeMassive extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalMini.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalMini extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalMini extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/collections/Menu/Variations/SizeVerticalSmall.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react'
 import { Input, Label, Menu } from 'stardust'
 
-// TODO: Update <Input> usage after its update to v1 API
-
 export default class SizeVerticalSmall extends Component {
   state = { activeItem: 'inbox' }
 
@@ -28,7 +26,7 @@ export default class SizeVerticalSmall extends Component {
           Updates
         </Menu.Item>
         <Menu.Item>
-          <Input className='icon' icon='search' placeholder='Search mail...' />
+          <Input icon='search' placeholder='Search mail...' />
         </Menu.Item>
       </Menu>
     )

docs/app/Examples/elements/Input/States/InputDisabled.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputDisabled = () => (
+  <Input disabled placeholder='Search...' />
+)
+
+export default InputDisabled

docs/app/Examples/elements/Input/States/InputError.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputError = () => (
+  <Input error placeholder='Search...' />
+)
+
+export default InputError

docs/app/Examples/elements/Input/States/InputFocus.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputFocus = () => (
+  <Input focus placeholder='Search...' />
+)
+
+export default InputFocus

docs/app/Examples/elements/Input/States/InputLeftLoading.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputLeftLoading = () => (
+  <Input loading icon='user' iconPosition='left' placeholder='Search...' />
+)
+
+export default InputLeftLoading

docs/app/Examples/elements/Input/States/InputLoading.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputLoading = () => (
+  <Input loading icon='user' placeholder='Search...' />
+)
+
+export default InputLoading