refactor(btn, btn-group, input-group): use grouped modifiers in a mor…

…e flexible way

      BREAKING CHANGES:

      dc-btn--grouped modifier becomes a partial _dc-btn--grouped which is extended in every molecule that uses it, for instance dc-btn--in-input-group or dc-btn--in-btn-group.

      dc-input-group__input becomes dc-input--in-input-group

      Change your code from this:

    ```html
    <div class="dc-input-group">
       <span class="dc-input-addon">User</span>
       <input class="dc-input dc-input-group__input"/>
       <a class="dc-btn dc-btn--grouped dc-btn--primary">Add</a>
    </div>
    ```

    To this:

    ```html
    <div class="dc-input-group">
       <span class="dc-input-addon">User</span>
       <input class="dc-input dc-input--in-input-group"/>
       <a class="dc-btn dc-btn--in-input-group dc-btn--primary">Add</a>
    </div>
    ```

docs/demo/materials/03-molecules/02-button-groups.html

@@ -12,24 +12,24 @@
 ---
 
 <div class="dc-btn-group">
-    <button class="dc-btn dc-btn--grouped dc-btn--large">1</button>
-    <button class="dc-btn dc-btn--grouped dc-btn--large">
+    <button class="dc-btn dc-btn--in-btn-group dc-btn--large">1</button>
+    <button class="dc-btn dc-btn--in-btn-group dc-btn--large">
         <i class="dc-icon dc-icon--check dc-icon--btn dc-icon--btn-large"></i>
     </button>
-    <button class="dc-btn dc-btn--grouped dc-btn--large">2</button>
-    <button class="dc-btn dc-btn--grouped dc-btn--large dc-btn--destroy">
+    <button class="dc-btn dc-btn--in-btn-group dc-btn--large">2</button>
+    <button class="dc-btn dc-btn--in-btn-group dc-btn--large dc-btn--destroy">
         <i class="dc-icon dc-icon--trash dc-icon--btn dc-icon--btn-large"></i>
     </button>
 </div>
 
 <div class="dc-btn-group-row">
     <div class="dc-btn-group dc-btn-group--in-row">
-        <a href class="dc-btn dc-btn--grouped dc-btn--primary">Primary</a>
-        <button class="dc-btn dc-btn--grouped">Two</button>
+        <a href class="dc-btn dc-btn--in-btn-group dc-btn--primary">Primary</a>
+        <button class="dc-btn dc-btn--in-btn-group">Two</button>
     </div>
     <div class="dc-btn-group dc-btn-group--in-row">
-        <button class="dc-btn dc-btn--grouped">Three</button>
-        <button class="dc-btn dc-btn--grouped dc-btn--destroy">
+        <button class="dc-btn dc-btn--in-btn-group">Three</button>
+        <button class="dc-btn dc-btn--in-btn-group dc-btn--destroy">
             <i class="dc-icon dc-icon--trash dc-icon--btn"></i>
         </button>
     </div>

docs/demo/materials/03-molecules/04-input-groups.html

@@ -1,30 +1,30 @@
 ---
 notes: |
- Create input groups by using `.dc-input-group` to wrap inputs with the class `.dc-input-group__input`, addons with the class `.dc-input-addon` and buttons with the class `dc-btn--grouped`.
+ Create input groups by using `.dc-input-group` to wrap inputs with the class `.dc-input--in-input-group`, addons with the class `.dc-input-addon` and buttons with the class `dc-btn--grouped`.
 ---
 <label class="dc-label" for="priceInput">Addon - Appended</label>
 <div class="dc-input-group">
-    <input class="dc-input dc-input-group__input dc-input--text-right" type="text" id="priceInput" placeholder="e. g. 100"/>
+    <input class="dc-input dc-input--in-input-group dc-input--text-right" type="text" id="priceInput" placeholder="e. g. 100"/>
     <div class="dc-input-addon">&euro;</div>
 </div>
 
 <label class="dc-label" for="urlInput">Addon - Prepended</label>
 <div class="dc-input-group">
     <span class="dc-input-addon">http://</span>
-    <input class="dc-input dc-input-group__input" type="text" id="urlInput" placeholder="e. g. brands.zalando.com"/>
+    <input class="dc-input dc-input--in-input-group" type="text" id="urlInput" placeholder="e. g. brands.zalando.com"/>
 </div>
 
 <label class="dc-label" for="urlInput2">Button - Appended</label>
 <div class="dc-input-group">
-    <input class="dc-input dc-input-group__input" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com"/>
-    <button class="dc-btn dc-btn--grouped dc-btn--primary">
+    <input class="dc-input dc-input--in-input-group" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com"/>
+    <button class="dc-btn dc-btn--in-input-group dc-btn--primary">
         <i class="dc-icon dc-icon--search dc-icon--btn"></i>
     </button>
 </div>
 
 <label class="dc-label" for="urlInput">Addon - Prepended & Button - Appended</label>
 <div class="dc-input-group">
     <span class="dc-input-addon">User 1</span>
-    <input class="dc-input dc-input-group__input" type="text" id="urlInput" placeholder="Full name"/>
-    <a class="dc-btn dc-btn--grouped dc-btn--primary">Add</a>
+    <input class="dc-input dc-input--in-input-group" type="text" id="urlInput" placeholder="Full name"/>
+    <a class="dc-btn dc-btn--in-input-group dc-btn--primary">Add</a>
 </div>

src/styles/atoms/_btn.scss

@@ -176,7 +176,7 @@
 //  = GROUPED BUTTON
 //  ---------------------------------------------------------------------------
 
-@mixin dc-btn--grouped {
+@mixin _dc-btn--grouped {
     margin-right: 0;
     margin-bottom: 0;
     border-left-width: 0;
@@ -231,10 +231,6 @@
     .dc-btn--block {
         @include dc-btn--block;
     }
-
-    .dc-btn--grouped {
-        @include dc-btn--grouped;
-    }
 }
 
 

src/styles/molecules/_btn-group.scss

@@ -19,6 +19,10 @@
     float: left;
 }
 
+@mixin dc-btn--in-btn-group {
+    @include _dc-btn--grouped;
+}
+
 @mixin dc-btn-group-selectors {
 
     .dc-btn-group {
@@ -32,4 +36,8 @@
     .dc-btn-group--in-row {
         @include dc-btn-group--in-row;
     }
+
+    .dc-btn--in-btn-group {
+        @include dc-btn--in-btn-group;
+    }
 }

src/styles/molecules/_input-group.scss

@@ -27,7 +27,7 @@
     }
 }
 
-@mixin dc-input-group__input {
+@mixin dc-input--in-input-group {
     margin-right: 0;
     margin-bottom: 0;
     margin-left: 0;
@@ -44,6 +44,10 @@
     }
 }
 
+@mixin dc-btn--in-input-group {
+    @include _dc-btn--grouped;
+}
+
 @mixin dc-input-group-selectors {
 
     .dc-input-group {
@@ -54,8 +58,12 @@
         @include dc-input-addon;
     }
 
-    .dc-input-group__input {
-        @include dc-input-group__input;
+    .dc-input--in-input-group {
+        @include dc-input--in-input-group;
+    }
+
+    .dc-btn--in-input-group {
+        @include dc-btn--in-input-group;
     }
 }