feat(VExpansionPanels): add more props for customization (#22723)

resolves #21616
closes #12039

Author: J-Sek

packages/api-generator/src/locale/en/VExpansionPanels.json

@@ -2,10 +2,12 @@
   "props": {
     "focusable": "Makes the expansion-panel headers focusable.",
     "flat": "Removes the expansion-panel's elevation and borders.",
+    "gap": "Sets the gap between panels. Hides the divider automatically.",
     "modelValue": "Controls expanded panel(s). Defaults to an empty array when using **multiple** prop. It is recommended to set unique `value` prop for the panels inside, otherwise index is used instead.",
+    "noDivider": "Hides the dividers between adjacent panels.",
     "readonly": "Makes the entire expansion panel read only.",
-    "static": "Remove title size expansion when selected.",
-    "tile": "Removes the border-radius."
+    "rounded": "Applies a border radius to the first and last panel. Since v4.1.0 accepts array of two values to customize inner radius.",
+    "static": "Remove title size expansion when selected."
   },
   "exposed": {
     "prev": "Open the previous panel from the currently selected panel.",

packages/docs/src/data/new-in.json

@@ -185,7 +185,9 @@
   },
   "VExpansionPanels": {
     "props": {
-      "static": "3.4.0"
+      "static": "3.4.0",
+      "gap": "4.1.0",
+      "noDivider": "4.1.0"
     }
   },
   "VField": {

packages/docs/src/examples/v-expansion-panels/prop-rounded-gap.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-container>
+    <v-expansion-panels
+      :rounded="[20, 8]"
+      gap="8"
+      variant="accordion"
+      static
+    >
+      <v-expansion-panel
+        v-for="i in 3"
+        :key="i"
+        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        title="Item"
+      ></v-expansion-panel>
+    </v-expansion-panels>
+  </v-container>
+</template>

packages/docs/src/pages/en/components/expansion-panels.md

@@ -50,6 +50,12 @@ There are four different variants of the expansion-panel. Accordion expansion-pa
 
 <ExamplesExample file="v-expansion-panels/prop-variant" />
 
+#### Gap
+
+Use **gap** to add spacing between accordion panels. Can be combined with `:rounded="[outerRadius, innerRadius]"` to adjust the panels corner rounding.
+
+<ExamplesExample file="v-expansion-panels/prop-rounded-gap" />
+
 #### Disabled
 
 Both the expansion-panel and its content can be disabled using the **disabled** prop.

packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -56,28 +56,28 @@
           border-top-right-radius: inherit
 
         > :not(:first-child):not(.v-expansion-panel--after-active):not(.v-expansion-panel--active)
-          border-top-left-radius: 0
-          border-top-right-radius: 0
+          border-top-left-radius: var(--v-expansion-panels-inner-radius, 0)
+          border-top-right-radius: var(--v-expansion-panels-inner-radius, 0)
 
         > :not(:last-child):not(.v-expansion-panel--before-active):not(.v-expansion-panel--active)
-          border-bottom-left-radius: 0
-          border-bottom-right-radius: 0
+          border-bottom-left-radius: var(--v-expansion-panels-inner-radius, 0)
+          border-bottom-right-radius: var(--v-expansion-panels-inner-radius, 0)
 
       &--variant-accordion
         > :first-child:not(:last-child)
-          border-bottom-left-radius: 0
-          border-bottom-right-radius: 0
+          border-bottom-left-radius: var(--v-expansion-panels-inner-radius, 0)
+          border-bottom-right-radius: var(--v-expansion-panels-inner-radius, 0)
 
         > :last-child:not(:first-child)
-          border-top-left-radius: 0
-          border-top-right-radius: 0
+          border-top-left-radius: var(--v-expansion-panels-inner-radius, 0)
+          border-top-right-radius: var(--v-expansion-panels-inner-radius, 0)
 
           .v-expansion-panel-title--active
             border-bottom-left-radius: initial
             border-bottom-right-radius: initial
 
         > :not(:first-child):not(:last-child)
-          border-radius: 0
+          border-radius: var(--v-expansion-panels-inner-radius, 0)
 
     &--variant-accordion
       .v-expansion-panel-title__overlay
@@ -150,7 +150,8 @@
     justify-content: space-between
 
     @media (prefers-reduced-motion: no-preference)
-      transition: .3s min-height settings.$standard-easing
+      transition: .3s settings.$standard-easing
+      transition-property: min-height, border-radius
 
     @include tools.states('.v-expansion-panel-title__overlay', false)
 
@@ -180,6 +181,10 @@
 
   // Variants
   .v-expansion-panels--variant-accordion
+    &.v-expansion-panels--no-divider
+      > .v-expansion-panel::after
+        opacity: 0
+
     > .v-expansion-panel
       margin-top: 0
 

packages/vuetify/src/components/VExpansionPanel/VExpansionPanels.tsx

@@ -9,13 +9,13 @@ import { makeVExpansionPanelProps } from './VExpansionPanel'
 import { makeComponentProps } from '@/composables/component'
 import { provideDefaults } from '@/composables/defaults'
 import { makeGroupProps, useGroup } from '@/composables/group'
-import { makeRoundedProps, useRounded } from '@/composables/rounded'
+import { useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
 import { toRef } from 'vue'
-import { genericComponent, pick, propsFactory, useRender } from '@/util'
+import { convertToUnit, genericComponent, pick, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -36,6 +36,9 @@ export type VExpansionPanelSlots = {
 
 export const makeVExpansionPanelsProps = propsFactory({
   flat: Boolean,
+  gap: [String, Number],
+  noDivider: Boolean,
+  rounded: [Boolean, Number, String, Array] as PropType<boolean | number | string | (number | string)[]>,
 
   ...makeGroupProps(),
   ...pick(makeVExpansionPanelProps(), [
@@ -50,8 +53,8 @@ export const makeVExpansionPanelsProps = propsFactory({
     'readonly',
     'ripple',
     'static',
+    'tile',
   ]),
-  ...makeRoundedProps(),
   ...makeThemeProps(),
   ...makeComponentProps(),
   ...makeTagProps(),
@@ -82,7 +85,10 @@ export const VExpansionPanels = genericComponent<new <TModel>(
     const { next, prev } = useGroup(props, VExpansionPanelSymbol)
 
     const { themeClasses } = provideTheme(props)
-    const { roundedClasses, roundedStyles } = useRounded(props)
+
+    const outerRounded = toRef(() => Array.isArray(props.rounded) ? props.rounded[0] : props.rounded)
+    const innerRounded = toRef(() => Array.isArray(props.rounded) ? props.rounded[1] : undefined)
+    const { roundedClasses, roundedStyles } = useRounded(outerRounded)
 
     const variantClass = toRef(() => props.variant && `v-expansion-panels--variant-${props.variant}`)
 
@@ -109,6 +115,7 @@ export const VExpansionPanels = genericComponent<new <TModel>(
           {
             'v-expansion-panels--flat': props.flat,
             'v-expansion-panels--tile': props.tile,
+            'v-expansion-panels--no-divider': props.noDivider || !!props.gap,
           },
           themeClasses.value,
           roundedClasses.value,
@@ -117,6 +124,10 @@ export const VExpansionPanels = genericComponent<new <TModel>(
         ]}
         style={[
           roundedStyles.value,
+          {
+            '--v-expansion-panels-inner-radius': convertToUnit(innerRounded.value),
+            gap: props.gap ? convertToUnit(props.gap) : undefined,
+          },
           props.style,
         ]}
       >