feat(VField/VInput): add new props icon-color and glow

[johnleider]

resolves #17763

TODO: docs

Description

Markup:

<template>
  <v-app>
    <v-container>
      <v-input
        :focused="isFocused"
        append-icon="$vuetify"
        color="primary"
        prepend-icon="$vuetify"
        icon-color
      >
        <v-field
          :active="isFocused"
          :focused="isFocused"
          append-inner-icon="$vuetify"
          color="primary"
          label="Custom implementation"
          prepend-inner-icon="$vuetify"
          glow
          icon-color
          v-click-outside="() => isFocused = false"
          @click="isFocused = true"
        >
          <template #default="{ props: fieldProps }">
            <div v-bind="fieldProps" />
          </template>
        </v-field>
      </v-input>

      <v-text-field
        :glow="glow"
        append-icon="$vuetify"
        append-inner-icon="$vuetify"
        color="primary"
        label="Textfield"
        prepend-icon="$vuetify"
        prepend-inner-icon="$vuetify"
      />

      <v-select
        :glow="glow"
        append-icon="$vuetify"
        append-inner-icon="$vuetify"
        color="primary"
        label="Select"
        prepend-icon="$vuetify"
        prepend-inner-icon="$vuetify"

        icon-color
      />
      <v-file-input
        :glow="glow"
        :icon-color="iconColor"
        append-icon="$vuetify"
        append-inner-icon="$vuetify"
        color="primary"
        label="File"
        prepend-icon="$vuetify"
        prepend-inner-icon="$vuetify"
      />
      <v-date-input
        :glow="glow"
        :icon-color="iconColor"
        append-icon="$vuetify"
        append-inner-icon="$vuetify"
        color="primary"
        label="Date"
        prepend-icon="$vuetify"
        prepend-inner-icon="$vuetify"
      />
      <v-textarea
        :glow="glow"
        :icon-color="iconColor"
        append-icon="$vuetify"
        append-inner-icon="$vuetify"
        color="primary"
        label="Textarea"
        prepend-icon="$vuetify"
        prepend-inner-icon="$vuetify"
      />

      <v-btn :text="`iconColor ${iconColor}`" @click="iconColor = !iconColor" />
      <v-btn :text="`glow ${glow}`" @click="glow = !glow" />
    </v-container>
  </v-app>
</template>

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

  const glow = ref(false)
  const iconColor = ref(true)
  const isFocused = ref(false)
</script>

[MatthewAry]

When I think of the prop 'bloom' I think of glow. Why is this getting called bloom?

[johnleider]

When I think of the prop 'bloom' I think of glow. Why is this getting called bloom?

Changed prop name to glow.

[KaelWD]

#17763 wanted outer icons too (VInput not just VField)

[MatthewAry]

When I think of the prop 'bloom' I think of glow. Why is this getting called bloom?

⬇️

Changed prop name to glow.

Oh man, I didn't mean that the name needed to be changed. They're synonyms. I was just trying to understand the reasoning. The names 'bloom' or 'glow' suggest a visual effect which is not happening here.

This is just a way for a color to be passed down to child InputIcon components via an optional, boolean prop. I'm assuming that this prop is added because you're trying to avoid breaking it for users who currently expect the current behavior.

I'm sorry for the confusion.

Wouldn't it be better if the name of the prop was descriptive like color-icon?

[johnleider]

I'm up for a conversation on prop name. @vuetifyjs/core-team

[J-Sek]

I agree neither glow nor bloom really suggest what is going to happen. And I would rather expect icon-color to be static and the name could potentially land in other places as string prop (e.g. in VAlert, VSwitch or VListItem), where it would not depend on the focus state. How about icon-color-match?

[johnleider]

The action only occurs on focus as well, not sure if that should play a role in the naming.

[J-Sek]

BTW. After seeing it in action I wonder if it should aslo drop the opacity. Weird to see that washed-out blue.
(I don't see any mention of opacity in MD3 spec)

[johnleider]

#17763 wanted outer icons too (VInput not just VField)

Are we going to need a field-props property so that they can be configured separately?

[J-Sek]

Are we going to need a field-props property so that they can be configured separately?

We did not in v2. Issue author seems to want to the previous behavior back.

[johnleider]

Pushed changes and updated playground.