From 9949df02cdebd41066148dc9d95302a9dc08e146 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 22:00:24 +0000 Subject: [PATCH 01/10] [docs] Improve the autogenerated "Unstyled" and "API" text (#35185) --- docs/packages/markdown/parseMarkdown.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index d14d1c6cbe4092..a1c8c219e32289 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -417,7 +417,9 @@ function prepareMarkdown(config) { contents.push(` ## Unstyled -The component also comes with an [unstyled version](${headers.unstyled}). It's ideal for doing heavy customizations and minimizing bundle size. +:::success +[MUI Base](/base/getting-started/overview/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. +::: `); } @@ -425,6 +427,8 @@ The component also comes with an [unstyled version](${headers.unstyled}). It's i contents.push(` ## API +See the documentation below for a complete reference to all of the props and classes available to the components mentioned here. + ${headers.components .map((component) => { const componentPkgMap = componentPackageMapping[headers.product]; From b8e30a4b7c668ede64d5f1f76c00401590c977c1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 30 Nov 2022 00:17:21 +0100 Subject: [PATCH 02/10] [website] Remove BlackFriday notification --- docs/notifications.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/notifications.json b/docs/notifications.json index a5c179be9afd3d..dc4e468a4bdafd 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -10,13 +10,8 @@ "text": "Migrate to the latest version for improved DX, customizability, and API consistency. Check out the blog post for details." }, { - "id": 70, + "id": 71, "title": "A major update is coming for MUI X—and you can get involved", "text": "Check out the blog post for details, and let us know what you want to see in MUI X v6." - }, - { - "id": 71, - "title": "Black Friday deal", - "text": "Get up to 35% off on premium templates until November 29th." } ] From 3751f2058b6e56c5476ce6eff2a2fe94b675a186 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 30 Nov 2022 17:49:24 +0100 Subject: [PATCH 03/10] [docs] Fix experimental API page duplication (#35213) --- .../css-theme-variables/customization.md | 2 +- .../css-theme-variables/migration.md | 2 +- .../css-theme-variables/overview.md | 4 ++-- .../css-theme-variables/usage.md | 2 +- .../css-variables/css-variables.md | 2 +- docs/data/material/pages.ts | 6 +++++- .../experimental-api/classname-generator.js | 7 ------- docs/pages/experimental-api/css-variables.js | 7 ------- docs/public/_redirects | 18 ++++++++++++++---- docs/src/pages.ts | 9 --------- docs/translations/translations.json | 3 ++- 11 files changed, 27 insertions(+), 35 deletions(-) delete mode 100644 docs/pages/experimental-api/classname-generator.js delete mode 100644 docs/pages/experimental-api/css-variables.js diff --git a/docs/data/material/experimental-api/css-theme-variables/customization.md b/docs/data/material/experimental-api/css-theme-variables/customization.md index 1a8907a2238fbd..b0702ae89fbe29 100644 --- a/docs/data/material/experimental-api/css-theme-variables/customization.md +++ b/docs/data/material/experimental-api/css-theme-variables/customization.md @@ -1,4 +1,4 @@ -# Customization +# CSS theme variables - Customization

A guide for customizing CSS theme variables in Material UI.

diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md index 2a26da15b64b05..b33e2962a0e7df 100644 --- a/docs/data/material/experimental-api/css-theme-variables/migration.md +++ b/docs/data/material/experimental-api/css-theme-variables/migration.md @@ -1,4 +1,4 @@ -# Migrating to CSS variables +# Migrating to CSS theme variables

A step-by-step migration guide to start using CSS theme variables in your project.

diff --git a/docs/data/material/experimental-api/css-theme-variables/overview.md b/docs/data/material/experimental-api/css-theme-variables/overview.md index 642d042c6a47bd..0cb7cd67c78244 100644 --- a/docs/data/material/experimental-api/css-theme-variables/overview.md +++ b/docs/data/material/experimental-api/css-theme-variables/overview.md @@ -28,8 +28,8 @@ For server-side applications, there are some trade-offs to consider: | | Compare to the default method | Reason | | ---------------------------------------------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------ | -| HTML size | bigger | CSS variables are generated for both light and dark mode at build time. | -| [First Contentful Paint (FCP)](https://web.dev/fcp/) | larger | Since the HTML size is generally bigger, the time to download the HTML before showing the content is longer. | +| HTML size | Bigger | CSS variables are generated for both light and dark mode at build time. | +| [First Contentful Paint (FCP)](https://web.dev/fcp/) | Larger | Since the HTML size is generally bigger, the time to download the HTML before showing the content is longer. | | [Time to Interactive (TTI)](https://web.dev/tti/) | Smaller (for dark mode) | Stylesheets are not regenerated between light and dark mode, so it takes less time for JavaScript to run. | :::warning diff --git a/docs/data/material/experimental-api/css-theme-variables/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage.md index 85df7fc6d130e7..c446f48b7d11d9 100644 --- a/docs/data/material/experimental-api/css-theme-variables/usage.md +++ b/docs/data/material/experimental-api/css-theme-variables/usage.md @@ -1,4 +1,4 @@ -# Usage +# CSS theme variables - Usage

Learn how to use the experimental APIs to adopt CSS theme variables.

diff --git a/docs/data/material/experimental-api/css-variables/css-variables.md b/docs/data/material/experimental-api/css-variables/css-variables.md index 56f223cdbc2400..8372049924976a 100644 --- a/docs/data/material/experimental-api/css-variables/css-variables.md +++ b/docs/data/material/experimental-api/css-variables/css-variables.md @@ -1,4 +1,4 @@ -# CSS variables +# TODO merge with other pages

Learn about the experimental API for using CSS variables with Material UI components.

diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index e82529315bea95..f716a52483aac6 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -230,7 +230,11 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/experimental-api/css-theme-variables/customization' }, { pathname: '/material-ui/experimental-api/css-theme-variables/migration', - title: 'Migrating to CSS theme variables', + title: 'Migrating to CSS variables', + }, + { + pathname: '/material-ui/experimental-api/css-variables', + title: 'TODO merge with other pages', }, ], }, diff --git a/docs/pages/experimental-api/classname-generator.js b/docs/pages/experimental-api/classname-generator.js deleted file mode 100644 index 7eb0297d7684e5..00000000000000 --- a/docs/pages/experimental-api/classname-generator.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/experimental-api/classname-generator/classname-generator.md?@mui/markdown'; - -export default function Page() { - return ; -} diff --git a/docs/pages/experimental-api/css-variables.js b/docs/pages/experimental-api/css-variables.js deleted file mode 100644 index 78ab5454e4e363..00000000000000 --- a/docs/pages/experimental-api/css-variables.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docs/data/material/experimental-api/css-variables/css-variables.md?@mui/markdown'; - -export default function Page() { - return ; -} diff --git a/docs/public/_redirects b/docs/public/_redirects index 9387f7ab66853e..1e6183aff4e3dc 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -378,18 +378,28 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /:lang/joy-ui/core-features/global-variant/ /:langjoy-ui/main-features/global-variants/ 301 /joy-ui/core-features/automatic-adjustment/ /joy-ui/main-features/automatic-adjustment/ 301 /:lang/joy-ui/core-features/automatic-adjustment/ /:lang/joy-ui/main-features/automatic-adjustment/ 301 -/joy-ui/core-features/perfect-dark-mode/ /joy-ui/main-features/perfect-dark-mode/ 301 -/:lang/joy-ui/core-features/perfect-dark-mode/ /:lang/joy-ui/main-features/perfect-dark-mode/ 301 +/joy-ui/core-features/perfect-dark-mode/ /joy-ui/main-features/dark-mode-optimization/ 301 +/:lang/joy-ui/core-features/perfect-dark-mode/ /:lang/joy-ui/main-features/dark-mode-optimization/ 301 /system/basics/ /system/getting-started/overview/ 301 +/:lang/system/basics/ /:lang/system/getting-started/overview/ 301 /system/the-sx-prop/ /system/getting-started/the-sx-prop/ 301 +/:lang/system/the-sx-prop/ /:lang/system/getting-started/the-sx-prop/ 301 /system/advanced/ /system/getting-started/custom-components/ 301 -/:lang/base/react-trap-focus/ /:lang/base/react-focus-trap/ 301 -/:lang/base/api/trap-focus/ /:lang/base/api/focus-trap/ 301 +/:lang/system/advanced/ /:lang/system/getting-started/custom-components/ 301 /base/react-trap-focus/ /base/react-focus-trap/ 301 +/:lang/base/react-trap-focus/ /:lang/base/react-focus-trap/ 301 /base/api/trap-focus/ /base/api/focus-trap/ 301 +/:lang/base/api/trap-focus/ /:lang/base/api/focus-trap/ 301 /material-ui/experimental-api/css-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 301 +/:lang/material-ui/experimental-api/css-variables/ /:lang/material-ui/experimental-api/css-theme-variables/overview/ 301 /joy-ui/main-features/perfect-dark-mode/ /joy-ui/main-features/dark-mode-optimization/ 301 +/:lang/joy-ui/main-features/perfect-dark-mode/ /:lang/joy-ui/main-features/dark-mode-optimization/ 301 /joy-ui/guides/applying-dark-mode/ /joy-ui/customization/dark-mode/ 301 +/:lang/joy-ui/guides/applying-dark-mode/ /:lang/joy-ui/customization/dark-mode/ 301 +/experimental-api/classname-generator/ /material-ui/experimental-api/classname-generator/ 301 +/:lang/experimental-api/classname-generator/ /:lang/material-ui/experimental-api/classname-generator/ 301 +/experimental-api/css-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 301 +/:lang/experimental-api/css-variables/ /:lang/material-ui/experimental-api/css-theme-variables/overview/ 301 # 2023 # Proxies diff --git a/docs/src/pages.ts b/docs/src/pages.ts index b47043cbf4ba82..d773ed935c4c44 100644 --- a/docs/src/pages.ts +++ b/docs/src/pages.ts @@ -280,15 +280,6 @@ const pages: readonly MuiPage[] = [ { pathname: '/guides/flow' }, ], }, - { - pathname: '/experimental-api', - title: 'Experimental APIs', - icon: 'ExperimentIcon', - children: [ - { pathname: '/experimental-api/classname-generator', title: 'ClassName generator' }, - { pathname: '/experimental-api/css-variables', title: 'CSS variables' }, - ], - }, { pathname: '/styles', title: 'Styles', diff --git a/docs/translations/translations.json b/docs/translations/translations.json index c1fc4cabb09c4d..257f0f73456b97 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -345,7 +345,8 @@ "/material-ui/experimental-api/css-theme-variables/overview": "Overview", "/material-ui/experimental-api/css-theme-variables/usage": "Usage", "/material-ui/experimental-api/css-theme-variables/customization": "Customization", - "/material-ui/experimental-api/css-theme-variables/migration": "Migrating to CSS theme variables", + "/material-ui/experimental-api/css-theme-variables/migration": "Migrating to CSS variables", + "/material-ui/experimental-api/css-variables": "TODO merge with other pages", "/material-ui/discover-more": "Discover more", "/material-ui/discover-more/showcase": "Showcase", "/material-ui/discover-more/related-projects": "Related projects", From 17352321f56741c44cf23559dd5c10b077d4482a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 13:18:10 +0100 Subject: [PATCH 04/10] [docs] Add Material You Button playground (#35222) --- .../buttons/ButtonMaterialYouPlayground.js | 52 +++ .../material/components/buttons/buttons.md | 11 + .../components/MaterialYouUsageDemo.tsx | 348 ++++++++++++++++++ test/regressions/index.js | 1 + 4 files changed, 412 insertions(+) create mode 100644 docs/data/material/components/buttons/ButtonMaterialYouPlayground.js create mode 100644 docs/src/modules/components/MaterialYouUsageDemo.tsx diff --git a/docs/data/material/components/buttons/ButtonMaterialYouPlayground.js b/docs/data/material/components/buttons/ButtonMaterialYouPlayground.js new file mode 100644 index 00000000000000..434566d08a5abc --- /dev/null +++ b/docs/data/material/components/buttons/ButtonMaterialYouPlayground.js @@ -0,0 +1,52 @@ +import * as React from 'react'; +import MaterialYouUsageDemo from 'docs/src/modules/components/MaterialYouUsageDemo'; +import Box from '@mui/material/Box'; +import Button from '@mui/material-next/Button'; +import FavoriteBorder from '@mui/icons-material/FavoriteBorder'; + +export default function ButtonUsage() { + const [variant, setVariant] = React.useState('text'); + return ( + setVariant(e.target.value), + }, + ...(variant === 'filled' || variant === 'text' || variant === 'outlined' + ? [ + { + propName: 'color', + knob: 'select', + defaultValue: 'primary', + options: ['primary', 'secondary', 'tertiary'], + }, + ] + : []), + { + propName: 'size', + knob: 'select', + options: ['small', 'medium', 'large'], + defaultValue: 'medium', + }, + { + propName: 'disabled', + knob: 'switch', + defaultValue: false, + }, + ]} + renderDemo={(props) => ( + + + + + )} + /> + ); +} diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 1d93e780bea939..1e0435160a2331 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -181,3 +181,14 @@ However: ``` This has the advantage of supporting any element, for instance, a link `` element. + +## Material You version + +The default Button component follows the Material Design 2 specs. +For the MD3 ([Material You](https://m3.material.io/)) version, install and import from the experimental `@mui/material-next` package: + +```js +import Button from '@mui/material-next/Button'; +``` + +{{"demo": "ButtonMaterialYouPlayground.js", "hideToolbar": true}} diff --git a/docs/src/modules/components/MaterialYouUsageDemo.tsx b/docs/src/modules/components/MaterialYouUsageDemo.tsx new file mode 100644 index 00000000000000..4ffb8fa0583ab6 --- /dev/null +++ b/docs/src/modules/components/MaterialYouUsageDemo.tsx @@ -0,0 +1,348 @@ +import * as React from 'react'; +import { alpha, useTheme as md2UseTheme } from '@mui/material/styles'; +import ReplayRoundedIcon from '@mui/icons-material/ReplayRounded'; +import Box from '@mui/material/Box'; +import FormControl from '@mui/material/FormControl'; +import FormLabel, { formLabelClasses } from '@mui/material/FormLabel'; +import IconButton from '@mui/material/IconButton'; +import MenuItem from '@mui/material/MenuItem'; +import Select from '@mui/material/Select'; +import Switch from '@mui/material/Switch'; +import Typography from '@mui/material/Typography'; +import BrandingProvider from 'docs/src/BrandingProvider'; +import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; +import { grey } from 'docs/src/modules/brandingTheme'; +import { + extendTheme, + CssVarsProvider as MaterialYouCssVarsProvider, + useColorScheme, +} from '@mui/material-next/styles'; + +type Mode = 'light' | 'dark' | 'system'; + +const materialYouTheme = extendTheme(); +const shallowEqual = (item1: { [k: string]: any }, item2: { [k: string]: any }) => { + let equal = true; + Object.entries(item1).forEach(([key, value]: [string, any]) => { + if (item2[key] !== value) { + equal = false; + } + }); + return equal; +}; + +const defaultGetCodeBlock = (code: string) => code; + +function createCode( + data: { + name: string; + props: Record; + childrenAccepted?: boolean; + }, + getCodeBlock = defaultGetCodeBlock, +) { + const { props: inProps, name, childrenAccepted } = data; + const closedJsx = childrenAccepted ? '>' : '/>'; + let code = `<${name}`; + const props = Object.entries(inProps).sort((a, b) => a[0].localeCompare(b[0])); + + if (!Object.keys(props).length) { + code = `${code} ${closedJsx}`; + } else { + let children = ''; + props.forEach((prop) => { + if (prop[0] !== 'children' && prop[1] !== undefined) { + if (props.length <= 2) { + if (typeof prop[1] === 'boolean') { + code = `${code} ${prop[0]}${prop[1] ? '' : '={false}'}`; + } else if (typeof prop[1] === 'function') { + code = `${code} ${prop[0]}={${(prop[1] as Function).toString()}}`; + } else { + code = `${code} ${prop[0]}=${ + typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"` + }`; + } + } else if (typeof prop[1] === 'function') { + code = `${code}\n ${prop[0]}={${(prop[1] as Function).toString()}}`; + } else if (typeof prop[1] === 'boolean') { + code = `${code}\n ${prop[0]}${prop[1] ? '' : '={false}'}`; + } else { + code = `${code}\n ${prop[0]}=${ + typeof prop[1] === 'number' ? `{${prop[1]}}` : `"${prop[1]}"` + }`; + } + } else { + children = prop[1] as string; + } + }); + if (children) { + code = `${code}${props.length > 2 ? `\n>` : '>'}\n ${children}\n`; + } else { + code = `${code}${props.length > 2 ? `\n${closedJsx}` : `${childrenAccepted ? '>' : ' />'}`}`; + } + } + + return getCodeBlock(code); +} + +export const prependLinesSpace = (code: string, size: number = 2) => { + const newCode: string[] = []; + code.split('\n').forEach((line) => { + newCode.push(`${Array(size).fill(' ').join('')}${line}`); + }); + return newCode.join('\n'); +}; + +function ModeSwitcher({ md2Mode }: { md2Mode: Mode | undefined }) { + const { mode, setMode } = useColorScheme(); + if (md2Mode && mode !== md2Mode) { + setMode(md2Mode ?? mode); + } + return null; +} + +interface MaterialYouUsageDemoProps { + /** + * Name of the component to show in the code block. + */ + componentName: string; + /** + * For displaying the close bracket of the component in the code block. + * if `true`, shows '>' otherwise shows '/>' + */ + childrenAccepted?: boolean; + /** + * Configuration + */ + data: Array<{ + /** + * Name of the prop, e.g. 'children' + */ + propName: Extract; + /** + * The controller to be used: + * - `switch`: render the switch component for boolean + * - `color`: render the built-in color selector + * - `select`: render + * - `radio`: render group of radios + */ + knob?: + | 'switch' + | 'color' + | 'select' + | 'input' + | 'radio' + | 'controlled' + | 'number' + | 'placement'; + /** + * The options for these knobs: `select` and `radio` + */ + options?: Array; + /** + * The labels for these knobs: `radio` + */ + labels?: Array; + /** + * The default value to be used by the components. + * If exists, it will be injected to the `renderDemo` callback but it will not show + * in the code block. + * + * To make it appears in the code block, specified `codeBlockDisplay: true` + */ + defaultValue?: string | number | boolean; + /** + * If not specify (`undefined`), the prop displays when user change the value + * If `true`, the prop with defaultValue will always display in the code block. + * If `false`, the prop does not display in the code block. + */ + codeBlockDisplay?: boolean; + onChange?: (event: React.SyntheticEvent) => void; + }>; + /** + * A function to override the code block result. + */ + getCodeBlock?: (code: string, props: ComponentProps) => string; + renderDemo: (props: ComponentProps) => React.ReactElement; +} + +export default function MaterialYouUsageDemo({ + componentName, + childrenAccepted = false, + data, + renderDemo, + getCodeBlock = defaultGetCodeBlock, +}: MaterialYouUsageDemoProps) { + const initialProps = {} as { [k in keyof T]: any }; + let demoProps = {} as { [k in keyof T]: any }; + let codeBlockProps = {} as { [k in keyof T]: any }; + data.forEach((p) => { + demoProps[p.propName] = p.defaultValue; + if (p.codeBlockDisplay) { + initialProps[p.propName] = p.defaultValue; + } + if (!p.knob) { + codeBlockProps[p.propName] = p.defaultValue; + } + }); + const [props, setProps] = React.useState(initialProps as T); + demoProps = { ...demoProps, ...props }; + codeBlockProps = { ...props, ...codeBlockProps }; + data.forEach((p) => { + if (p.codeBlockDisplay === false) { + delete codeBlockProps[p.propName]; + } + }); + + const md2Theme = md2UseTheme(); + return ( + + + + + + {renderDemo(demoProps)} + + + + getCodeBlock(code, demoProps), + )} + language="jsx" + sx={{ display: { xs: 'none', md: 'block' } }} + /> + + + + `1px solid ${theme.palette.mode === 'dark' ? alpha(grey[700], 0.3) : grey[100]}`, + backdropFilter: 'blur(8px)', + minWidth: '280px', + }} + > + + + Playground + + setProps(initialProps as T)} + sx={{ + visibility: !shallowEqual(props, initialProps) ? 'visible' : 'hidden', + // '--IconButton-size': '30px', + }} + > + + + + + {data.map(({ propName, knob, options = [], defaultValue, onChange }) => { + const resolvedValue = props[propName] ?? defaultValue; + if (!knob) { + return null; + } + if (knob === 'switch') { + return ( + + {propName} + { + setProps((latestProps) => ({ + ...latestProps, + [propName]: event.target.checked, + })); + onChange?.(event); + }} + sx={{ + fontSize: 'xs', + color: 'text.secondary', + textTransform: 'capitalize', + }} + /> + + ); + } + if (knob === 'select') { + return ( + + {propName} + + + ); + } + return null; + })} + + + + ); +} diff --git a/test/regressions/index.js b/test/regressions/index.js index 1a7485bf360ed9..7d446dd0458ee7 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -119,6 +119,7 @@ const blacklist = [ 'docs-components-tree-view/IconExpansionTreeView.png', // Need interaction 'docs-components-tree-view/MultiSelectTreeView.png', // Need interaction 'docs-components-use-media-query', // Need to dynamically resize to test + 'docs-components-buttons/ButtonMaterialYouPlayground.png', // playground 'docs-customization-breakpoints', // Need to dynamically resize to test 'docs-customization-color', // Escape viewport 'docs-customization-default-theme', // Redux isolation From d528976b1629ffdfcce908f3ed806f51f3118acc Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 1 Dec 2022 15:25:53 +0100 Subject: [PATCH 05/10] [docs] Fix typo (#35312) --- docs/data/material/migration/migration-v4/migration-v4.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index 6b5c1a1059cfbf..bab4ca7d56ab33 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -75,7 +75,7 @@ If you need to support IE 11, check out our [legacy bundle](/material-ui/guides/ The minimum supported version of React has been increased from v16.8.0 to v17.0.0. -If you are using a React version below 17.0.0, update your packages to at least v14.11.2 for Material UI and v17.0.0 for React. +If you are using a React version below 17.0.0, update your packages to at least v4.11.2 for Material UI and v17.0.0 for React. With npm: From 2abad795e4890829deb0fb40204a100b547a3873 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 1 Dec 2022 16:11:55 +0100 Subject: [PATCH 06/10] [docs] Disable translations (#34820) --- README.md | 9 --- .../material/discover-more/backers/backers.md | 4 -- docs/package.json | 1 - docs/pages/_app.js | 5 -- docs/public/_redirects | 9 +++ .../modules/components/AppSettingsDrawer.js | 55 +------------------ docs/src/modules/constants.js | 12 +--- yarn.lock | 15 +---- 8 files changed, 13 insertions(+), 97 deletions(-) diff --git a/README.md b/README.md index 3101f594233756..c91b580a6ba50e 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,6 @@ [![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq) [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062) [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue') -[![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.mui.com/project/material-ui-docs) [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui)](https://opencollective.com/mui) [![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320) @@ -233,14 +232,6 @@ These great services sponsor MUI's core infrastructure: [Netlify](https://www.netlify.com/) lets us distribute the documentation. - - - - Crowdin logo - - -[Crowdin](https://crowdin.com/) lets us translate the documentation. - diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index e72cbc091c4d02..7850b0cbee641b 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -104,10 +104,6 @@ GitHub allows us to host the Git repository. Netlify allows us to distribute the documentation. -[Crowdin](https://crowdin.com/) - -Crowdin allows us to translate the documentation. - [BrowserStack](https://www.browserstack.com/) BrowserStack allows us to test in real browsers. diff --git a/docs/package.json b/docs/package.json index 40549746052dda..d539ce62c473b4 100644 --- a/docs/package.json +++ b/docs/package.json @@ -60,7 +60,6 @@ "@types/react-virtualized": "^9.21.21", "@types/react-window": "^1.8.5", "@types/styled-components": "5.1.26", - "accept-language": "^3.0.18", "ast-types": "^0.14.2", "autoprefixer": "^10.4.13", "autosuggest-highlight": "^3.3.4", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index f15d0113ea677f..a16b6291a22945 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -4,7 +4,6 @@ import * as React from 'react'; import { loadCSS } from 'fg-loadcss/src/loadCSS'; import NextHead from 'next/head'; import PropTypes from 'prop-types'; -import acceptLanguage from 'accept-language'; import pages from 'docs/src/pages'; import basePages from 'docs/data/base/pages'; import materialPages from 'docs/data/material/pages'; @@ -14,7 +13,6 @@ import PageContext from 'docs/src/modules/components/PageContext'; import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics'; import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy'; import { ThemeProvider } from 'docs/src/modules/components/ThemeContext'; -import { LANGUAGES } from 'docs/src/modules/constants'; import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant'; import { UserLanguageProvider } from 'docs/src/modules/utils/i18n'; import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider'; @@ -29,9 +27,6 @@ LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE); // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache(); -// Set the locales that the documentation automatically redirects to. -acceptLanguage.languages(LANGUAGES); - let reloadInterval; // Avoid infinite loop when "Upload on reload" is set in the Chrome sw dev tools. diff --git a/docs/public/_redirects b/docs/public/_redirects index 1e6183aff4e3dc..7a3b4edc3653f2 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -400,6 +400,15 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301! /:lang/experimental-api/classname-generator/ /:lang/material-ui/experimental-api/classname-generator/ 301 /experimental-api/css-variables/ /material-ui/experimental-api/css-theme-variables/overview/ 301 /:lang/experimental-api/css-variables/ /:lang/material-ui/experimental-api/css-theme-variables/overview/ 301 +/pt/material-ui/* /material-ui/:splat 301 +/zh/material-ui/* /material-ui/:splat 301 +/pt/joy-ui/* /joy-ui/:splat 301 +/zh/joy-ui/* /joy-ui/:splat 301 +/pt/base/* /base/:splat 301 +/zh/base/* /base/:splat 301 +/pt/system/* /system/:splat 301 +/zh/system/* /system/:splat 301 + # 2023 # Proxies diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js index 514666ce069217..e07b79133ee776 100644 --- a/docs/src/modules/components/AppSettingsDrawer.js +++ b/docs/src/modules/components/AppSettingsDrawer.js @@ -17,16 +17,7 @@ import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness'; import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirectionLToR'; import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL'; import { useChangeTheme } from 'docs/src/modules/components/ThemeContext'; -import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; -import NoSsr from '@mui/material/NoSsr'; -import { LANGUAGES_LABEL } from 'docs/src/modules/constants'; -import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n'; -import { useRouter } from 'next/router'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; - -const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; -const CROWDIN_ROOT_URL = 'https://translate.mui.com/project/material-ui-docs/'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; const Heading = styled(Typography)(({ theme }) => ({ margin: '20px 0 10px', @@ -54,10 +45,6 @@ function AppSettingsDrawer(props) { const [mode, setMode] = React.useState(null); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const preferredMode = prefersDarkMode ? 'dark' : 'light'; - const userLanguage = useUserLanguage(); - const crowdInLocale = LOCALES[userLanguage] || userLanguage; - const router = useRouter(); - const { canonicalAs } = pathnameToLanguage(router.asPath); React.useEffect(() => { // syncing with homepage, can be removed once all pages are migrated to CSS variables @@ -94,11 +81,6 @@ function AppSettingsDrawer(props) { changeTheme({ direction }); }; - const handleLanguageClick = (language) => () => { - document.cookie = `userLanguage=${language.code};path=/;max-age=31536000`; - onClose(); - }; - return ( - {t('settings.language')} - - - {LANGUAGES_LABEL.map((language) => ( - - {language.text} - - ))} - - {t('appFrame.helpToTranslate')} - - - {t('settings.color')} event.preventDefault()} underline="hover" color="primary" @@ -54,7 +56,8 @@ export default function BreadcrumbsWithMenu() { Breadcrumb 5 event.preventDefault()} underline="hover" color="primary" diff --git a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx index 87e5338db59549..1dcbacce99efbd 100644 --- a/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx +++ b/docs/data/joy/components/breadcrumbs/BreadcrumbsWithMenu.tsx @@ -31,7 +31,8 @@ export default function BreadcrumbsWithMenu() { event.preventDefault()} underline="hover" color="primary" @@ -44,7 +45,8 @@ export default function BreadcrumbsWithMenu() { ••• event.preventDefault()} underline="hover" color="primary" @@ -54,7 +56,8 @@ export default function BreadcrumbsWithMenu() { Breadcrumb 5 event.preventDefault()} underline="hover" color="primary" diff --git a/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/data/joy/components/breadcrumbs/CondensedBreadcrumbs.js similarity index 89% rename from docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.js rename to docs/data/joy/components/breadcrumbs/CondensedBreadcrumbs.js index 791fee7cc1457b..2f8aaf7ff7886e 100644 --- a/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.js +++ b/docs/data/joy/components/breadcrumbs/CondensedBreadcrumbs.js @@ -5,8 +5,8 @@ import Link from '@mui/joy/Link'; import Typography from '@mui/joy/Typography'; import * as React from 'react'; -export default function CollapsedBreadcrumbs() { - const [collapsed, setCollapsed] = React.useState(true); +export default function CondensedBreadcrumbs() { + const [condensed, setCondensed] = React.useState(true); const [navigationItems, setNavigationItems] = React.useState([ 'Programs', 'Files', @@ -15,12 +15,12 @@ export default function CollapsedBreadcrumbs() { return ( - {collapsed ? ( + {condensed ? (