Merge branch 'feat/convert-badge-to-v5' into feat/badge-unstyled-remo…

…ve-color
mnajdova · Dec 3, 2020 · 905eb15 · 905eb15
2 parents bd57973 + 53e20aa
commit 905eb15
Show file tree

Hide file tree

Showing 24 changed files with 176 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,95 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 5.0.0-alpha.18
+
+Big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix most of the issues with the system (#23716, #23635, #23737, #23733, #23700, #23688) @mnajdova.
+- And many more 🐛 bug fixes and 📚 improvements.
+
+### `@material-ui/[email protected]`
+
+#### Breaking changes
+
+- [Box] Remove deprecated props (#23716) @mnajdova
+  All props are now available under the `sx` prop. A deprecation will be landing in v4.
+  Thanks to @mbrookes developers can automate the migration with a [codemod](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-codemod/README.md#box-sx-prop).
+
+  ```diff
+  -<Box p={2} bgColor="primary.main">
+  +<Box sx={{ p: 2, bgColor: 'primary.main' }}>
+  ```
+
+#### Changes
+
+- [Autocomplete] Add ability to override key down events handlers (#23487) @hessaam
+- [Autocomplete] Better isolate test case (#23704) @oliviertassinari
+- [Autocomplete] Fix highlight change event (#23718) @TakumaKira
+- [Box] Fix TypeScript issue when component prop is used (#23686) @mnajdova
+- [experimentalStyled] Make sx style fn optional (#23714) @mnajdova
+- [l10n] Improve Brazilian (pt-BR) locale (#23707) @m4rcelofs
+- [l10n] Improve Korean (ko-KR) locale (#23794) @sujinleeme
+- [Select] Add disabled attribute in input element when disabled (#23778) @praveenkumar-kalidass
+- [Switch] Add preventDefault check for state change (#23786) @praveenkumar-kalidass
+- [Tabs] Remove duplicate styles (#23561) @cmfcmf
+
+### `@material-ui/[email protected]`
+
+- [system] Allow values to use shorter string when the prop name is contained in the value (#23635) @mnajdova
+- [system] Another round of perf improvements (#23737) @mnajdova
+- [system] Fix transform return value to support CSSObject (#23733) @mnajdova
+- [system] Make borderRadius multiply a theme's design token (#23700) @mnajdova
+- [system] Various perf gain experiments (#23688) @mnajdova
+
+### `@material-ui/[email protected]`
+
+- [styles] Small performance gain (#23749) @oliviertassinari
+- [styles] Update mergeClasses types to more closely match its implementation (#23705) @etrepum
+
+### `@material-ui/[email protected]`
+
+- [system] Another round of perf improvements (#23737) @mnajdova
+
+### `@material-ui/[email protected]`
+
+- [DatePicker] Found one prop that was renamed (#23676) @oliviertassinari
+- [DateRangePicker] Allow same date selection (#23701) @hmaddisb
+
+### `@material-ui/[email protected]`/`@material-ui/[email protected]`
+
+- [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon
+
+### Docs
+
+- [docs] Add settings panel to allow system mode (#23722) @mbrookes
+- [docs] Add v5 peer dependencies in README (#23751) @johnrichardrinehart
+- [docs] Document using codesandbox-ci (#23800) @brorlarsnicklas
+- [docs] Fix link name for canadacasino (#23799) @eps1lon
+- [docs] Fix various a11y issues reported by lighthouse (#23791) @eps1lon
+- [docs] Improve prop descriptions (#23723) @oliviertassinari
+- [docs] Improve SEO structure (#23748) @oliviertassinari
+- [docs] Improve settings toggle button styling (#23754) @mbrookes
+- [docs] Misc fixes (#23756) @mbrookes
+- [docs] Move instructions for starting the docs earlier in the file (#23801) @brorlarsnicklas
+- [docs] Prepare v5.0.0-alpha.17 (#23680) @oliviertassinari
+- [docs] Remove unused abstraction (#23724) @oliviertassinari
+- [docs] Sync translations (#23682) @l10nbot
+
+### Core
+
+- [benchmark] Improve printed results (#23729) @oliviertassinari
+- [benchmark] Test styleFunctionSx vs. @styled-system/css (#23702) @mnajdova
+- [benchmark] Update with latest (#23694) @oliviertassinari
+- [core] Batch small changes (#23678) @oliviertassinari
+- [core] Fix ci @oliviertassinari
+- [core] Fix error handling on upload (#23734) @eps1lon
+- [core] Fully clear composite TypeScript project state (#23805) @eps1lon
+- [core] Remove unused classes (#23473) @jens-ox
+- [test] Add conformance test suite for v5 (#23798) @mnajdova
+- [test] Cleanup skipped tests (#23732) @eps1lon
+- [test] Misc improvements to experimental and browser test runner (#23699) @eps1lon
+- [test] Stay busy until document.fonts is ready (#23736) @eps1lon
+
 ## 5.0.0-alpha.17
 
 ###### _Nov 23 2020_

diff --git a/docs/package.json b/docs/package.json
@@ -114,7 +114,7 @@
     "rimraf": "^3.0.0",
     "styled-components": "^5.0.0",
     "stylis": "^4.0.3",
-    "stylis-plugin-rtl": "^2.0.0",
+    "stylis-plugin-rtl": "^2.0.1",
     "webfontloader": "^1.6.28",
     "webpack": "^4.41.0",
     "webpack-bundle-analyzer": "^4.1.0"

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -9,22 +9,20 @@ import PropTypes from 'prop-types';
 import acceptLanguage from 'accept-language';
 import { create } from 'jss';
 import jssRtl from 'jss-rtl';
-import { StyleSheetManager } from 'styled-components';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import rtlPlugin from 'stylis-plugin-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import loadScript from 'docs/src/modules/utils/loadScript';
-import RtlContext from 'docs/src/modules/utils/RtlContext';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
 import { ACTION_TYPES, CODE_VARIANTS, LANGUAGES } from 'docs/src/modules/constants';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
+import StyledEngineProvider, { cacheLtr } from 'docs/src/modules/utils/StyledEngineProvider';
+
+export { cacheLtr };
 
 // Configure JSS
 const jss = create({
@@ -281,17 +279,6 @@ function findActivePage(currentPages, pathname) {
   return activePage;
 }
 
-// Cache for the ltr version of the styles
-export const cacheLtr = createCache({ key: 'css' });
-cacheLtr.compat = true;
-
-// Cache for the rtl version of the styles
-const cacheRtl = createCache({
-  key: 'rtl',
-  stylisPlugins: [rtlPlugin],
-});
-cacheRtl.compat = true;
-
 function AppWrapper(props) {
   const { children, pageProps } = props;
 
@@ -300,9 +287,6 @@ function AppWrapper(props) {
     initRedux({ options: { userLanguage: pageProps.userLanguage } }),
   );
 
-  const [rtl, setRtl] = React.useState(false);
-  const rtlContextValue = { rtl, setRtl };
-
   React.useEffect(() => {
     loadDependencies();
     registerServiceWorker();
@@ -333,17 +317,13 @@ function AppWrapper(props) {
         ))}
       </NextHead>
       <ReduxProvider store={redux}>
-        <RtlContext.Provider value={rtlContextValue}>
-          <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-            <StyleSheetManager stylisPlugins={rtl ? [rtlPlugin] : []}>
-              <CacheProvider value={rtl ? cacheRtl : cacheLtr}>
-                <StylesProvider jss={jss}>
-                  <ThemeProvider>{children}</ThemeProvider>
-                </StylesProvider>
-              </CacheProvider>
-            </StyleSheetManager>
-          </PageContext.Provider>
-        </RtlContext.Provider>
+        <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
+          <StylesProvider jss={jss}>
+            <ThemeProvider>
+              <StyledEngineProvider>{children}</StyledEngineProvider>
+            </ThemeProvider>
+          </StylesProvider>
+        </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />
       </ReduxProvider>

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -168,7 +168,7 @@ MyDocument.getInitialProps = async (ctx) => {
         <style
           id="emotion-server-side"
           key="emotion-server-side"
-          data-emotion-css={emotionStyles.ids.join(' ')}
+          data-emotion={`css ${emotionStyles.ids.join(' ')}`}
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: emotionStyles.css }}
         />,

diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md
@@ -54,7 +54,7 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat
 | <span class="prop-name">getLimitTagsText</span> | <span class="prop-type">func</span> | <span class="prop-default">(more) => `+${more}`</span> | The label to display when the tags are truncated (`limitTags`).<br><br>**Signature:**<br>`function(more: number) => ReactNode`<br>*more:* The number of truncated tags. |
 | <span class="prop-name">getOptionDisabled</span> | <span class="prop-type">func</span> |  | Used to determine the disabled state for a given option.<br><br>**Signature:**<br>`function(option: T) => boolean`<br>*option:* The option to test. |
 | <span class="prop-name">getOptionLabel</span> | <span class="prop-type">func</span> | <span class="prop-default">(option) => option.label ?? option</span> | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided).<br><br>**Signature:**<br>`function(option: T) => string`<br> |
-| <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> |  | Used to determine if an option is selected, considering the current value. Uses strict equality by default.<br><br>**Signature:**<br>`function(option: T, value: T) => boolean`<br>*option:* The option to test.<br>*value:* The value to test against. |
+| <span class="prop-name">getOptionSelected</span> | <span class="prop-type">func</span> |  | Used to determine if an option is selected, considering the current value(s). Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.<br><br>**Signature:**<br>`function(option: T, value: T) => boolean`<br>*option:* The option to test.<br>*value:* The value to test against. |
 | <span class="prop-name">groupBy</span> | <span class="prop-type">func</span> |  | If provided, the options will be grouped under the returned string. The groupBy value is also used as the text for group headings when `renderGroup` is not provided.<br><br>**Signature:**<br>`function(options: T) => string`<br>*options:* The options to group. |
 | <span class="prop-name">handleHomeEndKeys</span> | <span class="prop-type">bool</span> | <span class="prop-default">!props.freeSolo</span> | If `true`, the component handles the "Home" and "End" keys when the popup is open. It should move focus to the first option and last option, respectively. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. |

diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
@@ -15,7 +15,6 @@ import Brightness7Icon from '@material-ui/icons/Brightness7';
 import SettingsBrightnessIcon from '@material-ui/icons/SettingsBrightness';
 import FormatTextdirectionLToRIcon from '@material-ui/icons/FormatTextdirectionLToR';
 import FormatTextdirectionRToLIcon from '@material-ui/icons/FormatTextdirectionRToL';
-import RtlContext from 'docs/src/modules/utils/RtlContext';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
@@ -57,7 +56,6 @@ function AppSettingsDrawer(props) {
   const [mode, setMode] = React.useState(getCookie('paletteMode') || 'system');
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const preferredMode = prefersDarkMode ? 'dark' : 'light';
-  const { rtl, setRtl } = React.useContext(RtlContext);
 
   const handleChangeThemeMode = (event, paletteMode) => {
     if (paletteMode === null) {
@@ -80,8 +78,6 @@ function AppSettingsDrawer(props) {
       direction = theme.direction;
     }
 
-    setRtl(!rtl);
-    // TODO: remove in v5 after the style engine is moved to emotion
     changeTheme({ direction });
   };
 

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -169,7 +169,7 @@ const styles = (theme) => ({
     },
     '& a, & a code': {
       // Style taken from the Link component
-      color: theme.palette.secondary.main,
+      color: theme.palette.primary.main,
       textDecoration: 'none',
       '&:hover': {
         textDecoration: 'underline',

diff --git a/docs/src/modules/utils/RtlContext.js b/docs/src/modules/utils/RtlContext.js
diff --git a/docs/src/modules/utils/StyledEngineProvider.js b/docs/src/modules/utils/StyledEngineProvider.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheetManager } from 'styled-components';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { useTheme } from '@material-ui/core/styles';
+
+// Cache for the ltr version of the styles
+export const cacheLtr = createCache({ key: 'css' });
+cacheLtr.compat = true;
+
+// Cache for the rtl version of the styles
+const cacheRtl = createCache({
+  key: 'rtl',
+  stylisPlugins: [rtlPlugin],
+});
+cacheRtl.compat = true;
+
+const StyledEngineProvider = (props) => {
+  const theme = useTheme();
+
+  const rtl = theme.direction === 'rtl';
+
+  return (
+    <StyleSheetManager stylisPlugins={rtl ? [rtlPlugin] : []}>
+      <CacheProvider value={rtl ? cacheRtl : cacheLtr}>{props.children}</CacheProvider>
+    </StyleSheetManager>
+  );
+};
+
+StyledEngineProvider.propTypes = {
+  children: PropTypes.node,
+};
+
+export default StyledEngineProvider;
diff --git a/docs/src/pages/guides/localization/Locales.js b/docs/src/pages/guides/localization/Locales.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TablePagination from '@material-ui/core/TablePagination';
 import Autocomplete from '@material-ui/core/Autocomplete';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import * as locales from '@material-ui/core/locale';
@@ -9,7 +10,7 @@ export default function Locales() {
   const [locale, setLocale] = React.useState('zhCN');
 
   return (
-    <div>
+    <Box sx={{ width: '100%' }}>
       <ThemeProvider
         theme={(outerTheme) => createMuiTheme(outerTheme, locales[locale])}
       >
@@ -34,6 +35,6 @@ export default function Locales() {
           onPageChange={() => {}}
         />
       </ThemeProvider>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/guides/localization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import TablePagination from '@material-ui/core/TablePagination';
 import Autocomplete from '@material-ui/core/Autocomplete';
+import Box from '@material-ui/core/Box';
 import TextField from '@material-ui/core/TextField';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import * as locales from '@material-ui/core/locale';
@@ -11,7 +12,7 @@ export default function Locales() {
   const [locale, setLocale] = React.useState<SupportedLocales>('zhCN');
 
   return (
-    <div>
+    <Box sx={{ width: '100%' }}>
       <ThemeProvider
         theme={(outerTheme) => createMuiTheme(outerTheme, locales[locale])}
       >
@@ -36,6 +37,6 @@ export default function Locales() {
           onPageChange={() => {}}
         />
       </ThemeProvider>
-    </div>
+    </Box>
   );
 }
diff --git a/examples/create-react-app-with-styled-components/README.md b/examples/create-react-app-with-styled-components/README.md
@@ -5,8 +5,8 @@
 Download the example [or clone the repo](https://github.com/mui-org/material-ui):
 
 ```sh
-curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/create-react-app-styled-components
-cd create-react-app-styled-components
+curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/create-react-app-with-styled-components
+cd create-react-app-with-styled-components
 ```
 
 Install it and run:

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.18",
   "private": true,
   "scripts": {
     "proptypes": "cross-env BABEL_ENV=test babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",

diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/lab",
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.18",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Lab - Incubator for Material-UI React components.",
@@ -36,7 +36,7 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "peerDependencies": {
-    "@material-ui/core": "^5.0.0-alpha.17",
+    "@material-ui/core": "^5.0.0-alpha.18",
     "@types/react": "^16.8.6 || ^17.0.0",
     "date-fns": "^2.0.0",
     "dayjs": "^1.8.17",
@@ -64,8 +64,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
-    "@material-ui/system": "^5.0.0-alpha.17",
-    "@material-ui/utils": "^5.0.0-alpha.17",
+    "@material-ui/system": "^5.0.0-alpha.18",
+    "@material-ui/utils": "^5.0.0-alpha.18",
     "clsx": "^1.0.4",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.0 || ^17.0.0",

diff --git a/packages/material-ui-styled-engine-sc/package.json b/packages/material-ui-styled-engine-sc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/styled-engine-sc",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.18",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Styled - Wrapper package for styled-components.",

diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@material-ui/styled-engine",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.18",
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Styled - Wrapper package for emotion.",