[Joy] Adjust typography decorator margin (#34257)

mui · Sep 10, 2022 · 552f04e · 552f04e
1 parent 420e4a7
commit 552f04e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/docs/data/joy/components/link/LinkAndTypography.js b/docs/data/joy/components/link/LinkAndTypography.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Box from '@mui/joy/Box';
 import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
-import CallMade from '@mui/icons-material/CallMade';
+import Launch from '@mui/icons-material/Launch';
 import LinkIcon from '@mui/icons-material/Link';
 
 export default function LinkAndTypography() {
@@ -31,7 +31,7 @@ export default function LinkAndTypography() {
       <Typography>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore{' '}
-        <Link href="#heading-demo" endDecorator={<CallMade />}>
+        <Link href="#heading-demo" endDecorator={<Launch />}>
           Magna Aliqua
         </Link>
         . Maecenas sed enim ut sem viverra aliquet eget.

diff --git a/packages/mui-joy/src/Link/Link.tsx b/packages/mui-joy/src/Link/Link.tsx
@@ -41,7 +41,7 @@ const StartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: LinkOwnerState }>({
   display: 'inline-flex',
-  marginInlineEnd: 'min(var(--Link-gap, 0.25em), 0.5rem)',
+  marginInlineEnd: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)',
 });
 
 const EndDecorator = styled('span', {
@@ -50,7 +50,7 @@ const EndDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: LinkOwnerState }>({
   display: 'inline-flex',
-  marginInlineStart: 'min(var(--Link-gap, 0.25em), 0.5rem)',
+  marginInlineStart: 'clamp(4px, var(--Link-gap, 0.25em), 0.5rem)',
 });
 
 const LinkRoot = styled('a', {

diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx
@@ -37,7 +37,7 @@ const StartDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.startDecorator,
 })<{ ownerState: TypographyOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
-  marginInlineEnd: 'min(var(--Typography-gap, 0.25em), 0.5rem)',
+  marginInlineEnd: 'clamp(4px, var(--Typography-gap, 0.25em), 0.5rem)',
   ...((ownerState.sx as any)?.alignItems === 'flex-start' && {
     marginTop: '2px', // this makes the alignment perfect in most cases
   }),
@@ -49,7 +49,7 @@ const EndDecorator = styled('span', {
   overridesResolver: (props, styles) => styles.endDecorator,
 })<{ ownerState: TypographyOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
-  marginInlineStart: 'min(var(--Typography-gap, 0.25em), 0.5rem)',
+  marginInlineStart: 'clamp(4px, var(--Typography-gap, 0.25em), 0.5rem)',
   ...((ownerState.sx as any)?.alignItems === 'flex-start' && {
     marginTop: '2px', // this makes the alignment perfect in most cases
   }),