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>
This commit is contained in:
Iain Billett
2021-09-03 13:21:19 +01:00
parent fbfcc3cfdf
commit 06e2757050
2 changed files with 19 additions and 5 deletions
+14
View File
@@ -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.
@@ -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>