#1 Fix form group input UI issues (with addon and no-border class, la…

…bel related issues)
creativetimofficial · Feb 12, 2019 · 5732617 · 5732617
1 parent 1c03474
commit 5732617
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "bootstrap": "4.1.1",
+    "bootstrap": "^4.3.0",
     "element-ui": "^2.5.4",
     "nouislider": "^11.1.0",
     "vue": "^2.6.6",

diff --git a/src/assets/scss/now-ui-kit/_inputs.scss b/src/assets/scss/now-ui-kit/_inputs.scss
@@ -7,6 +7,7 @@
     color: $black-color;
     line-height: normal;
     font-size: $font-size-small;
+    height: 100%;
     @include transition-input-focus-color();
     @include box-shadow(none);
 
@@ -138,6 +139,15 @@
       }
     }
 
+    .input-group-append{
+        margin-left: 0;
+        .input-group-text{
+            background-color: $opacity-gray-3;
+            border: none;
+            border-right: transparent !important;
+        }
+    }
+
     &.input-group-focus{
         &.no-border{
             .input-group-text{

diff --git a/src/components/Inputs/formGroupInput.vue b/src/components/Inputs/formGroupInput.vue
@@ -9,44 +9,49 @@
     ]"
   >
     <slot name="label">
-      <label v-if="label" :class="labelClasses">
+      <label v-if="label" class="control-label" :class="labelClasses">
         {{ label }}
         <span v-if="required">*</span>
       </label>
     </slot>
 
-    <slot name="addonLeft">
-      <div v-if="addonLeftIcon" class="input-group-prepend">
-        <i class="input-group-text" :class="addonLeftIcon"></i>
-      </div>
-    </slot>
-    <slot>
-      <input
-        :value="value"
-        v-on="listeners"
-        v-bind="$attrs"
-        class="form-control"
-        :class="[{ valid: value && !error }, inputClasses]"
-        aria-describedby="addon-right addon-left"
-      />
-    </slot>
-    <slot name="addonRight">
-      <span v-if="addonRightIcon" class="input-group-addon input-group-append">
-        <i class="input-group-text" :class="addonRightIcon"></i>
-      </span>
-    </slot>
+    <div :class="[{ 'input-group': hasIcon }]">
+      <slot name="addonLeft">
+        <div v-if="addonLeftIcon" class="input-group-prepend">
+          <i class="input-group-text" :class="addonLeftIcon"></i>
+        </div>
+      </slot>
+      <slot>
+        <input
+          :value="value"
+          v-on="listeners"
+          v-bind="$attrs"
+          class="form-control"
+          :class="[{ valid: value && !error }, inputClasses]"
+          aria-describedby="addon-right addon-left"
+        />
+      </slot>
+      <slot name="addonRight">
+        <span
+          v-if="addonRightIcon"
+          class="input-group-addon input-group-append"
+        >
+          <i class="input-group-text" :class="addonRightIcon"></i>
+        </span>
+      </slot>
 
-    <slot name="infoBlock"></slot>
-    <slot name="helpBlock">
-      <div
-        class="text-danger invalid-feedback"
-        style="display: block;"
-        :class="{ 'mt-2': hasIcon }"
-        v-if="error"
-      >
-        {{ error }}
-      </div>
-    </slot>
+      <slot name="infoBlock"></slot>
+      <slot name="helpBlock">
+        <div
+          class="text-danger invalid-feedback"
+          style="display: block;"
+          :class="{ 'mt-2': hasIcon }"
+          v-if="error"
+        >
+          {{ error }}
+        </div>
+      </slot>
+    </div>
   </div>
 </template>
 <script>

diff --git a/src/pages/components/BasicElementsSection.vue b/src/pages/components/BasicElementsSection.vue
@@ -77,6 +77,22 @@
             >
             </fg-input>
           </div>
+          <div class="col-sm-6 col-lg-3">
+            <fg-input
+              addon-left-icon="now-ui-icons users_single-02"
+              class="no-border"
+              placeholder="No border left icon"
+            >
+            </fg-input>
+          </div>
+          <div class="col-sm-6 col-lg-3">
+            <fg-input
+              addon-right-icon="now-ui-icons users_single-02"
+              class="no-border"
+              placeholder="No border right icon"
+            >
+            </fg-input>
+          </div>
         </div>
       </div>
       <div class="space-70"></div>

diff --git a/vue.config.js b/vue.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  css: {
+    // Enable CSS source maps.
+    sourceMap: process.env.NODE_ENV !== 'production'
+  }
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1531,9 +1531,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
 
-[email protected]:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
+bootstrap@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.0.tgz#2559ccb8d45426ac6c54db23eb3d1c9f4257fa22"
+  integrity sha512-M0vqY0Z6UDweV2nLFl5dXcb+GIo53EBCGMMVxCGH5vJxl/jsr+HkULBMd4kn9rdpdBZwd3BduCgMOYOwJybo4Q==
 
 brace-expansion@^1.1.7:
   version "1.1.11"