feat(input): new Input component with 'input' slot

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `target` prop to `Popup` @kuzhelog ([#356](https://github.com/stardust-ui/react/pull/356))
+- Add new `Input` component with `wrapper` prop @Bugaa92 ([#326](https://github.com/stardust-ui/react/pull/326))
 
 <!--------------------------------[ v0.9.1 ]------------------------------- -->
 ## [v0.9.1](https://github.com/stardust-ui/react/tree/v0.9.1) (2018-10-11)

docs/src/examples/components/Input/Variations/InputExampleClearable.shorthand.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Input } from '@stardust-ui/react'
 
-const InputExampleClearableShorthand = () => <Input clearable placeholder="Search..." />
+const InputExampleClearable = () => <Input clearable placeholder="Search..." />
 
-export default InputExampleClearableShorthand
+export default InputExampleClearable

docs/src/examples/components/Input/Variations/InputExampleFluid.shorthand.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Input } from '@stardust-ui/react'
 
-const InputExample = () => <Input fluid icon="search" placeholder="Search..." />
+const InputExampleFluid = () => <Input fluid icon="search" placeholder="Search..." />
 
-export default InputExample
+export default InputExampleFluid

docs/src/examples/components/Input/Variations/InputExampleInlineIconClearable.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Input } from '@stardust-ui/react'
+
+const InputExampleInline = () => (
+  <div>
+    Some text inline with the <Input inline icon="search" clearable placeholder="input name" /> and
+    more text.
+  </div>
+)
+
+export default InputExampleInline

docs/src/examples/components/Input/Variations/InputExampleInputSlot.shorthand.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Grid, Input, Text } from '@stardust-ui/react'
+
+const inputStyles = { color: 'blue', background: 'yellow' }
+const InputExampleInputSlot = () => (
+  <Grid columns="1fr 2fr" styles={{ justifyItems: 'start', alignItems: 'center', gap: '10px' }}>
+    <Text content="Input default:" />
+    <Input placeholder="Search..." role="presentation" />
+
+    <Text content="Input with input slot as props:" />
+    <Input
+      placeholder="Search..."
+      role="presentation"
+      input={{
+        // will override component's 'placeholder' attribute
+        placeholder: 'Placeholder Override...',
+
+        // will override component's 'role' attribute
+        role: 'checkbox',
+
+        // will set custom styles for input DOM element
+        styles: inputStyles,
+      }}
+    />
+
+    <Text content="Wrapped Input with existing component:" />
+    <Input
+      placeholder="Search..."
+      role="presentation"
+      input={
+        <Text
+          as="input"
+          placeholder="Placeholder Override..."
+          role="checkbox"
+          styles={inputStyles}
+        />
+      }
+    />
+
+    <Text content="Wrapped Input with custom element:" />
+    <Input
+      placeholder="Search..."
+      role="presentation"
+      input={<input placeholder="Placeholder Override..." role="checkbox" style={inputStyles} />}
+    />
+  </Grid>
+)
+
+export default InputExampleInputSlot

docs/src/examples/components/Input/Variations/InputExampleTargeting.shorthand.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Grid, Input, Text } from '@stardust-ui/react'
+
+// This object contains properties that will be applied to the input
+const propsForInput = { placeholder: 'Search...', id: 'inputId', role: 'checkbox' }
+const propsTargettingWrapper = {
+  placeholder: 'Wrapper placeholder...',
+  id: 'wrapperId',
+  role: 'presentation',
+}
+
+// This object contains properties that will be applied to the wrapper
+const propsForWrapper = { dir: 'ltr', tabIndex: -1, styles: { padding: '5px', background: 'red' } }
+const propsTargettingInput = {
+  dir: 'rtl',
+  tabIndex: 0,
+  styles: { color: 'blue', background: 'yellow' },
+}
+
+const InputExampleTargeting = () => (
+  <Grid columns="1fr 1fr" styles={{ justifyItems: 'start', alignItems: 'center', gap: '10px' }}>
+    <Text content="Input with props that will be applied to either the input or the wrapper:" />
+    <Input {...propsForInput} {...propsForWrapper} />
+
+    <Text content="Input with input slot props that have to be applied to the input element:" />
+    <Input {...propsForInput} {...propsForWrapper} input={propsTargettingInput} />
+
+    <Text content="Input with wrapper slot props that have to be applied to the wrapper element:" />
+    <Input {...propsForInput} {...propsForWrapper} wrapper={propsTargettingWrapper} />
+
+    <Text content="Input with input and wrapper slot props that have to be applied to the input and wrapper elements, respectively:" />
+    <Input
+      {...propsForInput}
+      {...propsForWrapper}
+      input={propsTargettingInput}
+      wrapper={propsTargettingWrapper}
+    />
+  </Grid>
+)
+
+export default InputExampleTargeting

docs/src/examples/components/Input/Variations/InputExampleWrapperSlot.shorthand.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Grid, Input, Text } from '@stardust-ui/react'
+
+const InputExampleWrapperSlot = () => (
+  <Grid columns="1fr 2fr" styles={{ justifyItems: 'start', alignItems: 'center', gap: '10px' }}>
+    <Text content="Input default:" />
+    <Input
+      placeholder="Search..."
+      tabIndex={-1}
+      styles={{ color: 'blue', backgroundColor: 'yellow' }}
+    />
+
+    <Text content="Wrapped Input with props:" />
+    <Input
+      placeholder="Search..."
+      tabIndex={-1}
+      styles={{ color: 'blue', backgroundColor: 'yellow' }}
+      wrapper={{
+        // will override component's 'tabIndex' attribute
+        tabIndex: 0,
+
+        // will set custom styles for wrapper element
+        styles: { padding: '5px', backgroundColor: 'red' },
+      }}
+    />
+
+    <Text content="Wrapped Input with existing component:" />
+    <Input
+      placeholder="Search..."
+      tabIndex={-1}
+      styles={{ color: 'blue', backgroundColor: 'yellow' }}
+      wrapper={<Text tabIndex={0} styles={{ padding: '5px', backgroundColor: 'red' }} />}
+    />
+
+    <Text content="Wrapped Input with custom element:" />
+    <Input
+      placeholder="Search..."
+      tabIndex={-1}
+      styles={{ color: 'blue', backgroundColor: 'yellow' }}
+      wrapper={<span tabIndex={0} style={{ padding: '5px', backgroundColor: 'red' }} />}
+    />
+  </Grid>
+)
+
+export default InputExampleWrapperSlot

docs/src/examples/components/Input/Variations/index.tsx

@@ -29,6 +29,26 @@ const Variations = () => (
       description="An input can be used inline with text."
       examplePath="components/Input/Variations/InputExampleInline"
     />
+    <ComponentExample
+      title="Inline, clearable with icon"
+      description="An input can be clearable, with icon and inlined into text."
+      examplePath="components/Input/Variations/InputExampleInlineIconClearable"
+    />
+    <ComponentExample
+      title="Input slot"
+      description="The 'input' slot targets the input element and overrides input related props passed to the root."
+      examplePath="components/Input/Variations/InputExampleInputSlot"
+    />
+    <ComponentExample
+      title="Wrapper slot"
+      description="The 'wrapper' slot targets the wrapper element and overrides wrapper related props passed to the root."
+      examplePath="components/Input/Variations/InputExampleWrapperSlot"
+    />
+    <ComponentExample
+      title="Targeting slots"
+      description="An input can handle both input and wrapper slots for targetting the input and wrapper elements, respectively."
+      examplePath="components/Input/Variations/InputExampleTargeting"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/RadioGroup/Types/RadioGroupExample.shorthand.tsx

@@ -34,7 +34,8 @@ class RadioGroupVerticalExample extends React.Component {
         key: 'Custom',
         label: (
           <Text>
-            Choose your own <Input inline placeholder="flavour" />
+            Choose your own{' '}
+            <Input input={{ tabIndex: this.state.inputTabIndex }} inline placeholder="flavour" />
           </Text>
         ),
         value: 'custom',

docs/src/examples/components/RadioGroup/Types/RadioGroupVerticalExample.shorthand.tsx

@@ -35,7 +35,8 @@ class RadioGroupVerticalExample extends React.Component {
         key: 'Custom',
         label: (
           <Text>
-            Choose your own <Input inline placeholder="flavour" />
+            Choose your own{' '}
+            <Input input={{ tabIndex: this.state.inputTabIndex }} inline placeholder="flavour" />
           </Text>
         ),
         value: 'custom',

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { Avatar, Button, Divider, Icon, Layout, Segment, Text } from '@stardust-ui/react'
 
-import { pxToRem } from 'src/lib'
 import { IChat } from './services'
 import { Sizes } from 'src/lib/enums'
 
@@ -86,8 +85,8 @@ class ChatPaneHeader extends React.PureComponent<IChatPaneHeaderProps> {
             tabIndex={0}
             styles={{
               fontWeight: 100,
-              ...(!index && { marginRight: '1.6rem' }),
-              marginTop: pxToRem(8),
+              margin: 'auto',
+              ...(!index && { margin: 'auto 1.6rem auto auto' }),
             }}
             variables={siteVars => ({ color: siteVars.gray04 })}
           />

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -21,6 +21,7 @@ class ComposeMessage extends React.Component {
       <Input
         fluid
         placeholder="Type a message"
+        input={{ styles: { height: '3.1429rem' /* 44px */ } }}
         variables={siteVars => ({ backgroundColor: siteVars.white })}
       />
     )

package.json

@@ -97,6 +97,7 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.4",
+    "@types/enzyme": "^3.1.14",
     "@types/faker": "^4.1.3",
     "@types/gulp-load-plugins": "^0.0.31",
     "@types/jest": "^23.1.0",