From dc3e216da95bfe93062f202f8dee0de3df696577 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sun, 12 Mar 2017 17:37:22 +0000
Subject: [PATCH] Use field for buttons

---
 docs/_includes/footer.html              |   2 +-
 docs/documentation/elements/button.html | 183 +++++++++++++-----------
 docs/documentation/elements/form.html   |   2 +-
 3 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 5a0b057f..71fb68db 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -13,7 +13,7 @@
         <div class="column">
           <form action="https://bbxdesign.us3.list-manage.com/subscribe/post?u=b43b93fe633f0560b2a72a69c&amp;id=52585e8803" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
             <div id="mc_embed_signup_scroll">
-              <div class="control is-grouped">
+              <div class="field is-grouped">
                 <div class="control has-icon is-expanded">
                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
                   <span class="icon is-small">
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index d3dfb4cd..1680babf 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -260,7 +260,7 @@ doc-subtab: button
     <h4 class="subtitle">With Font Awesome icons</h4>
 
 {% capture button_fa_example %}
-<p class="control">
+<p class="field">
   <a class="button">
     <span class="icon is-small">
       <i class="fa fa-bold"></i>
@@ -277,7 +277,7 @@ doc-subtab: button
     </span>
   </a>
 </p>
-<p class="control">
+<p class="field">
   <a class="button">
     <span class="icon">
       <i class="fa fa-github"></i>
@@ -303,7 +303,7 @@ doc-subtab: button
     </span>
   </a>
 </p>
-<p class="control">
+<p class="field">
   <a class="button is-small">
     <span class="icon is-small">
       <i class="fa fa-github"></i>
@@ -352,63 +352,63 @@ doc-subtab: button
       </p>
     </div>
 {% capture button_only_icon_example %}
-<p class="control">
-<a class="button is-small">
-<span class="icon is-small">
-  <i class="fa fa-header"></i>
-</span>
-</a>
+<p class="field">
+  <a class="button is-small">
+  <span class="icon is-small">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
 </p>
-<p class="control">
-<a class="button">
-<span class="icon is-small">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button">
-<span class="icon">
-  <i class="fa fa-header"></i>
-</span>
-</a>
+<p class="field">
+  <a class="button">
+  <span class="icon is-small">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button">
+  <span class="icon">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
 </p>
-<p class="control">
-<a class="button is-medium">
-<span class="icon is-small">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button is-medium">
-<span class="icon">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button is-medium">
-<span class="icon is-medium">
-  <i class="fa fa-header"></i>
-</span>
-</a>
+<p class="field">
+  <a class="button is-medium">
+  <span class="icon is-small">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button is-medium">
+  <span class="icon">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button is-medium">
+  <span class="icon is-medium">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
 </p>
-<p class="control">
-<a class="button is-large">
-<span class="icon is-small">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button is-large">
-<span class="icon">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button is-large">
-<span class="icon is-medium">
-  <i class="fa fa-header"></i>
-</span>
-</a>
-<a class="button is-large">
-<span class="icon is-large">
-  <i class="fa fa-header"></i>
-</span>
-</a>
+<p class="field">
+  <a class="button is-large">
+  <span class="icon is-small">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button is-large">
+  <span class="icon">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button is-large">
+  <span class="icon is-medium">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
+  <a class="button is-large">
+  <span class="icon is-large">
+    <i class="fa fa-header"></i>
+  </span>
+  </a>
 </p>
 {% endcapture %}
 {{button_only_icon_example}}
@@ -424,10 +424,10 @@ doc-subtab: button
 
     <h3 class="title">Button group</h3>
     <div class="content">
-      <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+      <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
     </div>
 {% capture button_group_example %}
-<div class="control is-grouped">
+<div class="field is-grouped">
   <p class="control">
     <a class="button is-primary">
       Save changes
@@ -456,29 +456,35 @@ doc-subtab: button
 
     <h3 class="title">Button addons</h3>
     <div class="content">
-      <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
+      <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
     </div>
 {% capture button_addons_example %}
-<p class="control has-addons">
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-left"></i>
-    </span>
-    <span>Left</span>
-  </a>
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-center"></i>
-    </span>
-    <span>Center</span>
-  </a>
-  <a class="button">
-    <span class="icon is-small">
-      <i class="fa fa-align-right"></i>
-    </span>
-    <span>Right</span>
-  </a>
-</p>
+<div class="field has-addons">
+  <p class="control">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-left"></i>
+      </span>
+      <span>Left</span>
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-center"></i>
+      </span>
+      <span>Center</span>
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      <span class="icon is-small">
+        <i class="fa fa-align-right"></i>
+      </span>
+      <span>Right</span>
+    </a>
+  </p>
+</div>
 {% endcapture %}
     <div class="example">
 {{button_addons_example}}
@@ -494,20 +500,24 @@ doc-subtab: button
       <p>You can group together addons as well:</p>
     </div>
 {% capture button_group_addons_example %}
-<div class="control is-grouped">
-  <p class="control has-addons">
+<div class="field has-addons">
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-bold"></i>
       </span>
       <span>Bold</span>
     </a>
+  </p>
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-italic"></i>
       </span>
       <span>Italic</span>
     </a>
+  </p>
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-underline"></i>
@@ -515,19 +525,26 @@ doc-subtab: button
       <span>Underline</span>
     </a>
   </p>
-  <p class="control has-addons">
+</div>
+
+<div class="field has-addons">
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-align-left"></i>
       </span>
       <span>Left</span>
     </a>
+  </p>
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-align-center"></i>
       </span>
       <span>Center</span>
     </a>
+  </p>
+  <p class="control">
     <a class="button">
       <span class="icon is-small">
         <i class="fa fa-align-right"></i>
diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index d6e15c90..bb3c084e 100644
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -31,8 +31,8 @@ doc-subtab: form
     </div>
 
 {% capture form_example %}
-<label class="label">Name</label>
 <div class="field">
+  <label class="label">Name</label>
   <p class="control">
     <input class="input" type="text" placeholder="Text input">
   </p>