fix(Card): should show tab when tabList is empty (#43416)

* fix(Card): should show tab when tabList is empty

* test: add case

* test: adjust case

components/card/Card.tsx

@@ -118,19 +118,18 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   let head: React.ReactNode;
   const mergedSize = useSize(customizeSize);
   const tabSize = !mergedSize || mergedSize === 'default' ? 'large' : mergedSize;
-  const tabs =
-    tabList && tabList.length ? (
-      <Tabs
-        size={tabSize}
-        {...extraProps}
-        className={`${prefixCls}-head-tabs`}
-        onChange={onTabChange}
-        items={tabList.map(({ tab, ...item }) => ({
-          label: tab,
-          ...item,
-        }))}
-      />
-    ) : null;
+  const tabs = tabList ? (
+    <Tabs
+      size={tabSize}
+      {...extraProps}
+      className={`${prefixCls}-head-tabs`}
+      onChange={onTabChange}
+      items={tabList.map(({ tab, ...item }) => ({
+        label: tab,
+        ...item,
+      }))}
+    />
+  ) : null;
   if (title || extra || tabs) {
     head = (
       <div className={`${prefixCls}-head`} style={headStyle}>

components/card/__tests__/index.test.tsx

@@ -132,6 +132,17 @@ describe('Card', () => {
     expect(cardRef.current).toHaveClass('ant-card');
   });
 
+  it('should show tab when tabList is empty', () => {
+    const { container } = render(
+      <Card title="Card title" tabList={[]} tabProps={{ type: 'editable-card' }}>
+        <p>Card content</p>
+      </Card>,
+    );
+
+    expect(container.querySelector('.ant-tabs')).toBeTruthy();
+    expect(container.querySelector('.ant-tabs-nav-add')).toBeTruthy();
+  });
+
   it('correct pass tabList props', () => {
     const { container } = render(
       <Card