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.

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

[docs] Fix small regressions API pages #36972

Merged
merged 1 commit into from Apr 27, 2023

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Apr 23, 2023

A few low-hanging fruits from the items left in #35938.

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation regression A bug, but worse labels Apr 23, 2023
@mui-bot
Copy link

mui-bot commented Apr 23, 2023

Netlify deploy preview

https://deploy-preview-36972--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 219ede1

@@ -305,7 +305,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
fontWeight: 700,
},
allVariants: {
scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 72px)',
scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Restore 32px, it's this distance:

Frame 1 (1)

It's always the same, even on the marketing pages which have a taller appbar than on the docs.

@@ -4,7 +4,7 @@ import Container from '@mui/material/Container';

const StyledAppContainer = styled(Container)(({ theme }) => {
return {
paddingTop: 'calc(var(--MuiDocs-header-height) + 36px)',
paddingTop: `calc(var(--MuiDocs-header-height) + ${theme.spacing(4)})`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for consistency with the other padding

},
}),
...(hasTabs && {
'&& .component-tabs .MuiTabs-root': {
marginBottom: 193,
marginBottom: 198,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix #35938 (comment)

There is still a layout shift with Joy UI, but it's because the theme are not correctly isolated, the Ad renders with Joy UI theme, not with MUI's branding theme, a problem for another day.

<Box>
<div
style={{
'--MuiDocs-header-height': `${AppFrameHeight + TabsHeight}px`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -111,6 +111,8 @@ const Root = styled('div')(
},
'& h1, & h2, & h3, & h4': {
position: 'relative',
// Reserve space for the end of the line action button
paddingRight: 26 * 2 + 10,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -103,7 +103,7 @@ const pages = [
],
},
{
title: 'Component API',
title: 'APIs',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copied from #35938 (comment)

@oliviertassinari oliviertassinari merged commit fe90fe9 into mui:master Apr 27, 2023
20 checks passed
@oliviertassinari oliviertassinari deleted the fix-small-regressions branch April 27, 2023 23:12
binh1298 pushed a commit to binh1298/material-ui that referenced this pull request May 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants