fix: add span tag to label (#681)

* fix: add span tag to label * fix: fix * update snap * fix: fix * test: add test case * Update tests/index.test.tsx Co-authored-by: MadCcc <[email protected]> --------- Co-authored-by: MadCcc <[email protected]>
react-component · Nov 28, 2023 · f2bd7a6 · f2bd7a6 · vercel · Nov 28, 2023
1 parent ee145ae
commit f2bd7a6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
@@ -51,6 +51,11 @@ const TabNode: React.FC<TabNodeProps> = props => {
     editable.onEdit('remove', { key, event });
   }
 
+  const labelNode = React.useMemo<React.ReactNode>(
+    () => (icon && typeof label === 'string' ? <span>{label}</span> : label),
+    [label, icon],
+  );
+
   const node: React.ReactElement = (
     <div
       key={key}
@@ -86,7 +91,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
         onFocus={onFocus}
       >
         {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>}
-        {label}
+        {label && labelNode}
       </div>
 
       {/* Remove Button */}

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -638,4 +638,14 @@ describe('Tabs.Basic', () => {
     await waitFakeTimer();
     expect(container.querySelector('.rc-tabs-ink-bar')).toHaveStyle({ width: '18px' });
   });
+
+  it('Add span to text label when have icon', () => {
+    const selectors = '.rc-tabs-tab .rc-tabs-tab-btn span';
+    const { container, rerender } = render(
+      <Tabs items={[{ key: 'key', label: 'test', icon: 'test' }]} />,
+    );
+    expect(container.querySelectorAll<HTMLSpanElement>(selectors).length).toBe(2);
+    rerender(<Tabs items={[{ key: 'key', label: <div>test</div>, icon: 'test' }]} />);
+    expect(container.querySelectorAll<HTMLSpanElement>(selectors).length).toBe(1);
+  });
 });