-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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)', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
}, | ||
}, | ||
/** | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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)})`, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. for consistency with the other padding |
||
// We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable. | ||
// 105ch ≈ 930px | ||
fontFamily: 'Arial', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -50,15 +50,15 @@ const StyledAppContainer = styled(AppContainer, { | |
marginBottom: 198, | ||
}, | ||
'&& .description.ad': { | ||
marginBottom: 40, | ||
marginBottom: 0, | ||
}, | ||
}), | ||
...(hasTabs && { | ||
'&& .component-tabs .MuiTabs-root': { | ||
marginBottom: 193, | ||
marginBottom: 198, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
}, | ||
'&& .component-tabs.ad .MuiTabs-root': { | ||
marginBottom: 35, | ||
marginBottom: 0, | ||
}, | ||
}), | ||
}), | ||
|
@@ -86,10 +86,10 @@ function AppLayoutDocs(props) { | |
description, | ||
disableAd = false, | ||
disableToc = false, | ||
hasTabs = false, | ||
location, | ||
title, | ||
toc, | ||
hasTabs = false, | ||
} = props; | ||
|
||
if (description === undefined) { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,7 +4,6 @@ import { useRouter } from 'next/router'; | |
import kebabCase from 'lodash/kebabCase'; | ||
import { useTheme } from '@mui/system'; | ||
import { exactProp } from '@mui/utils'; | ||
import Box from '@mui/material/Box'; | ||
import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; | ||
import ComponentsApiContent from 'docs/src/modules/components/ComponentsApiContent'; | ||
import HooksApiContent from 'docs/src/modules/components/HooksApiContent'; | ||
|
@@ -15,6 +14,8 @@ import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocsWithoutAppFr | |
import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; | ||
import BrandingProvider from 'docs/src/BrandingProvider'; | ||
import Ad from 'docs/src/modules/components/Ad'; | ||
import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame'; | ||
import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs'; | ||
import AdGuest from 'docs/src/modules/components/AdGuest'; | ||
|
||
function JoyModeObserver({ mode }) { | ||
|
@@ -219,54 +220,55 @@ export default function MarkdownDocsV2(props) { | |
toc={activeToc} | ||
hasTabs | ||
> | ||
<Provider> | ||
{isJoy && <JoyModeObserver key="joy-provider" mode={theme.palette.mode} />} | ||
{disableAd ? null : ( | ||
<Wrapper key="add"> | ||
<AdGuest classSelector=".component-tabs"> | ||
<Ad /> | ||
</AdGuest> | ||
</Wrapper> | ||
)} | ||
{commonElements} | ||
{activeTab === '' && ( | ||
<Box> | ||
{rendered.slice(i, rendered.length - 1).map((renderedMarkdownOrDemo, index) => ( | ||
<MarkdownElement | ||
key={`demos-section-${index}`} | ||
renderedMarkdownOrDemo={renderedMarkdownOrDemo} | ||
WrapperComponent={Wrapper} | ||
wrapperProps={wrapperProps} | ||
srcComponents={srcComponents} | ||
activeTab={activeTab} | ||
setActiveTab={setActiveTab} | ||
localizedDoc={localizedDoc} | ||
demos={demos} | ||
location={location} | ||
theme={theme} | ||
demoComponents={demoComponents} | ||
disableAd={disableAd} | ||
/> | ||
))} | ||
</Box> | ||
)} | ||
{activeTab === 'components-api' && ( | ||
<Box> | ||
<div | ||
style={{ | ||
'--MuiDocs-header-height': `${AppFrameHeight + TabsHeight}px`, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix #35938 (comment) |
||
}} | ||
> | ||
<Provider> | ||
{isJoy && <JoyModeObserver key="joy-provider" mode={theme.palette.mode} />} | ||
{disableAd ? null : ( | ||
<Wrapper key="add"> | ||
<AdGuest classSelector=".component-tabs"> | ||
<Ad /> | ||
</AdGuest> | ||
</Wrapper> | ||
)} | ||
{commonElements} | ||
{activeTab === '' && | ||
rendered | ||
.slice(i, rendered.length - 1) | ||
.map((renderedMarkdownOrDemo, index) => ( | ||
<MarkdownElement | ||
key={`demos-section-${index}`} | ||
renderedMarkdownOrDemo={renderedMarkdownOrDemo} | ||
WrapperComponent={Wrapper} | ||
wrapperProps={wrapperProps} | ||
srcComponents={srcComponents} | ||
activeTab={activeTab} | ||
setActiveTab={setActiveTab} | ||
localizedDoc={localizedDoc} | ||
demos={demos} | ||
location={location} | ||
theme={theme} | ||
demoComponents={demoComponents} | ||
disableAd={disableAd} | ||
/> | ||
))} | ||
{activeTab === 'components-api' && ( | ||
<ComponentsApiContent | ||
descriptions={componentsApiDescriptions} | ||
pageContents={componentsApiPageContents} | ||
/> | ||
</Box> | ||
)} | ||
{activeTab === 'hooks-api' && ( | ||
<Box> | ||
)} | ||
{activeTab === 'hooks-api' && ( | ||
<HooksApiContent | ||
descriptions={hooksApiDescriptions} | ||
pagesContents={hooksApiPageContents} | ||
/> | ||
</Box> | ||
)} | ||
</Provider> | ||
)} | ||
</Provider> | ||
</div> | ||
</AppLayoutDocs> | ||
); | ||
} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fix #35938 (comment) |
||
'& code': { | ||
fontSize: 'inherit', | ||
lineHeight: 'inherit', | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copied from #35938 (comment)