fix(EnterpriseAlert): render span when inline (#881)

hashicorp · Feb 15, 2023 · 406fa0c · 406fa0c · vercel · Feb 15, 2023
1 parent 540598e
commit 406fa0c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/chilly-bikes-scream.md b/.changeset/chilly-bikes-scream.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-enterprise-alert': patch
+---
+
+Fix EnterpriseAlert so that it does not potentially generate invalid markup when used inline
diff --git a/packages/enterprise-alert/index.tsx b/packages/enterprise-alert/index.tsx
@@ -23,8 +23,12 @@ function EnterpriseAlert({
   className,
 }: EnterpriseAlertProps) {
   const { name, slug, themeClass } = useProductMeta(product)
+
+  // This ensures we aren't producing invalid HTML when rendering inline alerts within MDX. When used inline, we might end up nesting a div inside of a p. This is invalid as p cannot contain block-level elements (ref: https://www.w3.org/TR/html401/struct/text.html#h-9.3.1).
+  const Element = inline ? 'span' : 'div'
+
   return (
-    <div
+    <Element
       className={classNames(s.root, themeClass, className, {
         [s.themed]: themeClass,
         [s.inline]: inline,
@@ -50,7 +54,7 @@ function EnterpriseAlert({
           )}
         </p>
       )}
-    </div>
+    </Element>
   )
 }