feat: CP support Tabs addIcon & moreIcon (#47274)

* feat: CP support Tabs addIcon & moreIcon * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com>
ant-design · Feb 1, 2024 · e009ca9 · e009ca9
1 parent a206593
commit e009ca9
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 11 deletions.
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -1041,15 +1041,24 @@ describe('ConfigProvider support style and className props', () => {
     expect(head).toHaveStyle({ color: 'red' });
   });
 
-  it('Should Tabs className & style works', () => {
+  it('Should Tabs className & style & addIcon & moreIcon works', () => {
     const { container } = render(
-      <ConfigProvider tabs={{ className: 'cp-tabs', style: { backgroundColor: 'red' } }}>
-        <Tabs />
+      <ConfigProvider
+        tabs={{
+          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>,
+        }}
+      >
+        <Tabs items={[]} type="editable-card" />
       </ConfigProvider>,
     );
     const element = container.querySelector<HTMLDivElement>('.ant-tabs');
     expect(element).toHaveClass('cp-tabs');
     expect(element).toHaveStyle({ backgroundColor: 'red' });
+    expect(element?.querySelector<HTMLSpanElement>('.cp-test-addIcon')).toBeTruthy();
+    expect(element?.querySelector<HTMLSpanElement>('.cp-test-moreIcon')).toBeTruthy();
   });
 
   it('Should TimePicker className works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -86,6 +86,9 @@ export type TourConfig = Pick<TourProps, 'closeIcon'>;
 export type ModalConfig = ComponentStyleConfig &
   Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;
 
+export type TabsConfig = ComponentStyleConfig &
+  Pick<TabsProps, 'indicator' | 'indicatorSize' | 'moreIcon' | 'addIcon'>;
+
 export type AlertConfig = ComponentStyleConfig & Pick<AlertProps, 'closeIcon'>;
 
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
@@ -172,7 +175,7 @@ export interface ConfigConsumerProps {
   tag?: TagConfig;
   table?: TableConfig;
   card?: CardConfig;
-  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
+  tabs?: TabsConfig;
   timeline?: ComponentStyleConfig;
   timePicker?: ComponentStyleConfig;
   tour?: TourConfig;

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -147,7 +147,7 @@ const {
 | statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | Set Table common props | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
-| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
+| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
 | tag | Set Tag common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
@@ -17,7 +17,6 @@ import defaultLocale from '../locale/en_US';
 import type { PaginationProps } from '../pagination';
 import type { SelectProps } from '../select';
 import type { SpaceProps } from '../space';
-import type { TabsProps } from '../tabs';
 import { defaultTheme, DesignTokenContext } from '../theme/context';
 import defaultSeedToken from '../theme/themes/seed';
 import type {
@@ -36,6 +35,7 @@ import type {
   NotificationConfig,
   PopupOverflow,
   TableConfig,
+  TabsConfig,
   TagConfig,
   Theme,
   ThemeConfig,
@@ -173,7 +173,7 @@ export interface ConfigProviderProps {
   tag?: TagConfig;
   table?: TableConfig;
   card?: CardConfig;
-  tabs?: ComponentStyleConfig & Pick<TabsProps, 'indicator' | 'indicatorSize'>;
+  tabs?: TabsConfig;
   timeline?: ComponentStyleConfig;
   timePicker?: ComponentStyleConfig;
   upload?: ComponentStyleConfig;

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -149,7 +149,7 @@ const {
 | statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties, expandable?: { expandIcon?: props => React.ReactNode } } | - | 5.7.0, expandable: 5.14.0 |
-| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 |
+| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }, moreIcon?: ReactNode, addIcon?: ReactNode } | - | 5.7.0, `moreIcon` and `addIcon`: 5.14.0 |
 | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
 | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
@@ -47,6 +47,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     hideAdd,
     centered,
     addIcon,
+    moreIcon,
     popupClassName,
     children,
     items,
@@ -56,7 +57,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
     indicator,
     ...otherProps
   } = props;
-  const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = otherProps;
+  const { prefixCls: customizePrefixCls } = otherProps;
   const { direction, tabs, getPrefixCls, getPopupContainer } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('tabs', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
@@ -69,7 +70,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
         onEdit?.(editType === 'add' ? event : key!, editType);
       },
       removeIcon: <CloseOutlined />,
-      addIcon: addIcon || <PlusOutlined />,
+      addIcon: (addIcon ?? tabs?.addIcon) || <PlusOutlined />,
       showAdd: hideAdd !== true,
     };
   }
@@ -128,7 +129,7 @@ const Tabs: React.FC<TabsProps> & { TabPane: typeof TabPane } = (props) => {
       popupClassName={classNames(popupClassName, hashId, cssVarCls, rootCls)}
       style={mergedStyle}
       editable={editable}
-      moreIcon={moreIcon}
+      moreIcon={moreIcon ?? tabs?.moreIcon ?? <EllipsisOutlined />}
       prefixCls={prefixCls}
       animated={mergedAnimated}
       indicator={mergedIndicator}