[core] Batch small changes (#24599)

mui · Jan 25, 2021 · 64fd0af · 64fd0af
1 parent 416b32a
commit 64fd0af
Show file tree

Hide file tree

Showing 12 changed files with 55 additions and 24 deletions.
diff --git a/.mocharc.js b/.mocharc.js
@@ -8,7 +8,7 @@ module.exports = {
     'docs/.next/**',
   ],
   recursive: true,
-  timeout: (process.env.CIRCLECI === 'true' ? 3 : 2) * 1000, // Circle CI has low-performance CPUs.
+  timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
   require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
   'watch-ignore': [

diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md
@@ -29,8 +29,8 @@ Here are the top priorities:
 
 Our GitHub project's roadmap is where you can learn about what features we're working on, what stage they're at, and when we expect to bring them to you:
 
-- [Material-UI community](https://github.com/mui-org/material-ui/projects/25)
-- [Material-UI X](https://github.com/mui-org/material-ui-x/projects/1)
+- [Material-UI community](https://github.com/mui-org/material-ui/projects/25). This repository focuses on empowering the creation of great design systems with React, as well as providing two ready to use themes (Material Design so far, another one coming in the near future).
+- [Material-UI X](https://github.com/mui-org/material-ui-x/projects/1). This repository focuses on providing advanced React components.
 
 ## New components
 

diff --git a/docs/src/pages/getting-started/templates/dashboard/Chart.js b/docs/src/pages/getting-started/templates/dashboard/Chart.js
@@ -36,15 +36,23 @@ export default function Chart() {
             left: 24,
           }}
         >
-          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
-          <YAxis stroke={theme.palette.text.secondary}>
+          <XAxis
+            dataKey="time"
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          />
+          <YAxis
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          >
             <Label
               // @ts-expect-error https://github.com/recharts/recharts/issues/2400
               angle={270}
               position="left"
               style={{
                 textAnchor: 'middle',
                 fill: theme.palette.text.primary,
+                ...theme.typography.body1,
               }}
             >
               Sales ($)

diff --git a/docs/src/pages/getting-started/templates/dashboard/Chart.tsx b/docs/src/pages/getting-started/templates/dashboard/Chart.tsx
@@ -36,15 +36,23 @@ export default function Chart() {
             left: 24,
           }}
         >
-          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
-          <YAxis stroke={theme.palette.text.secondary}>
+          <XAxis
+            dataKey="time"
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          />
+          <YAxis
+            stroke={theme.palette.text.secondary}
+            style={theme.typography.body2}
+          >
             <Label
               // @ts-expect-error https://github.com/recharts/recharts/issues/2400
               angle={270}
               position="left"
               style={{
                 textAnchor: 'middle',
                 fill: theme.palette.text.primary,
+                ...theme.typography.body1,
               }}
             >
               Sales ($)

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.spec.tsx b/packages/material-ui/src/Autocomplete/Autocomplete.spec.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { InputLabelProps } from '@material-ui/core';
-import { Autocomplete, AutocompleteProps } from '@material-ui/lab';
+import { Autocomplete, AutocompleteProps, InputLabelProps } from '@material-ui/core';
 import { expectType } from '@material-ui/types';
 
 interface MyAutocompleteProps<

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.test.js b/packages/material-ui/src/Autocomplete/Autocomplete.test.js
@@ -16,10 +16,17 @@ import Chip from '@material-ui/core/Chip';
 import Autocomplete, { createFilterOptions } from '@material-ui/core/Autocomplete';
 
 function checkHighlightIs(listbox, expected) {
+  const focused = listbox.querySelector('[role="option"][data-focus]');
+
   if (expected) {
-    expect(listbox.querySelector('li[data-focus]')).to.have.text(expected);
+    if (focused) {
+      expect(focused).to.have.text(expected);
+    } else {
+      // No options selected
+      expect(null).to.equal(expected);
+    }
   } else {
-    expect(listbox.querySelector('li[data-focus]')).to.equal(null);
+    expect(focused).to.equal(null);
   }
 }
 

diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
@@ -140,7 +140,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
     alt,
     children: childrenProp,
     className,
-    component: Component = 'div',
+    component = 'div',
     imgProps,
     sizes,
     src,
@@ -158,8 +158,9 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
 
   const styleProps = {
     ...props,
-    variant,
     colorDefault: !hasImgNotFailing,
+    component,
+    variant,
   };
 
   const classes = useUtilityClasses(styleProps);
@@ -186,7 +187,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
 
   return (
     <AvatarRoot
-      as={Component}
+      as={component}
       styleProps={styleProps}
       className={clsx(classes.root, className)}
       ref={ref}

diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
@@ -87,7 +87,7 @@ const Container = React.forwardRef(function Container(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiContainer' });
   const {
     className,
-    component: Component = 'div',
+    component = 'div',
     disableGutters = false,
     fixed = false,
     maxWidth = 'lg',
@@ -96,6 +96,7 @@ const Container = React.forwardRef(function Container(inProps, ref) {
 
   const styleProps = {
     ...props,
+    component,
     disableGutters,
     fixed,
     maxWidth,
@@ -105,7 +106,7 @@ const Container = React.forwardRef(function Container(inProps, ref) {
 
   return (
     <ContainerRoot
-      as={Component}
+      as={component}
       styleProps={styleProps}
       className={clsx(classes.root, className)}
       ref={ref}

diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js
@@ -67,18 +67,19 @@ const Paper = React.forwardRef(function Paper(inProps, ref) {
 
   const {
     className,
-    component: Component = 'div',
-    square = false,
+    component = 'div',
     elevation = 1,
+    square = false,
     variant = 'elevation',
     ...other
   } = props;
 
   const styleProps = {
     ...props,
-    variant,
+    component,
     elevation,
     square,
+    variant,
   };
 
   const classes = useUtilityClasses(styleProps);
@@ -98,7 +99,7 @@ const Paper = React.forwardRef(function Paper(inProps, ref) {
 
   return (
     <PaperRoot
-      as={Component}
+      as={component}
       styleProps={styleProps}
       className={clsx(classes.root, className)}
       ref={ref}

diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js
@@ -73,7 +73,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
     children,
     className,
     color = 'inherit',
-    component: Component = 'svg',
+    component = 'svg',
     fontSize = 'medium',
     htmlColor,
     titleAccess,
@@ -84,7 +84,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
   const styleProps = {
     ...props,
     color,
-    component: Component,
+    component,
     fontSize,
     viewBox,
   };
@@ -93,7 +93,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(inProps, ref) {
 
   return (
     <SvgIconRoot
-      as={Component}
+      as={component}
       className={clsx(classes.root, className)}
       styleProps={styleProps}
       focusable="false"

diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js
@@ -75,7 +75,7 @@ const ToggleButton = React.forwardRef(function ToggleButton(props, ref) {
   const handleChange = (event) => {
     if (onClick) {
       onClick(event, value);
-      if (event.isDefaultPrevented()) {
+      if (event.defaultPrevented) {
         return;
       }
     }

diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -18,6 +18,12 @@ module.exports = function setKarmaConfig(config) {
     browserDisconnectTolerance: 1, // default 0
     browserNoActivityTimeout: 300000, // default 10000
     colors: true,
+    client: {
+      mocha: {
+        // Some BrowserStack browsers can be slow.
+        timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000,
+      },
+    },
     frameworks: ['mocha'],
     files: [
       {