From bcfefea32325cce20af6739549019640f7bfaa72 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Wed, 31 Dec 2025 17:40:16 +0530
Subject: [PATCH] refactor: update Tabs component usage across multiple files
 to use new structure with TabsList, TabsTrigger, and TabsContent

---
 .../(projects)/analytics/[tabId]/page.tsx     | 14 +++++------
 .../components/core/image-picker-popover.tsx  | 22 ++++++++---------
 .../cycles/active-cycle/cycle-stats.tsx       | 24 +++++++++----------
 .../analytics-sidebar/progress-stats.tsx      | 22 ++++++++---------
 .../modal/card/base-paid-plan-card.tsx        | 14 +++++------
 .../analytics-sidebar/progress-stats.tsx      | 22 ++++++++---------
 .../components/pages/navigation-pane/root.tsx |  4 ++--
 .../pages/navigation-pane/tab-panels/root.tsx |  6 ++---
 .../pages/navigation-pane/tabs-list.tsx       | 10 ++++----
 9 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
index 58b0f9567b..f138bc3169 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 // components
 import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
@@ -74,9 +74,9 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                       "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
                     )}
                   >
-                    <Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
+                    <TabsList className={"overflow-x-auto flex w-fit h-7"}>
                       {ANALYTICS_TABS.map((tab) => (
-                        <Tabs.Trigger
+                        <TabsTrigger
                           key={tab.key}
                           value={tab.key}
                           disabled={tab.isDisabled}
@@ -89,22 +89,22 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
                           }}
                         >
                           {tab.label}
-                        </Tabs.Trigger>
+                        </TabsTrigger>
                       ))}
-                    </Tabs.List>
+                    </TabsList>
 
                     <div className="flex-shrink-0">
                       <AnalyticsFilterActions />
                     </div>
                   </div>
                   {ANALYTICS_TABS.map((tab) => (
-                    <Tabs.Content
+                    <TabsContent
                       key={tab.key}
                       value={tab.key}
                       className={"h-full overflow-hidden overflow-y-auto px-2"}
                     >
                       <tab.content />
-                    </Tabs.Content>
+                    </TabsContent>
                   ))}
                 </div>
               </Tabs>
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 06529b387a..b3afe4189a 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -19,7 +19,7 @@ import { useInstance } from "@/hooks/store/use-instance";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 // services
 import { FileService } from "@/services/file.service";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 import { Popover } from "@plane/propel/popover";
 
 type TTabOption = {
@@ -194,15 +194,15 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
             className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem] p-2"
           >
             <Tabs>
-              <Tabs.List>
+              <TabsList>
                 {tabOptions.map((tab) => (
-                  <Tabs.Trigger key={tab.key} value={tab.key}>
+                  <TabsTrigger key={tab.key} value={tab.key}>
                     {tab.title}
-                  </Tabs.Trigger>
+                  </TabsTrigger>
                 ))}
-              </Tabs.List>
+              </TabsList>
               <div className="mt-1 flex-1 overflow-auto">
-                <Tabs.Content value="unsplash">
+                <TabsContent value="unsplash">
                   {(unsplashImages || !unsplashError) && (
                     <>
                       <div className="flex gap-x-2 items-center">
@@ -269,8 +269,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       )}
                     </>
                   )}
-                </Tabs.Content>
-                <Tabs.Content value="images">
+                </TabsContent>
+                <TabsContent value="images">
                   <div className="grid grid-cols-4 gap-4">
                     {Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
                       <div
@@ -286,8 +286,8 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </div>
                     ))}
                   </div>
-                </Tabs.Content>
-                <Tabs.Content value="upload">
+                </TabsContent>
+                <TabsContent value="upload">
                   <div className="flex h-full w-full flex-col gap-y-2">
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
@@ -354,7 +354,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                       </Button>
                     </div>
                   </div>
-                </Tabs.Content>
+                </TabsContent>
               </div>
             </Tabs>
           </div>
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index d1b26a9772..5fb807e5de 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -6,7 +6,7 @@ import { CalendarCheck } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { PriorityIcon } from "@plane/propel/icons";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { ICycle } from "@plane/types";
@@ -88,13 +88,13 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   return cycleId ? (
     <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1 border border-subtle rounded-lg">
       <Tabs value={tab ?? "Priority-Issues"} onValueChange={setTab}>
-        <Tabs.List>
-          <Tabs.Trigger value="Priority-Issues">{t("project_cycles.active_cycle.priority_issue")}</Tabs.Trigger>
-          <Tabs.Trigger value="Assignees">{t("project_cycles.active_cycle.assignees")}</Tabs.Trigger>
-          <Tabs.Trigger value="Labels">{t("project_cycles.active_cycle.labels")}</Tabs.Trigger>
-        </Tabs.List>
+        <TabsList>
+          <TabsTrigger value="Priority-Issues">{t("project_cycles.active_cycle.priority_issue")}</TabsTrigger>
+          <TabsTrigger value="Assignees">{t("project_cycles.active_cycle.assignees")}</TabsTrigger>
+          <TabsTrigger value="Labels">{t("project_cycles.active_cycle.labels")}</TabsTrigger>
+        </TabsList>
 
-        <Tabs.Content
+        <TabsContent
           value="Priority-Issues"
           className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
         >
@@ -181,9 +181,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
               loaders
             )}
           </div>
-        </Tabs.Content>
+        </TabsContent>
 
-        <Tabs.Content
+        <TabsContent
           value="Assignees"
           className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
         >
@@ -243,9 +243,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           ) : (
             loaders
           )}
-        </Tabs.Content>
+        </TabsContent>
 
-        <Tabs.Content
+        <TabsContent
           value="Labels"
           className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
         >
@@ -286,7 +286,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
           ) : (
             loaders
           )}
-        </Tabs.Content>
+        </TabsContent>
       </Tabs>
     </div>
   ) : (
diff --git a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
index 29f58cfa5a..ec92587c73 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { TCycleDistribution, TCycleEstimateDistribution, TCyclePlotType } from "@plane/types";
 import { toFilterArray } from "@plane/utils";
@@ -110,15 +110,15 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
   return (
     <div>
       <Tabs defaultValue={currentTab ?? "stat-assignees"} onValueChange={(value) => setCycleTab(value)}>
-        <Tabs.List>
+        <TabsList>
           {PROGRESS_STATS.map((stat) => (
-            <Tabs.Trigger key={stat.key} value={stat.key}>
+            <TabsTrigger key={stat.key} value={stat.key}>
               {t(stat.i18n_title)}
-            </Tabs.Trigger>
+            </TabsTrigger>
           ))}
-        </Tabs.List>
+        </TabsList>
         <div className="py-3">
-          <Tabs.Content value="stat-states">
+          <TabsContent value="stat-states">
             <StateGroupStatComponent
               distribution={distributionStateData}
               handleStateGroupFiltersUpdate={handleStateGroupFiltersUpdate}
@@ -126,23 +126,23 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC
               selectedStateGroups={selectedStateGroups}
               totalIssuesCount={totalIssuesCount}
             />
-          </Tabs.Content>
-          <Tabs.Content value="stat-assignees">
+          </TabsContent>
+          <TabsContent value="stat-assignees">
             <AssigneeStatComponent
               distribution={distributionAssigneeData}
               handleAssigneeFiltersUpdate={handleAssigneeFiltersUpdate}
               isEditable={isEditable}
               selectedAssigneeIds={selectedAssigneeIds}
             />
-          </Tabs.Content>
-          <Tabs.Content value="stat-labels">
+          </TabsContent>
+          <TabsContent value="stat-labels">
             <LabelStatComponent
               distribution={distributionLabelData}
               handleLabelFiltersUpdate={handleLabelFiltersUpdate}
               isEditable={isEditable}
               selectedLabelIds={selectedLabelIds}
             />
-          </Tabs.Content>
+          </TabsContent>
         </div>
       </Tabs>
     </div>
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
index 7630e8c2e9..8f65712221 100644
--- a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { CheckCircle } from "lucide-react";
 // plane imports
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 // helpers
 import type { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
 import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
@@ -38,17 +38,17 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
     <div className="flex flex-col py-6 px-3 bg-layer-1 rounded-xl">
       <Tabs value={selectedPlan} onValueChange={(value) => setSelectedPlan(value as TBillingFrequency)}>
         <div className="flex w-full justify-center">
-          <Tabs.List>
+          <TabsList>
             {prices.map((price: TSubscriptionPrice) => (
-              <Tabs.Trigger key={price.key} value={price.recurring}>
+              <TabsTrigger key={price.key} value={price.recurring}>
                 {renderPriceContent(price)}
-              </Tabs.Trigger>
+              </TabsTrigger>
             ))}
-          </Tabs.List>
+          </TabsList>
         </div>
         <div>
           {prices.map((price: TSubscriptionPrice) => (
-            <Tabs.Content key={price.key} value={price.recurring}>
+            <TabsContent key={price.key} value={price.recurring}>
               <div className="pt-6 text-center">
                 <div className="text-h4-medium">Plane {planeName}</div>
                 {renderActionButton(price)}
@@ -72,7 +72,7 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
                 </ul>
                 {extraFeatures && <div>{extraFeatures}</div>}
               </div>
-            </Tabs.Content>
+            </TabsContent>
           ))}
         </div>
       </Tabs>
diff --git a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
index 0b58a3d81b..663a1defc1 100644
--- a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 import type { TWorkItemFilterCondition } from "@plane/shared-state";
 import type { TModuleDistribution, TModuleEstimateDistribution, TModulePlotType } from "@plane/types";
 import { toFilterArray } from "@plane/utils";
@@ -106,30 +106,30 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
   return (
     <div>
       <Tabs defaultValue={currentTab ?? "stat-assignees"} onValueChange={(value) => setModuleTab(value)}>
-        <Tabs.List>
+        <TabsList>
           {PROGRESS_STATS.map((stat) => (
-            <Tabs.Trigger key={stat.key} value={stat.key}>
+            <TabsTrigger key={stat.key} value={stat.key}>
               {t(stat.i18n_title)}
-            </Tabs.Trigger>
+            </TabsTrigger>
           ))}
-        </Tabs.List>
-        <Tabs.Content value="stat-assignees">
+        </TabsList>
+        <TabsContent value="stat-assignees">
           <AssigneeStatComponent
             distribution={distributionAssigneeData}
             handleAssigneeFiltersUpdate={handleAssigneeFiltersUpdate}
             isEditable={isEditable}
             selectedAssigneeIds={selectedAssigneeIds}
           />
-        </Tabs.Content>
-        <Tabs.Content value="stat-labels">
+        </TabsContent>
+        <TabsContent value="stat-labels">
           <LabelStatComponent
             distribution={distributionLabelData}
             handleLabelFiltersUpdate={handleLabelFiltersUpdate}
             isEditable={isEditable}
             selectedLabelIds={selectedLabelIds}
           />
-        </Tabs.Content>
-        <Tabs.Content value="stat-states">
+        </TabsContent>
+        <TabsContent value="stat-states">
           <StateGroupStatComponent
             distribution={distributionStateData}
             handleStateGroupFiltersUpdate={handleStateGroupFiltersUpdate}
@@ -137,7 +137,7 @@ export const ModuleProgressStats = observer(function ModuleProgressStats(props:
             selectedStateGroups={selectedStateGroups}
             totalIssuesCount={totalIssuesCount}
           />
-        </Tabs.Content>
+        </TabsContent>
       </Tabs>
     </div>
   );
diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
index f323effd47..dd7e30ba5e 100644
--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -1,7 +1,7 @@
-import React, { useCallback } from "react";
+import { ArrowRightCircle } from "lucide-react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { ArrowRightCircle } from "lucide-react";
+import { useCallback } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Tabs } from "@plane/propel/tabs";
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
index 3db2ad95dd..c02d5f68e9 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 // plane imports
-import { Tabs } from "@plane/propel/tabs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@plane/propel/tabs";
 // components
 import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
 // plane web imports
@@ -24,7 +24,7 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
   return (
     <>
       {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-        <Tabs.Content
+        <TabsContent
           key={tab.key}
           value={tab.key}
           className="size-full overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
@@ -33,7 +33,7 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
           {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
           {tab.key === "assets" && <PageNavigationPaneAssetsTabPanel page={page} />}
           <PageNavigationPaneAdditionalTabPanelsRoot activeTab={tab.key} page={page} />
-        </Tabs.Content>
+        </TabsContent>
       ))}
     </>
   );
diff --git a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
index 00351dac1d..761e9c1b0a 100644
--- a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -1,6 +1,6 @@
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Tabs } from "@plane/propel/tabs";
+import { TabsList, TabsTrigger } from "@plane/propel/tabs";
 // plane web components
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 
@@ -9,12 +9,12 @@ export function PageNavigationPaneTabsList() {
   const { t } = useTranslation();
 
   return (
-    <Tabs.List>
+    <TabsList>
       {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
-        <Tabs.Trigger key={tab.key} value={tab.key}>
+        <TabsTrigger key={tab.key} value={tab.key}>
           {t(tab.i18n_label)}
-        </Tabs.Trigger>
+        </TabsTrigger>
       ))}
-    </Tabs.List>
+    </TabsList>
   );
 }