[Typography] Added position only when Skeleton is a direct child (#38799

)

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',
             })

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;
 }

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>
+  );
+}