Skip to content

Commit cd9ecce

Browse files
DiegoAndaiDiegoAndai
committed
Merge branch 'master' into improve-grid2-migration
2 parents aed014a + 620be65 commit cd9ecce

File tree

7 files changed

+299
-271
lines changed

7 files changed

+299
-271
lines changed

‎docs/src/BrandingCssVarsProvider.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { deepmerge } from '@mui/utils';
3-
import { CssVarsProvider, extendTheme, PaletteColorOptions } from '@mui/material/styles';
3+
import { ThemeProvider, createTheme, PaletteColorOptions } from '@mui/material/styles';
44
import CssBaseline from '@mui/material/CssBaseline';
55
import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
66
import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
@@ -16,9 +16,11 @@ declare module '@mui/material/styles' {
1616
const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
1717
const { palette: darkPalette } = getDesignTokens('dark');
1818

19-
const theme = extendTheme({
20-
cssVarPrefix: 'muidocs',
21-
colorSchemeSelector: 'data-mui-color-scheme',
19+
const theme = createTheme({
20+
cssVariables: {
21+
cssVarPrefix: 'muidocs',
22+
colorSchemeSelector: 'data-mui-color-scheme',
23+
},
2224
colorSchemes: {
2325
light: {
2426
palette: lightPalette,
@@ -51,12 +53,12 @@ const theme = extendTheme({
5153
export default function BrandingCssVarsProvider(props: { children: React.ReactNode }) {
5254
const { children } = props;
5355
return (
54-
<CssVarsProvider theme={theme} disableTransitionOnChange>
56+
<ThemeProvider theme={theme} disableTransitionOnChange>
5557
<NextNProgressBar />
5658
<CssBaseline />
5759
<SkipLink />
5860
<MarkdownLinks />
5961
{children}
60-
</CssVarsProvider>
62+
</ThemeProvider>
6163
);
6264
}

‎docs/src/modules/components/ApiPage.tsx

+143-140
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { HighlightedCode } from '@mui/docs/HighlightedCode';
1414
import { BrandingProvider } from '@mui/docs/branding';
1515
import { SectionTitle, SectionTitleProps } from '@mui/docs/SectionTitle';
1616
import { MarkdownElement } from '@mui/docs/MarkdownElement';
17+
import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
1718
import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
1819
import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection';
1920
import ClassesSection from 'docs/src/modules/components/ApiPage/sections/ClassesSection';
@@ -231,155 +232,157 @@ export default function ApiPage(props: ApiPageProps) {
231232
}
232233

233234
return (
234-
<AppLayoutDocs
235-
description={description}
236-
disableAd={disableAd}
237-
disableToc={false}
238-
location={apiSourceLocation}
239-
title={`${pageContent.name} API`}
240-
toc={toc}
241-
>
242-
<MarkdownElement>
243-
<h1>{pageContent.name} API</h1>
244-
{deprecated ? (
245-
<Alert
246-
severity="warning"
247-
icon={<WarningRoundedIcon fontSize="small" />}
248-
sx={{ mt: 1.5, mb: 3 }}
249-
>
235+
<BrandingCssVarsProvider>
236+
<AppLayoutDocs
237+
description={description}
238+
disableAd={disableAd}
239+
disableToc={false}
240+
location={apiSourceLocation}
241+
title={`${pageContent.name} API`}
242+
toc={toc}
243+
>
244+
<MarkdownElement>
245+
<h1>{pageContent.name} API</h1>
246+
{deprecated ? (
247+
<Alert
248+
severity="warning"
249+
icon={<WarningRoundedIcon fontSize="small" />}
250+
sx={{ mt: 1.5, mb: 3 }}
251+
>
252+
<span
253+
dangerouslySetInnerHTML={{
254+
__html: deprecationInfo || t('api-docs.defaultDeprecationMessage'),
255+
}}
256+
/>
257+
</Alert>
258+
) : null}
259+
<Typography variant="h5" component="p" className="description" gutterBottom>
260+
{description}
261+
{disableAd ? null : (
262+
<BrandingProvider>
263+
<AdGuest>
264+
<Ad />
265+
</AdGuest>
266+
</BrandingProvider>
267+
)}
268+
</Typography>
269+
<Heading hash="demos" />
270+
<Alert severity="success" icon={<VerifiedRoundedIcon fontSize="small" />}>
250271
<span
251272
dangerouslySetInnerHTML={{
252-
__html: deprecationInfo || t('api-docs.defaultDeprecationMessage'),
273+
__html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
274+
${demos}`,
253275
}}
254276
/>
255277
</Alert>
256-
) : null}
257-
<Typography variant="h5" component="p" className="description" gutterBottom>
258-
{description}
259-
{disableAd ? null : (
260-
<BrandingProvider>
261-
<AdGuest>
262-
<Ad />
263-
</AdGuest>
264-
</BrandingProvider>
278+
<Heading hash="import" />
279+
<HighlightedCode
280+
code={pageContent.imports.join(`
281+
// ${t('or')}
282+
`)}
283+
language="jsx"
284+
/>
285+
{pageContent.imports.length > 1 && (
286+
<p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
265287
)}
266-
</Typography>
267-
<Heading hash="demos" />
268-
<Alert severity="success" icon={<VerifiedRoundedIcon fontSize="small" />}>
269-
<span
270-
dangerouslySetInnerHTML={{
271-
__html: `<p>For examples and details on the usage of this React component, visit the component demo pages:</p>
272-
${demos}`,
288+
{componentDescription ? (
289+
<React.Fragment>
290+
<br />
291+
<br />
292+
<span
293+
dangerouslySetInnerHTML={{
294+
__html: componentDescription,
295+
}}
296+
/>
297+
</React.Fragment>
298+
) : null}
299+
<PropertiesSection
300+
properties={propertiesDef}
301+
spreadHint={spreadHint}
302+
defaultLayout={defaultLayout}
303+
layoutStorageKey={layoutStorageKey.props}
304+
/>
305+
{cssComponent && (
306+
<React.Fragment>
307+
<span
308+
dangerouslySetInnerHTML={{
309+
__html: t('api-docs.cssComponent').replace(/{{name}}/, pageContent.name),
310+
}}
311+
/>
312+
<br />
313+
<br />
314+
</React.Fragment>
315+
)}
316+
<div
317+
className="MuiCallout-root MuiCallout-info"
318+
dangerouslySetInnerHTML={{ __html: refHint }}
319+
style={{
320+
alignItems: 'baseline',
321+
gap: '4px',
322+
marginTop: 0,
273323
}}
274324
/>
275-
</Alert>
276-
<Heading hash="import" />
277-
<HighlightedCode
278-
code={pageContent.imports.join(`
279-
// ${t('or')}
280-
`)}
281-
language="jsx"
282-
/>
283-
{pageContent.imports.length > 1 && (
284-
<p dangerouslySetInnerHTML={{ __html: t('api-docs.importDifference') }} />
285-
)}
286-
{componentDescription ? (
287-
<React.Fragment>
288-
<br />
289-
<br />
290-
<span
291-
dangerouslySetInnerHTML={{
292-
__html: componentDescription,
293-
}}
294-
/>
295-
</React.Fragment>
296-
) : null}
297-
<PropertiesSection
298-
properties={propertiesDef}
299-
spreadHint={spreadHint}
300-
defaultLayout={defaultLayout}
301-
layoutStorageKey={layoutStorageKey.props}
302-
/>
303-
{cssComponent && (
304-
<React.Fragment>
305-
<span
306-
dangerouslySetInnerHTML={{
307-
__html: t('api-docs.cssComponent').replace(/{{name}}/, pageContent.name),
308-
}}
309-
/>
310-
<br />
311-
<br />
312-
</React.Fragment>
313-
)}
314-
<div
315-
className="MuiCallout-root MuiCallout-info"
316-
dangerouslySetInnerHTML={{ __html: refHint }}
317-
style={{
318-
alignItems: 'baseline',
319-
gap: '4px',
320-
marginTop: 0,
321-
}}
322-
/>
323-
{inheritance && (
324-
<React.Fragment>
325-
<Heading hash="inheritance" level="h3" />
326-
<p
327-
dangerouslySetInnerHTML={{
328-
__html: t('api-docs.inheritanceDescription')
329-
.replace(/{{component}}/, inheritance.component)
330-
.replace(/{{pathname}}/, inheritance.pathname)
331-
.replace(/{{suffix}}/, inheritanceSuffix)
332-
.replace(/{{name}}/, pageContent.name),
333-
}}
334-
/>
335-
</React.Fragment>
336-
)}
337-
{pageContent.themeDefaultProps && (
338-
<React.Fragment>
339-
<Heading hash="theme-default-props" level="h3" />
340-
<p
341-
dangerouslySetInnerHTML={{
342-
__html: t('api-docs.themeDefaultPropsDescription')
343-
.replace(/{{muiName}}/, pageContent.muiName)
344-
.replace(/{{defaultPropsLink}}/, defaultPropsLink),
345-
}}
346-
/>
347-
</React.Fragment>
348-
)}
349-
<SlotsSection
350-
slots={slotsDef}
351-
spreadHint={
352-
slotGuideLink &&
353-
t('api-docs.slotDescription').replace(/{{slotGuideLink}}/, slotGuideLink)
354-
}
355-
defaultLayout={defaultLayout}
356-
layoutStorageKey={layoutStorageKey.slots}
357-
/>
358-
<ClassesSection
359-
classes={classesDef}
360-
spreadHint={t('api-docs.classesDescription')}
361-
styleOverridesLink={styleOverridesLink}
362-
defaultLayout={defaultLayout}
363-
layoutStorageKey={layoutStorageKey.classes}
364-
displayClassKeys
365-
/>
325+
{inheritance && (
326+
<React.Fragment>
327+
<Heading hash="inheritance" level="h3" />
328+
<p
329+
dangerouslySetInnerHTML={{
330+
__html: t('api-docs.inheritanceDescription')
331+
.replace(/{{component}}/, inheritance.component)
332+
.replace(/{{pathname}}/, inheritance.pathname)
333+
.replace(/{{suffix}}/, inheritanceSuffix)
334+
.replace(/{{name}}/, pageContent.name),
335+
}}
336+
/>
337+
</React.Fragment>
338+
)}
339+
{pageContent.themeDefaultProps && (
340+
<React.Fragment>
341+
<Heading hash="theme-default-props" level="h3" />
342+
<p
343+
dangerouslySetInnerHTML={{
344+
__html: t('api-docs.themeDefaultPropsDescription')
345+
.replace(/{{muiName}}/, pageContent.muiName)
346+
.replace(/{{defaultPropsLink}}/, defaultPropsLink),
347+
}}
348+
/>
349+
</React.Fragment>
350+
)}
351+
<SlotsSection
352+
slots={slotsDef}
353+
spreadHint={
354+
slotGuideLink &&
355+
t('api-docs.slotDescription').replace(/{{slotGuideLink}}/, slotGuideLink)
356+
}
357+
defaultLayout={defaultLayout}
358+
layoutStorageKey={layoutStorageKey.slots}
359+
/>
360+
<ClassesSection
361+
classes={classesDef}
362+
spreadHint={t('api-docs.classesDescription')}
363+
styleOverridesLink={styleOverridesLink}
364+
defaultLayout={defaultLayout}
365+
layoutStorageKey={layoutStorageKey.classes}
366+
displayClassKeys
367+
/>
366368

367-
<Heading hash="source-code" level="h2" />
368-
<p
369-
dangerouslySetInnerHTML={{
370-
__html: t('api-docs.seeSourceCode').replace(
371-
'{{href}}',
372-
`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${pageContent.filename}`,
373-
),
374-
}}
375-
/>
376-
</MarkdownElement>
377-
<svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
378-
<symbol id="anchor-link-icon" viewBox="0 0 12 6">
379-
<path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />
380-
</symbol>
381-
</svg>
382-
</AppLayoutDocs>
369+
<Heading hash="source-code" level="h2" />
370+
<p
371+
dangerouslySetInnerHTML={{
372+
__html: t('api-docs.seeSourceCode').replace(
373+
'{{href}}',
374+
`${process.env.SOURCE_CODE_REPO}/blob/v${process.env.LIB_VERSION}${pageContent.filename}`,
375+
),
376+
}}
377+
/>
378+
</MarkdownElement>
379+
<svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
380+
<symbol id="anchor-link-icon" viewBox="0 0 12 6">
381+
<path d="M8.9176 0.083252H7.1676C6.84677 0.083252 6.58427 0.345752 6.58427 0.666585C6.58427 0.987419 6.84677 1.24992 7.1676 1.24992H8.9176C9.8801 1.24992 10.6676 2.03742 10.6676 2.99992C10.6676 3.96242 9.8801 4.74992 8.9176 4.74992H7.1676C6.84677 4.74992 6.58427 5.01242 6.58427 5.33325C6.58427 5.65409 6.84677 5.91659 7.1676 5.91659H8.9176C10.5276 5.91659 11.8343 4.60992 11.8343 2.99992C11.8343 1.38992 10.5276 0.083252 8.9176 0.083252ZM3.6676 2.99992C3.6676 3.32075 3.9301 3.58325 4.25094 3.58325H7.75094C8.07177 3.58325 8.33427 3.32075 8.33427 2.99992C8.33427 2.67909 8.07177 2.41659 7.75094 2.41659H4.25094C3.9301 2.41659 3.6676 2.67909 3.6676 2.99992ZM4.83427 4.74992H3.08427C2.12177 4.74992 1.33427 3.96242 1.33427 2.99992C1.33427 2.03742 2.12177 1.24992 3.08427 1.24992H4.83427C5.1551 1.24992 5.4176 0.987419 5.4176 0.666585C5.4176 0.345752 5.1551 0.083252 4.83427 0.083252H3.08427C1.47427 0.083252 0.167603 1.38992 0.167603 2.99992C0.167603 4.60992 1.47427 5.91659 3.08427 5.91659H4.83427C5.1551 5.91659 5.4176 5.65409 5.4176 5.33325C5.4176 5.01242 5.1551 4.74992 4.83427 4.74992Z" />
382+
</symbol>
383+
</svg>
384+
</AppLayoutDocs>
385+
</BrandingCssVarsProvider>
383386
);
384387
}
385388

‎docs/src/modules/components/AppLayoutDocsFooter.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ const FooterLink = styled(Link)(({ theme }) => {
3939
display: 'flex',
4040
alignItems: 'center',
4141
gap: 2,
42-
fontFamily: (theme.vars || theme).typography.fontFamily,
43-
fontSize: (theme.vars || theme).typography.pxToRem(13),
44-
fontWeight: (theme.vars || theme).typography.fontWeightMedium,
42+
fontFamily: theme.typography.fontFamily,
43+
fontSize: theme.typography.pxToRem(13),
44+
fontWeight: theme.typography.fontWeightMedium,
4545
color: (theme.vars || theme).palette.primary[600],
4646
'& > svg': { fontSize: '13px', transition: '0.2s' },
4747
'&:hover > svg': { transform: 'translateX(2px)' },

0 commit comments

Comments
 (0)