feat: support body and content semantic DOM

assets/panels.less

@@ -1,10 +1,11 @@
 @tabs-prefix-cls: rc-tabs;
 
 .@{tabs-prefix-cls} {
-  &-content {
+  &-body {
     &-holder {
       flex: auto;
     }
+
     position: relative;
 
     // display: flex;
@@ -15,7 +16,7 @@
     // }
   }
 
-  &-tabpane {
+  &-content {
     // flex: none;
     // width: 100%;
 

assets/position.less

@@ -24,7 +24,7 @@
       order: 1;
     }
 
-    .@{tabs-prefix-cls}-content {
+    .@{tabs-prefix-cls}-body {
       order: 0;
     }
 
@@ -71,7 +71,7 @@
       order: 1;
     }
 
-    .@{tabs-prefix-cls}-content {
+    .@{tabs-prefix-cls}-body {
       order: 0;
     }
 

src/TabPanelList/index.tsx

@@ -8,27 +8,45 @@ import TabPane from './TabPane';
 export interface TabPanelListProps {
   activeKey: string;
   id: string;
-  animated?: AnimatedConfig;
-  tabPosition?: TabPosition;
+  animated: AnimatedConfig;
+  tabPosition: TabPosition;
   destroyOnHidden?: boolean;
+  bodyStyle?: React.CSSProperties;
+  bodyClassName?: string;
   contentStyle?: React.CSSProperties;
   contentClassName?: string;
 }
 
 const TabPanelList: React.FC<TabPanelListProps> = props => {
-  const { id, activeKey, animated, tabPosition, destroyOnHidden, contentStyle, contentClassName } =
-    props;
+  const {
+    id,
+    activeKey,
+    animated,
+    tabPosition,
+    destroyOnHidden,
+    bodyStyle,
+    bodyClassName,
+    contentStyle,
+    contentClassName,
+  } = props;
   const { prefixCls, tabs } = React.useContext(TabContext);
   const tabPaneAnimated = animated.tabPane;
 
-  const tabPanePrefixCls = `${prefixCls}-tabpane`;
+  const bodyPrefixCls = `${prefixCls}-body`;
+  const contentPrefixCls = `${prefixCls}-content`;
 
   return (
-    <div className={clsx(`${prefixCls}-content-holder`)}>
+    <div className={clsx(`${bodyPrefixCls}-holder`)}>
       <div
-        className={clsx(`${prefixCls}-content`, `${prefixCls}-content-${tabPosition}`, {
-          [`${prefixCls}-content-animated`]: tabPaneAnimated,
-        })}
+        className={clsx(
+          bodyPrefixCls,
+          `${bodyPrefixCls}-${tabPosition}`,
+          {
+            [`${bodyPrefixCls}-animated`]: tabPaneAnimated,
+          },
+          bodyClassName,
+        )}
+        style={bodyStyle}
       >
         {tabs.map(item => {
           const {
@@ -46,13 +64,13 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
               visible={active}
               forceRender={forceRender}
               removeOnLeave={!!(destroyOnHidden ?? itemDestroyOnHidden)}
-              leavedClassName={`${tabPanePrefixCls}-hidden`}
+              leavedClassName={`${contentPrefixCls}-hidden`}
               {...animated.tabPaneMotion}
             >
               {({ style: motionStyle, className: motionClassName }, ref) => (
                 <TabPane
                   {...restTabProps}
-                  prefixCls={tabPanePrefixCls}
+                  prefixCls={contentPrefixCls}
                   id={id}
                   tabKey={key}
                   animated={tabPaneAnimated}

src/Tabs.tsx

@@ -34,7 +34,14 @@ import type {
 // Used for accessibility
 let uuid = 0;
 
-export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'remove';
+export type SemanticName =
+  | 'popup'
+  | 'item'
+  | 'indicator'
+  | 'body'
+  | 'content'
+  | 'header'
+  | 'remove';
 
 export interface TabsProps extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
@@ -216,6 +223,8 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
         <TabPanelList
           destroyOnHidden={destroyOnHidden}
           {...sharedProps}
+          bodyStyle={styles?.body}
+          bodyClassName={tabsClassNames?.body}
           contentStyle={styles?.content}
           contentClassName={tabsClassNames?.content}
           animated={mergedAnimated}

tests/__snapshots__/index.test.tsx.snap

@@ -83,15 +83,15 @@ exports[`Tabs.Basic Normal 1`] = `
     </div>
   </div>
   <div
-    class="rc-tabs-content-holder"
+    class="rc-tabs-body-holder"
   >
     <div
-      class="rc-tabs-content rc-tabs-content-top"
+      class="rc-tabs-body rc-tabs-body-top"
     >
       <div
         aria-hidden="false"
         aria-labelledby="rc-tabs-test-tab-bamboo"
-        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        class="rc-tabs-content rc-tabs-content-active"
         id="rc-tabs-test-panel-bamboo"
         role="tabpanel"
         tabindex="0"
@@ -156,15 +156,15 @@ exports[`Tabs.Basic Skip invalidate children 1`] = `
     </div>
   </div>
   <div
-    class="rc-tabs-content-holder"
+    class="rc-tabs-body-holder"
   >
     <div
-      class="rc-tabs-content rc-tabs-content-top"
+      class="rc-tabs-body rc-tabs-body-top"
     >
       <div
         aria-hidden="false"
         aria-labelledby="rc-tabs-test-tab-light"
-        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        class="rc-tabs-content rc-tabs-content-active"
         id="rc-tabs-test-panel-light"
         role="tabpanel"
         tabindex="0"

tests/index.test.tsx

@@ -331,8 +331,8 @@ describe('Tabs.Basic', () => {
     const { container, rerender } = render(getTabs(props));
 
     function matchText(text: string) {
-      expect(container.querySelectorAll('.rc-tabs-tabpane')).toHaveLength(1);
-      expect(container.querySelector('.rc-tabs-tabpane-active').textContent).toEqual(text);
+      expect(container.querySelectorAll('.rc-tabs-content')).toHaveLength(1);
+      expect(container.querySelector('.rc-tabs-content-active').textContent).toEqual(text);
     }
 
     matchText('Light');
@@ -367,8 +367,8 @@ describe('Tabs.Basic', () => {
     const { container, rerender } = render(getTabs(props));
 
     function matchText(text: string) {
-      expect(container.querySelectorAll('.rc-tabs-tabpane')).toHaveLength(1);
-      expect(container.querySelector('.rc-tabs-tabpane-active').textContent).toEqual(text);
+      expect(container.querySelectorAll('.rc-tabs-content')).toHaveLength(1);
+      expect(container.querySelector('.rc-tabs-content-active').textContent).toEqual(text);
     }
 
     matchText('Light');
@@ -743,13 +743,15 @@ describe('Tabs.Basic', () => {
     const customClassNames = {
       indicator: 'custom-indicator',
       item: 'custom-item',
+      body: 'custom-body',
       content: 'custom-content',
       header: 'custom-header',
     };
     const customStyles = {
       indicator: { background: 'red' },
       item: { color: 'blue' },
-      content: { background: 'green' },
+      body: { background: 'green' },
+      content: { color: 'purple' },
       header: { background: 'yellow' },
     };
     const { container } = render(
@@ -762,17 +764,20 @@ describe('Tabs.Basic', () => {
     );
     const indicator = container.querySelector('.rc-tabs-ink-bar') as HTMLElement;
     const item = container.querySelector('.rc-tabs-tab') as HTMLElement;
-    const content = container.querySelector('.rc-tabs-tabpane') as HTMLElement;
+    const body = container.querySelector('.rc-tabs-body') as HTMLElement;
+    const content = container.querySelector('.rc-tabs-content') as HTMLElement;
     const header = container.querySelector('.rc-tabs-nav') as HTMLElement;
 
     expect(indicator).toHaveClass('custom-indicator');
     expect(item).toHaveClass('custom-item');
+    expect(body).toHaveClass('custom-body');
     expect(content).toHaveClass('custom-content');
     expect(header).toHaveClass('custom-header');
 
     expect(indicator).toHaveStyle({ background: 'red' });
     expect(item).toHaveStyle({ color: 'blue' });
-    expect(content).toHaveStyle({ background: 'green' });
+    expect(body).toHaveStyle({ background: 'green' });
+    expect(content).toHaveStyle({ color: 'purple' });
     expect(header).toHaveStyle({ background: 'yellow' });
   });