Fix spacing issues, Add manual trigger prop to Popovers

12 files changed, 52 insertions, 38 deletions

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index 426d410..4764005 100644
--- a/src/components/Button/Button.js
+++ b/src/components/Button/Button.js
@@ -62,7 +62,7 @@ class Button extends Component {
       onFocus,
       onBlur,
 
-      className,
+      className = '',
       ...rest
     } = this.props;
 
@@ -75,7 +75,7 @@ class Button extends Component {
       outline && styles.outline,
       fullWidth && styles.fullWidth,
       size && styles[`${size}`],
-      className && className
+      className
     );
 
     if (to && external) {
diff --git a/src/components/Datepicker/Datepicker.module.scss b/src/components/Datepicker/Datepicker.module.scss
index de0ca30..95e2464 100644
--- a/src/components/Datepicker/Datepicker.module.scss
+++ b/src/components/Datepicker/Datepicker.module.scss
@@ -14,21 +14,25 @@
   user-select: none;
   outline: none;
   flex-direction: row;
-  padding: spacing() 0;
+  padding: 0;
 }
 
 .interactionDisabled {}
 
 .month {
-  margin: 0 rem(18);
+  margin: 0;
   flex: 0 0 auto;
   flex-grow: 1;
   flex-basis: 0;
+
+  & + .month {
+    margin-left: rem(18)
+  }
 }
 
 .caption {
   height: rem(33);
-  padding-top: rem(12);
+  padding-top: 0;
   font-weight: 600;
   font-size: rem(14);
   text-align: center;
@@ -135,7 +139,7 @@
 
 .Prev, .Next {
   position: absolute;
-  top: rem(12);
+  top: 0;
   display: inline-block;
   cursor: pointer;
 
diff --git a/src/components/Grid/Grid.module.scss b/src/components/Grid/Grid.module.scss
index cf6e26a..a8dc1e1 100644
--- a/src/components/Grid/Grid.module.scss
+++ b/src/components/Grid/Grid.module.scss
@@ -103,7 +103,7 @@ $grid-columns: 12;
   box-sizing: border-box;
   flex: 0 0 auto;
   padding-left: $gutter-width;
-  margin-bottom: $gutter-width;
+  // margin-bottom: $gutter-width;
   text-align: left;
 }
 
diff --git a/src/components/Panel/Panel.module.scss b/src/components/Panel/Panel.module.scss
index 76227ca..71bec8e 100644
--- a/src/components/Panel/Panel.module.scss
+++ b/src/components/Panel/Panel.module.scss
@@ -55,6 +55,6 @@
   padding-right: spacing(small);
 }
 
-.SectionContent *:last-child {
+.SectionContent > *:last-child {
   margin-bottom: 0;
 }
diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
index 7447451..b7f5db6 100644
--- a/src/components/Popover/Popover.js
+++ b/src/components/Popover/Popover.js
@@ -10,14 +10,19 @@ class Popover extends Component {
   static propTypes = {
     /**
      * A React component to will trigger the popover
+     * Click events are handled for you
      */
      trigger: PropTypes.element,
      /**
+      * If you want to control open state yourself, set this to true
+      */
+     manualTrigger: PropTypes.bool,
+     /**
       * Adds a padding to the Popover
       */
      sectioned: PropTypes.bool,
      /**
-      * Optional, opens the popover
+      * Opens the popover
       */
      open: PropTypes.bool,
      /**
@@ -63,7 +68,9 @@ class Popover extends Component {
   }
 
   handleTrigger() {
-    this.setState({ open: true });
+    if (!this.props.manualTrigger) {
+      this.setState({ open: true });
+    }
   }
 
   render() {
@@ -71,10 +78,14 @@ class Popover extends Component {
       children,
       sectioned,
       trigger,
-      className,
+      className = '',
+      open,
+      manualTrigger,
       ...rest
     } = this.props;
 
+    const shouldBeOpen = manualTrigger ? open : this.state.open;
+
     const popoverClasses = classnames(
       styles.Popover,
       sectioned && styles.sectioned,
@@ -83,7 +94,7 @@ class Popover extends Component {
 
     const wrapperClasses = classnames(
       styles.Wrapper,
-      this.state.open && styles.open
+      shouldBeOpen && styles.open
     );
 
     const triggerMarkup = <span onClick={() => this.handleTrigger()}>{ trigger }</span>;
diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss
index 81f1652..87227c7 100644
--- a/src/components/Popover/Popover.module.scss
+++ b/src/components/Popover/Popover.module.scss
@@ -40,10 +40,7 @@
   border-top-left-radius: border-radius(large);
   border-top: 1px solid color(gray, 8);
   border-left: 1px solid color(gray, 8);
-  transform: rotate(45deg) scale(0.5);
-
-  opacity: 0;
-  transition: 0.06s ease-out;
+  transform: rotate(45deg);
 
   z-index: 1;
 }
@@ -51,6 +48,7 @@
 .Content {
   position: relative;
   z-index: 1;
+  padding: 1px;
   border-radius: border-radius(large);
   overflow: hidden;
 }
@@ -65,8 +63,4 @@
     opacity: 1;
     transform: translate(0, 0) scale(1);
   }
-  .Tip {
-    opacity: 1;
-    transform: rotate(45deg) scale(1);
-  }
 }
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
index 5b8b56d..003844a 100644
--- a/src/components/Select/Select.module.scss
+++ b/src/components/Select/Select.module.scss
@@ -5,6 +5,10 @@
   border: none;
   padding: 0;
   margin: 0 0 spacing() 0;
+
+  &:last-child {
+    margin: 0;
+  }
 }
 
 .error .Input {
@@ -19,7 +23,7 @@
   box-sizing: border-box;
   width: 100%;
 
-  padding: rem(5) rem(39) rem(5) rem(12);
+  padding: rem(5) rem(27) rem(5) rem(12);
 
   outline: none;
   border: 1px solid color(gray, 7);
@@ -53,7 +57,7 @@
   position: absolute;
   z-index: 1;
   top: rem(30);
-  right: rem(15);
+  right: rem(9);
   pointer-events: none;
   fill: color(gray, 4);
 }
@@ -62,7 +66,6 @@
   top: rem(9);
 }
 
-
 .HelpText {
   padding-top: rem(3);
   font-size: rem(13);
diff --git a/src/components/TextField/TextField.module.scss b/src/components/TextField/TextField.module.scss
index 0604341..ff19f88 100644
--- a/src/components/TextField/TextField.module.scss
+++ b/src/components/TextField/TextField.module.scss
@@ -5,6 +5,10 @@
   border: none;
   padding: 0;
   margin: 0 0 spacing() 0;
+
+  &:last-child {
+    margin: 0;
+  }
 }
 
 .error .Input {
diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
index 81e7d2e..9caf3f8 100644
--- a/src/components/Tooltip/Tooltip.js
+++ b/src/components/Tooltip/Tooltip.js
@@ -43,9 +43,9 @@ class Tooltip extends Component {
       <span className={wrapperClasses}>
         { children }
         <span className={styles.Tooltip}>
+          <span className={styles.Tip} />
           <span className={styles.Content}>{ content }</span>
         </span>
-        <span className={styles.Tip} />
       </span>
     )
   }
diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
index 74b3ad8..cff7d7d 100644
--- a/src/components/Tooltip/Tooltip.module.scss
+++ b/src/components/Tooltip/Tooltip.module.scss
@@ -9,12 +9,6 @@ $arrow-margin: rem(21);
       opacity: 1;
       transform: translate(0, 0) scale(1);
     }
-
-    .Tip {
-      opacity: 1;
-      transform: translate(-50%, 0) rotate(45deg) scale(1);
-      transition: 0.06s ease-out;
-    }
   }
 }
 
@@ -50,26 +44,24 @@ $arrow-margin: rem(21);
 .Tip {
   display: block;
   position: absolute;
-  top: 100%;
-  left: 50%;
+  top: rem(-14);
+  left: rem(21);
   width: rem(14);
   height: rem(14);
 
-  margin: $arrow-margin + rem(-7) 0 0;
+  margin: rem(7) 0 0;
 
   background: color(gray, 10);
   border-top-left-radius: border-radius(large);
   border-top: 1px solid color(gray, 8);
   border-left: 1px solid color(gray, 8);
-  transform: translate(-50%, 0) rotate(45deg) scale(0.5);
-
-  opacity: 0;
-  transition: 0.06s ease-out;
+  transform: rotate(45deg);
 }
 
 .Tooltip {
   display: block;
   position: absolute;
+  z-index: 1;
   top: 100%;
   left: 0;
   width: rem(200);
@@ -88,6 +80,11 @@ $arrow-margin: rem(21);
 }
 
 .Content {
+  position: relative;
+  z-index: 1;
+  border-radius: border-radius(large);
+  overflow: hidden;
+
   font-size: rem(13);
   line-height: rem(18);
 }
diff --git a/stories/Datepicker.js b/stories/Datepicker.js
index d194e85..9e9c459 100644
--- a/stories/Datepicker.js
+++ b/stories/Datepicker.js
@@ -12,7 +12,7 @@ storiesOf('Datepicker', module)
   .addWithInfo('Default',
   'Refer to http://react-day-picker.js.org/ for usage. The only props overridden by Matchbox are classNames and navbarElement.',
   () => (
-    <Panel>
+    <Panel sectioned>
       <Datepicker
         numberOfMonths={2}
         enableOutsideDays
diff --git a/stories/Grid.js b/stories/Grid.js
index 04d4c88..7140128 100644
--- a/stories/Grid.js
+++ b/stories/Grid.js
@@ -11,6 +11,7 @@ const DemoBlock = ({size = '18px'}) => {
       backgroundColor: '#fa6423',
       height: size,
       borderRadius: '2px',
+      marginBottom: '18px'
     }} />
   );
 }