feat: add Tabs more props (#48321)

* feat: add Tabs more props

* fix

* fix

* Compatible with moreIcon

* compatible ConfigProvider with the moreIcon

* update site snap

* fix

* fix

* fix

* fix

* fix

---------

Co-authored-by: afc163 <afc163@gmail.com>

components/config-provider/__tests__/style.test.tsx

@@ -1218,7 +1218,7 @@ describe('ConfigProvider support style and className props', () => {
           className: 'cp-tabs',
           style: { backgroundColor: 'red' },
           addIcon: <span className="cp-test-addIcon">cp-test-addIcon</span>,
-          moreIcon: <span className="cp-test-moreIcon">cp-test-moreIcon</span>,
+          more: { icon: <span className="cp-test-moreIcon">cp-test-moreIcon</span> },
           removeIcon: <span className="cp-test-removeIcon">cp-test-removeIcon</span>,
         }}
       >

components/config-provider/context.ts

@@ -128,7 +128,7 @@ export type ModalConfig = ComponentStyleConfig &
   Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon' | 'closable'>;
 
 export type TabsConfig = ComponentStyleConfig &
-  Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon' | 'removeIcon'>;
+  Pick<TabsProps, 'indicator' | 'indicatorSize' | 'more' | 'moreIcon' | 'addIcon' | 'removeIcon'>;
 
 export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closable' | 'closeIcon'>;
 

components/tabs/index.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import type { TabsProps as RcTabsProps } from 'rc-tabs';
 import RcTabs from 'rc-tabs';
 import type { GetIndicatorSize } from 'rc-tabs/lib/hooks/useIndicator';
-import type { EditableConfig } from 'rc-tabs/lib/interface';
+import type { EditableConfig, MoreProps } from 'rc-tabs/lib/interface';
 
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
@@ -31,6 +31,8 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   hideAdd?: boolean;
   centered?: boolean;
   addIcon?: React.ReactNode;
+  moreIcon?: React.ReactNode;
+  more?: MoreProps;
   removeIcon?: React.ReactNode;
   onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
   children?: React.ReactNode;
@@ -50,6 +52,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     addIcon,
     removeIcon,
     moreIcon,
+    more,
     popupClassName,
     children,
     items,
@@ -111,7 +114,6 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     <RcTabs
       direction={direction}
       getPopupContainer={getPopupContainer}
-      moreTransitionName={`${rootPrefixCls}-slide-up`}
       {...otherProps}
       items={mergedItems}
       className={classNames(
@@ -131,7 +133,11 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
       popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
       style={mergedStyle}
       editable={editable}
-      moreIcon={moreIcon ?? tabs?.moreIcon ?? <EllipsisOutlined />}
+      more={{
+        icon: tabs?.more?.icon ?? tabs?.moreIcon ?? moreIcon ?? <EllipsisOutlined />,
+        transitionName: `${rootPrefixCls}-slide-up`,
+        ...more,
+      }}
       prefixCls={prefixCls}
       animated={mergedAnimated}
       indicator={mergedIndicator}

components/tabs/index.zh-CN.md

@@ -56,7 +56,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
 | indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 |
 | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 |
-| moreIcon | 自定义折叠 icon | ReactNode | `<EllipsisOutlined />` | 4.14.0 |
+| more | 自定义折叠 | [MoreProps](#more) | { icon: `<EllipsisOutlined />` , trigger: 'hover' } |  |
 | removeIcon | 自定义删除按钮，设置 `type="editable-card"` 时有效 | ReactNode | `<CloseOutlined />` | 5.15.0 |
 | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
 | renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
@@ -88,6 +88,13 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | children | 选项卡头显示内容 | ReactNode | - |  |
 | closable | 是否显示选项卡的关闭按钮，在 `type="editable-card"` 时有效 | boolean | true |  |
 
+### MoreProps
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | ---- | ---- |
+| icon | 自定义折叠图标 | ReactNode | -  |    |
+| [DropdownProps](/components/dropdown-cn#api) |      |      |    |     |
+
 ## 主题变量（Design Token）
 
 <ComponentTokenTable component="Tabs"></ComponentTokenTable>

package.json

@@ -155,7 +155,7 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.45.4",
-    "rc-tabs": "~14.1.1",
+    "rc-tabs": "~15.0.0",
     "rc-textarea": "~1.6.3",
     "rc-tooltip": "~6.2.0",
     "rc-tree": "~5.8.5",

scripts/__snapshots__/check-site.ts.snap

@@ -226,7 +226,7 @@ exports[`site test Component components/table zh Page 1`] = `9`;
 
 exports[`site test Component components/tabs en Page 1`] = `2`;
 
-exports[`site test Component components/tabs zh Page 1`] = `2`;
+exports[`site test Component components/tabs zh Page 1`] = `3`;
 
 exports[`site test Component components/tag en Page 1`] = `2`;