feat(VBtnGroup/VBottomNavigation): add baseColor prop (#19088)

fixes #17042
vuetifyjs · Apr 8, 2024 · 4e84c67 · 4e84c67
1 parent f1735a5
commit 4e84c67
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
@@ -27,6 +27,7 @@ import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util
 import type { GenericProps } from '@/util'
 
 export const makeVBottomNavigationProps = propsFactory({
+  baseColor: String,
   bgColor: String,
   color: String,
   grow: Boolean,
@@ -100,6 +101,7 @@ export const VBottomNavigation = genericComponent<new <T>(
 
     provideDefaults({
       VBtn: {
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         density: toRef(props, 'density'),
         stacked: computed(() => props.mode !== 'horizontal'),

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -49,6 +49,7 @@ export const makeVBtnProps = propsFactory({
     type: Boolean,
     default: undefined,
   },
+  baseColor: String,
   symbol: {
     type: null,
     default: VBtnToggleSymbol,
@@ -100,7 +101,6 @@ export const VBtn = genericComponent<VBtnSlots>()({
   setup (props, { attrs, slots }) {
     const { themeClasses } = provideTheme(props)
     const { borderClasses } = useBorder(props)
-    const { colorClasses, colorStyles, variantClasses } = useVariant(props)
     const { densityClasses } = useDensity(props)
     const { dimensionStyles } = useDimension(props)
     const { elevationClasses } = useElevation(props)
@@ -123,6 +123,19 @@ export const VBtn = genericComponent<VBtnSlots>()({
 
       return group?.isSelected.value
     })
+
+    const variantProps = computed(() => {
+      const showColor = (
+        (group?.isSelected.value && (!link.isLink.value || link.isActive?.value)) ||
+        (!group || link.isActive?.value)
+      )
+      return ({
+        color: showColor ? props.color ?? props.baseColor : props.baseColor,
+        variant: props.variant,
+      })
+    })
+    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)
+
     const isDisabled = computed(() => group?.disabled.value || props.disabled)
     const isElevated = computed(() => {
       return props.variant === 'elevated' && !(props.disabled || props.flat || props.border)
@@ -158,10 +171,6 @@ export const VBtn = genericComponent<VBtnSlots>()({
       const hasPrepend = !!(props.prependIcon || slots.prepend)
       const hasAppend = !!(props.appendIcon || slots.append)
       const hasIcon = !!(props.icon && props.icon !== true)
-      const hasColor = (
-        (group?.isSelected.value && (!link.isLink.value || link.isActive?.value)) ||
-        (!group || link.isActive?.value)
-      )
 
       return (
         <Tag
@@ -182,7 +191,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
             },
             themeClasses.value,
             borderClasses.value,
-            hasColor ? colorClasses.value : undefined,
+            colorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             loaderClasses.value,
@@ -193,7 +202,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
             props.class,
           ]}
           style={[
-            hasColor ? colorStyles.value : undefined,
+            colorStyles.value,
             dimensionStyles.value,
             locationStyles.value,
             sizeStyles.value,

diff --git a/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx b/packages/vuetify/src/components/VBtnGroup/VBtnGroup.tsx
@@ -17,6 +17,7 @@ import { toRef } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVBtnGroupProps = propsFactory({
+  baseColor: String,
   divided: Boolean,
 
   ...makeBorderProps(),
@@ -44,6 +45,7 @@ export const VBtnGroup = genericComponent()({
     provideDefaults({
       VBtn: {
         height: 'auto',
+        baseColor: toRef(props, 'baseColor'),
         color: toRef(props, 'color'),
         density: toRef(props, 'density'),
         flat: true,