Add group multiline docs

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index cbbc2b81dfbdf22d9e370b4716bad462199ade66..c142561a5caa94c7716013548ceede1aed992853 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -457,6 +457,51 @@ doc-subtab: general
 {% endcapture %}
 
 {% capture group_example %}
+<div class="field is-grouped">
+  <p class="control">
+    <a class="button is-primary">
+      Submit
+    </a>
+  </p>
+  <p class="control">
+    <a class="button is-light">
+      Cancel
+    </a>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture group_centered_example %}
+<div class="field is-grouped is-grouped-centered">
+  <p class="control">
+    <a class="button is-primary">
+      Submit
+    </a>
+  </p>
+  <p class="control">
+    <a class="button is-light">
+      Cancel
+    </a>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture group_right_example %}
+<div class="field is-grouped is-grouped-right">
+  <p class="control">
+    <a class="button is-primary">
+      Submit
+    </a>
+  </p>
+  <p class="control">
+    <a class="button is-light">
+      Cancel
+    </a>
+  </p>
+</div>
+{% endcapture %}
+
+{% capture group_expanded_example %}
 <div class="field is-grouped">
   <p class="control is-expanded">
     <input class="input" type="text" placeholder="Find a repository">
@@ -469,6 +514,76 @@ doc-subtab: general
 </div>
 {% endcapture %}
 
+{% capture group_multiline_example %}
+<div class="field is-grouped is-grouped-multiline">
+  <p class="control">
+    <a class="button">
+      One
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Two
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Three
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Four
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Five
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Size
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Seven
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Eight
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Nine
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Ten
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Eleven
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Twelve
+    </a>
+  </p>
+  <p class="control">
+    <a class="button">
+      Thirteen
+    </a>
+  </p>
+</div>
+{% endcapture %}
+
 {% capture horizontal_form_example %}
 <div class="field is-horizontal">
   <div class="field-label is-normal">
@@ -932,17 +1047,60 @@ doc-subtab: general
     <div class="content">
       <p>
         If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>field</code> container.
-        <br>
+      </p>
+    </div>
+
+    <div class="example">
+      {{group_example}}
+    </div>
+    {% highlight html %}{{group_example}}{% endhighlight %}
+
+    <div class="content">
         Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifers to alter the <strong>alignment</strong>.
       </p>
+    </div>
+
+    <div class="example">
+      {{group_centered_example}}
+    </div>
+    {% highlight html %}{{group_centered_example}}{% endhighlight %}
+
+    <div class="example">
+      {{group_right_example}}
+    </div>
+    {% highlight html %}{{group_right_example}}{% endhighlight %}
+
+    <div class="content">
       <p>
         Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong> with.
       </p>
     </div>
+
     <div class="example">
-      {{group_example}}
+      {{group_expanded_example}}
+    </div>
+    {% highlight html %}{{group_expanded_example}}{% endhighlight %}
+
+    <div id="form-group-multiline" class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.4</span>
+      </p>
+      <p>
+        Add the <code>is-grouped-multiline</code> modifier to allow controls to fill up <strong>multiple lines</strong>. This is ideal for a long list of controls.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="example">
+          {{group_multiline_example}}
+        </div>
+      </div>
+      <div class="column is-half">
+        {% highlight html %}{{group_multiline_example}}{% endhighlight %}
+      </div>
     </div>
-    {% highlight html %}{{group_example}}{% endhighlight %}
 
     <hr>