asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: redesign vertical tabs (#8673)

Browse Source
This commit is contained in:
Shahed Nasser
2024-08-20 14:48:09 +02:00
committed by GitHub
parent 43202dde0f
commit 48fe819d9e
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/apps/book/app/advanced-development/modules/remote-query/page.mdx
+5 -5
View File
@@ -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 = { export const metadata = {
title: `${pageNumber} Remote Query`, 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"> <Tabs defaultValue="basic" layoutType="vertical" className="mt-2">
<TabsList> <TabsList>
<TabsTrigger value="basic">Basic Usage</TabsTrigger> <TabsTriggerVertical value="basic">Basic Usage</TabsTriggerVertical>
<TabsTrigger value="filters">Apply Filters</TabsTrigger> <TabsTriggerVertical value="filters">Apply Filters</TabsTriggerVertical>
<TabsTrigger value="sort">Sort Records</TabsTrigger> <TabsTriggerVertical value="sort">Sort Records</TabsTriggerVertical>
<TabsTrigger value="pagination">Apply Pagination</TabsTrigger> <TabsTriggerVertical value="pagination">Apply Pagination</TabsTriggerVertical>
</TabsList> </TabsList>
<TabsContentWrapper> <TabsContentWrapper>
<TabsContent value="basic" className="[&_h3]:!mt-0"> <TabsContent value="basic" className="[&_h3]:!mt-0">
www/apps/book/app/advanced-development/modules/service-factory/page.mdx
+9 -9
View File
@@ -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 = { export const metadata = {
title: `${pageNumber} Service Factory`, 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"> <Tabs defaultValue="listMyCustoms" layoutType="vertical" className="mt-2">
<TabsList> <TabsList>
<TabsTrigger value="listMyCustoms">listMyCustoms</TabsTrigger> <TabsTriggerVertical value="listMyCustoms">listMyCustoms</TabsTriggerVertical>
<TabsTrigger value="listAndCountMyCustoms">listAndCountMyCustoms</TabsTrigger> <TabsTriggerVertical value="listAndCountMyCustoms">listAndCount</TabsTriggerVertical>
<TabsTrigger value="retrieveMyCustom">retrieveMyCustom</TabsTrigger> <TabsTriggerVertical value="retrieveMyCustom">retrieveMyCustom</TabsTriggerVertical>
<TabsTrigger value="createMyCustoms">createMyCustoms</TabsTrigger> <TabsTriggerVertical value="createMyCustoms">createMyCustoms</TabsTriggerVertical>
<TabsTrigger value="updateMyCustoms">updateMyCustoms</TabsTrigger> <TabsTriggerVertical value="updateMyCustoms">updateMyCustoms</TabsTriggerVertical>
<TabsTrigger value="deleteMyCustoms">deleteMyCustoms</TabsTrigger> <TabsTriggerVertical value="deleteMyCustoms">deleteMyCustoms</TabsTriggerVertical>
<TabsTrigger value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTrigger> <TabsTriggerVertical value="softDeleteMyCustoms">softDeleteMyCustoms</TabsTriggerVertical>
<TabsTrigger value="restoreMyCustoms">restoreMyCustoms</TabsTrigger> <TabsTriggerVertical value="restoreMyCustoms">restoreMyCustoms</TabsTriggerVertical>
</TabsList> </TabsList>
<TabsContentWrapper className="[&_h3]:!mt-0"> <TabsContentWrapper className="[&_h3]:!mt-0">
<TabsContent value="listMyCustoms"> <TabsContent value="listMyCustoms">
www/packages/docs-ui/src/components/Tabs/index.tsx
+21
View File
@@ -4,6 +4,7 @@ import React from "react"
import { Tabs as UiTabs } from "@medusajs/ui" import { Tabs as UiTabs } from "@medusajs/ui"
import { ComponentProps } from "react" import { ComponentProps } from "react"
import clsx from "clsx" import clsx from "clsx"
import { EllipseMiniSolid } from "@medusajs/icons"
type TabsProps = ComponentProps<typeof UiTabs> & { type TabsProps = ComponentProps<typeof UiTabs> & {
layoutType?: "horizontal" | "vertical" layoutType?: "horizontal" | "vertical"
@@ -22,6 +23,7 @@ export const Tabs = ({
"flex gap-docs_1", "flex gap-docs_1",
"[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start", "[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
"[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0", "[&_[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 = { type TabsContentWrapperProps = {
className?: string className?: string
children: React.ReactNode children: React.ReactNode