feat(Input): support action inputs

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -28,6 +28,11 @@ const headerColumnStyle = {
   paddingRight: '7em',
 }
 
+const renderedExampleStyle = {
+  paddingTop: 0,
+  paddingBottom: 0,
+}
+
 /**
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
@@ -131,7 +136,10 @@ export default class ComponentExample extends Component {
             {children}
           </Grid.Column>
         )}
-        <Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
+        <Grid.Column
+          className={`rendered-example ${this.getKebabExamplePath()}`}
+          style={renderedExampleStyle}
+        >
           {createElement(this.component, rest)}
         </Grid.Column>
         {showCode && this.renderCode()}

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Dropdown, Input } from 'stardust'
+
+const options = [
+  { text: 'This Page', value: 'page' },
+  { text: 'This Organization', value: 'org' },
+  { text: 'Entire Site', value: 'site' },
+]
+
+const InputActionDropdown = () => (
+  <Input
+    action={<Dropdown basic floating options={options} defaultValue='page' />}
+    icon='search'
+    iconPosition='left'
+    placeholder='Search...'
+  />
+)
+
+export default InputActionDropdown

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', labeled: 'right', icon: 'copy', content: 'Copy' }}
+    defaultValue='http://ww.short.url/c0opq'
+  />
+)
+
+export default InputActionLabeledButton

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

@@ -8,7 +8,7 @@ const options = [
 ]
 
 const InputActions = () => (
-  <Input>
+  <Input action>
     <input type='text' placeholder='Search...' />
     <Select compact options={options} defaultValue='articles' />
     <Button type='submit'>Search</Button>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Input } from 'stardust'
+
+const InputLeftActionLabeledButton = () => (
+  <Input
+    action={{ color: 'teal', labeled: true, icon: 'cart', content: 'Checkout' }}
+    actionPosition='left'
+    placeholder='Search...'
+    defaultValue='52.03'
+  />
+)
+
+export default InputLeftActionLabeledButton

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

@@ -5,16 +5,20 @@ const InputSize = () => (
   <div>
     <Input size='mini' icon='search' placeholder='Search...' />
     <br />
+    <br />
     <Input size='small' icon='search' placeholder='Search...' />
     <br />
+    <br />
     <Input size='large' icon='search' placeholder='Search...' />
     <br />
+    <br />
     <Input size='big' icon='search' placeholder='Search...' />
     <br />
+    <br />
     <Input size='huge' icon='search' placeholder='Search...' />
     <br />
-    <Input size='massive' icon='search' placeholder='Search...' />
     <br />
+    <Input size='massive' icon='search' placeholder='Search...' />
   </div>
 )
 

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

@@ -26,21 +26,19 @@ const InputVariations = () => (
       title='Labeled'
       description='An input can be formatted with a label'
       examplePath='elements/Input/Variations/InputLabeled'
-    >
-      <Message
-        info
-        content='The `label` prop is a shorthand prop.  I can render a string, number, props object or element'
-      />
-    </ComponentExample>
+    />
     <ComponentExample
-      description='You can position and augment an Input label'
+      description='You can pass any element'
       examplePath='elements/Input/Variations/InputRightLabeled'
     />
-    <ComponentExample examplePath='elements/Input/Variations/InputRightLabeledBasic' />
+    <ComponentExample
+      description='You can pass a Label props object'
+      examplePath='elements/Input/Variations/InputRightLabeledBasic'
+    />
     <ComponentExample examplePath='elements/Input/Variations/InputRightLeftLabeled'>
       <Message warning>
-        Multiple Labels require `children`.
-        When using `children`, you must add your own `input`.
+        Multiple Labels require <code>children</code>.
+        When using <code>children</code>, you must add your own <code>{'<input />'}</code>.
       </Message>
     </ComponentExample>
     <ComponentExample examplePath='elements/Input/Variations/InputRightLabeledTag' />
@@ -51,8 +49,22 @@ const InputVariations = () => (
       description='An input can be formatted to alert the user to an action they may perform'
       examplePath='elements/Input/Variations/InputAction'
     />
-    <ComponentExample examplePath='elements/Input/Variations/InputLeftActionIconButton' />
-    <ComponentExample examplePath='elements/Input/Variations/InputActions' />
+    <ComponentExample
+      description='You can pass a Button props object'
+      examplePath='elements/Input/Variations/InputLeftActionLabeledButton'
+    />
+    <ComponentExample
+      description='You can pass any element'
+      examplePath='elements/Input/Variations/InputActionDropdown'
+    />
+    <ComponentExample examplePath='elements/Input/Variations/InputActions'>
+      <Message warning>
+        Multiple Actions require <code>children</code>.
+        When using <code>children</code>, you must add your own <code>{'<input />'}</code>.
+      </Message>
+    </ComponentExample>
+    <ComponentExample examplePath='elements/Input/Variations/InputActionLabeledButton' />
+    <ComponentExample examplePath='elements/Input/Variations/InputActionIconButton' />
     <ComponentExample
       title='Transparent'
       description='A transparent input has no background'

src/elements/Input/Input.js

@@ -76,6 +76,7 @@ function Input(props) {
   const classes = cx(
     'ui',
     size,
+    useValueAndKey(actionPosition, 'action') || useKeyOnly(action, 'action'),
     useKeyOnly(disabled, 'disabled'),
     useKeyOnly(error, 'error'),
     useKeyOnly(focus, 'focus'),
@@ -98,26 +99,29 @@ function Input(props) {
     return <ElementType {...rest} className={classes}>{children}</ElementType>
   }
 
-  const actionElement = Button.create(action)
+  const actionElement = Button.create(action, {
+    // all action components should have the button className
+    className: 'button',
+  })
   const iconElement = Icon.create(icon)
   const labelElement = Label.create(label, {
     className: cx(
       // all label components should have the label className
       'label',
-      // pass corner='left|right'
+      // add 'left|right corner'
       _.includes(labelPosition, 'corner') && labelPosition,
     ),
   })
 
   return (
     <ElementType {...rest} className={classes}>
-      {labelPosition !== 'right' && labelElement}
       {actionPosition === 'left' && actionElement}
       {iconPosition !== 'right' && iconElement}
+      {labelPosition !== 'right' && labelElement}
       {createHTMLInput(input || 'text', inputProps)}
+      {actionPosition !== 'left' && actionElement}
       {iconPosition === 'right' && iconElement}
       {labelPosition === 'right' && labelElement}
-      {actionPosition === 'right' && actionElement}
     </ElementType>
   )
 }
@@ -138,12 +142,15 @@ Input.propTypes = {
   as: customPropTypes.as,
 
   /** An Input can be formatted to alert the user to an action they may perform */
-  action: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-      PropTypes.element,
+  action: customPropTypes.some([
+    PropTypes.bool,
+    customPropTypes.every([
+      customPropTypes.disallow(['children']),
+      PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.element,
+      ]),
     ]),
   ]),
 
@@ -211,10 +218,7 @@ Input.propTypes = {
   ]),
 
   /** A Label can appear outside an Input on the left or right */
-  labelPosition: customPropTypes.every([
-    customPropTypes.disallow(['children']),
-    PropTypes.oneOf(Input._meta.props.labelPosition),
-  ]),
+  labelPosition: PropTypes.oneOf(Input._meta.props.labelPosition),
 
   /** An Icon Input field can show that it is currently loading data */
   loading: PropTypes.bool,