Refactor #5682 - For Dock, Menubar

components/lib/dock/Dock.d.ts

@@ -274,12 +274,23 @@ export interface DockSlots {
         props: DockRouterBindProps;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'itemicon' slot.
      * Custom icon content.
-     * @param {Object} scope - icon slot's params.
+     * @param {Object} scope - item icon slot's params.
      */
     icon(scope: {
         /**
-         * Custom content for icon.
+         * Custom content for item icon.
+         */
+        item: MenuItem;
+    }): VNode[];
+    /**
+     * Custom icon content.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Custom content for item icon.
          */
         item: MenuItem;
     }): VNode[];

components/lib/dock/DockSub.vue

@@ -40,10 +40,11 @@
                                 aria-hidden="true"
                                 v-bind="getPTOptions('itemLink', processedItem, index)"
                             >
-                                <template v-if="!templates['icon']">
+                                <!-- TODO: icon deprecated since v4.0-->
+                                <template v-if="!templates['icon'] && !templates['itemicon']">
                                     <span v-ripple :class="[cx('itemIcon'), processedItem.icon]" v-bind="getPTOptions('itemIcon', processedItem, index)"></span>
                                 </template>
-                                <component v-else :is="templates['icon']" :item="processedItem" :class="cx('itemIcon')"></component>
+                                <component v-else :is="templates['icon'] || templates['itemicon']" :item="processedItem" :class="cx('itemIcon')"></component>
                             </a>
                         </template>
                         <component v-else :is="templates['item']" :item="processedItem" :index="index" :label="processedItem.label" :props="getMenuItemProps(processedItem, index)"></component>

components/lib/menubar/Menubar.d.ts

@@ -97,7 +97,7 @@ export interface MenubarPassThroughOptions {
     /**
      * Used to pass attributes to the mobile menu button icon's DOM element.
      */
-    menubuttonicon?: MenubarPassThroughOptionType;
+    buttonicon?: MenubarPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu's DOM element.
      */
@@ -318,6 +318,7 @@ export interface MenubarSlots {
         hasSubmenu: boolean;
     }): VNode[];
     /**
+     * @deprecated since v4.0. use 'button' slot instead.
      * Custom menu button template on responsive mode.
      * @param {Object} scope - menu button slot's params.
      */
@@ -337,14 +338,37 @@ export interface MenubarSlots {
         toggleCallback: () => void;
     }): VNode[];
     /**
-     * Custom popup icon template on responsive mode.
-     * @deprecated since v3.42.0. Use 'menubuttonicon' slot instead.
+     * Custom menu button template on responsive mode.
+     * @param {Object} scope - menu button slot's params.
      */
-    popupicon(): VNode[];
+    button(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: string;
+        /**
+         * Style class of component
+         */
+        class: string;
+        /**
+         *
+         * Toggle event
+         */
+        toggleCallback: () => void;
+    }): VNode[];
     /**
+     * @deprecated since v4.0. use 'buttonicon' slot instead.
      * Custom menu button icon template on responsive mode.
      */
     menubuttonicon(): VNode[];
+    /**
+     * Custom submenu icon template.
+     * @param {Object} scope - submenuicon slot's params.
+     */
+    /**
+     * Custom menu button icon template on responsive mode.
+     */
+    buttonicon(): VNode[];
     /**
      * Custom submenu icon template.
      * @param {Object} scope - submenuicon slot's params.

components/lib/menubar/Menubar.vue

@@ -3,7 +3,8 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
-        <slot :id="id" name="menubutton" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
+        <slot :id="id" :name="$slots.button ? 'button' : 'menubutton'" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
+            <!-- TODO: menubutton deprecated since v4.0-->
             <a
                 v-if="model && model.length > 0"
                 ref="menubutton"
@@ -18,8 +19,9 @@
                 @keydown="menuButtonKeydown($event)"
                 v-bind="{ ...buttonProps, ...ptm('button') }"
             >
-                <slot name="menubuttonicon">
-                    <BarsIcon v-bind="ptm('menubuttonicon')" />
+                <!-- TODO: menubuttonicon deprecated since v4.0-->
+                <slot :name="$slots.buttonicon ? 'buttonicon' : 'menubuttonicon'">
+                    <BarsIcon v-bind="ptm('buttonicon')" />
                 </slot>
             </a>
         </slot>