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

resolves #17763

Co-authored-by: Kael <[email protected]>

Author: johnleider

packages/api-generator/src/locale/en/VField.json

@@ -6,8 +6,10 @@
     "clearIcon": "The icon used when the **clearable** prop is set to true.",
     "dirty": "Manually apply the dirty state styling.",
     "disabled": "Removes the ability to click or target the input.",
+    "glow": "Makes prepend/append icons full opacity when the field is focused.",
     "error": "Puts the input in a manual error state.",
     "flat": "Removes box shadow when using a variant with elevation.",
+    "iconColor": "Sets the color of the prepend/append icons.",
     "id": "Sets the DOM id on the component.",
     "persistentClear": "Always show the clearable icon when the input is dirty (By default it only shows on hover).",
     "prependInnerIcon": "Creates a [v-icon](/api/v-icon/) component in the **prepend-inner** slot.",

packages/api-generator/src/locale/en/VInput.json

@@ -1,13 +1,16 @@
 {
   "props": {
     "backgroundColor": "Changes the background-color of the input.",
+    "baseColor": "Sets the color of the input when it is not focused.",
     "centerAffix": "Vertically align **appendInner**, **prependInner**, **clearIcon** and **label** in the center.",
     "direction": "Changes the direction of the input.",
     "hideDetails": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display.",
     "hideSpinButtons": "Hides spin buttons on the input when type is set to `number`.",
     "dense": "Reduces the input height.",
+    "glow": "Makes prepend/append icons full opacity when the input is focused.",
     "height": "Sets the height of the input.",
     "hint": "Displays hint text below the input when focused. Force this always open with the [persistent-hint](#props-persistent-hint) property.",
+    "iconColor": "Sets the color of the prepend/append icons.",
     "id": "Sets the DOM id on the component.",
     "loading": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
     "persistentHint": "Forces [hint](#props-hint) to always be visible.",

packages/docs/src/data/new-in.json

@@ -14,6 +14,18 @@
       "text": "3.2.0"
     }
   },
+  "VField": {
+    "props": {
+      "iconColor": "3.8.0",
+      "glow": "3.8.0"
+    }
+  },
+  "VInput": {
+    "props": {
+      "iconColor": "3.8.0",
+      "glow": "3.8.0"
+    }
+  },
   "VListItem": {
     "props": {
       "baseColor": "3.3.0"

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

@@ -213,7 +213,8 @@
       opacity: var(--v-medium-emphasis-opacity)
 
     .v-field--disabled &,
-    .v-field--error &
+    .v-field--error &,
+    .v-field--glow.v-field--focused &
       > .v-icon
         opacity: 1
 

packages/vuetify/src/components/VField/VField.tsx

@@ -70,8 +70,10 @@ export const makeVFieldProps = propsFactory({
     type: Boolean,
     default: null,
   },
+  glow: Boolean,
   error: Boolean,
   flat: Boolean,
+  iconColor: [Boolean, String],
   label: String,
   persistentClear: Boolean,
   prependInnerIcon: IconValue,
@@ -145,13 +147,19 @@ export const VField = genericComponent<new <T>(
     const floatingLabelRef = ref<VFieldLabel>()
     const controlRef = ref<HTMLElement>()
     const isPlainOrUnderlined = computed(() => ['plain', 'underlined'].includes(props.variant))
-
-    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
-    const { textColorClasses, textColorStyles } = useTextColor(computed(() => {
+    const color = computed(() => {
       return props.error || props.disabled ? undefined
         : isActive.value && isFocused.value ? props.color
         : props.baseColor
-    }))
+    })
+    const iconColor = computed(() => {
+      if (!props.iconColor) return undefined
+
+      return props.iconColor === true ? color.value : props.iconColor
+    })
+
+    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'bgColor'))
+    const { textColorClasses, textColorStyles } = useTextColor(color)
 
     watch(isActive, val => {
       if (hasFloatingLabel.value) {
@@ -235,6 +243,7 @@ export const VField = genericComponent<new <T>(
               'v-field--disabled': props.disabled,
               'v-field--dirty': props.dirty,
               'v-field--error': props.error,
+              'v-field--glow': props.glow,
               'v-field--flat': props.flat,
               'v-field--has-background': !!props.bgColor,
               'v-field--persistent-clear': props.persistentClear,
@@ -274,6 +283,7 @@ export const VField = genericComponent<new <T>(
                 <InputIcon
                   key="prepend-icon"
                   name="prependInner"
+                  color={ iconColor.value }
                 />
               )}
 
@@ -359,6 +369,7 @@ export const VField = genericComponent<new <T>(
                 <InputIcon
                   key="append-icon"
                   name="appendInner"
+                  color={ iconColor.value }
                 />
               )}
             </div>

packages/vuetify/src/components/VInput/InputIcon.tsx

@@ -26,7 +26,7 @@ type Listeners<T extends {}, U = keyof T> = U extends `onClick:${infer V extends
 export function useInputIcon<T extends {}, K extends names = Listeners<T>> (props: T & InputIconProps<K>) {
   const { t } = useLocale()
 
-  function InputIcon ({ name }: { name: Extract<names, K> }) {
+  function InputIcon ({ name, color }: { name: Extract<names, K>, color?: string }) {
     const localeKey = {
       prepend: 'prependAction',
       prependInner: 'prependAction',
@@ -54,6 +54,7 @@ export function useInputIcon<T extends {}, K extends names = Listeners<T>> (prop
         aria-label={ label }
         onClick={ listener }
         onKeydown={ onKeydown }
+        color={ color }
       />
     )
   }

packages/vuetify/src/components/VInput/VInput.sass

@@ -61,7 +61,8 @@
       opacity: var(--v-medium-emphasis-opacity)
 
     .v-input--disabled &,
-    .v-input--error &
+    .v-input--error &,
+    .v-input--glow.v-input--focused &
       > .v-icon,
       .v-messages
         opacity: 1

packages/vuetify/src/components/VInput/VInput.tsx

@@ -40,10 +40,14 @@ export interface VInputSlot {
 export const makeVInputProps = propsFactory({
   id: String,
   appendIcon: IconValue,
+  baseColor: String,
   centerAffix: {
     type: Boolean,
     default: true,
   },
+  color: String,
+  glow: Boolean,
+  iconColor: [Boolean, String],
   prependIcon: IconValue,
   hideDetails: [Boolean, String] as PropType<boolean | 'auto'>,
   hideSpinButtons: Boolean,
@@ -137,6 +141,18 @@ export const VInput = genericComponent<new <T>(
       validate,
     }))
 
+    const color = computed(() => {
+      return props.error || props.disabled ? undefined
+        : props.focused ? props.color
+        : props.baseColor
+    })
+
+    const iconColor = computed(() => {
+      if (!props.iconColor) return undefined
+
+      return props.iconColor === true ? color.value : props.iconColor
+    })
+
     const messages = computed(() => {
       if (props.errorMessages?.length || (!isPristine.value && errorMessages.value.length)) {
         return errorMessages.value
@@ -163,6 +179,8 @@ export const VInput = genericComponent<new <T>(
             `v-input--${props.direction}`,
             {
               'v-input--center-affix': props.centerAffix,
+              'v-input--focused': props.focused,
+              'v-input--glow': props.glow,
               'v-input--hide-spin-buttons': props.hideSpinButtons,
             },
             densityClasses.value,
@@ -184,6 +202,7 @@ export const VInput = genericComponent<new <T>(
                 <InputIcon
                   key="prepend-icon"
                   name="prepend"
+                  color={ iconColor.value }
                 />
               )}
             </div>
@@ -201,6 +220,7 @@ export const VInput = genericComponent<new <T>(
                 <InputIcon
                   key="append-icon"
                   name="append"
+                  color={ iconColor.value }
                 />
               )}