Add list of buttons

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### New features
 
+* 🎉 [List of buttons](https://bulma.io/documentation/elements/button/#list-of-buttons)
 * #1287 New `.is-invisible` helper
 
 ## 0.6.0
@@ -131,7 +132,7 @@ The `$link` color is used instead of `$primary` in the following components:
 
 ### New features
 
-* 🎉 #280 [File upload element](http://bulma.io/documentation/form/file/)
+* 🎉 #280 [File upload element](https://bulma.io/documentation/form/file/)
 * `$container-offset` variable to determine the `.container` breakpoints
 * #1001 Text case helpers
 
@@ -150,7 +151,7 @@ The `$link` color is used instead of `$primary` in the following components:
 
 ### New features
 
-* 🎉 [List of tags](http://bulma.io/documentation/elements/tag/#list-of-tags)
+* 🎉 [List of tags](https://bulma.io/documentation/elements/tag/#list-of-tags)
 * New **variable naming system**: `component`-`subcomponent`-`state`-`property`
 * Improved **customization** thanks to new set of variables
 * #934 New `.is-shadowless` helper
@@ -244,9 +245,9 @@ Variable name changes (mostly appending `-color`):
 
 ### Improved documentation
 
-* [Starter template](http://bulma.io/documentation/overview/start/#starter-template)
-* [Colors page](http://bulma.io/documentation/overview/colors/)
-* [Typography helpers](http://bulma.io/documentation/modifiers/typography-helpers/)
+* [Starter template](https://bulma.io/documentation/overview/start/#starter-template)
+* [Colors page](https://bulma.io/documentation/overview/colors/)
+* [Typography helpers](https://bulma.io/documentation/modifiers/typography-helpers/)
 * **Meta** information for all elements and components
 * **Variables** information for most elements and components
 
@@ -261,7 +262,7 @@ Variable name changes (mostly appending `-color`):
 
 ### New features
 
-* New [dropdown button](http://bulma.io/documentation/components/dropdown/)!
+* New [dropdown button](https://bulma.io/documentation/components/dropdown/)!
 * The breakpoints and `.container` **gap** can be customized with the new `$gap` variable
 * The `.container` has 2 new modifiers: `.is-widescreen` and `.is-fullhd`
 

docs/css/bulma-docs.css

@@ -2475,6 +2475,75 @@ a.box:active {
   pointer-events: none;
 }
 
+.buttons {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+
+.buttons .button {
+  margin-bottom: 0.5rem;
+}
+
+.buttons .button:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.buttons:last-child {
+  margin-bottom: -0.5rem;
+}
+
+.buttons:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.buttons.has-addons .button:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.buttons.has-addons .button:not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  margin-right: -1px;
+}
+
+.buttons.has-addons .button:last-child {
+  margin-right: 0;
+}
+
+.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered {
+  z-index: 2;
+}
+
+.buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected {
+  z-index: 3;
+}
+
+.buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover {
+  z-index: 4;
+}
+
+.buttons.is-centered {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+
+.buttons.is-right {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
 .container {
   margin: 0 auto;
   position: relative;
@@ -12387,25 +12456,25 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 
 @-webkit-keyframes rainbow {
   0% {
-    background-position: 0% 80%;
+    background-position: 1% 80%;
   }
   50% {
-    background-position: 100% 20%;
+    background-position: 99% 20%;
   }
   100% {
-    background-position: 0% 80%;
+    background-position: 1% 80%;
   }
 }
 
 @keyframes rainbow {
   0% {
-    background-position: 0% 80%;
+    background-position: 1% 80%;
   }
   50% {
-    background-position: 100% 20%;
+    background-position: 99% 20%;
   }
   100% {
-    background-position: 0% 80%;
+    background-position: 1% 80%;
   }
 }
 

docs/documentation/elements/button.html

@@ -367,6 +367,83 @@ doc-subtab: button
 </div>
 {% endcapture %}
 
+{% capture buttons %}
+<div class="buttons">
+  <span class="button is-success">Save changes</span>
+  <span class="button is-info">Save and continue</span>
+  <span class="button is-danger">Cancel</span>
+</div>
+{% endcapture %}
+
+{% capture buttons_multiple %}
+<div class="buttons">
+  <span class="button">One</span>
+  <span class="button">Two</span>
+  <span class="button">Three</span>
+  <span class="button">Four</span>
+  <span class="button">Five</span>
+  <span class="button">Six</span>
+  <span class="button">Seven</span>
+  <span class="button">Eight</span>
+  <span class="button">Nine</span>
+  <span class="button">Ten</span>
+  <span class="button">Eleven</span>
+  <span class="button">Twelve</span>
+  <span class="button">Thirteen</span>
+  <span class="button">Fourteen</span>
+  <span class="button">Fifteen</span>
+  <span class="button">Sixteen</span>
+  <span class="button">Seventeen</span>
+  <span class="button">Eighteen</span>
+  <span class="button">Nineteen</span>
+  <span class="button">Twenty</span>
+</div>
+{% endcapture %}
+
+{% capture buttons_addons %}
+<div class="buttons has-addons">
+  <span class="button">Yes</span>
+  <span class="button">Maybe</span>
+  <span class="button">No</span>
+</div>
+{% endcapture %}
+
+{% capture buttons_addons_centered %}
+<div class="buttons has-addons is-centered">
+  <span class="button">Yes</span>
+  <span class="button">Maybe</span>
+  <span class="button">No</span>
+</div>
+{% endcapture %}
+
+{% capture buttons_addons_right %}
+<div class="buttons has-addons is-right">
+  <span class="button">Yes</span>
+  <span class="button">Maybe</span>
+  <span class="button">No</span>
+</div>
+{% endcapture %}
+
+{% capture buttons_addons_selected %}
+<div class="buttons has-addons">
+  <span class="button is-success is-selected">Yes</span>
+  <span class="button">Maybe</span>
+  <span class="button">No</span>
+</div>
+
+<div class="buttons has-addons">
+  <span class="button">Yes</span>
+  <span class="button is-info is-selected">Maybe</span>
+  <span class="button">No</span>
+</div>
+
+<div class="buttons has-addons">
+  <span class="button">Yes</span>
+  <span class="button">Maybe</span>
+  <span class="button is-danger is-selected">No</span>
+</div>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
@@ -572,6 +649,124 @@ doc-subtab: button
 
     {% include snippet.html content=button_group_addons_example %}
 
+    {% include anchor.html name="List of buttons" %}
+
+    {% include elements/new-tag.html version="0.6.1" %}
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
+          </p>
+        </div>
+        <div class="bd-example">
+          {{ buttons }}
+        </div>
+      </div>
+      <div class="column">
+        {% highlight html %}{{ buttons }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
+          </p>
+        </div>
+        <div class="bd-example">
+          {{ buttons_multiple }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
+          </p>
+        </div>
+        <div class="bd-example">
+          {{ buttons_addons }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ buttons_addons }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
+          </p>
+        </div>
+        <div class="bd-example">
+          {{ buttons_addons_centered }}
+          {{ buttons_addons_right }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          <p>
+            You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
+          </p>
+        </div>
+        <div class="bd-example">
+          {{ buttons_addons_selected }}
+        </div>
+      </div>
+      <div class="column highlight-full">
+        {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="message is-info">
+      <div class="message-header">
+        <p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>
+            While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
+          </p>
+          <ul>
+            <li>
+              <code>buttons</code> has a <strong>simpler markup</strong>
+            </li>
+            <li>
+              <code>buttons</code> can only contain <code>button</code> elements
+            </li>
+            <li>
+              <code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
+            </li>
+            <li>
+              <code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
+            </li>
+            <li>
+              with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
+            </li>
+          </ul>
+          <p>
+            Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+
     {% include variables.html type='element' %}
 
   </div>

docs/documentation/form/general.html

@@ -983,6 +983,19 @@ variables_form_keys:
 
     {% include snippet.html content=group_multiline_example clipped=true %}
 
+    <div class="message is-info">
+      <div class="message-header">
+        <p>List of buttons</p>
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>
+            If you only need a list of <em>buttons</em>, try out the new <code>buttons</code> class with which you can create a <a href="{{ site.url }}/documentation/elements/button/#list-of-buttons">multiline list of buttons</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+
     {% include anchor.html name="Horizontal form" %}
 
     <div class="content">
@@ -1021,7 +1034,7 @@ variables_form_keys:
     </div>
 
     {% include snippet.html content=field_label_example horizontal=true more=true %}
-    
+
     {% include anchor.html name="Variables" %}
 
     <div class="content">

sass/elements/button.sass

@@ -199,3 +199,43 @@ $button-static-border-color: $grey-lighter !default
     color: $button-static-color
     box-shadow: none
     pointer-events: none
+
+.buttons
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  .button
+    margin-bottom: 0.5rem
+    &:not(:last-child)
+      margin-right: 0.5rem
+  &:last-child
+    margin-bottom: -0.5rem
+  &:not(:last-child)
+    margin-bottom: 1rem
+  &.has-addons
+    .button
+      &:not(:first-child)
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
+      &:not(:last-child)
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+        margin-right: -1px
+      &:last-child
+        margin-right: 0
+      &:hover,
+      &.is-hovered
+        z-index: 2
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active,
+      &.is-selected
+        z-index: 3
+        &:hover
+          z-index: 4
+  &.is-centered
+    justify-content: center
+  &.is-right
+    justify-content: flex-end