Merge branch 'master' into material-you-chip

.eslintrc.js

@@ -211,15 +211,6 @@ module.exports = {
       rules: {
         // does not work with wildcard imports. Mistakes will throw at runtime anyway
         'import/named': 'off',
-        'no-restricted-imports': [
-          'error',
-          {
-            // Use named import from `test/utils` instead.
-            // The other files are private.
-            patterns: ['test/utils/*'],
-          },
-        ],
-
         'material-ui/disallow-active-element-as-key-event-target': 'error',
 
         // upgraded level from recommended

.mocharc.js

@@ -10,7 +10,7 @@ module.exports = {
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
+  require: ['@mui-internal/test-utils/setupBabel', '@mui-internal/test-utils/setupJSDOM'],
   'watch-ignore': [
     // default
     '.git',

docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md

@@ -1,15 +1,13 @@
 # Default theme viewer
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">Check out how the theme object looks like with the default values.</p>
 
 :::warning
 This is a work in progress. We're still iterating on Joy UI's default theme.
 :::
 
-## Explore
-
-Explore the default theme:
+:::info
+To create your own theme, start by customizing the [theme colors](/joy-ui/customization/theme-colors/).
+:::
 
 {{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
-
-To create your own theme, starts with customizing the [theme colors](/joy-ui/customization/theme-colors/).

docs/data/material/customization/default-theme/DefaultTheme.js

@@ -1,12 +1,69 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { createTheme } from '@mui/material/styles';
+import Divider from '@mui/material/Divider';
+import { createTheme, styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ThemeViewer, {
   useNodeIdsLazy,
 } from 'docs/src/modules/components/ThemeViewer';
+import { blue, grey } from 'docs/src/modules/brandingTheme';
+
+const StyledSwitch = styled(Switch)(({ theme }) => [
+  {
+    display: 'flex',
+    padding: 0,
+    width: 32,
+    height: 20,
+    borderRadius: 99,
+    '&:active': {
+      '& .MuiSwitch-thumb': {
+        width: 16,
+      },
+      '& .MuiSwitch-switchBase.Mui-checked': {
+        transform: 'translateX(9px)',
+      },
+    },
+    '& .MuiSwitch-switchBase': {
+      padding: 2,
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#FFF',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          backgroundColor: blue[500],
+        },
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      width: 16,
+      height: 16,
+      borderRadius: 99,
+      transition: theme.transitions.create(['width'], {
+        duration: 200,
+      }),
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 16 / 2,
+      opacity: 1,
+      backgroundColor: grey[400],
+      boxSizing: 'border-box',
+    },
+    [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+      '& .MuiSwitch-switchBase': {
+        '&.Mui-checked': {
+          '& + .MuiSwitch-track': {
+            backgroundColor: blue[500],
+          },
+        },
+      },
+      '& .MuiSwitch-track': {
+        backgroundColor: grey[700],
+      },
+    },
+  },
+]);
 
 function DefaultTheme() {
   const [checked, setChecked] = React.useState(false);
@@ -58,31 +115,52 @@ function DefaultTheme() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <FormControlLabel
-        sx={{ pb: 1 }}
-        control={
-          <Switch
-            checked={checked}
-            onChange={(event) => {
-              setChecked(event.target.checked);
-              setExpandPaths(event.target.checked ? allNodeIds : []);
-            }}
-          />
-        }
-        label={t('expandAll')}
-      />
-      <FormControlLabel
-        sx={{ pb: 1 }}
-        control={
-          <Switch
-            checked={darkTheme}
-            onChange={(event) => {
-              setDarkTheme(event.target.checked);
-            }}
-          />
-        }
-        label={t('useDarkTheme')}
-      />
+      <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+        <FormControlLabel
+          label={t('expandAll')}
+          sx={{
+            m: 0,
+            flexDirection: 'row-reverse',
+            gap: 1,
+            '& .MuiFormControlLabel-label': {
+              fontFamily: 'IBM Plex Sans',
+              color: 'text.secondary',
+            },
+          }}
+          control={
+            <StyledSwitch
+              size="small"
+              checked={checked}
+              onChange={(event) => {
+                setChecked(event.target.checked);
+                setExpandPaths(event.target.checked ? allNodeIds : []);
+              }}
+            />
+          }
+        />
+        <Divider orientation="vertical" flexItem />
+        <FormControlLabel
+          label={t('useDarkTheme')}
+          sx={{
+            m: 0,
+            flexDirection: 'row-reverse',
+            gap: 1,
+            '& .MuiFormControlLabel-label': {
+              fontFamily: 'IBM Plex Sans',
+              color: 'text.secondary',
+            },
+          }}
+          control={
+            <StyledSwitch
+              size="small"
+              checked={darkTheme}
+              onChange={(event) => {
+                setDarkTheme(event.target.checked);
+              }}
+            />
+          }
+        />
+      </Box>
       <ThemeViewer data={data} expandPaths={expandPaths} />
     </Box>
   );

docs/data/material/customization/default-theme/default-theme.md

@@ -1,23 +1,19 @@
 # Default theme viewer
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">Check out how the theme object looks like with the default values.</p>
 
-## Explore
-
-Explore the default theme object:
-
-{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
+If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.js),
+and the related imports which `createTheme` uses.
 
 :::success
 You can play with the documentation theme object in your browser console,
 as the `theme` variable is exposed on all the documentation pages.
 :::
 
 :::warning
-Please note that **the documentation site is using a custom theme**.
+Please note that **the documentation site is using a custom theme** (MUI's branding).
 :::
 
-<!-- #default-branch-switch -->
+<hr/>
 
-If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.js),
-and the related imports which `createTheme` uses.
+{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}}

docs/package.json

@@ -118,6 +118,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.22.5",
     "@babel/preset-typescript": "^7.22.15",
     "@mui-internal/docs-utilities": "^1.0.0",
+    "@mui-internal/test-utils": "^1.0.0",
     "@types/autosuggest-highlight": "^3.2.0",
     "@types/chai": "^4.3.6",
     "@types/css-mediaquery": "^0.1.2",
@@ -140,7 +141,6 @@
     "playwright": "^1.37.1",
     "prettier": "^2.8.8",
     "tailwindcss": "^3.3.3",
-    "test": "5.0.0",
     "typescript-to-proptypes": "^5.0.0",
     "yargs": "^17.7.2"
   }