feat: Tab Item support icon prop (ant-design#46096)

* feat: Tab Item support icon prop * Update package.json Signed-off-by: lijianan <[email protected]> * fix: fix * fix: fix * fix: fix style * Update components/tabs/style/index.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: lijianan <[email protected]> * Update components/tabs/style/index.ts Co-authored-by: MadCcc <[email protected]> Signed-off-by: lijianan <[email protected]> --------- Signed-off-by: lijianan <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 28, 2023 · 1eee6d9 · 1eee6d9
1 parent 2eba0e0
commit 1eee6d9
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 13 deletions.
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3244,7 +3244,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
             role="tab"
             tabindex="0"
           >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
               <span
                 aria-label="apple"
                 class="anticon anticon-apple"
@@ -3264,6 +3266,8 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
                   />
                 </svg>
               </span>
+            </span>
+            <span>
               Tab 1
             </span>
           </div>
@@ -3280,7 +3284,9 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
             role="tab"
             tabindex="0"
           >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
               <span
                 aria-label="android"
                 class="anticon anticon-android"
@@ -3300,6 +3306,8 @@ exports[`renders components/tabs/demo/icon.tsx extend context correctly 1`] = `
                   />
                 </svg>
               </span>
+            </span>
+            <span>
               Tab 2
             </span>
           </div>

diff --git a/components/tabs/__tests__/__snapshots__/demo.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo.test.ts.snap
@@ -2709,7 +2709,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
             role="tab"
             tabindex="0"
           >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
               <span
                 aria-label="apple"
                 class="anticon anticon-apple"
@@ -2729,6 +2731,8 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
+            </span>
+            <span>
               Tab
               <!-- -->
               1
@@ -2745,7 +2749,9 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
             role="tab"
             tabindex="0"
           >
-            <span>
+            <span
+              class="ant-tabs-tab-icon"
+            >
               <span
                 aria-label="android"
                 class="anticon anticon-android"
@@ -2765,6 +2771,8 @@ exports[`renders components/tabs/demo/icon.tsx correctly 1`] = `
                   />
                 </svg>
               </span>
+            </span>
+            <span>
               Tab
               <!-- -->
               2

diff --git a/components/tabs/demo/icon.tsx b/components/tabs/demo/icon.tsx
@@ -7,16 +7,11 @@ const App: React.FC = () => (
     defaultActiveKey="2"
     items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
       const id = String(i + 1);
-
       return {
-        label: (
-          <span>
-            <Icon />
-            Tab {id}
-          </span>
-        ),
+        label: <span>Tab {id}</span>,
         key: id,
         children: `Tab ${id}`,
+        icon: <Icon />,
       };
     })}
   />

diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
@@ -82,6 +82,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |  |
 | key | TabPane's key | string | - |  |
 | label | TabPane's head display text | ReactNode | - |  |
+| icon | TabPane's head display icon | ReactNode | - | 5.12.0 |
 | children | TabPane's head display content | ReactNode | - |  |
 | closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true |  |
 

diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
@@ -84,6 +84,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
 | key | 对应 activeKey | string | - |  |
 | label | 选项卡头显示文字 | ReactNode | - |  |
+| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
 | children | 选项卡头显示内容 | ReactNode | - |  |
 | closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true |  |
 

diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
@@ -691,6 +691,9 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
       '&-btn': {
         outline: 'none',
         transition: 'all 0.3s',
+        [`${tabCls}-icon:not(:last-child)`]: {
+          marginInlineEnd: token.marginSM,
+        },
       },
       '&-remove': {
         flex: 'none',
@@ -734,7 +737,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
       [`& ${tabCls}-remove ${iconCls}`]: {
         margin: 0,
       },
-      [iconCls]: {
+      [`${iconCls}:not(:last-child)`]: {
         marginRight: {
           _skip_check_: true,
           value: token.marginSM,

diff --git a/package.json b/package.json
@@ -151,7 +151,7 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.36.0",
-    "rc-tabs": "~12.13.1",
+    "rc-tabs": "~12.14.1",
     "rc-textarea": "~1.5.3",
     "rc-tooltip": "~6.1.2",
     "rc-tree": "~5.8.2",