Refactor #5592, #5661 - For Fieldset & Panel

components/lib/panel/Panel.d.ts

@@ -94,18 +94,18 @@ export interface PanelPassThroughOptions {
      */
     title?: PanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the icons' DOM element.
+     * Used to pass attributes to the header actions' DOM element.
      */
-    icons?: PanelPassThroughOptionType;
+    headerActions?: PanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggler button's DOM element.
+     * Used to pass attributes to the toggle button button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    toggler?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
+    toggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the toggleablecontent's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    toggleableContent?: PanelPassThroughOptionType;
+    contentContainer?: PanelPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
@@ -214,6 +214,7 @@ export interface PanelSlots {
      */
     icons(): VNode[];
     /**
+     * @deprecated since v4.0. Use the 'toggleicon' slot instead.
      * Custom toggler icon template of panel.
      * @param {Object} scope - toggler icon slot's params.
      */
@@ -223,6 +224,16 @@ export interface PanelSlots {
          */
         collapsed: boolean;
     }): VNode[];
+    /**
+     * Custom toggler icon template of panel.
+     * @param {Object} scope - toggler icon slot's params.
+     */
+    toggleicon(scope: {
+        /**
+         * Collapsed state as a boolean
+         */
+        collapsed: boolean;
+    }): VNode[];
     /**
      * Custom footer template.
      */

components/lib/panel/Panel.vue

@@ -4,12 +4,12 @@
             <slot :id="id + '_header'" name="header" :class="cx('title')">
                 <span v-if="header" :id="id + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
             </slot>
-            <div :class="cx('icons')" v-bind="ptm('icons')">
+            <div :class="cx('headerActions')" v-bind="ptm('headerActions')">
                 <slot name="icons"></slot>
                 <Button
                     v-if="toggleable"
                     :id="id + '_header'"
-                    :class="cx('toggler')"
+                    :class="cx('toggleButton')"
                     :aria-label="buttonAriaLabel"
                     :aria-controls="id + '_content'"
                     :aria-expanded="!d_collapsed"
@@ -17,18 +17,19 @@
                     @click="toggle"
                     @keydown="onKeyDown"
                     v-bind="toggleButtonProps"
-                    :pt="ptm('toggler')"
+                    :pt="ptm('toggleButton')"
                 >
                     <template #icon="slotProps">
-                        <slot name="togglericon" :collapsed="d_collapsed">
-                            <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggler')['icon']" />
+                        <!--TODO: togglericon deprecated since v4.0-->
+                        <slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
+                            <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" />
                         </slot>
                     </template>
                 </Button>
             </div>
         </div>
         <transition name="p-toggleable-content" v-bind="ptm('transition')">
-            <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('toggleablecontent')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('toggleablecontent')">
+            <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>

components/lib/panel/style/PanelStyle.js

@@ -9,9 +9,9 @@ const classes = {
     ],
     header: 'p-panel-header',
     title: 'p-panel-title',
-    icons: 'p-panel-header-actions',
-    toggler: 'p-panel-toggle-button',
-    toggleablecontent: 'p-panel-content-container',
+    headerActions: 'p-panel-header-actions',
+    toggleButton: 'p-panel-toggle-button',
+    contentContainer: 'p-panel-content-container',
     content: 'p-panel-content',
     footer: 'p-panel-footer'
 };