fix(v-select): improve chip styles

avoid DOM twitch chips were causing inputs to grow on selection
vuetifyjs · May 17, 2018 · 0708cee · 0708cee
1 parent 1eb9363
commit 0708cee
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 11 deletions.
diff --git a/src/components/VAutocomplete/VAutocomplete.js b/src/components/VAutocomplete/VAutocomplete.js
@@ -401,15 +401,15 @@ export default {
     updateCombobox () {
       // When using chips and search is dirty
       // avoid updating input
-      if (this.chips && !this.searchIsDirty) return
+      if (this.hasChips && !this.searchIsDirty) return
 
       // The internal search is not matching
       // the initial value, update the input
       if (this.internalSearch !== this.internalValue) this.setValue()
 
       // Reset search if using chips
       // to avoid a double input
-      if (this.chips) this.internalSearch = undefined
+      if (this.hasChips) this.internalSearch = undefined
     },
     updateSelf () {
       if (this.tags) this.updateTags()

diff --git a/src/components/VSelect/VSelect.js b/src/components/VSelect/VSelect.js
@@ -123,7 +123,8 @@ export default {
     classes () {
       return Object.assign({}, VTextField.computed.classes.call(this), {
         'v-select': true,
-        'v-select--chips': this.chips,
+        'v-select--chips': this.hasChips,
+        'v-select--chips--small': this.smallChips,
         'v-select--is-menu-active': this.isMenuActive
       })
     },
@@ -168,8 +169,11 @@ export default {
     dynamicHeight () {
       return 'auto'
     },
+    hasChips () {
+      return this.chips || this.smallChips
+    },
     hasSlot () {
-      return Boolean(this.chips || this.$slots.item)
+      return Boolean(this.hasChips || this.$slots.item)
     },
     isDirty () {
       return this.selectedItems.length > 0
@@ -448,7 +452,7 @@ export default {
       let genSelection
       if (this.$scopedSlots.selection) {
         genSelection = this.genSlotSelection
-      } else if (this.chips) {
+      } else if (this.hasChips) {
         genSelection = this.genChipSelection
       } else {
         genSelection = this.genCommaSelection

diff --git a/src/stylus/components/_select.styl b/src/stylus/components/_select.styl
@@ -48,11 +48,6 @@ theme(v-select, 'v-select')
     ::placeholder
       color: transparent !important
 
-
-  &.v-text-field--solo
-    .v-select__selections
-      padding: 4px 0
-
   &.v-text-field--box,
   &.v-text-field--outline
     &:not(.v-text-field--single-line)
@@ -78,6 +73,23 @@ theme(v-select, 'v-select')
     input
       margin: 0
 
+    .v-select__selections
+      min-height: 42px
+
+    &.v-select--chips--small
+      .v-select__selections
+        min-height: 32px
+
+    &:not(.v-text-field--single-line)
+      &.v-text-field--box,
+      &.v-text-field--enclosed
+        .v-select__selections
+          min-height: 68px
+
+        &.v-select--chips--small
+          .v-select__selections
+            min-height: 56px
+
   &__selections
     align-items: center
     display: flex

diff --git a/src/stylus/components/_text-fields.styl b/src/stylus/components/_text-fields.styl
@@ -252,6 +252,9 @@ rtl(v-text-field-rtl, "v-text-field")
       margin-bottom: 0
       margin-top: 0
 
+    .v-label
+      top: calc(50% - 10px)
+
     .v-input__slot
       padding: 16px
 

diff --git a/src/stylus/settings/_variables.styl b/src/stylus/settings/_variables.styl
@@ -203,7 +203,7 @@ $chip-outline-background := transparent !important
 $chip-outline-color := $grey.base
 $chip-height := 32px
 $chip-margin := 4px
-$chip-small-height := 26px
+$chip-small-height := 24px
 $chip-small-font-size := 20px
 $chip-icon-offset := 12px
 $chip-icon-negative-offset := -8px