From: RafiBomb <rafi@zurb.com>
Date: Wed, 8 Jun 2016 16:26:57 +0000 (-0700)
Subject: adds docs example for small-expanded button
X-Git-Tag: v2.2.0~11^2~8
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=67b5d9ea94d9f9476f2b32f8826fb918b2ae5bea;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

adds docs example for small-expanded button
---

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 424d1f02..2a396abd 100644
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -9,9 +9,14 @@ Creating a bullet-proof button that works in all email clients requires a table
 In Inky HTML, the `<button>` tag creates all of this markup for you.
 
 ```inky_example
-<button href="zurb.com">Button</button>
+<button href="#">Button</button>
 ```
 
+<div class="callout primary">
+- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br> 
+- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
+</div>
+
 ---
 
 ## Sizing
@@ -37,12 +42,13 @@ Don't forget the `href=""` ;)
 
 To create an expanded button (full width of it's container), add the class `.expanded` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
 
-In Inky HTML, add the `.expanded` class to the `<button>` tag.
+In Inky HTML, add the `.expanded` class to the `<button>` tag. If you want the button to be expanded on small only, add the `.small-expanded`.
 
 ```inky_example
 <row>
   <column>
-    <button href="zurb.com" class="expanded">Expanded Button</button>
+    <button href="#" class="expanded">Expanded Button</button>
+    <button href="#" class="small-expanded">Expand small only</button>
   </column>
 </row>
 ```
@@ -54,10 +60,10 @@ In Inky HTML, add the `.expanded` class to the `<button>` tag.
 Change the background color of a button by adding the class `.secondary`, `.success`, `.warning`, or `.alert` to the outer `<table>` (or the `<button>` tag in Inky HTML).
 
 ```inky_example
-<button href="zurb.com" class="secondary">Secondary Button</button>
-<button href="zurb.com" class="success">Success Button</button>
-<button href="zurb.com" class="warning">Warning Button</button>
-<button href="zurb.com" class="alert">Alert Button</button>
+<button href="#" class="secondary">Secondary Button</button>
+<button href="#" class="success">Success Button</button>
+<button href="#" class="warning">Warning Button</button>
+<button href="#" class="alert">Alert Button</button>
 ```
 
 ---
@@ -75,8 +81,3 @@ Creating buttons with a radius or rounded edges (like a pill) can be achieved by
 <button href="#" class="rounded">Round</button>
 
 ```
-
-<div class="callout primary">
-- It's important to add an `href` attribute to your `<button>`'s to ensure that Outlook.com will not display `[undefined]` in your rendered email.<br> 
-- Office 365 and Outlook.com require a valid url in the href attribute or you can use the # placeholder.
-</div>
diff --git a/test/visual/pages/button-inky.html b/test/visual/pages/button-inky.html
index f169f015..1a317721 100644
--- a/test/visual/pages/button-inky.html
+++ b/test/visual/pages/button-inky.html
@@ -49,14 +49,14 @@
   </row>
   <row>
     <columns small="12" large="12">
-      <button href="http://zurb.com" href="http://zurb.com" class="expand">I expand</button>
+      <button href="http://zurb.com" class="expand">I expand</button>
     </columns>
   </row>
   <row>
     <columns small="12" large="12">
     Expand small only with center tag
       <center>
-        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+        <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
     </columns>
   </row>
@@ -64,7 +64,7 @@
     <columns small="12" large="12">
     Expand small only
       <center>
-        <button href="http://zurb.com" href="http://zurb.com" class="small-expand">Expand small only</button>
+        <button href="http://zurb.com" class="small-expand">Expand small only</button>
       </center>
     </columns>
   </row>