feature(icon button): Order icon button content by BEM

zalando · Mar 23, 2016 · d6e6492 · d6e6492
1 parent cec2267
commit d6e6492
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git a/docs/demo/materials/03-molecules/01-button-icon.html b/docs/demo/materials/03-molecules/01-button-icon.html
@@ -4,35 +4,34 @@
 notes: |
     Use icon buttons with caution. Their meanings are sometimes difficult to understand.
 
-    For buttons with icon and text, the icon will always display at the right side. The button text must be wrapped in an element (any element works).
+    For buttons with icon and text, use the modifiers `dc-icon--btn--left` and `dc-icon--btn--right` to set the position of the icon.
 ---
 <button class="dc-btn">
-    <i class="dc-icon dc-icon--history dc-icon--btn"></i>
+    Text
 </button>
-
 <button class="dc-btn dc-btn--primary">
     <i class="dc-icon dc-icon--pencil dc-icon--btn"></i>
 </button>
-
+<button class="dc-btn">
+    <a>Undo</a><i class="dc-icon dc-icon--undo dc-icon--btn dc-icon--btn--left"></i>
+</button>
 <button class="dc-btn dc-btn--destroy">
     <i class="dc-icon dc-icon--trash dc-icon--btn"></i>
 </button>
 
-<button class="dc-btn">
-    <span>Undo</span><i class="dc-icon dc-icon--undo dc-icon--btn"></i>
-</button>
+
 
 <button class="dc-btn dc-btn--disabled">
-    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn"></i>
+    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn--right"></i>
 </button>
 
 
 <br>
 
 <button class="dc-btn dc-btn--small">
-    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn-small"></i>
+    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn-small dc-icon--btn--left"></i>
 </button>
 
 <button class="dc-btn dc-btn--destroy dc-btn--large">
-    <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large"></i>
+    <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
 </button>
diff --git a/src/icons/lock.svg b/src/icons/lock.svg
diff --git a/src/styles/atoms/_btn.scss b/src/styles/atoms/_btn.scss
@@ -1,7 +1,6 @@
 // @import "../core/core";
 
 @mixin dc-btn {
-
     display: inline-block;
     margin-right: $dc-space50;
     margin-bottom: $dc-space100;
@@ -19,15 +18,12 @@
     text-transform: capitalize;
     box-shadow: 0 1px 1px transparent;
     cursor: default;
+    vertical-align: top;
 
     &:focus {
         outline: none;
     }
 
-    > * {
-        margin-right: 10px;
-    }
-
     @content;
 }
 
@@ -212,9 +208,3 @@
         @include dc-btn--block;
     }
 }
-
-
-
-
-
-
diff --git a/src/styles/molecules/_btn-icon.scss b/src/styles/molecules/_btn-icon.scss
@@ -4,12 +4,24 @@
 //  = ICON BUTTONS
 //  This module just add some dc-icon modifier
 //  -----------------------------------------------------------------------------
+
 @mixin dc-icon--btn {
+    float: left;
     display: block;
-    margin-top: .2rem;
+    margin-top: .22rem;
+    line-height: .8rem;
     margin-right: 0;
+    margin-left: 0;
+}
+
+@mixin dc-icon--btn--left {
+    margin-right: .8rem;
+    float: left;
+}
+
+@mixin dc-icon--btn--right {
+    margin-left: .8rem;
     float: right;
-    line-height: .8rem;
 }
 
 @mixin dc-icon--btn-small {
@@ -19,13 +31,23 @@
 
 @mixin dc-icon--btn-large {
     margin-top: .4rem;
-    font-size: 2.4rem;
+    font-size: 2.8rem;
     line-height: .6rem;
 }
 
 @mixin dc-btn-icon-selectors {
 
-    .dc-icon--btn {  @include dc-icon--btn; }
+    .dc-icon--btn {
+        @include dc-icon--btn;
+    }
+
+    .dc-icon--btn--left {
+        @include dc-icon--btn--left;
+    }
+
+    .dc-icon--btn--right {
+        @include dc-icon--btn--right;
+    }
 
     .dc-icon--btn-small {
         @include dc-icon--btn-small;
@@ -34,4 +56,5 @@
     .dc-icon--btn-large {
         @include dc-icon--btn-large;
     }
+
 }