feat(forms): Create input groups

zalando · Jan 6, 2016 · 668a712 · 668a712
1 parent 80e47f8
commit 668a712
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 40 deletions.
diff --git a/docs/demo/materials/atoms/text-input.html b/docs/demo/materials/atoms/text-input.html
@@ -1,21 +1,15 @@
-<label class="dc-label" for="optionalInput">Label</label>
+<label class="dc-label" for="optionalInput">Text Input</label>
 <input class="dc-input" type="text" id="optionalInput" placeholder="e. g. give an example"/>
 
-<label class="dc-label dc-label--required" for="requiredInput">Label</label>
+<label class="dc-label" for="numberInput">Number input</label>
+<input class="dc-input" type="number" id="numberInput" placeholder="e. g. 100"/>
+
+<label class="dc-label dc-label--required" for="requiredInput">Required Input</label>
 <input class="dc-input" type="text" id="requiredInput"  placeholder="e. g. give an example"/>
 
-<label class="dc-label dc-label--required dc-label--is-error" for="errorInput">Label</label>
+<label class="dc-label dc-label--required dc-label--is-error" for="errorInput">Required Input – Error</label>
 <input class="dc-input dc-input--is-error" type="text" id="errorInput"  placeholder="e. g. give an example"/>
 <span class="dc-text--error">Please don't leave this empty.</span>
 
-<label class="dc-label" for="numberInput">Stock</label>
-<input class="dc-input" type="number" id="numberInput" placeholder="e. g. 100"/>
-
 <label class="dc-label dc-label--disabled" for="disabledInput">Disabled input</label>
 <input class="dc-input dc-input--disabled" type="text" id="disabledInput"  placeholder="e. g. give an example" disabled/>
-
-<label class="dc-label" for="priceInput">Price</label>
-<div class="dc-input-group dc-input-group--price">
-    <input class="dc-input dc-input--text-right" type="number" id="priceInput"  placeholder="e. g. 1.000,00"/>
-    <div class="dc-input-group__addon">&euro;</div>
-</div>
diff --git a/docs/demo/materials/molecules/input-groups.html b/docs/demo/materials/molecules/input-groups.html
@@ -0,0 +1,28 @@
+---
+notes: |
+ Create input groups by using `.dc-input-group` to wrap inputs, addons with the class `.dc-input-addon` and `button`.
+---
+<label class="dc-label" for="priceInput">Addon - Appended</label>
+<div class="dc-input-group">
+    <input class="dc-input 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" type="text" id="urlInput"  placeholder="e. g. brands.zalando.com"/>
+</div>
+
+<label class="dc-label" for="urlInput">Button - Appended</label>
+<div class="dc-input-group">
+    <input class="dc-input" type="text" id="urlInput"  placeholder="e. g. brands.zalando.com"/>
+    <button class="dc-btn dc-btn--primary"><i class="dc-font-icon-search"></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" type="text" id="urlInput"  placeholder="Full name"/>
+    <a class="dc-btn dc-btn--primary">Add</a>
+</div>
diff --git a/src/styles/modules/_btn.scss b/src/styles/modules/_btn.scss
@@ -148,32 +148,32 @@
     box-shadow: none;
 }
 
-//  = BUTTON GROUPS
+//  = BUTTON GROUPS & BUTTONS IN INPUT GROUPS
 //  ---------------------------------------------------------------------------
 
-.dc-btn-group {
-    // FIXME: Prefer using placeholder selectors (e.g. %some-placeholder) with @extend
-    // scss-lint:disable PlaceholderInExtend
-    @extend .dc-cf;
-    // scss-lint:enable PlaceholderInExtend
+.dc-btn-group,
+.dc-input-group {
+    display: flex;
+    margin-bottom: $dc-space100;
 
     .dc-btn {
         margin-right: 0;
-        float: left;
-        border-right-width: 0;
+        margin-bottom: 0;
+        border-left-width: 0;
         border-radius: 0;
 
         &:first-child {
-            border-radius: $dc-radius100 0 0 $dc-radius100;
+            border-left-width: 1px;
+            border-top-left-radius: $dc-radius100;
+            border-bottom-left-radius: $dc-radius100;
         }
 
         &:last-child {
-            border-right-width: 1px;
-            border-radius: 0 $dc-radius100 $dc-radius100 0;
+            border-top-right-radius: $dc-radius100;
+            border-bottom-right-radius: $dc-radius100;
         }
 
         &.dc-btn--primary {
-            border-right-width: 1px;
             border-color: darken($dc-blue40, 7%);
         }
 

diff --git a/src/styles/modules/_forms.scss b/src/styles/modules/_forms.scss
@@ -90,7 +90,6 @@
     }
 
     .no-touch & {
-        padding: $dc-space75 + .1 $dc-space75;
         font-size: $dc-font100;
     }
 
@@ -135,32 +134,59 @@
 //  ---------------------------------------------------------------------------
 
 .dc-input-group {
+    display: flex;
+    margin-bottom: $dc-space100;
 
     .dc-input {
-        display: inline-block;
+        margin-right: 0;
+        margin-bottom: 0;
+        margin-left: 0;
+        border-radius: 0;
+        // &::-webkit-inner-spin-button,
+        // &::-webkit-outer-spin-button {
+        //     margin: 0;
+        //     -webkit-appearance: none;
+        // }
+
+        &:first-child {
+            border-top-left-radius: $dc-radius100;
+            border-bottom-left-radius: $dc-radius100;
+        }
+
+        &:last-child {
+            border-top-right-radius: $dc-radius100;
+            border-bottom-left-radius: $dc-radius100;
+        }
+
+
     }
+
 }
 
-.dc-input-group--price {
+.dc-input-addon {
+    margin-bottom: 0;
+    padding: $dc-space75 + .2 $dc-space100 $dc-space75;
+    border: 1px solid $dc-gray60;
+    background-color: $dc-gray80;
+    color: $dc-gray20;
+    line-height: 1;
 
-    .dc-input {
-        padding-right: $dc-space150 + $dc-space50;
+    &:first-child {
+        border-right-width: 0;
+        border-top-left-radius: $dc-radius100;
+        border-bottom-left-radius: $dc-radius100;
+    }
 
-        &::-webkit-inner-spin-button,
-        &::-webkit-outer-spin-button {
-            margin: 0;
-            -webkit-appearance: none;
-        }
+    &:last-child {
+        border-left-width: 0;
+        border-top-right-radius: $dc-radius100;
+        border-bottom-left-radius: $dc-radius100;
     }
-}
 
-.dc-input-group__addon {
-    display: inline-block;
-    padding: 0 $dc-space100;
-    transform: translateX(calc(-100% - 4px));
-    line-height: $dc-space200;
+
 }
 
+
 //  = TEXT AREA
 //  ---------------------------------------------------------------------------