feat: export Tabs addIcon (#25006)

* feat: export Tabs addIcon

* update snapshot

components/rate/__tests__/__snapshots__/demo.test.js.snap

@@ -1925,7 +1925,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
       aria-posinset="1"
       aria-setsize="5"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ant-rate-star-first"
@@ -1985,7 +1985,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
       aria-posinset="2"
       aria-setsize="5"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ant-rate-star-first"
@@ -2045,7 +2045,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
       aria-posinset="3"
       aria-setsize="5"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ant-rate-star-first"
@@ -2105,7 +2105,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
       aria-posinset="4"
       aria-setsize="5"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ant-rate-star-first"
@@ -2165,7 +2165,7 @@ exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
       aria-posinset="5"
       aria-setsize="5"
       role="radio"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="ant-rate-star-first"

components/tabs/index.en-US.md

@@ -22,6 +22,7 @@ Ant Design has 3 types of Tabs for different situations.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
 | activeKey | Current TabPane's key | string | - |  |
 | animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |  |
 | renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |

components/tabs/index.tsx

@@ -20,10 +20,11 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   size?: SizeType;
   hideAdd?: boolean;
   centered?: boolean;
+  addIcon?: React.ReactNode;
   onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
 
-function Tabs({ type, className, size, onEdit, hideAdd, centered, ...props }: TabsProps) {
+function Tabs({ type, className, size, onEdit, hideAdd, centered, addIcon, ...props }: TabsProps) {
   const { prefixCls: customizePrefixCls } = props;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tabs', customizePrefixCls);
@@ -35,7 +36,7 @@ function Tabs({ type, className, size, onEdit, hideAdd, centered, ...props }: Ta
         onEdit?.(editType === 'add' ? event : key!, editType);
       },
       removeIcon: <CloseOutlined />,
-      addIcon: <PlusOutlined />,
+      addIcon: addIcon || <PlusOutlined />,
       showAdd: hideAdd !== true,
     };
   }

components/tabs/index.zh-CN.md

@@ -25,6 +25,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
 | activeKey | 当前激活 tab 面板的 key | string | - |  |
 | animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |  |
 | renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |

components/tabs/style/index.less

@@ -80,6 +80,7 @@
     }
 
     .@{tab-prefix-cls}-nav-add {
+      min-width: @tabs-card-height;
       padding: 0 @padding-xs;
       background: @tabs-card-head-background;
       border: @border-width-base @border-style-base @border-color-split;