Refactor #3832 and #3833 - For Panel

api-generator/components/panel.js

@@ -60,8 +60,8 @@ const PanelSlots = [
         description: "Custom content for the header's icon."
     },
     {
-        name: 'headericon',
+        name: 'togglericon',
-        description: "Custom content for the component's header icon."
+        description: "Custom content for the component's toggler icon."
     },
     {
         name: 'footer',

components/lib/panel/Panel.d.ts

@@ -61,9 +61,9 @@ export interface PanelPassThroughOptions {
      */
     toggler?: PanelPassThroughOptionType;
     /**
-     * Uses to pass attributes to the headericon's DOM element.
+     * Uses to pass attributes to the togglericon's DOM element.
      */
-    headericon?: PanelPassThroughOptionType;
+    togglericon?: PanelPassThroughOptionType;
     /**
      * Uses to pass attributes to the toggleablecontent's DOM element.
      */
@@ -143,10 +143,10 @@ export interface PanelSlots {
      */
     icons(): VNode[];
     /**
-     * Custom header icon template of panel.
+     * Custom toggler icon template of panel.
-     * @param {Object} scope - header icon slot's params.
+     * @param {Object} scope - toggler icon slot's params.
      */
-    headericon(scope: {
+    togglericon(scope: {
         /**
          * Collapsed state as a boolean
          */

components/lib/panel/Panel.vue

@@ -20,8 +20,8 @@
                     @keydown="onKeyDown"
                     v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
                 >
-                    <slot name="headericon" :collapsed="d_collapsed">
+                    <slot name="togglericon" :collapsed="d_collapsed">
-                        <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('headericon')" />
+                        <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('togglericon')" />
                     </slot>
                 </button>
             </div>