feat: add bare variant on the Picklist component (#2065)

* feat: add bare variant on the Picklist component fix: #2062 * fix: improve example * fix: add background color when hover Co-authored-by: Jose Leandro Torres <jtorressicilia@gmail.com>
nexxtway · Dec 27, 2020 · 1ae28ef · 1ae28ef
1 parent 5981410
commit 1ae28ef
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 22 deletions.
diff --git 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
@@ -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<HTMLElement>) => void;
     onFocus?: (event: null | PicklistValue) => void;

diff --git 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
@@ -454,3 +454,47 @@ const initialState = { value: { name: 'option 2', label: 'Empire State' } };
         </GlobalHeader>
     </div>;
 ```
+
+##### 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 (
+        <GlobalHeader
+            src="images/user/user3.jpg"
+            className="rainbow-p-bottom_xx-large rainbow-m-bottom_xx-large"
+            variant="neutral"
+        >
+            <div className="rainbow-flex rainbow-align_right">
+                <Picklist
+                    id="picklist-16"
+                    style={containerStyles}
+                    onChange={setPicklistValue}
+                    value={picklistValue}
+                    label="Select Building"
+                    hideLabel
+                    variant="bare"
+                >
+                    <Option name="header" label="Your Buildings" variant="header" />
+                    <Option name="option 1" label="Experimental Building" />
+                    <Option name="option 2" label="Empire State" />
+                    <Option name="option 3" label="Central Park" />
+                </Picklist>
+            </div>
+        </GlobalHeader>
+    );
+}
+
+    <div className="rainbow-m-bottom_xx-large rainbow-p-bottom_xx-large">
+        <PicklistExample />
+    </div>;
+```
diff --git 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 &&