fix(VField): match chips line-height, center prepend/append #17175

yuwu9145 · 2023-04-18T12:09:21Z

Description

Cause:

.v-field__input on VAutocomplete/VSelect is a div while it's an input on VTextField
Their computed line-height are the same, however, line-height impacts input height but does not bother empty div, check this demo. So .v-field__input height renders differently

Solution:

Taking account of line-height value when calculating min-height for .v-field__input in order to ensure .v-field__input has consistent min-height across div and input

Markup:

<template>
  <v-app>
    <v-main class="px-5 pt-5">
      <v-row>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
          ></v-autocomplete>
        </v-col>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
                          variant="outlined"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="outlined"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="outlined"
          ></v-autocomplete>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            variant="solo-filled"
          />
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="solo-filled"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="solo-filled"
          ></v-autocomplete>
          
          
        </v-col>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
                          variant="solo"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="solo"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="solo"
          ></v-autocomplete>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
                          variant="underlined"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="underlined"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="underlined"
          ></v-autocomplete>
        </v-col>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
                          variant="solo-inverted"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="solo-inverted"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="solo-inverted"
          ></v-autocomplete>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="6">
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
                          variant="plain"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="comfortable"
                          variant="plain"
          ></v-autocomplete>
          <v-autocomplete
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
            prepend-inner-icon="mdi-map-marker"
            clearable
            density="compact"
                          variant="plain"
          ></v-autocomplete>
        </v-col>
      </v-row>
      
      
      
      <a href="https://github.com/vuetifyjs/vuetify/issues/17307" target="_blank">issue 17307</a> (User should be responsible for btn size in slot)
    <br>
    <br>
      <p>
       whene using v-btn the position <strong>not</strong> verically aligend as required
      </p>
      
      <v-text-field variant="outlined" v-model="msg">
        <template #append-inner>
        		<v-btn icon="mdi-plus" variant="text"></v-btn>
        </template>
        
         <template #prepend-inner>
       		 <v-btn icon="mdi-plus" variant="text"></v-btn>
        </template>
      </v-text-field>
      
      
       <p>
       whene using icon only the position  verically aligend as required
      </p>
       <v-text-field variant="outlined" v-model="msg">
        <template #append-inner>
        	<v-icon>mdi-plus</v-icon>
        </template>
            <template #prepend-inner>
        	<v-icon>mdi-plus</v-icon>
        </template>
      </v-text-field>

      <a href="https://github.com/vuetifyjs/vuetify/issues/15686" target="_blank">issue 15686</a>
      <v-autocomplete
        v-model="select"
        :items="items"
        label="Select a favorite activity or create a new one"
        multiple
        chips
        variant="solo"
        density="compact"
      ></v-autocomplete>
      <v-combobox
        v-model="select"
        :items="items"
        label="Select a favorite activity or create a new one"
        multiple
        chips
        variant="solo"
        density="compact"
      ></v-combobox>
      <v-select
        v-model="select"
        :items="items"
        label="Select a favorite activity or create a new one"
        multiple
        chips
        variant="solo"
        density="compact"
      ></v-select>
      <a href="https://github.com/vuetifyjs/vuetify/issues/16901" target="_blank">issue 16901</a>
      <v-row>
        <v-col>
      <v-autocomplete :items="['aaa', 'bbb']" density="compact" v-model="aaa" label="aaa"  clearable/>
          </v-col>
        
        <v-col>
      <v-select :items="['aaa', 'bbb']" density="compact" v-model="aaa" label="aaa"  clearable/>
          </v-col>
        
        <v-col>
      <v-text-field density="compact"  v-model="bbb"  label="bbb" />
          </v-col>
        </v-row>
      <v-row>
        <v-col>
      <v-autocomplete variant="underlined" :items="['aaa', 'bbb']" density="compact" v-model="aaa" label="aaa"  clearable/>
          </v-col>
        
        <v-col>
      <v-select variant="underlined"  :items="['aaa', 'bbb']" density="compact" v-model="aaa" label="aaa"  clearable/>
          </v-col>
        
        <v-col>
      <v-text-field variant="underlined"  density="compact"  v-model="bbb"  label="bbb" />
          </v-col>
        </v-row>
      <a href="https://github.com/vuetifyjs/vuetify/issues/15980" target="_blank">issue 15980</a>
      <br/>   
      <br/>   
      <v-row>
        <v-col cols="12" md="4">
      <v-select
            :items="items"
						:model-value="1"
            label="country"
            density="compact"
            variant="outlined"
            multiple
            chips
            clearable
            hide-details
            item-title="name"
            item-value="id"
            data-test="filter.user.countries"
          />
    </v-col>
    <v-col cols="12" md="4">
  	<v-select
          v-model="model"
          :items="Countryitems"
          label="country"
          density="compact"
					variant="outlined"
          multiple
          chips
          clearable
          hide-details
          item-title="name"
          item-value="id"
          data-test="filter.user.countries"
        />
    </v-col>
  </v-row>
    <v-row>
      <v-col
        cols="12"
        md="6"
      >
        <v-textarea
          label="1 line"
          name="input-7-1"
          rows="1"
          prepend-inner-icon="mdi-map-marker"
          append-inner-icon="mdi-map-marker"
          auto-grow
          clearable
        ></v-textarea>
      </v-col>
      <v-col
        cols="12"
        md="6"
      >
        <v-textarea
          label="2 lines"
          solo
          rows="2"
          prepend-inner-icon="mdi-map-marker"
          append-inner-icon="mdi-map-marker"
          clearable
          name="input-7-4"
        ></v-textarea>
      </v-col>
      <v-col
        cols="12"
        md="6"
      >
        <v-textarea
          filled
          label="5 lines"
          prepend-inner-icon="mdi-map-marker"
          append-inner-icon="mdi-map-marker"
          rows="5"
          name="input-7-4"
          clearable
          value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
        ></v-textarea>
      </v-col>
      <v-col
        cols="12"
        md="6"
      >
        <v-textarea
          outlined
          name="input-7-4"
          label="Outlined textarea"
          value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
        ></v-textarea>
      </v-col>
    </v-row>
      
      
      

      
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const options = ref(["op 1", "op 2", "op 3"]) 
const selected = ref(["op 1"])
const aaa = ref()
const bbb = ref('')
const select =ref(['Vuetify', 'Programming']) 
const items = ref([
        'Programming',
        'Design',
        'Vue',
        'Vuetify',
      ])

let model = ref()
  
const Countryitems = [{
  id: 1,
	name: 'USA'
},{
  id: 2,
	name: 'RUSSIA'
}]

const msg = ref('Value')
</script>

fixes #16901

yuwu9145 · 2023-04-19T01:12:02Z

packages/vuetify/src/components/VField/VField.sass

@@ -56,7 +56,11 @@
      @include tools.density('v-input', $input-density) using ($modifier)
        @at-root #{selector.nest(&, $root)}
          --v-input-control-height: #{$field-control-height + $modifier}
-          --v-field-padding-bottom: #{$field-control-padding-bottom + $modifier * .5}
+          $v-field-padding-bottom: ($field-control-padding-bottom + $modifier * .5)


this padding-bottom can be a negative value, however, browser renders negative padding as 0.

This conditional logic is designed to return 0 when calculate outcome is negative, so it won't impact min-height calculation

yuwu9145 · 2023-04-28T12:23:51Z

fixed #17240 but not #15980 yet

yuwu9145 · 2023-04-29T13:19:02Z

packages/vuetify/src/components/VInput/_variables.scss

@@ -7,6 +7,7 @@ $input-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
 $input-control-height: 56px !default;
 $input-font-size: tools.map-deep-get(settings.$typography, 'body-1', 'size') !default;
 $input-font-weight: tools.map-deep-get(settings.$typography, 'body-1', 'weight') !default;
+$input-line-height: 1.625;


this number makes input line-height equal to small chip's height

yuwu9145 · 2023-04-29T13:20:42Z

Now fixes #15686, #16901, #15980

packages/vuetify/src/components/VField/VField.sass

johnleider · 2023-04-30T18:32:39Z

Looks good. Only issue I see atm is that icons are no longer centered:

Production:

This PR:

yuwu9145 · 2023-05-17T10:13:59Z

Full comparison across new changes, v3 and v2 is concluded in the image - open the image and zoom in to see more details
Playground has been updated to include all variants & densities

KaelWD · 2023-05-17T10:33:19Z

Slightly updated playground from #16132:

<template>
  <v-app>
    <v-container fluid>
      <v-row class="justify-start" style="background-color:azure">
        <v-col cols="2">
          <v-checkbox
            v-model="prependIcon"
            label="Prepend Icon"
            density="none"
          />
          <v-checkbox
            v-model="prependInnerIcon"
            label="Prepend Inner Icon"
            density="none"
          />
        </v-col>
        <v-col cols="2">
          <v-checkbox
            v-model="appendIcon"
            label="Append Icon"
            density="none"
          />
          <v-checkbox
            v-model="appendInnerIcon"
            label="Append Inner Icon"
            density="none"
          />
        </v-col>
        <v-col cols="2">
          <v-select
            v-model="variant"
            label="Variant"
            :items="variants"
            density="compact"
          />
        </v-col>
        <v-col cols="2">
          <v-select
            v-model="page"
            label="Category of Field"
            :items="pages"
            density="compact"
          />
        </v-col>
      </v-row>
      <v-row class="flex-wrap" style="margin-top:12px">
        <!-- TEXT FIELDS -->
        <v-col cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-text-field
                :label="showLabel ? 'Text Field Labeled ' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :model-value="showLabel ? 'Text Labeled ' + density + ' Dirty' : 'Text No-label ' + density + ' Dirty'"
                :placeholder="!showLabel ? 'Text No-Label ' + density + ' Dirty' : ''"
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-text-field
                :label="showLabel ? 'Text Field Labeled' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :placeholder="!showLabel ? 'Text No-Label ' + density + ' Clean' : ''"
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- SINGLE-LINE TEXT FIELDS -->
        <v-col v-if="page == 'Text Fields'" cols="2" class="pa-1">
          <v-container v-for="density in densities" class="pa-0">
            <v-text-field
              :label="'Text Field Single Line ' + ' ' + density + ' Dirty'"
              :variant="variant.toLowerCase()"
              :density="density.toLowerCase()"
              :model-value="'Text Single Line ' + density + ' Dirty'"
              clearable
              :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
              :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
              :append-icon="appendIcon ? 'mdi-map-marker' : ''"
              :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              single-line
            />
          </v-container>
          <v-container v-for="density in densities" class="pa-0">
            <v-text-field
              :label="'Text Field Single Line ' + ' ' + density + ' Clean'"
              :variant="variant.toLowerCase()"
              :density="density.toLowerCase()"
              clearable
              :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
              :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
              :append-icon="appendIcon ? 'mdi-map-marker' : ''"
              :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              single-line
            />
          </v-container>
        </v-col>

        <!-- TEXTAREAS -->
        <v-col v-for="showLabel in showLabels" v-if="page == 'Textareas'" cols="2" class="pa-1">
          <v-container v-for="density in densities" class="pa-0">
            <VTextarea
              :label="showLabel ? 'Textarea Labeled ' + ' ' + density + ' Dirty' : ''"
              :variant="variant.toLowerCase()"
              :density="density.toLowerCase()"
              :model-value="showLabel ? 'Text Labeled ' + density + ' Dirty' : 'Text No-label ' + density + ' Dirty'"
              :placeholder="!showLabel ? 'Text No-Label ' + density + ' Dirty' : ''"
              clearable
              auto-grow
              rows="1"
              :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
              :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
              :append-icon="appendIcon ? 'mdi-map-marker' : ''"
              :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
            />
          </v-container>
          <v-container v-for="density in densities" class="pa-0">
            <v-textarea
              :label="showLabel ? 'Textarea Labeled' + ' ' + density + ' Clean' : ''"
              :variant="variant.toLowerCase()"
              :density="density.toLowerCase()"
              :placeholder="!showLabel ? 'Text No-Label ' + density + ' Clean' : ''"
              clearable
              auto-grow
              rows="1"
              :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
              :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
              :append-icon="appendIcon ? 'mdi-map-marker' : ''"
              :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
            />
          </v-container>
        </v-col>

        <!-- SELECT WITH CHIPS -->
        <v-col v-if="page == 'Selects'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-select
                v-model="selected"
                :label="showLabel ? 'Select Chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-select
                v-model="unselected"
                :label="showLabel ? 'Select Chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- SELECT WITHOUT CHIPS -->
        <v-col v-if="page == 'Selects'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-select
                v-model="selected"
                :label="showLabel ? 'Select No-chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-select
                v-model="unselected"
                :label="showLabel ? 'Select No-chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- COMBOBOX WITH CHIPS -->
        <v-col v-if="page == 'Combos'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-combobox
                v-model="selected"
                :label="showLabel ? 'Combobox Chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-combobox
                v-model="unselected"
                :label="showLabel ? 'Combobox Chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- COMBOBOX WITHOUT CHIPS -->
        <v-col v-if="page == 'Combos'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-combobox
                v-model="selected"
                :label="showLabel ? 'Combobox No-chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-combobox
                v-model="unselected"
                :label="showLabel ? 'Combobox No-chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- AUTOCOMPLETE WITH CHIPS -->
        <v-col v-if="page == 'Combos'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-autocomplete
                v-model="selected"
                :label="showLabel ? 'Autocomplete Chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-autocomplete
                v-model="unselected"
                :label="showLabel ? 'Autocomplete Chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                chips
                closable-chips
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- AUTOCOMPLETE WITHOUT CHIPS -->
        <v-col v-if="page == 'Combos'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-autocomplete
                v-model="selected"
                :label="showLabel ? 'Autocomplete No-chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-autocomplete
                v-model="unselected"
                :label="showLabel ? 'Autocomplete No-chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                :items="items"
                multiple
                clearable
                :prepend-icon="prependIcon ? 'mdi-map-marker' : ''"
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- FILE INPUT WITH CHIPS -->
        <v-col v-if="page == 'Text Fields'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-file-input
                :label="showLabel ? 'File Input Chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                chips
                closable-chips
                multiple
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-file-input
                :label="showLabel ? 'File Input Chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                chips
                closable-chips
                multiple
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>

        <!-- FILE INPUT WITHOUT CHIPS -->
        <v-col v-if="page == 'Text Fields'" cols="2" class="pa-1">
          <v-container v-for="showLabel in showLabels" class="pa-0">
            <v-container v-for="density in densities" class="pa-0">
              <v-file-input
                :label="showLabel ? 'File Input No-chips' + ' ' + density + ' Dirty' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                multiple
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
            <v-container v-for="density in densities" class="pa-0">
              <v-file-input
                :label="showLabel ? 'File Input No-chips' + ' ' + density + ' Clean' : ''"
                :variant="variant.toLowerCase()"
                :density="density.toLowerCase()"
                multiple
                :prepend-inner-icon="prependInnerIcon ? 'mdi-map-marker' : ''"
                :append-icon="appendIcon ? 'mdi-map-marker' : ''"
                :append-inner-icon="appendInnerIcon ? 'mdi-map-marker' : ''"
              />
            </v-container>
          </v-container>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {

    },
    data: () => {
      return {
        showLabels: [
          true, false,
        ],
        prependIcon: false,
        prependInnerIcon: false,
        appendIcon: false,
        appendInnerIcon: false,
        pages: [
          'Text Fields',
          'Selects',
          'Combos',
          'Textareas',
        ],
        page: 'Text Fields',
        variants: [
          'Filled',
          'Outlined',
          'Solo',
          'Plain',
          'Underlined',
        ],
        variant: 'Filled',
        usesChips: [
          true, false,
        ],
        items: [
          'lorem',
          'ipsum dolor sit amet',
          'consectetur',
          'adipiscing elit',
          'ut enim ad minim veniam',
          'quis nostrud',
          'exercitation ullamco laboris'],
        selected: [
          'lorem',
        ],
        unselected: [],
        densities: [
          'Compact',
          'Comfortable',
          'Default',
        ],
        labeled: [
          'Labeled',
          'Unlabeled',
        ],
        isFieldClean: [
          true, false,
        ],
      }
    },
  }
</script>

KaelWD · 2023-05-17T10:36:58Z

Looks pretty good overall, the only thing still missing I think is textareas

…in textarea

yuwu9145 · 2023-05-17T12:50:50Z

…Affix

packages/vuetify/src/components/VFileInput/VFileInput.sass

yuwu9145 · 2023-05-18T07:31:12Z

@johnleider @KaelWD

Issue of prepend/append misaligned with inner icons is resolved
I found few more regressions while doing it and fixed known regressions. I am going to start try to write end to end test cases against these UI changes. However, in the meantime, it would be good if you could help to manually test as much as you can

Edit: Better to put more testing focus on plain/underlined variants

johnleider · 2023-05-18T14:59:32Z

The only component still experiencing the jump is v-file-input https://vuetifyjs.com/en/components/file-inputs/#selection

yuwu9145 · 2023-05-19T01:29:03Z

The only component still experiencing the jump is v-file-input https://vuetifyjs.com/en/components/file-inputs/#selection

In terms of height calculation, selection slot now behaves the same as chips prop by default

Because having chips in this slot is the typical case (I think)

fix(VField): v-field__input min-height should also consider line-height

e9e73d1

fixes #16901

yuwu9145 marked this pull request as draft April 18, 2023 12:14

chore: prevent padding to be negative

8a4cc8c

yuwu9145 commented Apr 19, 2023

View reviewed changes

yuwu9145 marked this pull request as ready for review April 19, 2023 01:16

yuwu9145 requested review from KaelWD and johnleider April 19, 2023 01:22

yuwu9145 self-assigned this Apr 19, 2023

johnleider added the T: bug Functionality that does not work as intended/expected label Apr 19, 2023

yuwu9145 mentioned this pull request Apr 28, 2023

[Bug Report][3.2.1] Compact autocomplete component height shrinks when empty #17240

Closed

yuwu9145 marked this pull request as draft April 28, 2023 12:23

yuwu9145 added 6 commits April 29, 2023 15:29

make input line-height match small chip's height

9181d02

remove testing code

ca78f0d

chore: tweak

c15926f

keep fixing issue #15686

023079d

tweak

16847bb

Merge branch 'master' into fix-16901

6c562c0

yuwu9145 commented Apr 29, 2023

View reviewed changes

yuwu9145 added 3 commits April 30, 2023 21:22

tweak

2780016

chore: fix failed cy test

4232179

chore: fix failed cy test

10b51a4

yuwu9145 marked this pull request as ready for review April 30, 2023 11:54

KaelWD reviewed Apr 30, 2023

View reviewed changes

packages/vuetify/src/components/VField/VField.sass Outdated Show resolved Hide resolved

johnleider added this to the v3.2.x milestone Apr 30, 2023

johnleider added the C: VField label Apr 30, 2023

johnleider force-pushed the fix-16901 branch from 283f33f to 10b51a4 Compare May 1, 2023 01:06

address review feedback

c33b2e8

yuwu9145 and others added 3 commits May 17, 2023 17:59

Only underlined needs inline inner icons

20c28e5

fix broken selector

f40a86e

fix single-line plain/underlined height

4f53244

label & inner icons inline for plain variant

011ba8a

yuwu9145 added 2 commits May 17, 2023 22:15

introduce centerAffix prop to VField to make affix display correctly …

2f555a3

…in textarea

Add api description for centerAffix

dc347a8

yuwu9145 added 2 commits May 17, 2023 22:58

remove comma in api description

72a2e43

remove redundant label position logic which can be replaced by center…

18d27a7

…Affix

KaelWD reviewed May 17, 2023

View reviewed changes

packages/vuetify/src/components/VFileInput/VFileInput.sass Outdated Show resolved Hide resolved

yuwu9145 and others added 3 commits May 17, 2023 23:21

remove redundant label position logic in VFileInput

6a44e20

fix underlined floating label position

03d76c1

account for textarea auto-grow

42bb52d

johnleider mentioned this pull request May 17, 2023

fix(VAutocomplete): improve ux #16579

Draft

Use centerAffix in VInput to align prepend/append with inner icons

ad34586

label top consider v-field-padding-top for underlined and plain

90a8d40

Make selection slot behaves the same as chips prop by default

dc97708

Add selection slot class

98e5464

KaelWD changed the title ~~fix(VField): v-field__input min-height should also consider line-height~~ fix(VField): match chips line-height, center prepend/append May 19, 2023

KaelWD merged commit 9b88014 into dev May 19, 2023
18 checks passed

KaelWD deleted the fix-16901 branch May 19, 2023 10:57

yurks mentioned this pull request Jun 21, 2023

[Bug Report][3.3.5] fields are broken #17668

Closed

KaelWD mentioned this pull request Jul 14, 2023

[Bug Report][3.1.11] VTextField underlined comfortable and compact drop below VSelect based components #17007

Closed

yuwu9145 mentioned this pull request Aug 19, 2023

fix(VField): correct height for compact/comfortable densities #18025

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(VField): match chips line-height, center prepend/append #17175

fix(VField): match chips line-height, center prepend/append #17175

yuwu9145 commented Apr 18, 2023 •

edited

yuwu9145 Apr 19, 2023 •

edited

yuwu9145 commented Apr 28, 2023

yuwu9145 Apr 29, 2023 •

edited

yuwu9145 commented Apr 29, 2023

johnleider commented Apr 30, 2023

yuwu9145 commented May 17, 2023 •

edited

KaelWD commented May 17, 2023

KaelWD commented May 17, 2023

yuwu9145 commented May 17, 2023

yuwu9145 commented May 18, 2023 •

edited

johnleider commented May 18, 2023

yuwu9145 commented May 19, 2023 •

edited

fix(VField): match chips line-height, center prepend/append #17175

fix(VField): match chips line-height, center prepend/append #17175

Conversation

yuwu9145 commented Apr 18, 2023 • edited

Description

Cause:

Solution:

Markup:

yuwu9145 Apr 19, 2023 • edited

Choose a reason for hiding this comment

yuwu9145 commented Apr 28, 2023

yuwu9145 Apr 29, 2023 • edited

Choose a reason for hiding this comment

yuwu9145 commented Apr 29, 2023

johnleider commented Apr 30, 2023

yuwu9145 commented May 17, 2023 • edited

KaelWD commented May 17, 2023

KaelWD commented May 17, 2023

yuwu9145 commented May 17, 2023

yuwu9145 commented May 18, 2023 • edited

johnleider commented May 18, 2023

yuwu9145 commented May 19, 2023 • edited

yuwu9145 commented Apr 18, 2023 •

edited

yuwu9145 Apr 19, 2023 •

edited

yuwu9145 Apr 29, 2023 •

edited

yuwu9145 commented May 17, 2023 •

edited

yuwu9145 commented May 18, 2023 •

edited

yuwu9145 commented May 19, 2023 •

edited