fix(VExpansionPanels): add missing focusable prop

vuetifyjs · Feb 22, 2024 · f346f84 · f346f84
1 parent ce127c4
commit f346f84
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass
@@ -126,10 +126,11 @@
   transition: .3s min-height settings.$standard-easing
   width: 100%
   justify-content: space-between
-  @include tools.states('.v-expansion-panel-title__overlay', true)
 
-  &--active::before
-    opacity: 0.12
+  @include tools.states('.v-expansion-panel-title__overlay', false)
+
+  &--focusable.v-expansion-panel-title--active
+    @include tools.active-states('.v-expansion-panel-title__overlay')
 
 .v-expansion-panel-title__overlay
   @include tools.absolute()

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -42,6 +42,7 @@ export const makeVExpansionPanelTitleProps = propsFactory({
     default: '$collapse',
   },
   hideActions: Boolean,
+  focusable: Boolean,
   static: Boolean,
   ripple: {
     type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,
@@ -80,6 +81,7 @@ export const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>(
           'v-expansion-panel-title',
           {
             'v-expansion-panel-title--active': expansionPanel.isSelected.value,
+            'v-expansion-panel-title--focusable': props.focusable,
             'v-expansion-panel-title--static': props.static,
           },
           backgroundColorClasses.value,

diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx
@@ -25,6 +25,7 @@ type Variant = typeof allowedVariants[number]
 export const makeVExpansionPanelsProps = propsFactory({
   color: String,
   flat: Boolean,
+  focusable: Boolean,
   static: Boolean,
   tile: Boolean,
   variant: {
@@ -62,6 +63,7 @@ export const VExpansionPanels = genericComponent()({
         readonly: toRef(props, 'readonly'),
       },
       VExpansionPanelTitle: {
+        focusable: toRef(props, 'focusable'),
         static: toRef(props, 'static'),
       },
     })