From 716ec4ce1e56170f5b12451447c32a872f144733 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Fri, 29 Apr 2016 16:03:40 -0500
Subject: [PATCH] Fixes #971 v4 input-group implementation

---
 js/baseInput.js                      | 12 ++++++++++--
 scss/_input-group.scss               | 17 ++++++++++++-----
 scss/mixins/_forms.scss              |  6 +++---
 scss/variables/bootstrap/_forms.scss |  4 ++--
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/js/baseInput.js b/js/baseInput.js
index da42a833..d3ca1161 100644
--- a/js/baseInput.js
+++ b/js/baseInput.js
@@ -12,7 +12,8 @@ const BaseInput = (($) => {
     BMD_LABEL_FLOATING: 'bmd-label-floating',
     HAS_DANGER: 'has-danger',
     IS_FILLED: 'is-filled',
-    IS_FOCUSED: 'is-focused'
+    IS_FOCUSED: 'is-focused',
+    INPUT_GROUP: 'input-group'
   }
 
   const Selector = {
@@ -176,7 +177,14 @@ const BaseInput = (($) => {
         if (this.config.bmdFormGroup.create && (this.$formGroup === undefined || this.$formGroup.length === 0)) {
           // If a form-group doesn't exist (not recommended), take a guess and wrap the element (assuming no label).
           //  note: it's possible to make this smarter, but I need to see valid cases before adding any complexity.
-          this.outerElement().wrap(this.config.bmdFormGroup.template)
+
+          // this may be an input-group, wrap that instead
+          if(this.outerElement().parent().hasClass(ClassName.INPUT_GROUP)){
+            this.outerElement().parent().wrap(this.config.bmdFormGroup.template)
+          }
+          else{
+            this.outerElement().wrap(this.config.bmdFormGroup.template)
+          }
         } else {
           // a form-group does exist, add our marker class to it
           this.$formGroup.addClass(ClassName.BMD_FORM_GROUP)
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 6e425b2a..6d65e3bf 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -22,12 +22,19 @@
 }
 
 .input-group { // may be in or outside of form-group
-  .input-group-btn {
-    //padding: 0 12px; // match addon spacing
-  }
 
   .input-group-addon {
-    //border: 0;
-    //background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .input-group-addon + input,
+  input + .input-group-addon {
+    margin-left: .75rem;
   }
 }
+
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 217a23f6..a87abab0 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -125,9 +125,9 @@
     }
 
     // Set validation states also for addons
-    .input-group-addon {
-      border-color: $border-color;
-    }
+    //.input-group-addon {
+    //  border-color: $border-color;
+    //}
 
     .bmd-help {
       color: $bmd-label-color-inner-focus;
diff --git a/scss/variables/bootstrap/_forms.scss b/scss/variables/bootstrap/_forms.scss
index dce64f99..425008e2 100644
--- a/scss/variables/bootstrap/_forms.scss
+++ b/scss/variables/bootstrap/_forms.scss
@@ -35,8 +35,8 @@ $input-padding-y-lg:             .5625rem !default; // no-spec 9px // .75rem !de
 //
 //$form-group-margin-bottom:       $spacer-y !default;
 //
-//$input-group-addon-bg:           $gray-lighter !default;
-//$input-group-addon-border-color: $input-border-color !default;
+$input-group-addon-bg:            transparent !default; //$gray-lighter !default;
+$input-group-addon-border-color:  transparent !default; //$input-border-color !default;
 //
 //$cursor-disabled:                not-allowed !default;
 //