From 06e27570506ae7255485dd77a59d87b61e0abbf5 Mon Sep 17 00:00:00 2001
From: Iain Billett <iain@roadie.io>
Date: Fri, 3 Sep 2021 13:21:19 +0100
Subject: [PATCH] Fix BottomLink warning

During local development the component causes a warning
to be logged - details in changeset.
This doesn't affect prod deployments seems to be dev mode
only.

Signed-off-by: Iain Billett <iain@roadie.io>
---
 .changeset/bright-birds-jog.md                     | 14 ++++++++++++++
 .../src/layout/BottomLink/BottomLink.tsx           | 10 +++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/bright-birds-jog.md

diff --git a/.changeset/bright-birds-jog.md b/.changeset/bright-birds-jog.md
new file mode 100644
index 0000000000..20954eca77
--- /dev/null
+++ b/.changeset/bright-birds-jog.md
@@ -0,0 +1,14 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix warning produced by BottomLink component
+
+During development, we noticed warnings such as:
+
+```
+react_devtools_backend.js:2842 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
+```
+
+The BottomLink component renders a Box component within a Typography component which leads to a div tag within a p tag.
+This change inverts that ordering without changing the visual appearance.
diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
index fdc64a9b90..74912acf4c 100644
--- a/packages/core-components/src/layout/BottomLink/BottomLink.tsx
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.tsx
@@ -49,11 +49,11 @@ export const BottomLink = ({ link, title, onClick }: BottomLinkProps) => {
       <Divider />
       <Link to={link} onClick={onClick} underline="none">
         <Box display="flex" alignItems="center" className={classes.root}>
-          <Typography>
-            <Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>
-              {title}
-            </Box>
-          </Typography>
+          <Box className={classes.boxTitle} fontWeight="fontWeightBold" m={1}>
+            <Typography>
+              <strong>{title}</strong>
+            </Typography>
+          </Box>
           <ArrowIcon className={classes.arrow} />
         </Box>
       </Link>