Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Joy] Adjust typography decorator margin #34257

Merged
merged 7 commits into from Sep 10, 2022
Merged

[Joy] Adjust typography decorator margin #34257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cd15302
[website] Allow deep linking to sponsors
oliviertassinari Sep 5, 2022
05d7d5e
Merge branch 'master' of https://github.com/mui/material-ui
siriwatknp Sep 6, 2022
95ba70a
Merge branch 'master' of https://github.com/mui/material-ui
siriwatknp Sep 6, 2022
ea8a590
Merge branch 'master' of https://github.com/mui/material-ui
siriwatknp Sep 10, 2022
d5eb992
adjust decorator margin
siriwatknp Sep 10, 2022
5c8ef3b
use better icon
siriwatknp Sep 10, 2022
cbfbbd4
add clamp
siriwatknp Sep 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/data/joy/components/link/LinkAndTypography.js
View file
Open in desktop
Expand Up @@ -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() {
Expand Down Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-joy/src/Link/Link.tsx
View file
Open in desktop
Expand Up @@ -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', {
Expand All @@ -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', {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-joy/src/Typography/Typography.tsx
View file
Open in desktop
Expand Up @@ -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
}),
Expand All @@ -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
}),
Expand Down