[core] Batch small changes (mui#21249)

.github/ISSUE_TEMPLATE/1.bug.md

@@ -1,6 +1,7 @@
 ---
 name: Bug report 🐛
 about: Create a bug report for Material-UI.
+labels: 'status: needs triage'
 ---
 
 <!-- Provide a general summary of the issue in the Title above -->

.github/ISSUE_TEMPLATE/2.feature.md

@@ -1,6 +1,7 @@
 ---
 name: Feature request 💄
 about: Suggest a new idea for the project.
+labels: 'status: needs triage'
 ---
 
 <!-- Provide a general summary of the feature in the Title above -->

README.md

@@ -59,14 +59,14 @@ Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=96, https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=96, https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/96.png, https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month or more to Material-UI.

docs/pages/_app.js

@@ -160,7 +160,7 @@ function Analytics() {
      * Adjusted to track 3 or more different ratios
      */
     function trackDevicePixelRation() {
-      window.ga('set', 'dimension3', window.devicePixelRatio);
+      window.ga('set', 'dimension3', Math.round(window.devicePixelRatio * 10) / 10);
 
       matchMedia = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
       // Need to setup again.

docs/src/modules/components/DiamondSponsors.js

@@ -53,7 +53,7 @@ export default function DiamondSponsors(props) {
       <Typography variant="caption" color="textSecondary" display="block" gutterBottom>
         {t('diamondSponsors')}
       </Typography>
-      {randomSencha < 0.05 ? (
+      {randomSencha < 0.25 ? (
         <a
           data-ga-event-category="sponsor"
           data-ga-event-action={spot}

docs/src/pages/components/progress/CustomizedProgressBars.js

@@ -9,7 +9,7 @@ const BorderLinearProgress = withStyles((theme) => ({
     borderRadius: 5,
   },
   colorPrimary: {
-    backgroundColor: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200],
+    backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
   },
   bar: {
     borderRadius: 5,
@@ -23,7 +23,7 @@ const useStylesFacebook = makeStyles((theme) => ({
     position: 'relative',
   },
   bottom: {
-    color: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200],
+    color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
   },
   top: {
     color: '#1a90ff',

docs/src/pages/components/progress/CustomizedProgressBars.tsx

@@ -10,7 +10,7 @@ const BorderLinearProgress = withStyles((theme: Theme) =>
       borderRadius: 5,
     },
     colorPrimary: {
-      backgroundColor: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200],
+      backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
     },
     bar: {
       borderRadius: 5,
@@ -26,7 +26,7 @@ const useStylesFacebook = makeStyles((theme: Theme) =>
       position: 'relative',
     },
     bottom: {
-      color: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200],
+      color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
     },
     top: {
       color: '#1a90ff',

docs/src/pages/customization/theming/theming.md

@@ -137,7 +137,7 @@ Using `unstable_createMuiStrictModeTheme` restricts the usage of some of our com
 
 The component used in the `component` prop of the following components need to forward their ref:
 
-- [`Collapse`](/api/Collapse/)
+- [`Collapse`](/api/collapse/)
 
 Otherwise you'll encounter `Error: Function component cannot be given refs`.
 See also: [Composition: Caveat with refs](/guides/composition/#caveat-with-refs).
@@ -146,9 +146,9 @@ See also: [Composition: Caveat with refs](/guides/composition/#caveat-with-refs)
 
 The `children` of the following components need to forward their ref:
 
-- [`Fade`](/api/Fade/)
-- [`Grow`](/api/Grow/)
-- [`Zoom`](/api/Zoom/)
+- [`Fade`](/api/fade/)
+- [`Grow`](/api/grow/)
+- [`Zoom`](/api/zoom/)
 
 ```diff
 -function TabPanel(props) {
@@ -195,12 +195,12 @@ function Fade() {
 
 #### Arguments
 
-1. `options` (_Object_): Takes an incomplete theme object and adds the missing parts.
-2. `...args` (_Array_): Deep merge the arguments with the about to be returned theme.
+1. `options` (*Object*): Takes an incomplete theme object and adds the missing parts.
+2. `...args` (*Array*): Deep merge the arguments with the about to be returned theme.
 
 #### Returns
 
-`theme` (_Object_): A complete, ready to use theme object.
+`theme` (*Object*): A complete, ready to use theme object.
 
 #### Examples
 

docs/src/pages/discover-more/backers/backers.md

@@ -22,14 +22,14 @@ Please contact us at [email protected] to subscribe to this tier.
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=96, https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=96, https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/96.png, https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged $500/month or more to Material-UI.

docs/src/pages/discover-more/related-projects/related-projects.md

@@ -32,22 +32,22 @@ This is a collection of third-party projects that extend Material-UI.
 
 - [@mui-treasury/layout](https://mui-treasury.com/layout): Components to handle the overall layout of a page. You can find a couple of examples, e.g. [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs).
 
-### Tables
+### Table
 
 - [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. It supports many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more).
 - [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
 - [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
 - [tubular-react](https://github.com/unosquare/tubular-react): A Material-UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations.
 
-### Notifications
+### Notification
 
 - [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
 
 ### Upload
 
 - [material-ui-dropzone](https://github.com/Yuvaleros/material-ui-dropzone): Built on top of react-dropzone.
 
-### Forms
+### Form
 
 - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with [formik](https://jaredpalmer.com/formik).
 - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material-UI with [Redux Form](https://redux-form.com/).
@@ -66,18 +66,22 @@ This is a collection of third-party projects that extend Material-UI.
 
 - [material-ui-flat-pagination](https://github.com/szmslab/material-ui-flat-pagination): A flat design pagination component for Material-UI.
 
-### Schedulers/Calendars
+### Scheduler/Calendar
 
 - [dx-react-scheduler-material-ui](https://devexpress.github.io/devextreme-reactive/react/scheduler/): A scheduler/calendar component for Material-UI with multiple calendar views, editing, recurrence appointments and date navigation features ([paid license](https://js.devexpress.com/licensing/)).
 
-### Charts
+### Chart
 
 - [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/): Charts for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([paid license](https://js.devexpress.com/licensing/)).
 
-### Dialogs
+### Dialog
 
 - [material-ui-confirm](https://github.com/jonatanklosko/material-ui-confirm): Provides easy to use confirmation dialogs to simplify confirming user actions without writing boilerplate code.
 
+### Color picker
+
+- [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for material-ui. No dependencies, small, highly customizable and theming support!
+
 ## Blocks
 
 - [components-extra](https://github.com/alexandre-lelain/components-extra): Provides a set of "molecule" components built on top of Material-UI like a Footer, a CookiesBanner, a BackToTop button and other complex elements highly customizable to help devs build the macro parts of their UI very quickly. Those components are often duplicated across sites - this library solves this exact problem.

docs/src/pages/landing/Quotes.js

@@ -171,7 +171,7 @@ function Quote(props) {
             <Grid item>
               <Avatar
                 src={`${avatar}_normal.jpg`}
-                srcSet={`${avatar}_normal.jpg, ${avatar}_bigger.jpg 2x`}
+                srcSet={`${avatar}_bigger.jpg 2x`}
                 alt={name}
                 className={classes.avatar}
               />

docs/src/pages/landing/backers.md

@@ -13,12 +13,12 @@ The continued development and maintenance of Material-UI is made possible by the
 ### Gold 🏆
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=96, https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=96, https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/tidelift.png?size=96" srcset="https://github.com/tidelift.png?size=192 2x" alt="tidelift" title="Enterprise-ready open source software" loading="lazy" /></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img height="96" width="96" src="https://github.com/teambit.png?size=96" srcset="https://github.com/teambit.png?size=192 2x" alt="bitsrc" title="The fastest way to share code" loading="lazy" /></a>
 </p>
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/96.png, https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
+  <a data-ga-event-category="sponsor" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/callemall/a6946da/logo/96.png" srcset="https://images.opencollective.com/callemall/a6946da/logo/192.png 2x" alt="call-em-all" title="The easy way to message your group" height="96" width="96" loading="lazy"></a>
 </p>
 
 ### There are more!

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -996,7 +996,7 @@ describe('<Autocomplete />', () => {
       fireEvent.keyDown(textbox, { key: 'ArrowDown' });
       fireEvent.keyDown(textbox, { key: 'Enter' });
 
-      expect(consoleErrorMock.callCount()).to.equal(1); // strict mode renders twice
+      expect(consoleErrorMock.callCount()).to.equal(1);
       expect(consoleErrorMock.messages()[0]).to.include(
         'The component expects a single value to match a given option but found 2 matches.',
       );
@@ -1015,7 +1015,7 @@ describe('<Autocomplete />', () => {
         />,
       );
 
-      expect(consoleWarnMock.callCount()).to.equal(4);
+      expect(consoleWarnMock.callCount()).to.equal(4); // strict mode renders twice
       expect(consoleWarnMock.messages()[0]).to.include(
         'None of the options match with `"not a good value"`',
       );
@@ -1044,7 +1044,7 @@ describe('<Autocomplete />', () => {
       const options = getAllByRole('option').map((el) => el.textContent);
       expect(options).to.have.length(7);
       expect(options).to.deep.equal(['A', 'D', 'E', 'B', 'G', 'F', 'C']);
-      expect(consoleWarnMock.callCount()).to.equal(2);
+      expect(consoleWarnMock.callCount()).to.equal(2); // strict mode renders twice
       expect(consoleWarnMock.messages()[0]).to.include('returns duplicated headers');
     });
   });

packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js

@@ -135,7 +135,7 @@ describe('ThemeProvider', () => {
           <div />
         </ThemeProvider>,
       );
-      expect(consoleErrorMock.callCount()).to.equal(2); // twice in strict mode
+      expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice
       expect(consoleErrorMock.messages()[0]).to.include('However, no outer theme is present.');
     });
 
@@ -148,7 +148,7 @@ describe('ThemeProvider', () => {
           ,
         </ThemeProvider>,
       );
-      expect(consoleErrorMock.callCount()).to.equal(2);
+      expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice
       expect(consoleErrorMock.messages()[0]).to.include(
         'Material-UI: You should return an object from your theme function',
       );

packages/material-ui/package.json

@@ -56,7 +56,7 @@
     "@types/react-transition-group": "^4.2.0",
     "clsx": "^1.0.4",
     "hoist-non-react-statics": "^3.3.2",
-    "popper.js": "^1.16.1-lts",
+    "popper.js": "1.16.1-lts",
     "prop-types": "^15.7.2",
     "react-is": "^16.8.0",
     "react-transition-group": "^4.4.0"