feat(VChip): add base-color prop (#20702)

resolves #19678
vuetifyjs · Dec 2, 2024 · 1e099f2 · 1e099f2
1 parent d25b988
commit 1e099f2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/api-generator/src/locale/en/VChipGroup.json b/packages/api-generator/src/locale/en/VChipGroup.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "baseColor": "Sets the color of component when not focused. Recommended with `color` or `filter` to properly highlight selected items.",
     "centerActive": "Forces the selected chip to be centered.",
     "column": "Remove horizontal pagination and wrap items as needed.",
     "filter": "Applies an checkmark icon in front of every chip for using it like a filter.",

diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -56,6 +56,7 @@ export const makeVChipProps = propsFactory({
   activeClass: String,
   appendAvatar: String,
   appendIcon: IconValue,
+  baseColor: String,
   closable: Boolean,
   closeIcon: {
     type: IconValue,
@@ -122,7 +123,6 @@ export const VChip = genericComponent<VChipSlots>()({
   setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
     const { borderClasses } = useBorder(props)
-    const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
     const { elevationClasses } = useElevation(props)
     const { roundedClasses } = useRounded(props)
@@ -150,6 +150,15 @@ export const VChip = genericComponent<VChipSlots>()({
       },
     }))
 
+    const variantProps = computed(() => {
+      const showColor = !group || group.isSelected.value
+      return ({
+        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        variant: props.variant,
+      })
+    })
+    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)
+
     function onClick (e: MouseEvent) {
       emit('click', e)
 
@@ -174,7 +183,6 @@ export const VChip = genericComponent<VChipSlots>()({
       const hasFilter = !!(slots.filter || props.filter) && group
       const hasPrependMedia = !!(props.prependIcon || props.prependAvatar)
       const hasPrepend = !!(hasPrependMedia || slots.prepend)
-      const hasColor = !group || group.isSelected.value
 
       return isActive.value && (
         <Tag
@@ -189,7 +197,7 @@ export const VChip = genericComponent<VChipSlots>()({
             },
             themeClasses.value,
             borderClasses.value,
-            hasColor ? colorClasses.value : undefined,
+            colorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             roundedClasses.value,
@@ -199,7 +207,7 @@ export const VChip = genericComponent<VChipSlots>()({
             props.class,
           ]}
           style={[
-            hasColor ? colorStyles.value : undefined,
+            colorStyles.value,
             props.style,
           ]}
           disabled={ props.disabled || undefined }

diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
@@ -23,6 +23,7 @@ import type { GenericProps } from '@/util'
 export const VChipGroupSymbol = Symbol.for('vuetify:v-chip-group')
 
 export const makeVChipGroupProps = propsFactory({
+  baseColor: String,
   column: Boolean,
   filter: Boolean,
   valueComparator: {
@@ -69,6 +70,7 @@ export const VChipGroup = genericComponent<new <T>(
 
     provideDefaults({
       VChip: {
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         disabled: toRef(props, 'disabled'),
         filter: toRef(props, 'filter'),