refactor: update inner to body (#489)

Author: thinkasany

README.md

@@ -92,8 +92,8 @@ Online demo: <https://react-component.github.io/tooltip/demo>
 | align                | object                                    |                     | align config of tooltip. Please ref demo for usage example                                                                                                       |
 | showArrow            | boolean \| object                         | false               | whether to show arrow of tooltip                                                                                                                                 |
 | zIndex               | number                                    |                     | config popup tooltip zIndex                                                                                                                                      |
-| classNames           | classNames?: { root?: string; inner?: string;};            |                     | Semantic DOM class                                                                                                                                               |
-| styles               | styles?: {root?: React.CSSProperties;inner?: React.CSSProperties;};     |                     | Semantic DOM styles                                                                                                                                              |
+| classNames           | classNames?: { root?: string; body?: string;};            |                     | Semantic DOM class                                                                                                                                               |
+| styles               | styles?: {root?: React.CSSProperties;body?: React.CSSProperties;};     |                     | Semantic DOM styles                                                                                                                                              |
 
 ## Important Note
 

src/Popup.tsx

@@ -8,17 +8,17 @@ export interface ContentProps {
   overlayInnerStyle?: React.CSSProperties;
   className?: string;
   style?: React.CSSProperties;
-  innerClassName?: string;
+  bodyClassName?: string;
 }
 
 export default function Popup(props: ContentProps) {
-  const { children, prefixCls, id, overlayInnerStyle: innerStyle, innerClassName, className, style } =
+  const { children, prefixCls, id, overlayInnerStyle: innerStyle, bodyClassName, className, style } =
     props;
 
   return (
     <div className={classNames(`${prefixCls}-content`, className)} style={style}>
       <div
-        className={classNames(`${prefixCls}-inner`, innerClassName)}
+        className={classNames(`${prefixCls}-inner`, bodyClassName)}
         id={id}
         role="tooltip"
         style={innerStyle}

src/Tooltip.tsx

@@ -43,7 +43,7 @@ export interface TooltipProps
   showArrow?: boolean | ArrowType;
   arrowContent?: React.ReactNode;
   id?: string;
-  /** @deprecated Please use `styles={{ inner: {} }}` */
+  /** @deprecated Please use `styles={{ body: {} }}` */
   overlayInnerStyle?: React.CSSProperties;
   zIndex?: number;
   styles?: TooltipStyles;
@@ -52,12 +52,12 @@ export interface TooltipProps
 
 export interface TooltipStyles {
   root?: React.CSSProperties;
-  inner?: React.CSSProperties;
+  body?: React.CSSProperties;
 }
 
 export interface TooltipClassNames {
   root?: string;
-  inner?: string;
+  body?: string;
 }
 
 export interface TooltipRef extends TriggerRef {}
@@ -104,8 +104,8 @@ const Tooltip = (props: TooltipProps, ref: React.Ref<TooltipRef>) => {
       key="content"
       prefixCls={prefixCls}
       id={id}
-      innerClassName={tooltipClassNames?.inner}
-      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.inner }}
+      bodyClassName={tooltipClassNames?.body}
+      overlayInnerStyle={{ ...overlayInnerStyle, ...tooltipStyles?.body }}
     >
       {overlay}
     </Popup>

tests/index.test.tsx

@@ -253,12 +253,12 @@ describe('rc-tooltip', () => {
   });
   it('should apply custom styles to Tooltip', () => {
     const customClassNames = {
-      inner: 'custom-inner',
+      body: 'custom-body',
       root: 'custom-root',
     };
 
     const customStyles = {
-      inner: { color: 'red' },
+      body: { color: 'red' },
       root: { backgroundColor: 'blue' },
     };
 
@@ -269,14 +269,14 @@ describe('rc-tooltip', () => {
     );
 
     const tooltipElement = container.querySelector('.rc-tooltip') as HTMLElement;
-    const tooltipInnerElement = container.querySelector('.rc-tooltip-inner') as HTMLElement;
+    const tooltipBodyElement = container.querySelector('.rc-tooltip-inner') as HTMLElement;
 
     // 验证 classNames
     expect(tooltipElement.classList).toContain('custom-root');
-    expect(tooltipInnerElement.classList).toContain('custom-inner');
+    expect(tooltipBodyElement.classList).toContain('custom-body');
 
     // 验证 styles
     expect(tooltipElement.style.backgroundColor).toBe('blue');
-    expect(tooltipInnerElement.style.color).toBe('red');
+    expect(tooltipBodyElement.style.color).toBe('red');
   });
 });