feat: tab support classnames and styles (#786)

* feat: add content for classnames and styles

* add header

Author: thinkasany

src/TabNavList/index.tsx

@@ -573,8 +573,8 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         ref={useComposeRef(ref, containerRef)}
         role="tablist"
         aria-orientation={tabPositionTopOrBottom ? 'horizontal' : 'vertical'}
-        className={classNames(`${prefixCls}-nav`, className)}
-        style={style}
+        className={classNames(`${prefixCls}-nav`, className, tabsClassNames?.header)}
+        style={{ ...styles?.header, ...style }}
         onKeyDown={() => {
           // No need animation when use keyboard
           doLockAnimation();

src/TabPanelList/index.tsx

@@ -11,10 +11,20 @@ export interface TabPanelListProps {
   animated?: AnimatedConfig;
   tabPosition?: TabPosition;
   destroyInactiveTabPane?: boolean;
+  contentStyle?: React.CSSProperties;
+  contentClassName?: string;
 }
 
 const TabPanelList: React.FC<TabPanelListProps> = props => {
-  const { id, activeKey, animated, tabPosition, destroyInactiveTabPane } = props;
+  const {
+    id,
+    activeKey,
+    animated,
+    tabPosition,
+    destroyInactiveTabPane,
+    contentStyle,
+    contentClassName,
+  } = props;
   const { prefixCls, tabs } = React.useContext(TabContext);
   const tabPaneAnimated = animated.tabPane;
 
@@ -54,8 +64,8 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
                   tabKey={key}
                   animated={tabPaneAnimated}
                   active={active}
-                  style={{ ...paneStyle, ...motionStyle }}
-                  className={classNames(paneClassName, motionClassName)}
+                  style={{ ...contentStyle, ...paneStyle, ...motionStyle }}
+                  className={classNames(contentClassName, paneClassName, motionClassName)}
                   ref={ref}
                 />
               )}

src/Tabs.tsx

@@ -34,7 +34,7 @@ import type {
 // Used for accessibility
 let uuid = 0;
 
-export type SemanticName = 'popup' | 'item' | 'indicator';
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header';
 
 export interface TabsProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
@@ -186,9 +186,9 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
     style: tabBarStyle,
     getPopupContainer,
     popupClassName: classNames(popupClassName, tabsClassNames?.popup),
+    indicator,
     styles,
     classNames: tabsClassNames,
-    indicator,
   };
 
   return (
@@ -212,6 +212,8 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
         <TabPanelList
           destroyInactiveTabPane={destroyInactiveTabPane}
           {...sharedProps}
+          contentStyle={styles?.content}
+          contentClassName={tabsClassNames?.content}
           animated={mergedAnimated}
         />
       </div>

tests/index.test.tsx

@@ -693,10 +693,14 @@ describe('Tabs.Basic', () => {
     const customClassNames = {
       indicator: 'custom-indicator',
       item: 'custom-item',
+      content: 'custom-content',
+      header: 'custom-header',
     };
     const customStyles = {
       indicator: { background: 'red' },
       item: { color: 'blue' },
+      content: { background: 'green' },
+      header: { background: 'yellow' },
     };
     const { container } = render(
       <Tabs
@@ -708,10 +712,17 @@ 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 header = container.querySelector('.rc-tabs-nav') as HTMLElement;
 
     expect(indicator).toHaveClass('custom-indicator');
     expect(item).toHaveClass('custom-item');
+    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(header).toHaveStyle({ background: 'yellow' });
   });
 });