From 6859c13ac7456eadc4601dfdee91a077f00e8115 Mon Sep 17 00:00:00 2001 From: Bruno Azzi Date: Wed, 18 Nov 2020 19:41:21 -0300 Subject: [PATCH 1/2] [CircularProgress][LinearProgress] Change components from div to span (#23587) --- .../src/CircularProgress/CircularProgress.d.ts | 2 +- .../src/CircularProgress/CircularProgress.js | 4 ++-- .../src/CircularProgress/CircularProgress.test.js | 4 ++-- .../src/LinearProgress/LinearProgress.d.ts | 2 +- .../material-ui/src/LinearProgress/LinearProgress.js | 11 ++++++----- .../src/LinearProgress/LinearProgress.test.js | 4 ++-- 6 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index 4a9aa08a2d85e0..18ec38827be009 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '..'; export interface CircularProgressProps - extends StandardProps, 'children'> { + extends StandardProps, 'children'> { /** * Override or extend the styles applied to the component. */ diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 12c0b188cf7bec..56a8c85c678543 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -111,7 +111,7 @@ const CircularProgress = React.forwardRef(function CircularProgress(props, ref) } return ( -
-
+ ); }); diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.test.js b/packages/material-ui/src/CircularProgress/CircularProgress.test.js index 0a78feca6d1606..3a459d91bbf377 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.test.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.test.js @@ -14,9 +14,9 @@ describe('', () => { describeConformance(, () => ({ classes, - inheritComponent: 'div', + inheritComponent: 'span', mount, - refInstanceof: window.HTMLDivElement, + refInstanceof: window.HTMLSpanElement, skip: ['componentProp'], })); diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts index 86b7ffede9f935..752533c3ecb923 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts +++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '..'; export interface LinearProgressProps - extends StandardProps, 'children'> { + extends StandardProps, 'children'> { /** * Override or extend the styles applied to the component. */ diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index 23404c389fa752..17252533506264 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -20,6 +20,7 @@ export const styles = (theme) => { root: { position: 'relative', overflow: 'hidden', + display: 'block', height: 4, zIndex: 0, // Fix Safari's bug during composition of different paint. '@media print': { @@ -215,7 +216,7 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) { } return ( -
{variant === 'buffer' ? ( -
+ ) : null} -
{variant === 'determinate' ? null : ( -
)} -
+ ); }); diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.test.js b/packages/material-ui/src/LinearProgress/LinearProgress.test.js index 80747b8bee8009..40000f449d3b7a 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.test.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.test.js @@ -20,9 +20,9 @@ describe('', () => { describeConformance(, () => ({ classes, - inheritComponent: 'div', + inheritComponent: 'span', mount, - refInstanceof: window.HTMLDivElement, + refInstanceof: window.HTMLSpanElement, skip: ['componentProp'], })); From 75dc2252c78119bac78145247076a4a5e004fc03 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 19 Nov 2020 00:06:06 +0100 Subject: [PATCH 2/2] [docs] Fix /api client-side routing (#23586) --- docs/next.config.js | 5 +- docs/scripts/i18n.js | 59 ++++++++++------------ docs/src/modules/components/AppDrawer.js | 8 ++- docs/src/modules/components/Link.js | 23 ++++++--- docs/src/modules/components/PageContext.js | 13 ++--- docs/src/modules/utils/find.js | 18 +++++-- docs/src/{pages.js => pages.ts} | 30 +++++++++-- package.json | 2 +- 8 files changed, 97 insertions(+), 61 deletions(-) rename docs/src/{pages.js => pages.ts} (94%) diff --git a/docs/next.config.js b/docs/next.config.js index 9e87a4a71ea879..ec12ec3d828cf8 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -195,9 +195,6 @@ module.exports = { }, reactStrictMode: reactMode === 'legacy-strict', async rewrites() { - return [ - { source: `/:lang(${LANGUAGES.join('|')})?/:rest*`, destination: '/:rest*' }, - { source: '/api/:rest*', destination: '/api-docs/:rest*' }, - ]; + return [{ source: `/:lang(${LANGUAGES.join('|')})?/:rest*`, destination: '/:rest*' }]; }, }; diff --git a/docs/scripts/i18n.js b/docs/scripts/i18n.js index a50d30e4ea03a9..cc961f8757c8b3 100644 --- a/docs/scripts/i18n.js +++ b/docs/scripts/i18n.js @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import path from 'path'; import fse from 'fs-extra'; import { pageToTitle } from 'docs/src/modules/utils/helpers'; @@ -7,39 +6,37 @@ import pages from 'docs/src/pages'; const EXCLUDES = ['/api', '/blog']; async function run() { - try { - const translationsFilename = path.join(__dirname, '../translations/translations.json'); - const translationsFile = await fse.readFile(translationsFilename, 'utf8'); - const output = JSON.parse(translationsFile); - output.pages = {}; - - const traverse = (pages2) => { - pages2.forEach((page) => { - if ( - (page.pathname !== '/' && page.pathname === '/api-docs') || - !EXCLUDES.some((exclude) => page.pathname.includes(exclude)) - ) { - const title = pageToTitle(page); - - if (title) { - const pathname = page.subheader || page.pathname; - output.pages[pathname] = title; - } + const translationsFilename = path.join(__dirname, '../translations/translations.json'); + const translationsFile = await fse.readFile(translationsFilename, 'utf8'); + const output = JSON.parse(translationsFile); + output.pages = {}; + + const traverse = (pages2) => { + pages2.forEach((page) => { + if ( + (page.pathname !== '/' && page.pathname === '/api-docs') || + !EXCLUDES.some((exclude) => page.pathname.includes(exclude)) + ) { + const title = pageToTitle(page); + + if (title) { + const pathname = page.subheader || page.pathname; + output.pages[pathname] = title; } + } - if (page.children) { - traverse(page.children); - } - }); - }; + if (page.children) { + traverse(page.children); + } + }); + }; - traverse(pages); + traverse(pages); - await fse.writeFile(translationsFilename, `${JSON.stringify(output, null, 2)}\n`); - } catch (err) { - console.log(err); - throw err; - } + await fse.writeFile(translationsFilename, `${JSON.stringify(output, null, 2)}\n`); } -run(); +run().catch((error) => { + console.error(error); + process.exit(1); +}); diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index d8541558c16966..eda73905731e7a 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -92,7 +92,13 @@ function renderNavItems(options) { ); } -function reduceChildRoutes({ onClose, activePage, items, page, depth, t }) { +/** + * @param {object} context + * @param {import('docs/src/pages').MuiPage} context.page + */ +function reduceChildRoutes(context) { + const { onClose, activePage, items, depth, t } = context; + let { page } = context; if (page.displayNav === false) { return items; } diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index 98ce4db3138e7b..97fe732e68db3f 100644 --- a/docs/src/modules/components/Link.js +++ b/docs/src/modules/components/Link.js @@ -28,25 +28,24 @@ function Link(props) { const { activeClassName = 'active', className: classNameProps, - href: routerHref, + href, innerRef, naked, role: roleProp, + as: asProp = href, ...other } = props; - // apply nextjs rewrites - const href = routerHref.replace(/\/api-docs\/(.*)/, '/api/$1'); - const router = useRouter(); const userLanguage = useUserLanguage(); const className = clsx(classNameProps, { - [activeClassName]: router.pathname === routerHref && activeClassName, + [activeClassName]: router.pathname === href && activeClassName, }); + let linkAs = asProp; if (userLanguage !== 'en' && href.indexOf('/') === 0 && href.indexOf('/blog') !== 0) { - other.as = `/${userLanguage}${href}`; + linkAs = `/${userLanguage}${linkAs}`; } // catch role passed from ButtonBase. This is definitely a link @@ -63,11 +62,21 @@ function Link(props) { } if (naked) { - return ; + return ( + + ); } return ( , versions: unknown[] }>} + */ +const PageContext = React.createContext(); if (process.env.NODE_ENV !== 'production') { PageContext.displayName = 'PageContext'; diff --git a/docs/src/modules/utils/find.js b/docs/src/modules/utils/find.js index 60ef8d9a6ae72e..450c304bb8ca99 100644 --- a/docs/src/modules/utils/find.js +++ b/docs/src/modules/utils/find.js @@ -79,9 +79,21 @@ function findComponents(directory, components = []) { const jsRegex = /\.js$/; const blackList = ['/.eslintrc', '/_document', '/_app']; -// Returns the Next.js pages available in a nested format. -// The output is in the next.js format. -// Each pathname is a route you can navigate to. +/** + * @typedef {object} NextJSPage + * @property {string} pathname + * @property {NextJSPage[]} [children] + */ + +/** + * Returns the Next.js pages available in a nested format. + * The output is in the next.js format. + * Each pathname is a route you can navigate to. + * @param {{ front: true }} [options] + * @param {string} [directory] + * @param {NextJSPage[]} pages + * @returns {NextJSPage[]} + */ function findPages( options = {}, directory = path.resolve(__dirname, '../../../pages'), diff --git a/docs/src/pages.js b/docs/src/pages.ts similarity index 94% rename from docs/src/pages.js rename to docs/src/pages.ts index 28f4793a43cfde..1f9487f342b3ce 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.ts @@ -1,6 +1,22 @@ import findPages from /* preval */ 'docs/src/modules/utils/findPages'; -const pages = [ +export interface MuiPage { + pathname: string; + children?: MuiPage[]; + disableDrawer?: boolean; + displayNav?: boolean; + /** + * Props spread to the Link component + */ + linkProps?: Record; + subheader?: string; + /** + * Overrides the default page title. + */ + title?: string; +} + +const pages: MuiPage[] = [ { pathname: '/getting-started', children: [ @@ -168,11 +184,15 @@ const pages = [ title: 'Component API', pathname: '/api-docs', children: [ - ...findPages[0].children, + ...findPages[0].children!, ...[{ pathname: '/api-docs/data-grid' }, { pathname: '/api-docs/x-grid' }], - ].sort((a, b) => - a.pathname.replace('/api-docs/', '').localeCompare(b.pathname.replace('/api-docs/', '')), - ), + ] + .sort((a, b) => + a.pathname.replace('/api-docs/', '').localeCompare(b.pathname.replace('/api-docs/', '')), + ) + .map((page) => { + return { ...page, linkProps: { as: page.pathname.replace(/^\/api-docs/, '/api') } }; + }), }, { pathname: '/system', diff --git a/package.json b/package.json index 0734c58ee17bf4..42c881b2b3a96a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "docs:icons": "yarn workspace docs icons", "docs:size-why": "cross-env DOCS_STATS_ENABLED=true yarn docs:build", "docs:start": "yarn workspace docs start", - "docs:i18n": "cross-env BABEL_ENV=test babel-node ./docs/scripts/i18n.js", + "docs:i18n": "cross-env BABEL_ENV=test babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/i18n.js", "docs:typescript": "yarn docs:typescript:formatted --watch", "docs:typescript:check": "yarn workspace docs typescript", "docs:typescript:formatted": "cross-env BABEL_ENV=test babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/formattedTSDemos",