chore(theme/Tabs): keepDOM in Tabs and stablize the Tabs classname (#2679)

Author: SoonIter

e2e/fixtures/package-manager-tabs/index.test.ts

@@ -20,8 +20,8 @@ test.describe('tabs-component test', async () => {
   test('Index page', async ({ page }) => {
     await page.goto(`http://localhost:${appPort}`);
 
-    await page.waitForSelector('.rp-tabs__tab');
-    const tabs = page.locator('.rp-tabs__tab');
+    await page.waitForSelector('.rp-tabs__label__item');
+    const tabs = page.locator('.rp-tabs__label__item');
     const tabsText = (await tabs.allInnerTexts()).map(text => text.trim());
 
     expect(tabsText).toEqual([

packages/theme-default/src/components/Search/SearchPanel.scss

@@ -87,6 +87,13 @@
     position: sticky;
     background-color: var(--rp-c-bg-soft);
     padding-bottom: 6px;
+
+    &.rp-tabs {
+      // overrides .rp-tabs
+      border-radius: 0;
+      border: none;
+      margin: 0;
+    }
   }
 
   &__group {

packages/theme-default/src/components/Tabs/index.scss

@@ -14,7 +14,7 @@
     }
   }
 
-  &__list {
+  &__label {
     padding-left: 8px;
     padding-top: 4px;
     display: flex;
@@ -31,7 +31,7 @@
     }
   }
 
-  &__tab {
+  &__label__item {
     position: relative;
     color: var(--rp-c-text-2);
     border-bottom: 2px solid transparent;
@@ -70,4 +70,15 @@
       }
     }
   }
+
+  &__content {
+    &__item {
+      &--active {
+        display: block;
+      }
+      &--hidden {
+        display: none;
+      }
+    }
+  }
 }

packages/theme-default/src/components/Tabs/index.tsx

@@ -30,6 +30,11 @@ interface TabsProps {
   groupId?: string;
   tabContainerClassName?: string;
   tabPosition?: 'left' | 'center';
+  /**
+   * It is very useful during the transition animation and the first screen rendering of Static Site Generation (SSG).
+   * @default true
+   */
+  keepDOM?: boolean;
 }
 
 function isTabItem(item: unknown): item is TabItem {
@@ -58,6 +63,7 @@ export const Tabs = forwardRef(
       groupId,
       tabPosition = 'left',
       tabContainerClassName,
+      keepDOM = false,
     } = props;
     // remove "\n" character when write JSX element in multiple lines, use Children.toArray for Tabs with no Tab element
     const children = Children.toArray(rawChildren).filter(
@@ -139,7 +145,7 @@ export const Tabs = forwardRef(
       <div className={clsx('rp-tabs', tabContainerClassName)} ref={ref}>
         {tabValues.length ? (
           <div
-            className="rp-tabs__list rp-tabs__list--no-scrollbar"
+            className="rp-tabs__label rp-tabs__label--no-scrollbar"
             style={{
               justifyContent:
                 tabPosition === 'center' ? 'center' : 'flex-start',
@@ -150,10 +156,10 @@ export const Tabs = forwardRef(
                 <div
                   key={index}
                   className={clsx(
-                    'rp-tabs__tab',
+                    'rp-tabs__label__item',
                     currentIndex === index
-                      ? 'rp-tabs__tab--selected'
-                      : 'rp-tabs__tab--not-selected',
+                      ? 'rp-tabs__label__item--selected'
+                      : 'rp-tabs__label__item--not-selected',
                   )}
                   onClick={() => {
                     onChange?.(index);
@@ -171,7 +177,30 @@ export const Tabs = forwardRef(
             })}
           </div>
         ) : null}
-        <div>{Children.toArray(children)[currentIndex]}</div>
+        <div className="rp-tabs__content">
+          {Children.map(children, (child, index) => {
+            const isActive = index === currentIndex;
+            if (!keepDOM && !isActive) {
+              return null;
+            }
+
+            return (
+              <div
+                className={clsx(
+                  'rp-tabs__content__item',
+                  isActive
+                    ? 'rp-tabs__content__item--active'
+                    : 'rp-tabs__content__item--hidden',
+                )}
+                aria-hidden={!isActive}
+                data-index={index}
+                key={index}
+              >
+                {child}
+              </div>
+            );
+          })}
+        </div>
       </div>
     );
   },