feat(buttons): Improve and extend button groups #16

zalando · Nov 25, 2015 · 91e312f · 91e312f
1 parent 12f0317
commit 91e312f
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/docs/demo/materials/atoms/buttons/06-button--groups.html b/docs/demo/materials/atoms/buttons/06-button--groups.html
@@ -4,28 +4,58 @@
 notes: |
   Actions that logically belong together might be grouped with this component.
 
+  Button group rows can be used to combine several button groups in one line.
+
   Alternatively, this component can be used as a radio button group where space is an issue.
 
   Please do not use the button group as tabs.
 ---
 
 <div class="dc-btn-group">
-	<button class="dc-btn">First</button>
-	<button class="dc-btn">Second</button>
-	<button class="dc-btn">Third</button>
-	<button class="dc-btn">Fourth</button>
+	<button class="dc-btn">One</button>
+	<button class="dc-btn">Two</button>
+	<button class="dc-btn">Three</button>
+	<button class="dc-btn">Four</button>
+</div>
+
+<div class="dc-btn-group-row">
+  <div class="dc-btn-group">
+  	<button class="dc-btn">1</button>
+  	<button class="dc-btn">2</button>
+  	<button class="dc-btn">3</button>
+  	<button class="dc-btn">4</button>
+  </div>
+  <div class="dc-btn-group">
+  	<button class="dc-btn">5</button>
+  	<button class="dc-btn">6</button>
+  	<button class="dc-btn">7</button>
+  </div>
 </div>
 
 <div class="dc-btn-group">
 	<a href class="dc-btn dc-btn--primary">Primary</a>
-	<a href class="dc-btn">Secondary</a>
-	<a href class="dc-btn">Secondary</a>
+	<a href class="dc-btn">Standard</a>
+	<a href class="dc-btn">Standard</a>
 	<a href class="dc-btn dc-btn--destroy">Attention</a>
 </div>
 
 <div class="dc-btn-group">
-	<a href class="dc-btn dc-btn--small btn--primary">Primary</a>
-	<a href class="dc-btn dc-btn--small">Secondary</a>
-	<a href class="dc-btn dc-btn--small">Secondary</a>
+	<a href class="dc-btn dc-btn--small">Standard</a>
+	<a href class="dc-btn dc-btn--small">Standard</a>
+	<a href class="dc-btn dc-btn--small dc-btn--primary">Primary</a>
 	<a href class="dc-btn dc-btn--small dc-btn--destroy">Attention</a>
 </div>
+
+<div class="dc-btn-group-row">
+  <div class="dc-btn-group">
+  	<button class="dc-btn dc-btn--small">1</button>
+  	<button class="dc-btn dc-btn--small">2</button>
+  	<button class="dc-btn dc-btn--small">3</button>
+  	<button class="dc-btn dc-btn--small">4</button>
+  </div>
+  <div class="dc-btn-group">
+  	<button class="dc-btn dc-btn--small">5</button>
+  	<button class="dc-btn dc-btn--small">6</button>
+  	<button class="dc-btn dc-btn--small">7</button>
+  </div>
+</div>
diff --git a/src/styles/modules/_btn.scss b/src/styles/modules/_btn.scss
@@ -152,28 +152,44 @@
 //  = BUTTON GROUPS
 //  ---------------------------------------------------------------------------
 
+
 .#{$dc-prefix}-btn-group {
     @extend .#{$dc-prefix}-cf;
 
     .#{$dc-prefix}-btn {
         float: left;
         margin-right: 0;
         border-radius: 0;
-        border-left: 0 none;
+        border-right-width: 0;
 
         &:first-child {
-            border-radius: 2px 0 0 2px;
-            border-left: 1px solid $dc-gray50;
+            border-radius: $dc-radius100 0 0 $dc-radius100;
         }
 
         &:last-child {
-            border-radius: 0 2px 2px 0;
+            border-radius: 0 $dc-radius100 $dc-radius100 0;
+            border-right-width: 1px;
+        }
+
+        &.#{$dc-prefix}-btn--primary {
+            border-color: darken($dc-blue40, 7%);
+
+            + .dc-btn {
+              border-left-color: darken($dc-blue40, 7%);
+            }
         }
     }
 
-    .#{$dc-prefix}-btn--primary:first-child {
-        border-left: 1px solid darken($dc-blue40, 7%);
+    .#{$dc-prefix}-btn-group-row & {
+      float: left;
+      margin-right: 1.6rem;
+
     }
+
+}
+
+.#{$dc-prefix}-btn-group-row {
+  @extend .#{$dc-prefix}-cf;
 }
 
 //  = CREATE PAGE