From 4720e67225bfa52cda6116d2359cff560c9b1e07 Mon Sep 17 00:00:00 2001
From: RafiBomb <rafi@zurb.com>
Date: Fri, 10 Jun 2016 14:50:07 -0700
Subject: [PATCH] adds button spacer and adds test content

---
 package.json                       |  2 +-
 scss/components/_button.scss       | 11 ++++++++---
 test/visual/pages/button-inky.html | 24 ++++++++++++++++++++----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 722bdf00..0d380f32 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "gulp-sourcemaps": "^1.6.0",
     "gulp-wrap": "^0.11.0",
     "gulp-zip": "^3.2.0",
-    "inky": "zurb/inky#brandonbarringer-hr",
+    "inky": "zurb/inky#button-margin",
     "lazypipe": "^1.0.1",
     "motion-ui": "^1.1.1",
     "multiline": "^1.0.2",
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 563a248e..303d4aa1 100755
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -38,7 +38,7 @@ $button-font-weight: bold !default;
 
 /// Margin around buttons.
 /// @type List
-$button-margin: 0 0 $global-margin 0 !default;
+$button-margin-bottom: $global-margin !default;
 
 /// Background color of buttons.
 /// @type Color
@@ -58,8 +58,6 @@ $button-rounded: $global-rounded !default;
 
 table.button {
   width: auto;
-  margin: $button-margin;
-  Margin: $button-margin;
 
   table {
 
@@ -94,6 +92,13 @@ table.button {
   }
 }
 
+// creates spacing below buttons
+td.button-spacer {
+  height: $button-margin-bottom; 
+  font-size: $button-margin-bottom;
+  line-height: $button-margin-bottom;
+}
+
 table.button:hover table tr td a,
 table.button:active table tr td a,
 table.button table tr td a:visited,
diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index 1a317721..08231858 100644
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -8,48 +8,57 @@
   <row>
     <columns small="12" large="12">
       <center>
-      <button href="http://zurb.com" class="tiny" href="http://zurb.com">I am a tiny button</button>
+        <button href="http://zurb.com" class="tiny">I am a tiny button</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" class="small" href="http://zurb.com">I am a small button</button>
+      <button class="small" href="http://zurb.com">I am a small button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" class="" href="http://zurb.com">I am a default button</button>
+      <button href="http://zurb.com" class="">I am a default button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="large" href="http://zurb.com">I am a large button</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="secondary" href="http://zurb.com">I am secondary</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="success" href="http://zurb.com">I am successful</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button class="alert" href="http://zurb.com">I alert</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button class="warning" href="http://zurb.com">I warn</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="expand">I expand</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -58,6 +67,7 @@
       <center>
         <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -66,22 +76,26 @@
       <center>
         <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
     <center>
-      <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand and have lots of text</button>
+      <button href="http://zurb.com" class="expand">I expand and have lots of text</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="radius">I have a radius</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
       <button href="http://zurb.com" class="rounded">I am round</button>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -89,6 +103,7 @@
       <center>
         <button href="http://zurb.com" class="radius">I am centered</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
   <row>
@@ -96,6 +111,7 @@
       <center>
         <button href="http://zurb.com" class="border">I am centered</button>
       </center>
+      <p>This text should be spaced away from bottom of button</p>
     </columns>
   </row>
 </container>
-- 
2.47.2