fix(Animate): Add extra div around the children in Animate

This solves the problem when the children has top or bottom padding. Now we should only have single
child in each Animate.

src/components/animate/animate.jsx

@@ -45,7 +45,7 @@ class Animate extends React.PureComponent {
         transitionEnterTimeout={this.props.enterTime}
         transitionLeaveTimeout={this.props.leaveTime}
       >
-        {this.props.children}
+        {this.props.children ? <div>{this.props.children}</div> : null}
       </CSSTransitionGroup>
     );
   }
@@ -54,6 +54,7 @@ class Animate extends React.PureComponent {
 Animate.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /** This needs to be set in order for the component to render anything */
   animationName: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['height']).isRequired,
   enterTime: PropTypes.number.isRequired,

src/components/animate/modifierHeight.js

@@ -11,7 +11,12 @@ export default ({
   easingLeaveFunction = easings.easeOut,
 }) => ({
   overflow: 'hidden',
-  maxHeight: 'none',
+  boxSizing: 'border-box',
+
+  '& > div': {
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+  },
 
   [`&${classPrefixSpace ? ' ' : ''}.${name}`]: {
     '&-enter': {