fix(VChipGroup): supports color props

[lzl0304]

Description

fixes #19678

Markup:

<template>
  <v-row justify="center">
    <v-col cols="12" sm="7" md="6" lg="5">
      <v-sheet elevation="10" rounded="xl">
        <div class="pa-4">
          <!--These chips should be red -->
          <v-chip-group color="red" selected-class="text-primary" column>
            <v-chip v-for="tag in 3" :key="tag">
              chip {{ tag }}
            </v-chip>
          </v-chip-group>

          <!--Works without chip-group -->
          <v-chip color="red"> hellooo </v-chip>
        </div>
      </v-sheet>
    </v-col>
  </v-row>
</template>

[Co-7]

Thanks for the PR on my problem, just one question, does the change above also fix the application of a color to the VChip with the theme as with the code below ?

import { createVuetify } from 'vuetify'
import { VChip } from 'vuetify/components/VChip'
import { VChipGroup } from 'vuetify/components/VChipGroup'

export default createVuetify({
  defaults: {
    VChip: {
      class: "chip", // Works
      color: "primary" // Works
    },
    VChipGroup: {
      class: "chip_group", // Works
      VChip: {
        class: "chip_child", // Works
        color: "primary" // Not Working
      },
    }
  },
})

In the example above, the VChip has the primary color applied, but only if it's not a child of a VChipGroup. It's more or less the same problem as my issue, but I don't know if there's another place to modify it or not.

[lzl0304]

Thanks for the PR on my problem, just one question, does the change above also fix the application of a color to the VChip with the theme as with the code below ?

import { createVuetify } from 'vuetify'
import { VChip } from 'vuetify/components/VChip'
import { VChipGroup } from 'vuetify/components/VChipGroup'

export default createVuetify({
  defaults: {
    VChip: {
      class: "chip", // Works
      color: "primary" // Works
    },
    VChipGroup: {
      class: "chip_group", // Works
      VChip: {
        class: "chip_child", // Works
        color: "primary" // Not Working
      },
    }
  },
})

In the example above, the VChip has the primary color applied, but only if it's not a child of a VChipGroup. It's more or less the same problem as my issue, but I don't know if there's another place to modify it or not.

It's effective, I'm not sure if it's the effect you want.

[Co-7]

I'm not sure either, but at this point, if VChipsGroup's props color is going to change the color of the children's VChips then I should do more like this for the theme :

import { createVuetify } from 'vuetify'
import { VChip } from 'vuetify/components/VChip'
import { VChipGroup } from 'vuetify/components/VChipGroup'

export default createVuetify({
  defaults: {
    VChip: {
      class: "chip",
      color: "primary"
    },
    VChipGroup: {
      class: "chip_group",
      color: "primary"
    }
  },
})

If you apply this in the code, the VChips remain red as usual and if you remove the color="red" property from the VChipsGroup the VChips take on the primary color ?

[johnleider]

Color is applied to the active item in groups. I don't think that this is a bug.