From 17f9cc76f2109e4088376b2e0d2b4df7e8c25663 Mon Sep 17 00:00:00 2001
From: Ilari Sinkkonen <ilari.sinkkonen@taitounited.fi>
Date: Thu, 8 Jun 2017 12:50:34 +0300
Subject: [PATCH] fix(Button): Fix button align-prop not working

The align prop of Button did not work, because it gave the margin to
the buttonwrapper, which was itself wrapped with withRipple HOC. This
was fixed by handling the align prop in the rippleprovider. This has the
positive side effect of allowing alignment of any withRipple components.
---
 src/components/Button.js     |  8 --------
 src/components/withRipple.js | 11 ++++++++++-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index b3e3795..6870663 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -59,20 +59,12 @@ function getColor(props) {
   return colorGetter(props, 'primaryColor'); // default
 }
 
-function getAlignement(props) {
-  if (props.align === 'center') return '0px auto';
-  if (props.align === 'right') return '0px 0px 0px auto';
-  if (props.align === 'left') return '0px auto 0px 0px';
-  return '0px';
-}
-
 const ButtonWrapper = styled.button`
   outline: none;
   font-size: 1rem;
   padding: 8px 16px;
   font-weight: normal;
   width: ${props => props.w || 'auto'};
-  margin: ${props => getAlignement(props)};
   text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   border-style: solid;
   border-width: ${props => props.outline && !props.clear ? '1px' : '0px'};
diff --git a/src/components/withRipple.js b/src/components/withRipple.js
index e7b251a..63fc53b 100644
--- a/src/components/withRipple.js
+++ b/src/components/withRipple.js
@@ -1,12 +1,20 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 
+function getAlignement(props) {
+  if (props.align === 'center') return '0px auto';
+  if (props.align === 'right') return '0px 0px 0px auto';
+  if (props.align === 'left') return '0px auto 0px 0px';
+  return '0px';
+}
+
 const RippleWrapper = styled.div`
   position: relative;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   display: inline-block;
   align-self: flex-start;
+  margin: ${props => getAlignement(props)};
 
   &:after {
     content: "";
@@ -32,12 +40,13 @@ const RippleWrapper = styled.div`
   }
 `;
 
+
 /* eslint-disable react/prefer-stateless-function */
 const withRipple = (Comp) => {
   return class RippleProvider extends Component {
     render() {
       return (
-        <RippleWrapper>
+        <RippleWrapper align={this.props.align}>
           <Comp {...this.props} />
         </RippleWrapper>
       );