fix(VTextField): hide v-input__details for underlined variant

[yuwu9145]

fixes #18671

Probably it's similar to comment regarding where is the right place for this logic.

VInput by default doesn't have padding for hint, while VTextField is the one that defines $text-field-details-padding-inline. So whether to show/hide hint should be moved to VTextField and keep VInput intact.

Description

Markup:

<template>
  <v-form>
    <v-container>
      <v-row>
        <v-col cols="12" sm="6">
          <v-text-field
            label="Your product or service"
            model-value="Grocery delivery"
            hint="For example, flowers or used cars"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your landing page"
            hint="www.example.com/page"
            persistent-hint
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your product or service"
            model-value="Grocery delivery"
            hint="For example, flowers or used cars"
            variant="solo"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your landing page"
            hint="www.example.com/page"
            persistent-hint
            variant="solo"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your product or service"
            model-value="Grocery delivery"
            hint="For example, flowers or used cars"
            variant="outlined"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your landing page"
            hint="www.example.com/page"
            persistent-hint
            variant="outlined"
          ></v-text-field>
        </v-col>
        <v-col cols="12" sm="6">
          <v-text-field
            label="Your product or service"
            model-value="Grocery delivery"
            hint="For example, flowers or used cars"
            variant="underlined"
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-text-field
            label="Your landing page"
            hint="www.example.com/page"
            persistent-hint
            variant="underlined"
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

[tawago]

This is not just a problem of v-text-field tho. the solution should probably be on the VInput side? please see #18671 (comment)

[yuwu9145]

This is not just a problem of v-text-field tho. the solution should probably be on the VInput side? please see #18671 (comment)

No, select components are all using VTextField under the hood

[johnleider]

I'm unable to reproduce this bug on master. Is this a production build CSS ordering issue?

[yuwu9145]

Yes, it does appear in playground and the problematic css is there

But, on master .v-input--plain-underlined .v-input__details { padding: 0} wins the priority so it doesn't show up