From 08048a5a8b81e6d59830f046a0aa1e7553ddb3e5 Mon Sep 17 00:00:00 2001
From: Morgan Bentell <mbentell@spotify.com>
Date: Wed, 1 Mar 2023 13:39:54 +0100
Subject: [PATCH] use span if the value of the header label content is not
 string, to remove warnings from validateDomNesting

Signed-off-by: Morgan Bentell <mbentell@spotify.com>
---
 .../src/layout/HeaderLabel/HeaderLabel.tsx          | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
index e3b6299f85..bc27bd82ec 100644
--- a/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
+++ b/packages/core-components/src/layout/HeaderLabel/HeaderLabel.tsx
@@ -50,9 +50,16 @@ type HeaderLabelContentProps = {
   className: string;
 };
 
-const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => (
-  <Typography className={className}>{value}</Typography>
-);
+const HeaderLabelContent = ({ value, className }: HeaderLabelContentProps) => {
+  return (
+    <Typography
+      component={typeof value === 'string' ? 'p' : 'span'}
+      className={className}
+    >
+      {value}
+    </Typography>
+  );
+};
 
 type HeaderLabelProps = {
   label: string;