Refactor #5592, #5661 - For Fieldset & Panel

components/lib/fieldset/Fieldset.d.ts

@@ -79,17 +79,17 @@ export interface FieldsetPassThroughOptions {
      */
     toggler?: FieldsetPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggler icon's DOM element.
+     * Used to pass attributes to the toggle icon's DOM element.
      */
-    togglerIcon?: FieldsetPassThroughOptionType;
+    toggleIcon?: FieldsetPassThroughOptionType;
     /**
-     * Used to pass attributes to the legend title's DOM element.
+     * Used to pass attributes to the legend label's DOM element.
      */
-    legendTitle?: FieldsetPassThroughOptionType;
+    legendLabel?: FieldsetPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggleable content's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    toggleableContent?: FieldsetPassThroughOptionType;
+    contentContainer?: FieldsetPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
@@ -180,9 +180,26 @@ export interface FieldsetSlots {
      */
     legend: () => VNode[];
     /**
+     * @deprecated since v4.0. Use the 'toggleicon' slot instead.
      * Custom toggler icon template.
+     * @param {Object} scope - toggler icon slot's params.
      */
-    togglericon: () => VNode[];
+    togglericon(scope: {
+        /**
+         * Collapsed state as a boolean
+         */
+        collapsed: boolean;
+    }): VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - toggler icon slot's params.
+     */
+    toggleicon(scope: {
+        /**
+         * Collapsed state as a boolean
+         */
+        collapsed: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/fieldset/Fieldset.vue

@@ -2,7 +2,7 @@
     <fieldset :class="cx('root')" v-bind="ptmi('root')">
         <legend :class="cx('legend')" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
-                <span :id="id + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
+                <span :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
             </slot>
             <a
                 v-if="toggleable"
@@ -17,16 +17,17 @@
                 @keydown="onKeyDown"
                 v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
             >
-                <slot name="togglericon" :collapsed="d_collapsed">
-                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('togglericon')" v-bind="ptm('togglericon')" />
+                <!--TODO: togglericon deprecated since v4.0-->
+                <slot :name="$slots.togglericon ? 'togglericon' : 'toggleicon'" :collapsed="d_collapsed">
+                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
                 </slot>
                 <slot name="legend">
-                    <span :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
+                    <span :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
                 </slot>
             </a>
         </legend>
         <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/fieldset/style/FieldsetStyle.js

@@ -8,9 +8,9 @@ const classes = {
         }
     ],
     legend: 'p-fieldset-legend',
-    legendtitle: 'p-fieldset-legend-label',
-    togglericon: 'p-fieldset-toggle-icon',
-    toggleablecontent: 'p-fieldset-content-container',
+    legendLabel: 'p-fieldset-legend-label',
+    toggleIcon: 'p-fieldset-toggle-icon',
+    contentContainer: 'p-fieldset-content-container',
     content: 'p-fieldset-content'
 };