diff --git a/src/components/Input/index.d.ts b/src/components/Input/index.d.ts index b4f3af402..996664980 100644 --- a/src/components/Input/index.d.ts +++ b/src/components/Input/index.d.ts @@ -53,6 +53,7 @@ export interface InputProps extends BaseProps { onKeyDown?: (event: KeyboardEvent) => void; checked?: boolean; id?: string; + variant?: 'default' | 'shaded'; autoComplete?: string; } diff --git a/src/components/Input/index.js b/src/components/Input/index.js index b7bb61443..4f33946b8 100644 --- a/src/components/Input/index.js +++ b/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, diff --git a/src/components/Input/inputBase/index.js b/src/components/Input/inputBase/index.js index 4fdfc0087..ef8462edf 100644 --- a/src/components/Input/inputBase/index.js +++ b/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} /> @@ -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, diff --git a/src/components/Input/readme.md b/src/components/Input/readme.md index a1c534f59..fe05ea650 100644 --- a/src/components/Input/readme.md +++ b/src/components/Input/readme.md @@ -367,3 +367,27 @@ const inputStyles = { /> ``` + +##### 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, +}; +
+
+ +

react-rainbow components

+
+ +
+``` diff --git a/src/components/Input/styled/input.js b/src/components/Input/styled/input.js index f7e250ec5..bf2c8f0f9 100644 --- a/src/components/Input/styled/input.js +++ b/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 && `