Merge pull request #425 from sharetribe/fix-button-crossbrowser-layout

Fix button layout to also work in FF and Safari

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 {

src/components/Button/Button.example.css

@@ -14,6 +14,14 @@
 
 .customButton {
   @apply --marketplaceButtonStyles;
+  padding: 0;
   border-radius: 8px;
   height: 100px;
 }
+
+.customIcon {
+  width: 24px;
+  height: 24px;
+  stroke: #fff;
+  margin-right: 10px;
+}

src/components/Button/Button.example.js

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/href-no-hash */
 import React, { Component } from 'react';
+import { IconCheckmark } 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>
+        <IconCheckmark rootClassName={css.customIcon} />
+        <span>Custom text</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>
 

src/components/HeroSection/HeroSection.css

@@ -60,6 +60,7 @@
   stroke: var(--matterColorLight);
   width: 16px;
   height: 16px;
+  margin-top: 5px;
   margin-right: 10px;
 }
 

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);
+    }
   }