Merge branch 'next' into improve-sb

mui · Jul 28, 2024 · c7726d4 · c7726d4
2 parents 474444f + d69604d
commit c7726d4
Show file tree

Hide file tree

Showing 38 changed files with 694 additions and 366 deletions.
diff --git a/docs/data/material/components/accordion/accordion.md b/docs/data/material/components/accordion/accordion.md
@@ -84,6 +84,26 @@ The demo below also shows a bit of visual customization.
 
 {{"demo": "CustomizedAccordions.js", "bg": true}}
 
+### Changing heading level
+
+By default, the Accordion uses an `h3` element for the heading. You can change the heading element using the `slotProps.heading.component` prop to ensure the correct heading hierarchy in your document.
+
+```jsx
+<Accordion slotProps={{ heading: { component: 'h4' } }}>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+    aria-controls="panel1-content"
+    id="panel1-header"
+  >
+    Accordion
+  </AccordionSummary>
+  <AccordionDetails>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+    lacus ex, sit amet blandit leo lobortis eget.
+  </AccordionDetails>
+</Accordion>
+```
+
 ## Performance
 
 The Accordion content is mounted by default even if it's not expanded.

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -132,6 +132,30 @@ These three were previously treated as `"reset"`, so if you are relying on that,
 
 These are added on top of the existing ones: `"input"`, `"reset"`, and `"clear"`.
 
+### Accordion
+
+#### Heading element wrapping Accordion Summary
+
+To meet the [W3C Accordion Pattern standard](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/), the Accordion Summary is now wrapped with a default `h3` heading element. This change may affect customizations relying on the previous DOM structure and CSS specificity. Additionally, the default heading element might conflict with existing heading structures on your page.
+
+If your styles or DOM manipulations depend on the old structure, you will need to update them to accommodate the new heading element. If the default heading element conflicts with your existing structure, you can change the heading element using the `slotProps.heading.component` prop.
+
+```jsx
+<Accordion slotProps={{ heading: { component: 'h4' } }}>
+  <AccordionSummary
+    expandIcon={<ExpandMoreIcon />}
+    aria-controls="panel1-content"
+    id="panel1-header"
+  >
+    Accordion
+  </AccordionSummary>
+  <AccordionDetails>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
+    lacus ex, sit amet blandit leo lobortis eget.
+  </AccordionDetails>
+</Accordion>
+```
+
 ### Chip
 
 Previously, the Chip component lost focus when the escape button was pressed, which differed from how other button-like components work.

diff --git a/docs/nextConfigDocsInfra.js b/docs/nextConfigDocsInfra.js
@@ -71,8 +71,6 @@ function withDocsInfra(nextConfig) {
       NETLIFY_DEPLOY_URL: process.env.DEPLOY_URL,
       // Name of the site, its Netlify subdomain; for example, material-ui-docs
       NETLIFY_SITE_NAME: process.env.SITE_NAME,
-      // The ratio of ads display reported to Google Analytics. Used to avoid an exceed on the Google Analytics quotas.
-      GA_ADS_DISPLAY_RATIO: 0.1,
     },
     experimental: {
       scrollRestoration: true,

diff --git a/docs/package.json b/docs/package.json
@@ -129,7 +129,6 @@
     "@types/react-transition-group": "^4.4.10",
     "@types/react-window": "^1.8.8",
     "@types/stylis": "^4.2.0",
-    "@types/gtag.js": "^0.0.20",
     "chai": "^4.4.1",
     "cross-fetch": "^4.0.0",
     "gm": "^1.25.0",

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -329,6 +329,7 @@ function AppWrapper(props) {
       </NextHead>
       <DocsProvider
         config={config}
+        adConfig={{ GADisplayRatio: 0.1 }}
         defaultUserLanguage={pageProps.userLanguage}
         translations={pageProps.translations}
       >

diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -11,8 +11,25 @@ import Section from 'docs/src/layouts/Section';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import { Link } from '@mui/docs/Link';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 export default function BrandingThemeTest() {
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value as string);
+  };
   return (
     <BrandingCssVarsProvider>
       <Head title="MUI Branding Theme Test" description="" />
@@ -63,6 +80,116 @@ export default function BrandingThemeTest() {
               <GitHubIcon fontSize="small" />
             </IconButton>
           </Stack>
+          <Stack direction="column" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained" size="large" color="primary">
+              Large
+            </Button>
+            <Button variant="contained" size="medium" color="primary">
+              Medium
+            </Button>
+            <Button variant="contained" size="small" color="primary">
+              Small
+            </Button>
+          </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <FormControl sx={{ width: 120 }}>
+              <InputLabel id="demo-simple-select-label">Age</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                value={age}
+                label="Age"
+                onChange={handleChange}
+              >
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+            <FormControl sx={{ width: 120 }}>
+              <InputLabel id="demo-simple-select-label">Age</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                id="demo-simple-select"
+                value={age}
+                label="Age"
+                size="small"
+                onChange={handleChange}
+              >
+                <MenuItem value={10}>Ten</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Checkbox {...label} defaultChecked />
+            <Checkbox {...label} />
+            <Checkbox {...label} disabled />
+            <Checkbox {...label} disabled checked />
+          </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Card sx={{ maxWidth: 345 }}>
+              <CardMedia
+                sx={{ height: 140 }}
+                image="/static/images/cards/contemplative-reptile.jpg"
+                title="green iguana"
+              />
+              <CardContent>
+                <Typography gutterBottom variant="h6">
+                  Lizard
+                </Typography>
+                <Typography variant="body2">
+                  Lizards are a widespread group of squamate reptiles, with over 6,000 species,
+                  ranging across all continents except Antarctica
+                </Typography>
+              </CardContent>
+              <CardActions>
+                <Button size="small">Share</Button>
+                <Button size="small">Learn More</Button>
+              </CardActions>
+            </Card>
+            <Card variant="elevation" sx={{ maxWidth: 345 }}>
+              <CardMedia
+                sx={{ height: 140 }}
+                image="/static/images/cards/contemplative-reptile.jpg"
+                title="green iguana"
+              />
+              <CardContent>
+                <Typography gutterBottom variant="h6">
+                  Lizard
+                </Typography>
+                <Typography variant="body2">
+                  Lizards are a widespread group of squamate reptiles, with over 6,000 species,
+                  ranging across all continents except Antarctica
+                </Typography>
+              </CardContent>
+              <CardActions>
+                <Button size="small">Share</Button>
+                <Button size="small">Learn More</Button>
+              </CardActions>
+            </Card>
+            <Card variant="outlined" sx={{ maxWidth: 345 }}>
+              <CardMedia
+                sx={{ height: 140 }}
+                image="/static/images/cards/contemplative-reptile.jpg"
+                title="green iguana"
+              />
+              <CardContent>
+                <Typography gutterBottom variant="h6">
+                  Lizard
+                </Typography>
+                <Typography variant="body2">
+                  Lizards are a widespread group of squamate reptiles, with over 6,000 species,
+                  ranging across all continents except Antarctica
+                </Typography>
+              </CardContent>
+              <CardActions>
+                <Button size="small">Share</Button>
+                <Button size="small">Learn More</Button>
+              </CardActions>
+            </Card>
+          </Stack>
         </Section>
         <Divider />
       </main>

diff --git a/docs/pages/material-ui/api/accordion.json b/docs/pages/material-ui/api/accordion.json
@@ -14,11 +14,17 @@
       }
     },
     "slotProps": {
-      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ heading?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ heading?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "square": { "type": { "name": "bool" }, "default": "false" },
@@ -38,6 +44,12 @@
     "import { Accordion } from '@mui/material';"
   ],
   "slots": [
+    {
+      "name": "heading",
+      "description": "The component that renders the heading.",
+      "default": "'h3'",
+      "class": "MuiAccordion-heading"
+    },
     {
       "name": "transition",
       "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",

diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
@@ -108,7 +108,7 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
               typography: 'body1',
               flexGrow: 1,
               minWidth: 220,
-              borderRadius: '8px',
+              borderRadius: '10px',
               border: '1px solid',
               borderColor: 'grey.300',
               bgcolor: '#FFF',