From 48fe819d9e75df69d8351393ecb06236302417cd Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 20 Aug 2024 15:48:09 +0300
Subject: [PATCH] docs: redesign vertical tabs (#8673)

---
 .../modules/remote-query/page.mdx             | 10 ++++-----
 .../modules/service-factory/page.mdx          | 18 ++++++++--------
 .../docs-ui/src/components/Tabs/index.tsx     | 21 +++++++++++++++++++
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/www/apps/book/app/advanced-development/modules/remote-query/page.mdx b/www/apps/book/app/advanced-development/modules/remote-query/page.mdx
index 0565017d0e..0daf58a54e 100644
--- a/www/apps/book/app/advanced-development/modules/remote-query/page.mdx
+++ b/www/apps/book/app/advanced-development/modules/remote-query/page.mdx
@@ -1,4 +1,4 @@
-import { TypeList, Tabs, TabsList, TabsTrigger, TabsContent, TabsContentWrapper } from "docs-ui"
+import { TypeList, Tabs, TabsList, TabsTriggerVertical, TabsContent, TabsContentWrapper } from "docs-ui"
 
 export const metadata = {
   title: `${pageNumber} Remote Query`,
@@ -242,10 +242,10 @@ The remote query function alternatively accepts a string with GraphQL syntax as
 
 <Tabs defaultValue="basic" layoutType="vertical" className="mt-2">
   <TabsList>
-    <TabsTrigger value="basic">Basic Usage</TabsTrigger>
-    <TabsTrigger value="filters">Apply Filters</TabsTrigger>
-    <TabsTrigger value="sort">Sort Records</TabsTrigger>
-    <TabsTrigger value="pagination">Apply Pagination</TabsTrigger>
+    <TabsTriggerVertical value="basic">Basic Usage</TabsTriggerVertical>
+    <TabsTriggerVertical value="filters">Apply Filters</TabsTriggerVertical>
+    <TabsTriggerVertical value="sort">Sort Records</TabsTriggerVertical>
+    <TabsTriggerVertical value="pagination">Apply Pagination</TabsTriggerVertical>
   </TabsList>
   <TabsContentWrapper>
     <TabsContent value="basic" className="[&_h3]:!mt-0">
diff --git a/www/apps/book/app/advanced-development/modules/service-factory/page.mdx b/www/apps/book/app/advanced-development/modules/service-factory/page.mdx
index 3297e6ea35..cf478f4a41 100644
--- a/www/apps/book/app/advanced-development/modules/service-factory/page.mdx
+++ b/www/apps/book/app/advanced-development/modules/service-factory/page.mdx
@@ -1,4 +1,4 @@
-import { Tabs, TabsContent, TabsContentWrapper, TabsList, TabsTrigger } from "docs-ui"
+import { Tabs, TabsContent, TabsContentWrapper, TabsList, TabsTriggerVertical } from "docs-ui"
 
 export const metadata = {
   title: `${pageNumber} Service Factory`,
@@ -68,14 +68,14 @@ Find a complete reference of each of the methods in [this documentation](!resour
 
 <Tabs defaultValue="listMyCustoms" layoutType="vertical" className="mt-2">
   <TabsList>
-    <TabsTrigger value="listMyCustoms">listMyCustoms</TabsTrigger>
-    <TabsTrigger value="listAndCountMyCustoms">listAndCountMyCustoms</TabsTrigger>
-    <TabsTrigger value="retrieveMyCustom">retrieveMyCustom</TabsTrigger>
-    <TabsTrigger value="createMyCustoms">createMyCustoms</TabsTrigger>
-    <TabsTrigger value="updateMyCustoms">updateMyCustoms</TabsTrigger>
-    <TabsTrigger value="deleteMyCustoms">deleteMyCustoms</TabsTrigger>
-    <TabsTrigger value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTrigger>
-    <TabsTrigger value="restoreMyCustoms">restoreMyCustoms</TabsTrigger>
+    <TabsTriggerVertical value="listMyCustoms">listMyCustoms</TabsTriggerVertical>
+    <TabsTriggerVertical value="listAndCountMyCustoms">listAndCount</TabsTriggerVertical>
+    <TabsTriggerVertical value="retrieveMyCustom">retrieveMyCustom</TabsTriggerVertical>
+    <TabsTriggerVertical value="createMyCustoms">createMyCustoms</TabsTriggerVertical>
+    <TabsTriggerVertical value="updateMyCustoms">updateMyCustoms</TabsTriggerVertical>
+    <TabsTriggerVertical value="deleteMyCustoms">deleteMyCustoms</TabsTriggerVertical>
+    <TabsTriggerVertical value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTriggerVertical>
+    <TabsTriggerVertical value="restoreMyCustoms">restoreMyCustoms</TabsTriggerVertical>
   </TabsList>
   <TabsContentWrapper className="[&_h3]:!mt-0">
     <TabsContent value="listMyCustoms">
diff --git a/www/packages/docs-ui/src/components/Tabs/index.tsx b/www/packages/docs-ui/src/components/Tabs/index.tsx
index 217ec059cd..448405fb6b 100644
--- a/www/packages/docs-ui/src/components/Tabs/index.tsx
+++ b/www/packages/docs-ui/src/components/Tabs/index.tsx
@@ -4,6 +4,7 @@ import React from "react"
 import { Tabs as UiTabs } from "@medusajs/ui"
 import { ComponentProps } from "react"
 import clsx from "clsx"
+import { EllipseMiniSolid } from "@medusajs/icons"
 
 type TabsProps = ComponentProps<typeof UiTabs> & {
   layoutType?: "horizontal" | "vertical"
@@ -22,6 +23,7 @@ export const Tabs = ({
         "flex gap-docs_1",
         "[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
         "[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0",
+        "[&_[role=tablist]+*]:w-3/4 [&_[role=tablist]]:w-1/4",
       ]
     )}
   />
@@ -48,6 +50,25 @@ export const TabsTrigger = ({
   />
 )
 
+export const TabsTriggerVertical = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof UiTabs.Trigger>) => (
+  <UiTabs.Trigger
+    {...props}
+    className={clsx(
+      className,
+      "px-docs_0.5 py-docs_0.25 !text-medusa-fg-base text-compact-small data-[state=active]:!text-compact-small-plus",
+      "[&[data-state=active]_svg]:!visible hover:!bg-medusa-bg-base-hover rounded-docs_DEFAULT",
+      "!shadow-none"
+    )}
+  >
+    <EllipseMiniSolid className="invisible" />
+    {children}
+  </UiTabs.Trigger>
+)
+
 type TabsContentWrapperProps = {
   className?: string
   children: React.ReactNode