fix(text-field/slider): add/fix

remove top margin from all single-line text-field components. remove top margin from slider if not using thumb-labels fixes #3137
vuetifyjs · May 4, 2018 · ab00c4a · ab00c4a
1 parent d1f01a0
commit ab00c4a
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/components/VSlider/VSlider.js b/src/components/VSlider/VSlider.js
@@ -89,7 +89,9 @@ export default {
         'v-input--slider': true,
         'v-input--slider--ticks': this.showTicks,
         'v-input--slider--inverse-label': this.inverseLabel,
-        'v-input--slider--ticks-labels': this.tickLabels.length > 0
+        'v-input--slider--ticks-labels': this.tickLabels.length > 0,
+        'v-input--slider--thumb-label': this.thumbLabel ||
+          this.$scopedSlots.thumbLabel
       }
     },
     showTicks () {

diff --git a/src/stylus/components/_sliders.styl b/src/stylus/components/_sliders.styl
@@ -52,6 +52,9 @@ rtl(v-slider-rtl, "v-input--slider")
 
 /** Input Group */
 .v-input--slider
+  &:not(.v-input--slider--thumb-label)
+    margin-top: 0
+
   &.v-input--is-focused
     .v-slider__thumb-container--is-active:not(.v-slider__thumb-container--show-label)
       &:before

diff --git a/src/stylus/components/_text-fields.styl b/src/stylus/components/_text-fields.styl
@@ -251,6 +251,10 @@ rtl(v-text-field-rtl, "v-text-field")
     .v-input__append-inner
       align-self: flex-start
 
+  // For specificity
+  &.v-text-field--single-line
+    margin-top: 0
+
   &.v-text-field--solo,
   &.v-text-field--box.v-text-field--single-line,
   &.v-text-field--outline.v-text-field--single-line

diff --git a/test/unit/components/VSlider/__snapshots__/VSlider.spec.js.snap b/test/unit/components/VSlider/__snapshots__/VSlider.spec.js.snap
@@ -263,7 +263,7 @@ exports[`VSlider.vue should match a snapshot 1`] = `
 
 exports[`VSlider.vue should render component with thumbLabel and match a snapshot 1`] = `
 
-<div class="v-input v-input--slider">
+<div class="v-input v-input--slider v-input--slider--thumb-label">
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider">
@@ -311,7 +311,7 @@ exports[`VSlider.vue should render component with thumbLabel and match a snapsho
 
 exports[`VSlider.vue should render component with thumbLabel and match a snapshot 2`] = `
 
-<div class="v-input v-input--slider">
+<div class="v-input v-input--slider v-input--slider--thumb-label">
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider">