refactor: rename 'close' to 'remove' in Tabs component for improved clarity and consistency

Author: coding-ice

src/TabNavList/OperationNode.tsx

@@ -28,8 +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'>;
+  styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'remove'>;
+  classNames?: Pick<Partial<Record<SemanticName, string>>, 'remove'>;
 }
 
 const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((props, ref) => {
@@ -103,8 +103,8 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
                 type="button"
                 aria-label={removeAriaLabel || 'remove'}
                 tabIndex={0}
-                className={clsx(`${dropdownPrefix}-menu-item-remove`, classNames?.close)}
-                style={styles?.close}
+                className={clsx(`${dropdownPrefix}-menu-item-remove`, classNames?.remove)}
+                style={styles?.remove}
                 onClick={e => {
                   e.stopPropagation();
                   onRemoveTab(e, key);

src/TabNavList/TabNode.tsx

@@ -24,8 +24,8 @@ export interface TabNodeProps {
   onMouseUp: React.MouseEventHandler;
   onFocus: React.FocusEventHandler;
   onBlur: React.FocusEventHandler;
-  styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'item' | 'close'>;
-  classNames?: Pick<Partial<Record<SemanticName, string>>, 'item' | 'close'>;
+  styles?: Pick<Partial<Record<SemanticName, React.CSSProperties>>, 'item' | 'remove'>;
+  classNames?: Pick<Partial<Record<SemanticName, string>>, 'item' | 'remove'>;
 }
 
 const TabNode: React.FC<TabNodeProps> = props => {
@@ -131,8 +131,8 @@ const TabNode: React.FC<TabNodeProps> = props => {
           type="button"
           aria-label={removeAriaLabel || 'remove'}
           tabIndex={active ? 0 : -1}
-          className={clsx(`${tabPrefix}-remove`, tabNodeClassNames?.close)}
-          style={styles?.close}
+          className={clsx(`${tabPrefix}-remove`, tabNodeClassNames?.remove)}
+          style={styles?.remove}
           onClick={e => {
             e.stopPropagation();
             onRemoveTab(e);

src/TabNavList/index.tsx

@@ -437,12 +437,12 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
         tab={tab}
         classNames={{
           item: tabsClassNames?.item,
-          close: tabsClassNames?.close,
+          remove: tabsClassNames?.remove,
         }}
         styles={{
           /* first node should not have margin left */
           item: i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item },
-          close: styles?.close,
+          remove: styles?.remove,
         }}
         closable={tab.closable}
         editable={editable}

src/Tabs.tsx

@@ -35,7 +35,7 @@ import type {
 // Used for accessibility
 let uuid = 0;
 
-export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'close';
+export type SemanticName = 'popup' | 'item' | 'indicator' | 'content' | 'header' | 'remove';
 
 export interface TabsProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {

tests/index.test.tsx

@@ -776,12 +776,12 @@ describe('Tabs.Basic', () => {
     expect(header).toHaveStyle({ background: 'yellow' });
   });
 
-  it('support classnames and styles for editable close button', () => {
+  it('support classnames and styles for editable remove button', () => {
     const customClassNames = {
-      close: 'custom-close',
+      remove: 'custom-remove',
     };
     const customStyles = {
-      close: { background: 'red' },
+      remove: { background: 'red' },
     };
 
     const { container } = render(
@@ -802,7 +802,7 @@ describe('Tabs.Basic', () => {
       </div>,
     );
 
-    expect(container.querySelector('.rc-tabs-tab-remove')).toHaveClass('custom-close');
+    expect(container.querySelector('.rc-tabs-tab-remove')).toHaveClass('custom-remove');
     expect(container.querySelector('.rc-tabs-tab-remove')).toHaveStyle({ background: 'red' });
   });
 });

tests/overflow.test.tsx

@@ -528,13 +528,13 @@ describe('Tabs.Overflow', () => {
     expect(document.querySelector('.rc-tabs-dropdown')).toHaveStyle('color: red');
   });
 
-  it('should support classnames and styles for editable close button', () => {
+  it('should support classnames and styles for editable remove button', () => {
     jest.useFakeTimers();
     const { container } = render(
       getTabs({
         editable: { onEdit: () => {} },
-        classNames: { close: 'custom-close' },
-        styles: { close: { color: 'red' } },
+        classNames: { remove: 'custom-remove' },
+        styles: { remove: { color: 'red' } },
       }),
     );
 
@@ -548,7 +548,7 @@ describe('Tabs.Overflow', () => {
       jest.runAllTimers();
     });
     expect(document.querySelector('.rc-tabs-dropdown-menu-item-remove')).toHaveClass(
-      'custom-close',
+      'custom-remove',
     );
     expect(document.querySelector('.rc-tabs-dropdown-menu-item-remove')).toHaveStyle({
       color: 'red',