From 8d46492ceee8f3b8eb2f8cc2e156900f1455f16b Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 21 Sep 2017 11:38:02 +0300
Subject: [PATCH] Fix button layout in FF and Safari

Button elements won't work as flexbox containers and the contents
didn't center properly in FF and Safari.
---
 src/components/Button/Button.css         | 11 ++++++
 src/components/Button/Button.example.css |  8 +++++
 src/components/Button/Button.example.js  | 21 ++++++++++--
 src/marketplace.css                      | 43 ++++++++++++++----------
 4 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index 5e602d48..7363ba19 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -2,14 +2,25 @@
 
 .root {
   @apply --marketplaceButtonStyles;
+
+  /* Clear padding that is set for link elements looking like buttons */
+  padding: 0;
 }
 
 .primaryButton {
   @apply --marketplaceButtonStylesPrimary;
+
+  /* Clear padding that is set for link elements looking like buttons */
+  padding: 0;
 }
 
 .secondaryButton {
   @apply --marketplaceButtonStylesSecondary;
+
+  /* We must lift up the text from the center since it looks better with
+   the button border. Also clears the top padding set for link
+   elements looking like buttons */
+  padding: 0 0 2px 0;
 }
 
 .inlineTextButton {
diff --git a/src/components/Button/Button.example.css b/src/components/Button/Button.example.css
index 2c46adc8..ad984d2d 100644
--- a/src/components/Button/Button.example.css
+++ b/src/components/Button/Button.example.css
@@ -14,6 +14,14 @@
 
 .customButton {
   @apply --marketplaceButtonStyles;
+  padding: 0;
   border-radius: 8px;
   height: 100px;
 }
+
+.searchIcon {
+  width: 16px;
+  height: 16px;
+  stroke: #fff;
+  margin-right: 10px;
+}
diff --git a/src/components/Button/Button.example.js b/src/components/Button/Button.example.js
index 026699d6..66c67447 100644
--- a/src/components/Button/Button.example.js
+++ b/src/components/Button/Button.example.js
@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/href-no-hash */
 import React, { Component } from 'react';
+import { IconSearch } from '../../components';
 import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
 
 import css from './Button.example.css';
@@ -21,6 +22,8 @@ class InteractiveButton extends Component {
   }
   render() {
     const handleClick = () => {
+      window.clearTimeout(this.inProgressTimeoutId);
+      window.clearTimeout(this.readyTimeoutId);
       this.setState({ inProgress: true, disabled: true });
       this.inProgressTimeoutId = window.setTimeout(
         () => {
@@ -46,6 +49,15 @@ const ButtonsComponent = () => {
       <h3>Interactive button:</h3>
       <InteractiveButton />
 
+      <h3>Button with a translation:</h3>
+      <Button><span>Clique moi</span></Button>
+
+      <h3>Button with an icon and a text:</h3>
+      <Button>
+        <IconSearch rootClassName={css.searchIcon} />
+        <span>Search saunas</span>
+      </Button>
+
       <h3>Default button:</h3>
       <Button>Click me</Button>
 
@@ -79,7 +91,7 @@ const ButtonsComponent = () => {
       <h3>Primary button disabled and in progress:</h3>
       <PrimaryButton disabled inProgress>Click me</PrimaryButton>
 
-      <h3>Primary button disabled ready:</h3>
+      <h3>Primary button disabled and ready:</h3>
       <PrimaryButton disabled ready>Click me</PrimaryButton>
 
       <h3>Secondary button:</h3>
@@ -97,7 +109,7 @@ const ButtonsComponent = () => {
       <h3>Secondary button disabled and in progress:</h3>
       <SecondaryButton disabled inProgress>Click me</SecondaryButton>
 
-      <h3>Secondary button disabled ready:</h3>
+      <h3>Secondary button disabled and ready:</h3>
       <SecondaryButton disabled ready>Click me</SecondaryButton>
 
       <h3>Inline text button:</h3>
@@ -109,6 +121,11 @@ const ButtonsComponent = () => {
       <h3>Link that looks like a default button:</h3>
       <a className={css.buttonLink} href="#" onClick={preventDefault}>Click me</a>
 
+      <h3>Translated link that looks like a default button:</h3>
+      <a className={css.buttonLink} href="#" onClick={preventDefault}>
+        <span>Clique moi</span>
+      </a>
+
       <h3>Link that looks like a primary button:</h3>
       <a className={css.buttonLinkPrimary} href="#" onClick={preventDefault}>Click me</a>
 
diff --git a/src/marketplace.css b/src/marketplace.css
index 49bd86d2..f6c484bc 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -152,18 +152,14 @@
     @apply --marketplaceButtonFontStyles;
 
     /* Dimensions */
-    display: flex;
+    display: block;
     width: 100%;
     min-height: 65px;
     margin: 0;
 
-    /* Center contents within flexbox */
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
-    /* Push the text up from center */
-    padding-bottom: 2px;
+    /* Padding is only for <a> elements where button styles are applied,
+   buttons elements should have zero padding */
+    padding: 20px 0 0 0;
 
     /* Borders */
     border: none;
@@ -178,11 +174,11 @@
     text-decoration: none;
 
     /* Effects */
-
     transition: all var(--transitionStyleButton);
+    cursor: pointer;
 
-    &:enabled:hover,
-    &:enabled:focus {
+    &:hover,
+    &:focus {
       outline: none;
       background-color: var(--marketplaceColorDark);
       text-decoration: none;
@@ -192,9 +188,7 @@
       background-color: var(--matterColorNegative);
       color: var(--matterColorLight);
       cursor: not-allowed;
-    }
-    &:enabled {
-      cursor: pointer;
+      box-shadow: none;
     }
   }
   --marketplaceButtonStylesPrimary {
@@ -203,10 +197,14 @@
     background-color: var(--successColor);
     color: var(--matterColorLight);
 
-    &:enabled:hover,
-    &:enabled:focus {
+    &:hover,
+    &:focus {
       background-color: var(--successColorDark);
     }
+    &:disabled {
+      background-color: var(--matterColorNegative);
+      color: var(--matterColorLight);
+    }
   }
   --marketplaceButtonStylesSecondary {
     @apply --marketplaceButtonStyles;
@@ -214,15 +212,24 @@
     background-color: var(--matterColorLight);
     color: var(--matterColor);
 
+    /* Padding is only for <a> elements where button styles are applied,
+   buttons elements should have zero padding */
+    padding: 18px 0 0 0;
+
     border-width: 1px;
     border-style: solid;
     border-color: var(--matterColorNegative);
 
-    &:enabled:hover,
-    &:enabled:focus {
+    &:hover,
+    &:focus {
       background-color: var(--matterColorLight);
       border-color: var(--matterColorAnti);
     }
+    &:disabled {
+      background-color: var(--matterColorNegative);
+      color: var(--matterColorLight);
+      border-color: var(--matterColorNegative);
+    }
   }