Merge branch 'master' into fix-fixed-header

src/components/Input/index.d.ts

@@ -53,6 +53,7 @@ export interface InputProps extends BaseProps {
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     checked?: boolean;
     id?: string;
+    variant?: 'default' | 'shaded';
     autoComplete?: string;
 }
 

src/components/Input/index.js

@@ -127,6 +127,9 @@ Input.propTypes = {
     className: PropTypes.string,
     /** An object with custom style applied to the outer element. */
     style: PropTypes.object,
+    /** The variant changes the appearance of the Input. Accepted variants include default,
+     * and shaded. This value defaults to default. */
+    variant: PropTypes.oneOf(['default', 'shaded']),
     /** The id of the outer element. */
     id: PropTypes.string,
     /** A string indicating the type of autocomplete functionality.
@@ -166,6 +169,7 @@ Input.defaultProps = {
     checked: undefined,
     className: undefined,
     style: undefined,
+    variant: 'default',
     id: undefined,
     autoComplete: 'on',
     label: undefined,

src/components/Input/inputBase/index.js

@@ -89,6 +89,7 @@ export default class InputBase extends Component {
             isBare,
             isCentered,
             iconPosition,
+            variant,
         } = this.props;
         const isReadOnly = !!(!disabled && readOnly);
 
@@ -141,6 +142,7 @@ export default class InputBase extends Component {
                         iconPosition={iconPosition}
                         icon={icon}
                         error={error}
+                        variant={variant}
                     />
                 </RelativeElement>
                 <RenderIf isTrue={!!bottomHelpText}>
@@ -197,6 +199,7 @@ InputBase.propTypes = {
     onKeyDown: PropTypes.func,
     className: PropTypes.string,
     style: PropTypes.object,
+    variant: PropTypes.oneOf(['default', 'shaded']),
     id: PropTypes.string,
     autoComplete: PropTypes.string,
     hideLabel: PropTypes.bool,
@@ -228,6 +231,7 @@ InputBase.defaultProps = {
     onKeyDown: () => {},
     className: undefined,
     style: undefined,
+    variant: 'default',
     id: undefined,
     autoComplete: 'on',
     hideLabel: false,

src/components/Input/readme.md

@@ -367,3 +367,27 @@ const inputStyles = {
     />
 </div>
 ```
+
+##### input with variant shaded
+
+```js
+import React from 'react';
+import { Input } from 'react-rainbow-components';
+import logo from './../../../assets/images/rainbow-logo.svg';
+
+const inputStyles = {
+    width: 300,
+};
+<div>
+    <div className="rainbow-flex_column rainbow-align-content_center">
+        <img src={logo}  className="rainbow-p-top_x-large" />
+        <p className="rainbow-p-around_xx-small">react-rainbow components</p>
+    </div>
+    <Input
+        placeholder="Find Something"
+        className="rainbow-m_auto rainbow-p-around_medium"
+        variant="shaded"
+        style={inputStyles}
+    />
+</div>
+```

src/components/Input/styled/input.js

@@ -62,7 +62,12 @@ const Input = attachThemeAttrs(styled.input)`
             border: 1px solid ${props => props.palette.border.disabled};
         }
     }
-
+    ${props =>
+        props.variant === 'shaded' &&
+        `
+        box-shadow:${props.disabled || props.readOnly ? '' : props.shadows.shadow_10};
+        border: 1px solid transparent;
+        `}
     ${props =>
         props.error &&
         `