From 662b096a4696246747bae2c4595f4f835b566b90 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 13 Nov 2024 17:41:49 +0200
Subject: [PATCH] docs: fix oneOf design hiding more than three items (#10077)

* docs: fix oneOf design hiding more than three items

* fix lint errors

* fix eslint
---
 .../Operation/Parameters/Types/OneOf/index.tsx     | 14 ++++++++------
 www/eslint.config.mjs                              |  2 +-
 .../src/components/CodeBlock/Header/index.tsx      |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx b/www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx
index f5b73f0433..b5085ad255 100644
--- a/www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx
+++ b/www/apps/api-reference/components/Tags/Operation/Parameters/Types/OneOf/index.tsx
@@ -66,19 +66,21 @@ const TagOperationParamatersOneOf = ({
     return (
       <>
         <div className={clsx("flex items-center gap-1 pl-1")}>
-          <span className="inline-block">One of</span>
-          <ul className="mb-0 flex list-none gap-1">
+          <span className="inline-block text-compact-x-small">One of</span>
+          <ul className="mb-0 flex list-none gap-0.5 flex-wrap">
             {schema.oneOf?.map((item, index) => (
               <li
                 key={index}
                 className={clsx(
-                  "rounded-xs cursor-pointer p-0.5",
-                  "border border-solid",
+                  "rounded-full cursor-pointer px-[10px]",
+                  "flex justify-center items-center text-compact-small-plus",
+                  "focus:shadow-borders-interactive-with-focus transition-colors",
                   activeTab === index && [
-                    "bg-medusa-bg-subtle border-medusa-border-strong",
+                    "text-medusa-fg-base bg-medusa-bg-base",
+                    "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
                   ],
                   activeTab !== index && [
-                    "bg-medusa-bg-base border-medusa-border-base",
+                    "text-medusa-fg-muted hover:text-medusa-fg-base",
                   ]
                 )}
                 onClick={() => setActiveTab(index)}
diff --git a/www/eslint.config.mjs b/www/eslint.config.mjs
index d2120e9eee..16088c3969 100644
--- a/www/eslint.config.mjs
+++ b/www/eslint.config.mjs
@@ -19,7 +19,7 @@ const compat = new FlatCompat({
 export default [
     prettier,
     {
-    ignores: ["**/dist", "**/build"],
+    ignores: ["**/dist", "**/build", "**/global-config.ts"],
 }, ...compat.extends(
     "eslint:recommended",
     "plugin:react/recommended",
diff --git a/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx
index 1121c46c1e..4217da2ebe 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx
@@ -26,7 +26,7 @@ export const CodeBlockHeader = ({
   badgeLabel,
   actionsProps,
   badgeColor,
-  hideActions = false
+  hideActions = false,
 }: CodeBlockHeaderProps) => {
   const { colorMode } = useColorMode()