feat(TabPanels): change renderOnlyActiveTab default to true (#2313)

mondaycom · Aug 13, 2024 · 76b772a · 76b772a
1 parent 437a133
commit 76b772a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 76 deletions.
diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
@@ -201,6 +201,12 @@ codemod: `search-component-import-migration`
 
 - `noPadding` is removed as it's the default, component no longer gets a default padding bottom [codemod]
 
+
+### TabPanels
+
+- Fix: TabPanels will render only the active tab
+- `renderOnlyActiveTab` - removed as it's now the default behavior [codemod]
+
 ### TextField
 
 - `dataTestId` -> `data-testid` [codemod]

diff --git a/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx b/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
@@ -12,7 +12,6 @@ import { withStaticProps } from "../../../types";
 import styles from "./TabPanels.module.scss";
 
 export interface TabPanelsProps extends VibeComponentProps {
-  renderOnlyActiveTab?: boolean;
   activeTabId?: number;
   animationDirection?: TabPanelsAnimationDirection;
   children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];
@@ -22,24 +21,15 @@ const TabPanels: FC<TabPanelsProps> & {
   animationDirections?: typeof TabPanelsAnimationDirectionEnum;
 } = forwardRef(
   (
-    {
-      className,
-      id,
-      activeTabId = 0,
-      animationDirection = "rtl",
-      children,
-      // TODO Vibe 2.0 BREAKING change to true - breaking change
-      renderOnlyActiveTab = false,
-      "data-testid": dataTestId
-    }: TabPanelsProps,
+    { className, id, activeTabId = 0, animationDirection = "rtl", children, "data-testid": dataTestId }: TabPanelsProps,
     ref
   ) => {
     const componentRef = useRef(null);
     const mergedRef = useMergeRef(ref, componentRef);
     const renderedTabs = useMemo(() => {
       return React.Children.map(children, (child, index) => {
         const isActiveTab = activeTabId === index;
-        if (renderOnlyActiveTab && !isActiveTab) return null;
+        if (!isActiveTab) return null;
         const activeClass = isActiveTab ? "active" : "non-active";
         const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : "";
         return React.cloneElement(child, {
@@ -53,7 +43,7 @@ const TabPanels: FC<TabPanelsProps> & {
           )
         });
       }).filter(Boolean);
-    }, [children, activeTabId, renderOnlyActiveTab, animationDirection]);
+    }, [children, activeTabId, animationDirection]);
 
     return (
       <div

diff --git a/...ore/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap b/...ore/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap
@@ -12,20 +12,6 @@ exports[`TabPanels renders correctly with animation from left to right 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -41,20 +27,6 @@ exports[`TabPanels renders correctly with animation from right to left 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -70,20 +42,6 @@ exports[`TabPanels renders correctly with empty props 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -92,26 +50,12 @@ exports[`TabPanels renders correctly with the given active tab panel 1`] = `
   className="tabPanelsWrapper"
   data-testid="tab-panels"
 >
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    First
-  </div>
   <div
     className="tabPanelWrapper tabPanel active animationDirectionRtl"
     data-testid="tab-panel"
     role="tabpanel"
   >
     Second
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
diff --git a/...src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap b/...src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap
@@ -47,13 +47,6 @@ exports[`TabsContext renders correctly with activeTabId 1`] = `
     className="tabPanelsWrapper"
     data-testid="tab-panels"
   >
-    <div
-      className="tabPanelWrapper tabPanel non-active"
-      data-testid="tab-panel"
-      role="tabpanel"
-    >
-      First slide
-    </div>
     <div
       className="tabPanelWrapper tabPanel active animationDirectionRtl"
       data-testid="tab-panel"