From 0493c5cec716e85fc29bc807b09a3cf2ac09ae21 Mon Sep 17 00:00:00 2001
From: Seth Foster <seth@opentrons.com>
Date: Wed, 24 Apr 2024 14:52:30 -0400
Subject: [PATCH] fix(app): specify component for markdown uls (#14997)

When these are undefined, if react-markdown tries to render them it will
throw and that will crash the app. With these implemented with the same
StyledText passthrough as other text elements, it won't crash anymore -
though our styling rules aren't applied to the actual text in the ul.

Closes RQA-2566
Closes RQA-2587
---
 app/src/molecules/ReleaseNotes/index.tsx   | 12 ++++++++++--
 app/src/molecules/modals/styles.module.css |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/src/molecules/ReleaseNotes/index.tsx b/app/src/molecules/ReleaseNotes/index.tsx
index 38d88616143..90b36e2fd19 100644
--- a/app/src/molecules/ReleaseNotes/index.tsx
+++ b/app/src/molecules/ReleaseNotes/index.tsx
@@ -20,9 +20,9 @@ export function ReleaseNotes(props: ReleaseNotesProps): JSX.Element {
         <Markdown
           components={{
             div: undefined,
-            ul: undefined,
+            ul: UnnumberedListText,
             h2: HeaderText,
-            li: ParagraphText,
+            li: ListItemText,
             p: ParagraphText,
             a: ExternalLink,
           }}
@@ -47,3 +47,11 @@ function ParagraphText(props: JSX.IntrinsicAttributes): JSX.Element {
 function HeaderText(props: JSX.IntrinsicAttributes): JSX.Element {
   return <StyledText {...props} as="h3" />
 }
+
+function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <StyledText {...props} as="li" />
+}
+
+function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element {
+  return <StyledText {...props} as="ul" />
+}
diff --git a/app/src/molecules/modals/styles.module.css b/app/src/molecules/modals/styles.module.css
index 00ee4b72efe..3e7d592afe2 100644
--- a/app/src/molecules/modals/styles.module.css
+++ b/app/src/molecules/modals/styles.module.css
@@ -73,4 +73,4 @@
   max-height: 100%;
   overflow-y: auto;
   padding-bottom: 3rem;
-}
\ No newline at end of file
+}