fix: migrated to new collapse animations

cagataycivici · cagataycivici · commit 0f0d4216bcfa · 2025-11-25T13:53:01.000+03:00
diff --git a/apps/showcase/doc/message/IconDoc.vue b/apps/showcase/doc/message/IconDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon property and the <i>icon</i> slots are available to customize the icon of the message.</p>
     </DocSectionText>
-    <div class="card flex justify-center gap-4">
+    <div class="card flex justify-center items-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
             <template #icon>
diff --git a/packages/primevue/src/accordioncontent/AccordionContent.d.ts b/packages/primevue/src/accordioncontent/AccordionContent.d.ts
@@ -57,6 +57,10 @@ export interface AccordionContentPassThroughOptions {
      * Used to pass attributes to the transition's DOM element.
      */
     transition?: AccordionContentPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's wrapper DOM element.
+     */
+    contentWrapper?: AccordionContentPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/packages/primevue/src/accordioncontent/AccordionContent.vue b/packages/primevue/src/accordioncontent/AccordionContent.vue
@@ -1,9 +1,11 @@
 <template>
     <template v-if="!asChild">
-        <transition name="p-toggleable-content" v-bind="ptm('transition', ptParams)">
+        <transition name="p-collapsible" v-bind="ptm('transition', ptParams)">
             <component v-if="$pcAccordion.lazy ? $pcAccordionPanel.active : true" v-show="$pcAccordion.lazy ? true : $pcAccordionPanel.active" :is="as" :class="cx('root')" v-bind="attrs">
-                <div :class="cx('content')" v-bind="ptm('content', ptParams)">
-                    <slot></slot>
+                <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper', ptParams)">
+                    <div :class="cx('content')" v-bind="ptm('content', ptParams)">
+                        <slot></slot>
+                    </div>
                 </div>
             </component>
         </transition>
diff --git a/packages/primevue/src/accordioncontent/style/AccordionContentStyle.js b/packages/primevue/src/accordioncontent/style/AccordionContentStyle.js
@@ -2,6 +2,7 @@ import BaseStyle from '@primevue/core/base/style';
 
 const classes = {
     root: 'p-accordioncontent',
+    contentWrapper: 'p-accordioncontent-wrapper',
     content: 'p-accordioncontent-content'
 };
 
diff --git a/packages/primevue/src/fieldset/Fieldset.d.ts b/packages/primevue/src/fieldset/Fieldset.d.ts
@@ -90,6 +90,10 @@ export interface FieldsetPassThroughOptions {
      * Used to pass attributes to the content container's DOM element.
      */
     contentContainer?: FieldsetPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content wrapper DOM element.
+     */
+    contentWrapper?: FieldsetPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/packages/primevue/src/fieldset/Fieldset.vue b/packages/primevue/src/fieldset/Fieldset.vue
@@ -24,10 +24,12 @@
                 </button>
             </slot>
         </legend>
-        <transition name="p-toggleable-content" v-bind="ptm('transition')">
+        <transition name="p-collapsible" v-bind="ptm('transition')">
             <div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
-                <div :class="cx('content')" v-bind="ptm('content')">
-                    <slot></slot>
+                <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper')">
+                    <div :class="cx('content')" v-bind="ptm('content')">
+                        <slot></slot>
+                    </div>
                 </div>
             </div>
         </transition>
diff --git a/packages/primevue/src/fieldset/style/FieldsetStyle.js b/packages/primevue/src/fieldset/style/FieldsetStyle.js
@@ -13,6 +13,7 @@ const classes = {
     toggleButton: 'p-fieldset-toggle-button',
     toggleIcon: 'p-fieldset-toggle-icon',
     contentContainer: 'p-fieldset-content-container',
+    contentWrapper: 'p-fieldset-content-wrapper',
     content: 'p-fieldset-content'
 };
 
diff --git a/packages/primevue/src/message/Message.d.ts b/packages/primevue/src/message/Message.d.ts
@@ -51,6 +51,10 @@ export interface MessagePassThroughOptions<T = any> {
      * Used to pass attributes to the root's DOM element.
      */
     root?: MessagePassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the content wrapper DOM element.
+     */
+    contentWrapper?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/packages/primevue/src/message/Message.vue b/packages/primevue/src/message/Message.vue
@@ -1,21 +1,23 @@
 <template>
     <transition name="p-message" appear v-bind="ptmi('transition')">
         <div v-if="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" :data-p="dataP" v-bind="ptm('root')">
-            <slot v-if="$slots.container" name="container" :closeCallback="close"></slot>
-            <div v-else :class="cx('content')" :data-p="dataP" v-bind="ptm('content')">
-                <slot name="icon" :class="cx('icon')">
-                    <component :is="icon ? 'span' : null" :class="[cx('icon'), icon]" :data-p="dataP" v-bind="ptm('icon')"></component>
-                </slot>
-                <div v-if="$slots.default" :class="cx('text')" :data-p="dataP" v-bind="ptm('text')">
-                    <slot></slot>
-                </div>
-                <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" :data-p="dataP"
-                    v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
-                    <slot name="closeicon">
-                        <i v-if="closeIcon" :class="[cx('closeIcon'), closeIcon]" :data-p="dataP" v-bind="ptm('closeIcon')" />
-                        <TimesIcon v-else :class="[cx('closeIcon'), closeIcon]" :data-p="dataP" v-bind="ptm('closeIcon')" />
+            <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper')">
+                <slot v-if="$slots.container" name="container" :closeCallback="close"></slot>
+                <div v-else :class="cx('content')" :data-p="dataP" v-bind="ptm('content')">
+                    <slot name="icon" :class="cx('icon')">
+                        <component :is="icon ? 'span' : null" :class="[cx('icon'), icon]" :data-p="dataP" v-bind="ptm('icon')"></component>
                     </slot>
-                </button>
+                    <div v-if="$slots.default" :class="cx('text')" :data-p="dataP" v-bind="ptm('text')">
+                        <slot></slot>
+                    </div>
+                    <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" :data-p="dataP"
+                        v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
+                        <slot name="closeicon">
+                            <i v-if="closeIcon" :class="[cx('closeIcon'), closeIcon]" :data-p="dataP" v-bind="ptm('closeIcon')" />
+                            <TimesIcon v-else :class="[cx('closeIcon'), closeIcon]" :data-p="dataP" v-bind="ptm('closeIcon')" />
+                        </slot>
+                    </button>
+                </div>
             </div>
         </div>
     </transition>
diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js
@@ -11,6 +11,7 @@ const classes = {
             'p-message-lg': props.size === 'large'
         }
     ],
+    contentWrapper: 'p-message-content-wrapper',
     content: 'p-message-content',
     icon: 'p-message-icon',
     text: 'p-message-text',
diff --git a/packages/primevue/src/panel/Panel.d.ts b/packages/primevue/src/panel/Panel.d.ts
@@ -106,6 +106,10 @@ export interface PanelPassThroughOptions {
      * Used to pass attributes to the content container's DOM element.
      */
     contentContainer?: PanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content wrapper DOM element.
+     */
+    contentWrapper?: PanelPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/packages/primevue/src/panel/Panel.vue b/packages/primevue/src/panel/Panel.vue
@@ -7,18 +7,8 @@
             <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
                 <slot name="icons"></slot>
                 <slot v-if="toggleable" name="togglebutton" :collapsed="d_collapsed" :toggleCallback="(event) => toggle(event)" :keydownCallback="(event) => onKeyDown(event)">
-                    <Button
-                        :id="$id + '_header'"
-                        :class="cx('pcToggleButton')"
-                        :aria-label="buttonAriaLabel"
-                        :aria-controls="$id + '_content'"
-                        :aria-expanded="!d_collapsed"
-                        :unstyled="unstyled"
-                        @click="toggle($event)"
-                        @keydown="onKeyDown($event)"
-                        v-bind="toggleButtonProps"
-                        :pt="ptm('pcToggleButton')"
-                    >
+                    <Button :id="$id + '_header'" :class="cx('pcToggleButton')" :aria-label="buttonAriaLabel" :aria-controls="$id + '_content'" :aria-expanded="!d_collapsed" :unstyled="unstyled"
+                        @click="toggle($event)" @keydown="onKeyDown($event)" v-bind="toggleButtonProps" :pt="ptm('pcToggleButton')">
                         <template #icon="slotProps">
                             <!--TODO: togglericon deprecated since v4.0-->
                             <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
@@ -29,13 +19,15 @@
                 </slot>
             </div>
         </div>
-        <transition name="p-toggleable-content" v-bind="ptm('transition')">
+        <transition name="p-collapsible" v-bind="ptm('transition')">
             <div v-show="!d_collapsed" :id="$id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="$id + '_header'" v-bind="ptm('contentContainer')">
-                <div :class="cx('content')" v-bind="ptm('content')">
-                    <slot></slot>
-                </div>
-                <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
-                    <slot name="footer"></slot>
+                <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper')">
+                    <div :class="cx('content')" v-bind="ptm('content')">
+                        <slot></slot>
+                    </div>
+                    <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
+                        <slot name="footer"></slot>
+                    </div>
                 </div>
             </div>
         </transition>
diff --git a/packages/primevue/src/panel/style/PanelStyle.js b/packages/primevue/src/panel/style/PanelStyle.js
@@ -13,6 +13,7 @@ const classes = {
     headerActions: 'p-panel-header-actions',
     pcToggleButton: 'p-panel-toggle-button',
     contentContainer: 'p-panel-content-container',
+    contentWrapper: 'p-panel-content-wrapper',
     content: 'p-panel-content',
     footer: 'p-panel-footer'
 };
diff --git a/packages/primevue/src/panelmenu/PanelMenu.vue b/packages/primevue/src/panelmenu/PanelMenu.vue
@@ -31,19 +31,21 @@
                         <component v-else :is="$slots.item" :item="item" :root="true" :active="isItemActive(item)" :hasSubmenu="isItemGroup(item)" :label="getItemLabel(item)" :props="getMenuItemProps(item, index)"></component>
                     </div>
                 </div>
-                <transition name="p-toggleable-content" v-bind="ptm('transition')">
+                <transition name="p-collapsible" v-bind="ptm('transition')">
                     <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('contentContainer')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('contentContainer')">
-                        <div v-if="getItemProp(item, 'items')" :class="cx('content')" v-bind="ptm('content')">
-                            <PanelMenuList
-                                :panelId="getPanelId(index)"
-                                :items="getItemProp(item, 'items')"
-                                :templates="$slots"
-                                :expandedKeys="expandedKeys"
-                                @item-toggle="changeExpandedKeys"
-                                @header-focus="updateFocusedHeader"
-                                :pt="pt"
-                                :unstyled="unstyled"
-                            />
+                        <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper')">
+                            <div v-if="getItemProp(item, 'items')" :class="cx('content')" v-bind="ptm('content')">
+                                <PanelMenuList
+                                    :panelId="getPanelId(index)"
+                                    :items="getItemProp(item, 'items')"
+                                    :templates="$slots"
+                                    :expandedKeys="expandedKeys"
+                                    @item-toggle="changeExpandedKeys"
+                                    @header-focus="updateFocusedHeader"
+                                    :pt="pt"
+                                    :unstyled="unstyled"
+                                />
+                            </div>
                         </div>
                     </div>
                 </transition>
diff --git a/packages/primevue/src/panelmenu/PanelMenuSub.vue b/packages/primevue/src/panelmenu/PanelMenuSub.vue
@@ -39,24 +39,26 @@
                         :props="getMenuItemProps(processedItem, index)"
                     ></component>
                 </div>
-                <transition name="p-toggleable-content" v-bind="ptm('transition')">
+                <transition name="p-collapsible" v-bind="ptm('transition')">
                     <div v-show="isItemActive(processedItem)" :class="cx('contentContainer')" v-bind="ptm('contentContainer')">
-                        <PanelMenuSub
-                            v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
-                            :id="getItemId(processedItem) + '_list'"
-                            role="group"
-                            :panelId="panelId"
-                            :focusedItemId="focusedItemId"
-                            :items="processedItem.items"
-                            :level="level + 1"
-                            :templates="templates"
-                            :activeItemPath="activeItemPath"
-                            @item-toggle="onItemToggle"
-                            @item-mousemove="$emit('item-mousemove', $event)"
-                            :pt="pt"
-                            :unstyled="unstyled"
-                            v-bind="ptm('submenu')"
-                        />
+                        <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper')">
+                            <PanelMenuSub
+                                v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
+                                :id="getItemId(processedItem) + '_list'"
+                                role="group"
+                                :panelId="panelId"
+                                :focusedItemId="focusedItemId"
+                                :items="processedItem.items"
+                                :level="level + 1"
+                                :templates="templates"
+                                :activeItemPath="activeItemPath"
+                                @item-toggle="onItemToggle"
+                                @item-mousemove="$emit('item-mousemove', $event)"
+                                :pt="pt"
+                                :unstyled="unstyled"
+                                v-bind="ptm('submenu')"
+                            />
+                        </div>
                     </div>
                 </transition>
             </li>
diff --git a/packages/primevue/src/panelmenu/style/PanelMenuStyle.js b/packages/primevue/src/panelmenu/style/PanelMenuStyle.js
@@ -16,6 +16,7 @@ const classes = {
     headerIcon: 'p-panelmenu-header-icon',
     headerLabel: 'p-panelmenu-header-label',
     contentContainer: 'p-panelmenu-content-container',
+    contentWrapper: 'p-panelmenu-content-wrapper',
     content: 'p-panelmenu-content',
     rootList: 'p-panelmenu-root-list',
     item: ({ instance, processedItem }) => [
diff --git a/packages/primevue/src/steppanel/StepPanel.d.ts b/packages/primevue/src/steppanel/StepPanel.d.ts
@@ -49,6 +49,10 @@ export interface StepPanelPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: StepPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's wrapper DOM element.
+     */
+    contentWrapper?: StepPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the content DOM element.
      */
diff --git a/packages/primevue/src/steppanel/StepPanel.vue b/packages/primevue/src/steppanel/StepPanel.vue
@@ -1,11 +1,13 @@
 <template>
     <template v-if="isVertical">
         <template v-if="!asChild">
-            <transition name="p-toggleable-content" v-bind="ptm('transition')">
+            <transition name="p-collapsible" v-bind="ptm('transition')">
                 <component v-show="active" :is="as" :id="id" :class="cx('root')" role="tabpanel" :aria-controls="ariaControls" :data-p="dataP" v-bind="getPTOptions('root')">
-                    <StepperSeparator v-if="isSeparatorVisible" :data-p="dataP" />
-                    <div :class="cx('content')" :data-p="dataP" v-bind="getPTOptions('content')">
-                        <slot :active="active" :activateCallback="(val) => updateValue(val)" />
+                    <div :class="cx('contentWrapper')" v-bind="ptm('contentWrapper', ptParams)">
+                        <StepperSeparator v-if="isSeparatorVisible" :data-p="dataP" />
+                        <div :class="cx('content')" :data-p="dataP" v-bind="getPTOptions('content')">
+                            <slot :active="active" :activateCallback="(val) => updateValue(val)" />
+                        </div>
                     </div>
                 </component>
             </transition>
diff --git a/packages/primevue/src/steppanel/style/StepPanelStyle.js b/packages/primevue/src/steppanel/style/StepPanelStyle.js
@@ -7,6 +7,7 @@ const classes = {
             'p-steppanel-active': instance.isVertical && instance.active
         }
     ],
+    contentWrapper: 'p-steppanel-content-wrapper',
     content: 'p-steppanel-content'
 };
 

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@ const classes = {`
`11`	`11`	`'p-message-lg': props.size === 'large'`
`12`	`12`	`}`
`13`	`13`	`],`
	`14`	`+ contentWrapper: 'p-message-content-wrapper',`
`14`	`15`	`content: 'p-message-content',`
`15`	`16`	`icon: 'p-message-icon',`
`16`	`17`	`text: 'p-message-text',`