docs: Fix formatting of prop descriptions with multiple paragraphs (#9574)

* docs: Fix formatting of prop descriptions with multiple paragraphs

* lint

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>

Author: devongovett

packages/dev/s2-docs/src/PropTable.tsx

@@ -196,7 +196,7 @@ function Rows({props, showDefault, showRequired}: {props: TInterface['properties
         }
       </TableRow>
       {prop.description && <TableRow>
-        <TableCell colSpan={3}>{renderHTMLfromMarkdown(prop.description, {forceInline: true})}</TableCell>
+        <TableCell colSpan={3}>{renderHTMLfromMarkdown(prop.description, {forceInline: false, forceBlock: true})}</TableCell>
       </TableRow>}
     </React.Fragment>
   ));

packages/dev/s2-docs/src/types.tsx

@@ -479,9 +479,16 @@ export function TypeLink({type}: {type: Extract<TType, {id: string, name: string
   return res;
 }
 
+const mdComponents = {
+  a: {component: SpectrumLink},
+  code: {component: Code},
+  p: {component: (props) => <p {...props} className={style({marginTop: {':first-child': 0}, marginBottom: {':last-child': 0}})} />},
+  ul: {component: (props) => <ul {...props} className={style({paddingStart: 12, marginTop: {':first-child': 0}, marginBottom: {':last-child': 0}})} />}
+};
+
 export function renderHTMLfromMarkdown(description: string | null | undefined, opts: object): ReactNode {
   if (description) {
-    const options = {forceInline: true, overrides: {a: {component: SpectrumLink}, code: {component: Code}}, disableParsingRawHTML: true, ...opts};
+    const options = {forceInline: true, overrides: mdComponents, disableParsingRawHTML: true, ...opts};
     return <Markdown options={options}>{description}</Markdown>;
   }
   return null;

packages/react-aria-components/src/utils.tsx

@@ -274,9 +274,10 @@ export interface DOMRenderProps<E extends keyof React.JSX.IntrinsicElements, T>
    * such as router links, animation libraries, and pre-styled components.
    * 
    * Requirements:
-   * - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`).
-   * - Only a single root DOM element can be rendered (no fragments).
-   * - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
+   * 
+   * * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`).
+   * * Only a single root DOM element can be rendered (no fragments).
+   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
    */
   render?: DOMRenderFunction<E, T>
 }
@@ -294,9 +295,10 @@ export interface PossibleLinkDOMRenderProps<Fallback extends keyof React.JSX.Int
    * Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element.
    * 
    * Requirements:
-   * - You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`).
-   * - Only a single root DOM element can be rendered (no fragments).
-   * - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
+   * 
+   * * You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`).
+   * * Only a single root DOM element can be rendered (no fragments).
+   * * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
    */
   render?: (props: DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement> | React.JSX.IntrinsicElements[Fallback], renderProps: T) => ReactElement
 }