feat: enhance OperationNode to support custom classNames and styles for close button

Author: coding-ice

src/TabNavList/OperationNode.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react';
 import type { EditableConfig, Tab, TabsLocale, MoreProps } from '../interface';
 import { getRemovable } from '../util';
 import AddButton from './AddButton';
+import { SemanticName } from '../Tabs';
 
 export interface OperationNodeProps {
   prefixCls: string;
@@ -27,6 +28,8 @@ export interface OperationNodeProps {
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   popupClassName?: string;
   popupStyle?: React.CSSProperties;
+  styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'close'>;
+  classNames?: Pick<Partial<Record<SemanticName, string>>, 'close'>;
 }
 
 const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
@@ -47,6 +50,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
     getPopupContainer,
     popupClassName,
     popupStyle,
+    classNames,
+    styles,
   } = props;
   // ======================== Dropdown ========================
   const [open, setOpen] = useState(false);
@@ -98,7 +103,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
                 type="button"
                 aria-label={removeAriaLabel || 'remove'}
                 tabIndex={0}
-                className={`${dropdownPrefix}-menu-item-remove`}
+                className={clsx(`${dropdownPrefix}-menu-item-remove`, classNames?.close)}
+                style={styles?.close}
                 onClick={e => {
                   e.stopPropagation();
                   onRemoveTab(e, key);

tests/index.test.tsx

@@ -776,7 +776,7 @@ describe('Tabs.Basic', () => {
     expect(header).toHaveStyle({ background: 'yellow' });
   });
 
-  it('support classnames and styles for editable', () => {
+  it('support classnames and styles for editable close button', () => {
     const customClassNames = {
       close: 'custom-close',
     };
@@ -785,17 +785,30 @@ describe('Tabs.Basic', () => {
     };
 
     const { container } = render(
-      <Tabs
-        editable={{
-          onEdit: () => {},
-        }}
-        tabPosition="left"
-        items={[{ key: 'test', label: 'test', icon: 'test' }]}
-        styles={customStyles}
-        classNames={customClassNames}
-      />,
+      <div style={{ width: 100 }}>
+        <Tabs
+          editable={{
+            onEdit: () => {},
+          }}
+          tabPosition="left"
+          items={Array.from({ length: 10 }).map((_, index) => ({
+            key: `test-${index}`,
+            label: `test-${index}`,
+            icon: 'test',
+          }))}
+          styles={customStyles}
+          classNames={customClassNames}
+          getPopupContainer={() => document.querySelector('.rc-tabs') as HTMLElement}
+        />
+      </div>,
     );
 
+    expect(container.querySelector('.rc-tabs-dropdown-menu-item-remove')).toHaveClass(
+      'custom-close',
+    );
+    expect(container.querySelector('.rc-tabs-dropdown-menu-item-remove')).toHaveStyle({
+      background: 'red',
+    });
     expect(container.querySelector('.rc-tabs-tab-remove')).toHaveClass('custom-close');
     expect(container.querySelector('.rc-tabs-tab-remove')).toHaveStyle({ background: 'red' });
   });