From 7fd6e4f4530668665cf4cad21bd1dadd02e25e26 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Fri, 2 Feb 2024 15:24:13 +0800
Subject: [PATCH] fix(components): [tabs] slot name use kebab-case style
 (#15733)

* fix(components): [tabs] slot name use kebab-case style

* fix(components): [tabs] slot name use kebab-case style

* fix(components): [tabs] slot name use kebab-case style

* docs(components): [tabs] use deprecated tag
---
 docs/en-US/component/tabs.md                    |  9 +++++----
 .../tabs/customized-add-button-icon.vue         |  2 +-
 packages/components/tabs/src/tabs.tsx           | 17 +++++++++++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/docs/en-US/component/tabs.md b/docs/en-US/component/tabs.md
index c3a116992d..ceed07b078 100644
--- a/docs/en-US/component/tabs.md
+++ b/docs/en-US/component/tabs.md
@@ -108,10 +108,11 @@ tabs/customized-trigger
 
 ## Tabs Slots
 
-| Name             | Description               | Subtags  |
-| ---------------- | ------------------------- | -------- |
-| -                | customize default content | Tab-pane |
-| addIcon ^(2.4.0) | customize add button icon | -        |
+| Name                           | Description               | Subtags  |
+| ------------------------------ | ------------------------- | -------- |
+| -                              | customize default content | Tab-pane |
+| addIcon ^(2.4.0) ^(deprecated) | customize add button icon | -        |
+| add-icon ^(2.5.4)              | customize add button icon | -        |
 
 ## Tab-pane Attributes
 
diff --git a/docs/examples/tabs/customized-add-button-icon.vue b/docs/examples/tabs/customized-add-button-icon.vue
index 01a4b69abc..6befa9226b 100644
--- a/docs/examples/tabs/customized-add-button-icon.vue
+++ b/docs/examples/tabs/customized-add-button-icon.vue
@@ -7,7 +7,7 @@ addIcon
     editable
     @edit="handleTabsEdit"
   >
-    <template #addIcon>
+    <template #add-icon>
       <el-icon><Select /></el-icon>
     </template>
     <el-tab-pane
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index c74387f59b..6c85a23664 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -151,6 +151,18 @@ const Tabs = defineComponent({
       computed(() => !!props.activeName)
     )
 
+    useDeprecated(
+      {
+        from: '"addIcon"',
+        replacement: '"add-icon"',
+        scope: 'ElTabs',
+        version: '2.6.0',
+        ref: 'https://element-plus.org/en-US/component/tabs.html#slots',
+        type: 'Slot',
+      },
+      computed(() => !!slots.addIcon)
+    )
+
     watch(
       () => props.activeName,
       (modelValue) => setCurrentName(modelValue)
@@ -178,7 +190,8 @@ const Tabs = defineComponent({
     })
 
     return () => {
-      const addSlot = slots.addIcon
+      const addSlot = slots['add-icon'] || slots['addIcon']
+      const isCamelCase = addSlot && slots['addIcon']
       const newButton =
         props.editable || props.addable ? (
           <span
@@ -190,7 +203,7 @@ const Tabs = defineComponent({
             }}
           >
             {addSlot ? (
-              renderSlot(slots, 'addIcon')
+              renderSlot(slots, isCamelCase ? 'addIcon' : 'add-icon')
             ) : (
               <ElIcon class={ns.is('icon-plus')}>
                 <Plus />