[Bug Report][3.3.15] Components | Chip | 'text-color' prop does not work

[Darkavid]

Environment

Vuetify Version: 3.3.15 Vue Version: 3.3.4 Browsers: Chrome 116.0.0.0 OS: Windows 10

Steps to reproduce

1. Add a v-chip component directly or after importing VChip into a Vue template
2. Add text-color to its props and set its value to any valid color value (CSS builtin or hex)
3. Check the rendered component
4. Notice how the prop does not influence the coloring of the text inside the chip at all

Expected Behavior

Setting/changing the value of the text-color prop of the v-chip component should change the color of the text in the component.

Actual Behavior

Setting/changing the value of the text-color prop of the v-chip component does NOT influence the color of the text in the component at all.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

Project setup, other dependencies and version does not matter. Just have look at your very own documentation: https://vuetifyjs.com/en/components/chips/#colored

The related source code clearly shows that the text-color prop was set to white on the last two chip components in your own example but the rendered result does not follow that setting:

I checked the latest 3.4.0-alpha.1 version, the situation did not change.

[egeersoz]

When I run eslint, it warns that text-color props have been removed. Which I hope isn't true because we use them extensively all over our app.

[Darkavid]

I wonder how could three whole weeks pass without a single feedback? 😄 This is a UI library where styling (simply coloring in this case) is a crucial feature which does not work for a very common component.

[cjhudson101]

We have the same issue. The examples for this component on the vuetify site still reference text-color as well... :)

It would be great to get text-color back since the only option right now is some crazy custom styles or using the baked in "color" feature that won't really help us.

[JulianRomana]

Still happening, very much of a burden :/

[KaelWD]

I've updated the examples. How is everyone here using it? What it was doing in the documentation has been superseded by on-* colors in the new theme system.

[cjhudson101]

Hey Kael, I had tried using the on-* colors in the new theme, per our interaction in discord last week. Unfortunately, that changed too many of the text colors in our app. We ended up making a default style for VChip in the vuetify.js file like this.

VChip: { variant: "flat", color: "primary", style: "color: #000000;" },

[egeersoz]

How we use text-color in v2:

// example project.status.color would be "indigo lighten-3" or "blue darken-2"
:text-color="$store.getters.getHelpers.labelTextColorFromVuetifyColor(project.status.color)"

labelTextColorFromVuetifyColor(vuetifyColor: string): string {
    let bgColorHex = this.convertVuetifyColorToHex(vuetifyColor)
    return this.labelTextColor(bgColorHex)
},
labelTextColor(bgColorHex: any): string {
    if (bgColorHex === null) {
      return '#000000'
    } else if (typeof bgColorHex === 'object') {
      return this.pickTextColorBasedOnBackground(bgColorHex.base, '#FFFFFF', '#000000')
    } else {
      return this.pickTextColorBasedOnBackground(bgColorHex, '#FFFFFF', '#000000')
    }
},
convertVuetifyColorToHex(vuetifyColor: string) {
    let baseColor: string
    let modifier: string
    if (vuetifyColor.includes(' ')) {
      baseColor = vuetifyColor.split(' ')[0]
      modifier = vuetifyColor.split(' ')[1].replace(/-/, '')
      if (baseColor.includes('-')) {
        let baseColorFirstWord = baseColor.split('-')[0]
        let baseColorSecondWord = baseColor.split('-')[1]
        let baseColorSecondWordCapitalized = baseColorSecondWord.charAt(0).toUpperCase() + baseColorSecondWord.slice(1)
        return Object(colors)[`${baseColorFirstWord}${baseColorSecondWordCapitalized}`][modifier]
      } else {
        return Object(colors)[baseColor][modifier]
      }
    } else {
      return Object(colors)[vuetifyColor]
    }
},
pickTextColorBasedOnBackground(bgColor='#e0e0e0', lightColor: string, darkColor: string) {
    var color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
    var r = parseInt(color.substring(0, 2), 16); // hexToR
    var g = parseInt(color.substring(2, 4), 16); // hexToG
    var b = parseInt(color.substring(4, 6), 16); // hexToB
    var uicolors = [r / 255, g / 255, b / 255];
    var c = uicolors.map((col) => {
      if (col <= 0.03928) {
        return col / 12.92;
      }
      return Math.pow((col + 0.055) / 1.055, 2.4);
    });
    var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
    return (L > 0.5) ? darkColor : lightColor;
},

This makes it so that the text color of a v-chip automatically becomes black or white depending on the color of the chip.

[JulianRomana]

Since adding a prop text-color wasn't working, I had to use slots to apply the text color

 <v-chip
    v-for="entity in searchedEntities"
    :key="entity"
    color="tertiary"
    closable
    class="chip bg-tertiary"
    @click:close="clearSearchedEntity(entity)"
  >
  <span class="text-primary-darker">{{ entity }}</span>
  <template #close>
    <v-icon icon="mdi-close" color="primary-darker" />
  </template>
</v-chip>