docs: expanded rating form + UI docs improvement (#5211)

* docs: expanded rating form + UI docs improvement

* added props table + changed example

www/apps/ui/src/components/feedback.tsx

@@ -20,7 +20,7 @@ export const Feedback = ({ title, ...props }: FeedbackProps) => {
     <UiFeedback
       event="survey"
       pathName={absoluteUrl(pathname)}
-      reportLink={formatReportLink("UI Docs", title)}
+      reportLink={formatReportLink("UI Docs", title, "ui")}
       extraData={{
         section: title,
       }}

www/apps/ui/src/components/mdx-components.tsx

@@ -91,6 +91,20 @@ const components = {
       </ul>
     )
   },
+  ol: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLOListElement>) => {
+    return (
+      <ul
+        {...props}
+        className={clsx("list-decimal px-docs_1 mb-docs_1.5", className)}
+      >
+        {children}
+      </ul>
+    )
+  },
   li: ({
     className,
     children,

www/apps/ui/src/content/docs/components/focus-modal.mdx

@@ -30,6 +30,8 @@ import { FocusModal } from "@medusajs/ui"
 
 This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
 
+<ComponentProps component="focus-modal" />
+
 ### FocusModal.Header
 
 This component is based on the `div` element and supports all props of this element.
@@ -37,3 +39,28 @@ This component is based on the `div` element and supports all props of this elem
 ### FocusModal.Body
 
 This component is based on the `div` element and supports all props of this element.
+
+## Example: Control Open State
+
+---
+
+```tsx
+import { useState } from "react"
+
+const MyModal = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FocusModal 
+      open={open} 
+      onOpenChange={setOpen}
+    >
+      <FocusModal.Trigger>Trigger</FocusModal.Trigger>
+      <FocusModal.Content>
+        <FocusModal.Header>Title</FocusModal.Header>
+        <FocusModal.Body>Content</FocusModal.Body>
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}
+```

www/apps/ui/src/props/focus-modal.tsx

@@ -0,0 +1,26 @@
+import { PropTable } from "@/components/props-table"
+import { PropDataMap } from "@/types/props"
+
+const focusModalProps: PropDataMap = [
+  {
+    prop: "defaultOpen",
+    type: "boolean",
+  },
+  {
+    prop: "open",
+    type: "boolean",
+  },
+  {
+    prop: "onOpenChange",
+    type: {
+      type: "function",
+      signature: `(open: boolean) => void`,
+    },
+  },
+]
+
+const Props = () => {
+  return <PropTable props={focusModalProps} />
+}
+
+export default Props

www/apps/ui/src/registries/prop-registry.tsx

@@ -29,6 +29,9 @@ export const PropRegistry: Record<string, PropRegistryItem> = {
   "date-picker": {
     table: React.lazy(async () => import("../props/date-picker")),
   },
+  "focus-modal": {
+    table: React.lazy(async () => import("../props/focus-modal")),
+  },
   heading: {
     table: React.lazy(async () => import("../props/heading")),
   },