fix: update style of Checkbox, Dropdown, Select (#807)

* fix: have 1.2rem margin for components using popover * fix(CheckBox): update callback output * fix: update css
tillersystems · Oct 12, 2019 · 3198734 · 3198734
1 parent 06516bd
commit 3198734
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 15 deletions.
diff --git a/src/CheckBox/index.js b/src/CheckBox/index.js
@@ -52,7 +52,8 @@ class CheckBox extends PureComponent {
    * Handle Change
    * fired when checkbox is triggered and state changes.
    */
-  handleChange = () => {
+  handleChange = event => {
+    event.persist();
     const { onChange, isDisabled } = this.props;
 
     if (isDisabled) {
@@ -65,7 +66,7 @@ class CheckBox extends PureComponent {
       onChange && onChange(!isChecked);
     } else {
       this.setState({ isChecked: !isChecked }, () => {
-        onChange && onChange(!isChecked);
+        onChange && onChange(event);
       });
     }
   };

diff --git a/src/Dropdown/__stories__/Dropdown.stories.js b/src/Dropdown/__stories__/Dropdown.stories.js
@@ -14,17 +14,21 @@ import DropdownReadme from '../README.md';
 const itemCss = css`
   padding: 0.9rem 1.2rem;
   &:first-child {
-    padding-top: 1.8rem;
+    padding-top: 1.2rem;
   }
   ${({ searchable }) =>
     searchable &&
     css`
       &:nth-child(2) {
-        padding-top: 1.8rem;
+        padding-top: 1.2rem;
       }
     `}
   &:last-child {
-    padding-bottom: 1.8rem;
+    padding-bottom: 1.2rem;
+  }
+
+  :hover {
+    background: ${({ theme: { palette } }) => palette.veryLightGrey};
   }
 `;
 

diff --git a/src/Dropdown/index.js b/src/Dropdown/index.js
@@ -202,10 +202,6 @@ class Dropdown extends PureComponent {
             </Menu>
           }
           contentRef={contentRef}
-          contentWrapperStyle={{
-            marginBottom: '0.4rem',
-            marginTop: '0.4rem',
-          }}
           isOpen={displayMenu}
           modifiers={modifiers}
           onClickOutside={this.onClickOutside}

diff --git a/src/Select/elements.js b/src/Select/elements.js
@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { transparentize } from 'polished';
 
 export const Header = styled.button`
   display: flex;
@@ -98,7 +97,7 @@ export const MenuItem = styled.li`
         `
       : css`
           :hover {
-            background: ${({ theme: { palette } }) => transparentize(0.5, palette.veryLightBlue)};
+            background: ${({ theme: { palette } }) => palette.veryLightGrey};
           }
         `};
 `;
diff --git a/src/Select/index.js b/src/Select/index.js
@@ -260,10 +260,6 @@ class Select extends PureComponent {
             </Menu>
           }
           contentRef={contentRef}
-          contentWrapperStyle={{
-            marginBottom: '0.4rem',
-            marginTop: '0.4rem',
-          }}
           isOpen={displayMenu}
           modifiers={modifiers}
           onClickOutside={this.onClickOutside}