fix: prevent mdx docs from wrapping jsx text in p tags (#22162)

adamalston · web-flow · commit e8d4b6ddaf77 · 2026-05-05T08:50:07.000Z
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
@@ -287,7 +287,7 @@ an element appear as a button control to a screen reader. Check out the
 
 <Unstyled>
   <Button as="div" role="button">
-    a11y Button
+    {'a11y Button'}
   </Button>
 </Unstyled>
 
diff --git a/packages/react/src/components/ClassPrefix/ClassPrefix.mdx b/packages/react/src/components/ClassPrefix/ClassPrefix.mdx
@@ -65,7 +65,7 @@ export default function MyApp() {
 To _get_ the prefix, use
 
 <LinkTo title="Hooks/usePrefix" name="Overview">
-  usePrefix
+  {'usePrefix'}
 </LinkTo>
 
 ## Component API
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.mdx b/packages/react/src/components/ComposedModal/ComposedModal.mdx
@@ -125,14 +125,15 @@ const ModalStateManager = ({
     title="Warning"
     className="sb-notification">
     <CodeSnippet type="inline" hideCopyButton>
-      Modal
+      {'Modal'}
     </CodeSnippet>
-    and
+    {' and '}
     <CodeSnippet type="inline" hideCopyButton>
-      ComposedModal
+      {'ComposedModal'}
     </CodeSnippet>
-    have to be put at the top level in a React tree. The easiest way to ensure
-    that is using a React portal, as shown in the example above.
+    {
+      ' have to be put at the top level in a React tree. The easiest way to ensure that is using a React portal, as shown in the example above.'
+    }
   </InlineNotification>
 </Unstyled>
 
@@ -259,16 +260,17 @@ With `<ComposedModal>`, you can control the buttons with the following code.
     kind="warning"
     title="Warning"
     className="sb-notification">
-    As the instructions for the three buttons imply,
+    {'As the instructions for the three buttons imply, '}
     <CodeSnippet type="inline" hideCopyButton>
-      ModalFooter
+      {'ModalFooter'}
     </CodeSnippet>
-    is flexible with the buttons you render using
+    {' is flexible with the buttons you render using '}
     <CodeSnippet type="inline" hideCopyButton>
-      Button
+      {'Button'}
     </CodeSnippet>
-    components. In this case, your application code is responsible for handling
-    button actions, such as closing the modal.
+    {
+      ' components. In this case, your application code is responsible for handling button actions, such as closing the modal.'
+    }
   </InlineNotification>
 </Unstyled>
 
diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx
@@ -128,14 +128,15 @@ const ModalStateManager = ({
     title="Warning"
     className="sb-notification">
     <CodeSnippet type="inline" hideCopyButton>
-      Modal
+      {'Modal'}
     </CodeSnippet>
-    and
+    {' and '}
     <CodeSnippet type="inline" hideCopyButton>
-      ComposedModal
+      {'ComposedModal'}
     </CodeSnippet>
-    have to be put at the top level in a React tree. The easiest way to ensure
-    that is using a React portal, as shown in the example above.
+    {
+      ' have to be put at the top level in a React tree. The easiest way to ensure that is using a React portal, as shown in the example above.'
+    }
   </InlineNotification>
 </Unstyled>
 
@@ -262,16 +263,17 @@ With `<ComposedModal>`, you can control the buttons with the following code.
     kind="warning"
     title="Warning"
     className="sb-notification">
-    As the instructions for the three buttons imply,
+    {'As the instructions for the three buttons imply, '}
     <CodeSnippet type="inline" hideCopyButton>
-      ModalFooter
+      {'ModalFooter'}
     </CodeSnippet>
-    is flexible with the buttons you render using
+    {' is flexible with the buttons you render using '}
     <CodeSnippet type="inline" hideCopyButton>
-      Button
+      {'Button'}
     </CodeSnippet>
-    components. In this case, your application code is responsible for handling
-    button actions, such as closing the modal.
+    {
+      ' components. In this case, your application code is responsible for handling button actions, such as closing the modal.'
+    }
   </InlineNotification>
 </Unstyled>
 
