From dee3419fe8528a0da36a5407b7a0969dc844a6de Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Tue, 26 Sep 2023 19:03:07 +0300
Subject: [PATCH] docs: fix details component + other styling fixes (#5217)

* docs: fix details component

* general styling fixes
---
 www/packages/docs-ui/src/components/Button/index.tsx   |  4 +++-
 .../docs-ui/src/components/Details/Summary/index.tsx   |  3 ++-
 .../docs-ui/src/components/Input/Text/index.tsx        | 10 ++++++++--
 .../src/components/Search/ModalOpener/index.tsx        |  3 ++-
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/www/packages/docs-ui/src/components/Button/index.tsx b/www/packages/docs-ui/src/components/Button/index.tsx
index b6734cd7a0..9a45e91e20 100644
--- a/www/packages/docs-ui/src/components/Button/index.tsx
+++ b/www/packages/docs-ui/src/components/Button/index.tsx
@@ -57,7 +57,9 @@ export const Button = ({
       "dark:shadow-button-neutral dark:focus:shadow-button-neutral-focused dark:active:shadow-button-neutral-focused",
       "select-none",
     ],
-    clear: ["bg-transparent shadow-none border-0 outline-none cursor-pointer"],
+    clear: [
+      "bg-transparent shadow-none border-0 outline-none cursor-pointer text-fg-medusa-subtle",
+    ],
   }
 
   return (
diff --git a/www/packages/docs-ui/src/components/Details/Summary/index.tsx b/www/packages/docs-ui/src/components/Details/Summary/index.tsx
index 6d5318092b..a43f9dea2e 100644
--- a/www/packages/docs-ui/src/components/Details/Summary/index.tsx
+++ b/www/packages/docs-ui/src/components/Details/Summary/index.tsx
@@ -15,6 +15,7 @@ export type DetailsSummaryProps = {
 export const DetailsSummary = ({
   title,
   subtitle,
+  children,
   badge,
   expandable = true,
   open = false,
@@ -40,7 +41,7 @@ export const DetailsSummary = ({
             titleClassName
           )}
         >
-          {title}
+          {title || children}
         </span>
         {subtitle && (
           <span className="text-compact-medium text-medusa-fg-subtle">
diff --git a/www/packages/docs-ui/src/components/Input/Text/index.tsx b/www/packages/docs-ui/src/components/Input/Text/index.tsx
index 34711f5408..f090afea73 100644
--- a/www/packages/docs-ui/src/components/Input/Text/index.tsx
+++ b/www/packages/docs-ui/src/components/Input/Text/index.tsx
@@ -3,12 +3,17 @@ import clsx from "clsx"
 
 export type InputTextProps = {
   className?: string
+  addGroupStyling?: boolean
 } & React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
 >
 
-export const InputText = (props: InputTextProps) => {
+export const InputText = ({
+  addGroupStyling = false,
+  className,
+  ...props
+}: InputTextProps) => {
   return (
     <input
       {...props}
@@ -17,6 +22,7 @@ export const InputText = (props: InputTextProps) => {
         "border-medusa-border-base rounded-docs_sm border border-solid",
         "px-docs_0.75 py-[9px]",
         "hover:bg-medusa-bg-field-hover",
+        addGroupStyling && "group-hover:bg-medusa-bg-field-hover",
         "focus:border-medusa-border-interactive",
         "active:border-medusa-border-interactive",
         "disabled:bg-medusa-bg-disabled",
@@ -24,7 +30,7 @@ export const InputText = (props: InputTextProps) => {
         "placeholder:text-medusa-fg-muted",
         "disabled:placeholder:text-medusa-fg-disabled",
         "text-compact-medium font-base",
-        props.className
+        className
       )}
     />
   )
diff --git a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
index 0f215b8142..32b23cd751 100644
--- a/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
+++ b/www/packages/docs-ui/src/components/Search/ModalOpener/index.tsx
@@ -53,7 +53,7 @@ export const SearchModalOpener = ({
       )}
       {!isMobile && (
         <div
-          className={clsx("relative w-min hover:cursor-pointer")}
+          className={clsx("relative w-min hover:cursor-pointer group")}
           onClick={handleOpen}
         >
           <MagnifyingGlass
@@ -73,6 +73,7 @@ export const SearchModalOpener = ({
             onClick={handleOpen}
             onFocus={(e) => e.target.blur()}
             tabIndex={-1}
+            addGroupStyling={true}
           />
           <span
             className={clsx(