[Accordion] Allow to disable gutter/spacing (mui#24532)

natac13 · Jan 25, 2021 · 627495f · 627495f
1 parent 4dbaf2d
commit 627495f
Show file tree

Hide file tree

Showing 20 changed files with 209 additions and 247 deletions.
diff --git a/docs/pages/api-docs/accordion-summary.json b/docs/pages/api-docs/accordion-summary.json
@@ -8,7 +8,16 @@
   },
   "name": "AccordionSummary",
   "styles": {
-    "classes": ["root", "expanded", "focusVisible", "disabled", "content", "expandIconWrapper"],
+    "classes": [
+      "root",
+      "expanded",
+      "focusVisible",
+      "disabled",
+      "gutters",
+      "contentGutters",
+      "content",
+      "expandIconWrapper"
+    ],
     "globalClasses": {
       "expanded": "Mui-expanded",
       "focusVisible": "Mui-focusVisible",

diff --git a/docs/pages/api-docs/accordion.json b/docs/pages/api-docs/accordion.json
@@ -4,6 +4,7 @@
     "classes": { "type": { "name": "object" } },
     "defaultExpanded": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" } },
     "expanded": { "type": { "name": "bool" } },
     "onChange": { "type": { "name": "func" } },
     "square": { "type": { "name": "bool" } },
@@ -13,7 +14,7 @@
   },
   "name": "Accordion",
   "styles": {
-    "classes": ["root", "rounded", "expanded", "disabled", "region"],
+    "classes": ["root", "rounded", "expanded", "disabled", "gutters", "region"],
     "globalClasses": { "expanded": "Mui-expanded", "disabled": "Mui-disabled" },
     "name": "MuiAccordion"
   },

diff --git a/...s/components/accordion/SimpleAccordion.js → ...es/components/accordion/BasicAccordion.js b/...s/components/accordion/SimpleAccordion.js → ...es/components/accordion/BasicAccordion.js
@@ -1,33 +1,20 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    fontWeight: theme.typography.fontWeightRegular,
-  },
-}));
-
 export default function SimpleAccordion() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
-          <Typography className={classes.heading}>Accordion 1</Typography>
+          <Typography>Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -42,7 +29,7 @@ export default function SimpleAccordion() {
           aria-controls="panel2a-content"
           id="panel2a-header"
         >
-          <Typography className={classes.heading}>Accordion 2</Typography>
+          <Typography>Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -57,7 +44,7 @@ export default function SimpleAccordion() {
           aria-controls="panel3a-content"
           id="panel3a-header"
         >
-          <Typography className={classes.heading}>Disabled Accordion</Typography>
+          <Typography>Disabled Accordion</Typography>
         </AccordionSummary>
       </Accordion>
     </div>

diff --git a/.../components/accordion/SimpleAccordion.tsx → ...s/components/accordion/BasicAccordion.tsx b/.../components/accordion/SimpleAccordion.tsx → ...s/components/accordion/BasicAccordion.tsx
@@ -1,35 +1,20 @@
 import * as React from 'react';
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      fontWeight: theme.typography.fontWeightRegular,
-    },
-  }),
-);
-
 export default function SimpleAccordion() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <div>
       <Accordion>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1a-content"
           id="panel1a-header"
         >
-          <Typography className={classes.heading}>Accordion 1</Typography>
+          <Typography>Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -44,7 +29,7 @@ export default function SimpleAccordion() {
           aria-controls="panel2a-content"
           id="panel2a-header"
         >
-          <Typography className={classes.heading}>Accordion 2</Typography>
+          <Typography>Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -59,7 +44,7 @@ export default function SimpleAccordion() {
           aria-controls="panel3a-content"
           id="panel3a-header"
         >
-          <Typography className={classes.heading}>Disabled Accordion</Typography>
+          <Typography>Disabled Accordion</Typography>
         </AccordionSummary>
       </Accordion>
     </div>

diff --git a/docs/src/pages/components/accordion/ControlledAccordions.js b/docs/src/pages/components/accordion/ControlledAccordions.js
@@ -1,46 +1,29 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-  },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    flexBasis: '33.33%',
-    flexShrink: 0,
-  },
-  secondaryHeading: {
-    fontSize: theme.typography.pxToRem(15),
-    color: theme.palette.text.secondary,
-  },
-}));
-
 export default function ControlledAccordions() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleChange = (panel) => (event, isExpanded) => {
     setExpanded(isExpanded ? panel : false);
   };
 
   return (
-    <div className={classes.root}>
+    <div>
       <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1bh-content"
           id="panel1bh-header"
         >
-          <Typography className={classes.heading}>General settings</Typography>
-          <Typography className={classes.secondaryHeading}>
-            I am an accordion
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            General settings
           </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -55,8 +38,8 @@ export default function ControlledAccordions() {
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography className={classes.heading}>Users</Typography>
-          <Typography className={classes.secondaryHeading}>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
             You are currently not an owner
           </Typography>
         </AccordionSummary>
@@ -74,8 +57,10 @@ export default function ControlledAccordions() {
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography className={classes.heading}>Advanced settings</Typography>
-          <Typography className={classes.secondaryHeading}>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            Advanced settings
+          </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
             Filtering has been entirely disabled for whole web server
           </Typography>
         </AccordionSummary>
@@ -92,7 +77,7 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography className={classes.heading}>Personal data</Typography>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/src/pages/components/accordion/ControlledAccordions.tsx b/docs/src/pages/components/accordion/ControlledAccordions.tsx
@@ -1,30 +1,11 @@
 import * as React from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Accordion from '@material-ui/core/Accordion';
 import AccordionDetails from '@material-ui/core/AccordionDetails';
 import AccordionSummary from '@material-ui/core/AccordionSummary';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    heading: {
-      fontSize: theme.typography.pxToRem(15),
-      flexBasis: '33.33%',
-      flexShrink: 0,
-    },
-    secondaryHeading: {
-      fontSize: theme.typography.pxToRem(15),
-      color: theme.palette.text.secondary,
-    },
-  }),
-);
-
 export default function ControlledAccordions() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState<string | false>(false);
 
   const handleChange = (panel: string) => (
@@ -35,17 +16,17 @@ export default function ControlledAccordions() {
   };
 
   return (
-    <div className={classes.root}>
+    <div>
       <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary
           expandIcon={<ExpandMoreIcon />}
           aria-controls="panel1bh-content"
           id="panel1bh-header"
         >
-          <Typography className={classes.heading}>General settings</Typography>
-          <Typography className={classes.secondaryHeading}>
-            I am an accordion
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            General settings
           </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -60,8 +41,8 @@ export default function ControlledAccordions() {
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography className={classes.heading}>Users</Typography>
-          <Typography className={classes.secondaryHeading}>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
             You are currently not an owner
           </Typography>
         </AccordionSummary>
@@ -79,8 +60,10 @@ export default function ControlledAccordions() {
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography className={classes.heading}>Advanced settings</Typography>
-          <Typography className={classes.secondaryHeading}>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+            Advanced settings
+          </Typography>
+          <Typography sx={{ color: 'text.secondary' }}>
             Filtering has been entirely disabled for whole web server
           </Typography>
         </AccordionSummary>
@@ -97,7 +80,7 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography className={classes.heading}>Personal data</Typography>
+          <Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>