Feature/stij 129: Make inline buttons the default

CHANGELOG.md

@@ -1,39 +1,59 @@
 # Changelog
 All Notable changes to `digipolisgent/fractal_styleguide_gent-base`.
 
-## 2.6.9
+## 2.7.0 IMPORTANT
+**This change may break the way your buttons work!**
+
+* STIJ-129: **IMPORTANT!**: Changed button classes to be consistent with their SASS placeholders!
+* STIJ-129: Changed implementation of button. All buttons are now `inline` by default!
+* STIJ-129: Updated button documentation.
+* STIJ-131: Remove placeholders from all input type fields except search fields.
 * STIJ-63: Made Fractal variants of paragraphs.
 * STIJ-63: Remove underlined text from paragraph examples, 
            it is discouraged to use underlined text.
-* STIJ-131: Remove placeholders from all input type fields except search fields.
 
+***
 
 ## 2.6.8
 * STIJ-25: Added themify to the status messages component.
 
+***
+
 ## 2.6.7
 * Fixed select box appearance in IE.
 * STIJ-139: Added no-optional class to hide optional from field labels.
 * STIJ-139: Changed the styling of checkbox and radio field labels.
 * STIJ-139: Added fieldset styling.
 * STIJ-139: Changed class of messages.
 
+***
+
 ## 2.6.6
 * Fixed a bug in the postinstall.sh script.
 
+***
+
 ## 2.6.5
 * STIJ-126: Removed CDN imports of external libraries and added them through yarn.
 
+***
+
 ## 2.6.4
 * STIJ-125: Fixed close button for items inside multiselect.
 * STIJ-137: Changed preview template for Mijn Gent block.
 
+***
+
 ## 2.6.3
 * STIJ-40: Fixed ugly styling on buttons and input fields for iOS.
 
+***
+
 ## 2.6.2
 * STIJ-35: Added bindings and functions for the Gallery component.
 
+***
+
 ## 2.6.1
 * STIJ-2: 
     * Added default no-style styling to lists in the hamburger menu.

components/11-base/section/section.twig

@@ -14,7 +14,7 @@
       {% include '@h6' with { 'h6_text': 'Heading 6' } %}
       {% include '@paragraph' with { 'text': 'Normal text below an heading 6.'} %}
       {% include '@paragraph' with { 'text': 'Paragraphs <a href="#">link</a>'} %}
-      <p>{% include '@button-sm' with { 'text': 'Button'} %}</p>
+      <p>{% include '@button' with { 'text': 'Button'} %}</p>
       <p>{% include '@button-md' with { 'text': 'Button'} %}</p>
       <p>{% include '@button-lg' with { 'text': 'Button'} %}</p>
       {% include '@button-drop' %}

components/21-atoms/button/README.md

@@ -0,0 +1,31 @@
+# Buttons
+There are 3 types of buttons defined:
+* Small
+* Medium (default)
+* Large
+
+By default buttons are always inline!
+That means when you want to create a full width button you will need to use the `btn-block` mixin we provide.
+
+We provide the some classes to add to elements that need to be styled like buttons:
+We also provide a SASS placeholder.
+
+## Small buttons
+* `%btn--small`
+* `.small.btn`
+* `.btn--small`
+
+## Medium buttons
+* `%btn--medium`
+* `.medium.btn`
+* `.btn--medium`
+
+## Large buttons
+* `%btn--large`
+* `.large.btn`
+* `.btn--large`
+
+Furthermore to improve semantic HTML we provide SASS mixins to create these buttons.
+* `@mixin btn-s;` for small buttons.
+* `@mixin btn-m;` for medium buttons (default).
+* `@mixin btn-l;` for large buttons.

components/21-atoms/buttons/_buttons.scss → components/21-atoms/button/_button.scss

@@ -1,35 +1,41 @@
 //
 // Button size mixins.
 //
-@mixin btn-l {
+@mixin btn-large {
   padding-top: .7rem;
   padding-bottom: .7rem;
   font-size: 1rem;
   line-height: 1.5rem;
 }
-@mixin btn-m {
+@mixin btn-medium {
   padding-top: .45rem;
   padding-bottom: .45rem;
   font-size: 1rem;
   line-height: 1.5rem;
 }
-@mixin btn-s {
+@mixin btn-small {
   padding-top: .2rem;
   padding-bottom: .2rem;
   font-size: .8rem;
   line-height: 1.4rem;
 }
 
 //
-// Button display
+// Button inline display (default).
 //
 @mixin btn-inlineblock {
   display: inline-block;
-  width: auto;
 }
 
 //
-// General button styling.
+// Button block display.
+//
+@mixin btn-block {
+  display: block;
+}
+
+//
+// General button styling (default).
 //
 %btn,
 .btn,
@@ -42,10 +48,9 @@ input[type='submit'] {
     @include color-element-states($button-background, $button-background-hover, $property: "background");
     @include color-element-states($button-border, $button-border-hover, $property: "border");
   }
-  @include btn-m;
-  display: block;
+  @include btn-medium;
+  @include btn-inlineblock;
   position: relative;
-  width: 100%;
   margin: 0;
   padding-right: 1rem;
   padding-left: 1rem;
@@ -85,15 +90,29 @@ input[type='submit'] {
   }
 }
 
-//
-// Inline button styling.
-//
-%btn--inline,
-.inline.btn,
-.btn--inline,
-a.btn--inline,
-button.btn--inline,
-input[type='button'].btn--inline,
-input[type='submit'].btn--inline {
-  @include btn-inlineblock
+%btn--small,
+.btn--small,
+a.btn--small,
+button.btn--small,
+input[type="button"].btn--small,
+input[type='submit'].btn--small {
+  @include btn-small;
+}
+
+%btn--medium,
+.btn--medium,
+a.btn--medium,
+button.btn--medium,
+input[type='button'].btn--medium,
+input[type='submit'].btn--medium {
+  @include btn-medium;
+}
+
+%btn--large,
+.btn--large,
+a.btn--large,
+button.btn--large,
+input[type="button"].btn--large,
+input[type='submit'].btn--large {
+  @include btn-large;
 }

components/21-atoms/button/button.config.json

@@ -0,0 +1,33 @@
+{
+  "title": "Button",
+  "name": "Button",
+  "status": "ready",
+  "default": "button-sm",
+  "order": 1,
+  "context": {
+    "text": "Button"
+  },
+  "variants": [
+    {
+      "name": "button-sm",
+      "handle": "button",
+      "context": {
+        "modifier": "btn--small"
+      }
+    },
+    {
+      "name": "button-md",
+      "handle": "md",
+      "context": {
+        "modifier": "btn--medium"
+      }
+    },
+    {
+      "name": "button-lg",
+      "handle": "button-lg",
+      "context": {
+        "modifier": "btn--large"
+      }
+    }
+  ]
+}

components/21-atoms/button/button.twig

@@ -0,0 +1 @@
+<input type="button" class="btn {{ modifier }}" value="{{ text }}">

components/21-atoms/inputs/input-multiselect-chosen/_input-multiselect-chosen.scss

@@ -39,7 +39,7 @@
 
 .chosen-container-multi .chosen-choices li.search-choice {
   @extend %btn;
-  @include btn-s;
+  @include btn-small;
 
   .search-choice-close {
     right: 1.2rem;

components/51-templates/buttons/buttons.config.json

@@ -1,8 +1,8 @@
 {
   "title": "Buttons",
   "status": "ready",
-  "handle": "buttons",
-  "preview": "@preview",
+  "handle": "buttons-overview",
+  "preview": "@preview-buttons",
   "order": 3,
   "context": {
     "text": "Button"