diff --git a/src/components/Input/styled/input.js b/src/components/Input/styled/input.js index 6a8218f6a..1a97baea0 100644 --- a/src/components/Input/styled/input.js +++ b/src/components/Input/styled/input.js @@ -67,28 +67,27 @@ const Input = attachThemeAttrs(styled.input)` ` box-shadow:${props.disabled || props.readOnly ? '' : props.shadows.shadow_10}; border: 1px solid transparent; - `} + `} - ${props => - props.variant === 'bare' && - ` + ${props => + props.variant === 'bare' && + ` + background-color: transparent; + border: 0; + padding: 0 0.75rem; + color: ${props.palette.text.main}; + line-height: 2.5rem; + transition: none; + + &:focus, + &:active { + outline: 0; + box-shadow: none; + padding: 0 0.75rem; background-color: transparent; border: 0; - padding: 0 0.75rem; - color: ${props.palette.text.main}; - line-height: 2.5rem; - transition: none; - - &:focus, - &:active { - outline: 0; - box-shadow: none; - padding: 0 0.75rem; - background-color: transparent; - border: 0; - } - `} - + } + `} ${props => props.error && ` diff --git a/src/components/Picklist/index.d.ts b/src/components/Picklist/index.d.ts index fd1c37d03..eab6aa557 100644 --- a/src/components/Picklist/index.d.ts +++ b/src/components/Picklist/index.d.ts @@ -16,7 +16,7 @@ export interface PicklistProps extends BaseProps { isLoading?: boolean; enableSearch?: boolean; value?: PicklistValue; - variant?: 'default' | 'shaded'; + variant?: 'default' | 'shaded' | 'bare'; onChange?: (value: PicklistValue) => void; onClick?: (event: MouseEvent) => void; onFocus?: (event: null | PicklistValue) => void; diff --git a/src/components/Picklist/index.js b/src/components/Picklist/index.js index b0c1f6405..ec536995b 100644 --- a/src/components/Picklist/index.js +++ b/src/components/Picklist/index.js @@ -362,7 +362,7 @@ Picklist.propTypes = { style: PropTypes.object, /** The variant changes the appearance of the Picklist. Accepted variants include default, * and shaded. This value defaults to default. */ - variant: PropTypes.oneOf(['default', 'shaded']), + variant: PropTypes.oneOf(['default', 'shaded', 'bare']), /** If is set to true, then a search input to filter is showed. */ enableSearch: PropTypes.bool, }; diff --git a/src/components/Picklist/readme.md b/src/components/Picklist/readme.md index ba3a1b275..1c8e00c50 100644 --- a/src/components/Picklist/readme.md +++ b/src/components/Picklist/readme.md @@ -454,3 +454,47 @@ const initialState = { value: { name: 'option 2', label: 'Empire State' } }; ; ``` + +##### Picklist bare + +```js +import React, { useState } from 'react'; +import { Picklist, Option } from 'react-rainbow-components'; + +const containerStyles = { + width: '200px', +}; + +function PicklistExample() { + const [picklistValue, setPicklistValue] = useState({ name: 'option 3', label: 'Central Park' }); + + return ( + +
+ + +
+
+ ); +} + +
+ +
; +``` diff --git a/src/components/Picklist/styled/input.js b/src/components/Picklist/styled/input.js index b23e8f80e..87b5e76c6 100644 --- a/src/components/Picklist/styled/input.js +++ b/src/components/Picklist/styled/input.js @@ -36,7 +36,14 @@ const PickerInput = attachThemeAttrs(styled(StyledInput))` box-shadow: none; `} `} - + ${props => + props.variant === 'bare' && + ` + :hover { + box-shadow: ${props.shadows.shadow_10}; + background-color: ${props.palette.background.main}; + } + `} ${props => props.isReadOnly && !props.disabled &&