docs: redesign tables (#8653)

* docs: redesign tables

* fixes

www/packages/docs-ui/src/components/CodeBlock/Inline/index.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import clsx from "clsx"
+import { CodeBlockProps } from "../../.."
+
+export const CodeBlockInline = ({ source }: CodeBlockProps) => {
+  return (
+    <pre
+      className={clsx(
+        "px-[6px] bg-medusa-tag-neutral-bg",
+        "w-full my-docs_0.5 rounded-docs_sm",
+        "border border-medusa-tag-neutral-border",
+        "whitespace-pre-wrap"
+      )}
+    >
+      <code className="w-full text-code-label text-medusa-tag-neutral-text">
+        {source}
+      </code>
+    </pre>
+  )
+}

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -14,6 +14,7 @@ import { HighlightProps as CollapsibleHighlightProps } from "@/hooks"
 import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"
 import { CodeBlockCollapsibleButton } from "./Collapsible/Button"
 import { CodeBlockCollapsibleFade } from "./Collapsible/Fade"
+import { CodeBlockInline } from "./Inline"
 
 export type Highlight = {
   line: number
@@ -41,7 +42,7 @@ export type CodeBlockMetaFields = {
   isTerminal?: boolean
 } & CodeBlockHeaderMeta
 
-export type CodeBlockStyle = "loud" | "subtle"
+export type CodeBlockStyle = "loud" | "subtle" | "inline"
 
 export type CodeBlockProps = {
   source: string
@@ -75,6 +76,9 @@ export const CodeBlock = ({
   if (!source && typeof children === "string") {
     source = children
   }
+  if (blockStyle === "inline") {
+    return <CodeBlockInline source={source} />
+  }
 
   const { colorMode } = useColorMode()
   const [showTesting, setShowTesting] = useState(false)

www/packages/docs-ui/src/components/Table/index.tsx

@@ -11,7 +11,24 @@ const Root = ({ className, ...props }: RootProps) => {
         className,
         "table-fixed mb-docs_1",
         "[&_pre_span]:!max-w-full [&_pre_span]:!break-words [&_pre_span]:!whitespace-break-spaces",
-        "[&_pre>div]:mt-docs_1"
+        "[&_pre>div]:mt-docs_1",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "rounded-docs_DEFAULT"
+      )}
+      {...props}
+    />
+  )
+}
+
+type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Header = ({ className, ...props }: HeaderProps) => {
+  return (
+    <UiTable.Header
+      className={clsx(
+        className,
+        "!border-0 bg-medusa-bg-component [&_tr]:!bg-medusa-bg-component",
+        "rounded-docs_DEFAULT [&_tr]:rounded-docs_DEFAULT"
       )}
       {...props}
     />
@@ -23,20 +40,11 @@ type HeaderCellProps = React.HTMLAttributes<HTMLTableCellElement>
 const HeaderCell = ({ className, ...props }: HeaderCellProps) => {
   return (
     <UiTable.HeaderCell
-      className={clsx(className, "text-left pr-docs_1.5 h-docs_3 break-words")}
-      {...props}
-    />
-  )
-}
-
-type RowProps = React.HTMLAttributes<HTMLTableRowElement>
-
-const Row = ({ className, ...props }: RowProps) => {
-  return (
-    <UiTable.Row
       className={clsx(
         className,
-        "[&_td:last-child]:pr-docs_1.5 [&_th:last-child]:pr-docs_1.5 [&_td:first-child]:pl-docs_1.5 [&_th:first-child]:pl-docs_1.5"
+        "text-left px-docs_0.75 py-docs_0.5 break-words",
+        "!text-compact-small-plus text-medusa-fg-subtle",
+        "first:rounded-tl-docs_DEFAULT last:rounded-tr-docs_DEFAULT"
       )}
       {...props}
     />
@@ -48,18 +56,32 @@ type CellProps = React.HTMLAttributes<HTMLTableCellElement>
 const Cell = ({ className, ...props }: CellProps) => {
   return (
     <UiTable.Cell
-      className={clsx(className, "pr-docs_1.5 h-docs_3 break-words")}
+      className={clsx(
+        className,
+        "px-docs_0.75 py-docs_0.5 break-words align-top"
+      )}
+      {...props}
+    />
+  )
+}
+
+type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Body = ({ className, ...props }: BodyProps) => {
+  return (
+    <UiTable.Body
+      className={clsx(className, "[&_tr:last-child]:border-b-0 border-b-0")}
       {...props}
     />
   )
 }
 
 const Table = Object.assign(Root, {
-  Row,
+  Row: UiTable.Row,
   Cell,
-  Header: UiTable.Header,
+  Header,
   HeaderCell,
-  Body: UiTable.Body,
+  Body,
 })
 
 export { Table }