Merge branch 'next' into update-card-media-description

mui · Jul 30, 2024 · 82c9db6 · 82c9db6
2 parents 04d946a + ed833da
commit 82c9db6
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 46 deletions.
diff --git a/docs/data/material/integrations/routing/ListRouter.js b/docs/data/material/integrations/routing/ListRouter.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
-import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -44,12 +45,10 @@ function ListItemLink(props) {
   const { icon, primary, to } = props;
 
   return (
-    <li>
-      <ListItem button component={Link} to={to}>
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        <ListItemText primary={primary} />
-      </ListItem>
-    </li>
+    <ListItemButton component={Link} to={to}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
+    </ListItemButton>
   );
 }
 
@@ -78,13 +77,21 @@ export default function ListRouter() {
 
         <Paper elevation={0}>
           <List aria-label="main mailbox folders">
-            <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
-            <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            <ListItem disablePadding>
+              <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            </ListItem>
           </List>
           <Divider />
           <List aria-label="secondary mailbox folders">
-            <ListItemLink to="/trash" primary="Trash" />
-            <ListItemLink to="/spam" primary="Spam" />
+            <ListItem disablePadding>
+              <ListItemLink to="/trash" primary="Trash" />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/spam" primary="Spam" />
+            </ListItem>
           </List>
         </Paper>
       </Box>

diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import List from '@mui/material/List';
-import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -48,12 +49,10 @@ function ListItemLink(props: ListItemLinkProps) {
   const { icon, primary, to } = props;
 
   return (
-    <li>
-      <ListItem button component={Link} to={to}>
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        <ListItemText primary={primary} />
-      </ListItem>
-    </li>
+    <ListItemButton component={Link} to={to}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
+    </ListItemButton>
   );
 }
 
@@ -76,13 +75,21 @@ export default function ListRouter() {
 
         <Paper elevation={0}>
           <List aria-label="main mailbox folders">
-            <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
-            <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            <ListItem disablePadding>
+              <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            </ListItem>
           </List>
           <Divider />
           <List aria-label="secondary mailbox folders">
-            <ListItemLink to="/trash" primary="Trash" />
-            <ListItemLink to="/spam" primary="Spam" />
+            <ListItem disablePadding>
+              <ListItemLink to="/trash" primary="Trash" />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/spam" primary="Spam" />
+            </ListItem>
           </List>
         </Paper>
       </Box>

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md
@@ -550,8 +550,8 @@ Pigment CSS can extract the `sx` prop from any JSX element, so there is no need
 -      <Box component="img" src="..." sx={{ width: 24, height: 24 }}>
 -      ...
 -    </Box>
-+    <div style={{ display: 'flex' }}>
-+      <img src="..." style={{ width: 24, height: 24 }}>
++    <div sx={{ display: 'flex' }}>
++      <img src="..." sx={{ width: 24, height: 24 }}>
 +      ...
 +    </div>
    )

diff --git a/packages/mui-material/src/styles/createGetSelector.ts b/packages/mui-material/src/styles/createGetSelector.ts
@@ -39,11 +39,14 @@ export default <
         if (rule) {
           return {
             [rule.replace('%s', colorScheme)]: excludedVariables,
-            ':root': css,
+            [`:root, ${rule.replace('%s', colorScheme)}`]: css,
           };
         }
         return { ':root': { ...css, ...excludedVariables } };
       }
+      if (rule && rule !== 'media') {
+        return `:root, ${rule.replace('%s', String(colorScheme))}`;
+      }
     } else if (colorScheme) {
       if (rule === 'media') {
         return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;

diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js
@@ -759,7 +759,7 @@ describe('extendTheme', () => {
       });
       expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
         ':root',
-        ':root',
+        ':root, .light',
         '.dark',
       ]);
     });
@@ -771,7 +771,7 @@ describe('extendTheme', () => {
       });
       expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
         ':root',
-        ':root',
+        ':root, .mode-light',
         '.mode-dark',
       ]);
     });
@@ -793,7 +793,7 @@ describe('extendTheme', () => {
       });
       expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
         ':root',
-        ':root',
+        ':root, [data-theme-light]',
         '[data-theme-dark]',
       ]);
     });
@@ -807,5 +807,19 @@ describe('extendTheme', () => {
       expect(theme.getColorSchemeSelector('light')).to.equal('[data-theme-light] &');
       expect(theme.getColorSchemeSelector('dark')).to.equal('[data-theme-dark] &');
     });
+
+    it('should use a custom class selector when dark is the default', () => {
+      const theme = extendTheme({
+        colorSchemes: { light: true, dark: true },
+        colorSchemeSelector: '.mode-%s',
+        defaultColorScheme: 'dark',
+      });
+      expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([
+        ':root',
+        '.mode-dark', // specific variables for dark
+        ':root, .mode-dark',
+        '.mode-light',
+      ]);
+    });
   });
 });
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -161,16 +161,25 @@ export default function createCssVarsProvider(options) {
         colorSchemeSelector &&
         colorSchemeSelector !== 'media'
       ) {
-        const selector = colorSchemeSelector.replace('%s', colorScheme);
-        if (selector.startsWith('.')) {
+        const selector = colorSchemeSelector;
+        let rule = colorSchemeSelector;
+        if (selector === 'class') {
+          rule = `.%s`;
+        }
+        if (selector === 'data') {
+          rule = `[data-%s]`;
+        }
+        if (selector?.startsWith('data-') && !selector.includes('%s')) {
+          // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+          rule = `[${selector}="%s"]`;
+        }
+        if (rule.startsWith('.')) {
           colorSchemeNode.classList.remove(
-            ...allColorSchemes.map((scheme) =>
-              colorSchemeSelector.substring(1).replace('%s', scheme),
-            ),
+            ...allColorSchemes.map((scheme) => rule.substring(1).replace('%s', scheme)),
           );
-          colorSchemeNode.classList.add(selector.substring(1));
+          colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme));
         } else {
-          const matches = selector.match(/\[([^\]]+)\]/);
+          const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/);
           if (matches) {
             const [attr, value] = matches[1].split('=');
             if (!value) {
@@ -182,7 +191,7 @@ export default function createCssVarsProvider(options) {
             }
             colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : '');
           } else {
-            colorSchemeNode.setAttribute(selector, colorScheme);
+            colorSchemeNode.setAttribute(rule, colorScheme);
           }
         }
       }

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -395,29 +395,138 @@ describe('createCssVarsProvider', () => {
 
   describe('DOM', () => {
     it('attach default dataset on html', () => {
-      const { CssVarsProvider } = createCssVarsProvider({
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
         theme: createCssVarsTheme({
-          colorSchemes: { light: {} },
+          colorSchemes: { light: {}, dark: {} },
         }),
-        defaultColorScheme: 'light',
+        defaultColorScheme: { light: 'light', dark: 'dark' },
       });
-      render(<CssVarsProvider />);
+      function Toggle() {
+        const { mode, setMode } = useColorScheme();
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+            }}
+          >
+            {mode}
+          </button>
+        );
+      }
+      render(
+        <CssVarsProvider>
+          <Toggle />
+        </CssVarsProvider>,
+      );
 
       expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('light');
+
+      fireEvent.click(screen.getByRole('button'));
+
+      expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('dark');
+    });
+
+    it('attach class on html', () => {
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
+        theme: createCssVarsTheme({
+          colorSchemeSelector: 'class',
+          colorSchemes: { light: {}, dark: {} },
+        }),
+        defaultColorScheme: { light: 'light', dark: 'dark' },
+      });
+      function Toggle() {
+        const { mode, setMode } = useColorScheme();
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+            }}
+          >
+            {mode}
+          </button>
+        );
+      }
+      render(
+        <CssVarsProvider>
+          <Toggle />
+        </CssVarsProvider>,
+      );
+
+      expect(document.documentElement.classList.contains('light')).to.equal(true);
+
+      fireEvent.click(screen.getByRole('button'));
+
+      expect(document.documentElement.classList.contains('light')).to.equal(false);
+      expect(document.documentElement.classList.contains('dark')).to.equal(true);
+
+      document.documentElement.classList.remove('dark'); // cleanup
+    });
+
+    it('attach data- on html', () => {
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
+        theme: createCssVarsTheme({
+          colorSchemeSelector: 'data',
+          colorSchemes: { light: {}, dark: {} },
+        }),
+        defaultColorScheme: { light: 'light', dark: 'dark' },
+      });
+      function Toggle() {
+        const { mode, setMode } = useColorScheme();
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+            }}
+          >
+            {mode}
+          </button>
+        );
+      }
+      render(
+        <CssVarsProvider>
+          <Toggle />
+        </CssVarsProvider>,
+      );
+
+      expect(document.documentElement.getAttribute('data-light')).to.equal('');
+
+      fireEvent.click(screen.getByRole('button'));
+
+      expect(document.documentElement.getAttribute('data-light')).to.equal(null);
+      expect(document.documentElement.getAttribute('data-dark')).to.equal('');
     });
 
     it('use custom attribute', () => {
-      const { CssVarsProvider } = createCssVarsProvider({
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
         theme: createCssVarsTheme({
           colorSchemeSelector: 'data-foo-bar',
-          colorSchemes: { light: {} },
+          colorSchemes: { light: {}, dark: {} },
         }),
-        defaultColorScheme: 'light',
+        defaultColorScheme: { light: 'light', dark: 'dark' },
       });
-
-      render(<CssVarsProvider />);
+      function Toggle() {
+        const { mode, setMode } = useColorScheme();
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+            }}
+          >
+            {mode}
+          </button>
+        );
+      }
+      render(
+        <CssVarsProvider>
+          <Toggle />
+        </CssVarsProvider>,
+      );
 
       expect(document.documentElement.getAttribute('data-foo-bar')).to.equal('light');
+
+      fireEvent.click(screen.getByRole('button'));
+
+      expect(document.documentElement.getAttribute('data-foo-bar')).to.equal('dark');
     });
 
     it('does not crash if documentNode is null', () => {

diff --git a/packages/mui-system/src/cssVars/prepareCssVars.test.ts b/packages/mui-system/src/cssVars/prepareCssVars.test.ts
@@ -152,7 +152,7 @@ describe('prepareCssVars', () => {
     const stylesheets = result.generateStyleSheets();
     expect(stylesheets).to.deep.equal([
       { ':root': { '--fontSize-base': '1rem' } },
-      { '[data-color-scheme="dark"]': { '--color': 'red' } },
+      { ':root, [data-color-scheme="dark"]': { '--color': 'red' } },
       { '[data-color-scheme="light"]': { '--color': 'green' } },
     ]);
   });

diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts
@@ -69,6 +69,9 @@ function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<
         return `@media (prefers-color-scheme: ${mode}) { :root`;
       }
       if (rule) {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `:root, ${rule.replace('%s', String(colorScheme))}`;
+        }
         return rule.replace('%s', String(colorScheme));
       }
     }