From 846bc16fb3f02e9b64573a4aaaa0bd5aea2be36f Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Tue, 5 Sep 2023 14:31:27 +0700
Subject: [PATCH] [Typography] Added position only when Skeleton is a direct
 child (#38799)

---
 .../mui-joy/src/Typography/Typography.tsx     |  8 ++++--
 .../mui-joy/src/Typography/TypographyProps.ts |  5 ++++
 test/regressions/fixtures/LinkJoy/LinkCard.js | 26 +++++++++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 test/regressions/fixtures/LinkJoy/LinkCard.js

diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
index 6001aa8e639ad8..e1485cbbbcf4e6 100644
--- a/packages/mui-joy/src/Typography/Typography.tsx
+++ b/packages/mui-joy/src/Typography/Typography.tsx
@@ -87,7 +87,9 @@ const TypographyRoot = styled('span', {
         }
       : {
           display: 'block', // don't rely on user agent, always `block`.
-          position: 'relative',
+          ...(ownerState.unstable_hasSkeleton && {
+            position: 'relative',
+          }),
         }),
     ...((ownerState.startDecorator || ownerState.endDecorator) && {
       display: 'flex',
@@ -189,6 +191,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
 
   const level = nesting || inheriting ? inProps.level || 'inherit' : levelProp;
 
+  const hasSkeleton = isMuiElement(children, ['Skeleton']);
   const component =
     componentProp ||
     ((nesting
@@ -204,6 +207,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
     noWrap,
     nesting,
     variant,
+    unstable_hasSkeleton: hasSkeleton,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -238,7 +242,7 @@ const Typography = React.forwardRef(function Typography(inProps, ref) {
           <SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
         )}
 
-        {isMuiElement(children, ['Skeleton'])
+        {hasSkeleton
           ? React.cloneElement(children as React.ReactElement, {
               variant: (children as React.ReactElement).props.variant || 'inline',
             })
diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts
index 40f2cfe2187192..e2f962ca98de4b 100644
--- a/packages/mui-joy/src/Typography/TypographyProps.ts
+++ b/packages/mui-joy/src/Typography/TypographyProps.ts
@@ -130,4 +130,9 @@ export interface TypographyOwnerState extends ApplyColorInversion<TypographyProp
    * If `true`, the element is rendered in a Typography.
    */
   nesting: boolean;
+  /**
+   * @internal
+   * If `true`, the Skeleton is a direct child.
+   */
+  unstable_hasSkeleton?: boolean;
 }
diff --git a/test/regressions/fixtures/LinkJoy/LinkCard.js b/test/regressions/fixtures/LinkJoy/LinkCard.js
new file mode 100644
index 00000000000000..87d4b6251c6a03
--- /dev/null
+++ b/test/regressions/fixtures/LinkJoy/LinkCard.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Card from '@mui/joy/Card';
+import Link, { linkClasses } from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+
+export default function LinkCard() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
+        <Avatar size="lg" src="/static/images/avatar/1.jpg" />
+        <Link
+          overlay
+          href="#introduction"
+          underline="none"
+          className={linkClasses.focusVisible}
+          sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
+        >
+          <Typography level="body-md">Joy UI</Typography>
+          <Typography level="body-sm">Components that spark joy!</Typography>
+        </Link>
+      </Card>
+    </Box>
+  );
+}