[Accordion] Allow to disable gutter/spacing

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",

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"
   },

docs/pages/api-docs/table-pagination.json

@@ -36,13 +36,12 @@
       "root",
       "toolbar",
       "spacer",
-      "selectLabel",
+      "caption",
       "selectRoot",
       "select",
       "selectIcon",
       "input",
       "menuItem",
-      "displayedRows",
       "actions"
     ],
     "globalClasses": {},

docs/src/pages/components/accordion/CustomizedAccordions.js

@@ -9,15 +9,9 @@ const Accordion = withStyles({
   root: {
     border: '1px solid rgba(0, 0, 0, .125)',
     boxShadow: 'none',
-    '&:not(:last-child)': {
-      borderBottom: 0,
-    },
     '&:before': {
       display: 'none',
     },
-    '&$expanded': {
-      margin: 'auto',
-    },
   },
   expanded: {},
 })(MuiAccordion);
@@ -57,6 +51,7 @@ export default function CustomizedAccordions() {
     <div>
       <Accordion
         square
+        disableGutters
         expanded={expanded === 'panel1'}
         onChange={handleChange('panel1')}
       >
@@ -74,6 +69,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion
         square
+        disableGutters
         expanded={expanded === 'panel2'}
         onChange={handleChange('panel2')}
       >
@@ -91,6 +87,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion
         square
+        disableGutters
         expanded={expanded === 'panel3'}
         onChange={handleChange('panel3')}
       >

docs/translations/api-docs/accordion-summary/accordion-summary.json

@@ -24,6 +24,16 @@
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableGutters={true}</code>"
+    },
+    "contentGutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the children wrapper element",
+      "conditions": "<code>disableGutters={true}</code>"
+    },
     "content": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the children wrapper element"

docs/translations/api-docs/accordion/accordion.json

@@ -5,6 +5,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "defaultExpanded": "If <code>true</code>, expands the accordion by default.",
     "disabled": "If <code>true</code>, the component is disabled.",
+    "disableGutters": "If <code>true</code>, the bottom margin of an expanded accordion is removed and the <code>AccordionSummary</code> height did not change.",
     "expanded": "If <code>true</code>, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion.",
     "onChange": "Callback fired when the expand/collapse state is changed.<br><br><strong>Signature:</strong><br><code>function(event: object, expanded: boolean) =&gt; void</code><br><em>event:</em> The event source of the callback. <strong>Warning</strong>: This is a generic event not a change event.<br><em>expanded:</em> The <code>expanded</code> state of the accordion.",
     "square": "If <code>true</code>, rounded corners are disabled.",
@@ -29,6 +30,11 @@
       "nodeName": "the root element",
       "conditions": "<code>disabled={true}</code>"
     },
+    "gutters": {
+      "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>disableGutters={true}</code>"
+    },
     "region": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}.",
       "nodeName": "the region element",

docs/translations/api-docs/table-pagination/table-pagination.json

@@ -29,9 +29,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the spacer element"
     },
-    "selectLabel": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the select label Typography element"
+    "caption": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the caption Typography component",
+      "conditions": "<code>variant=\"caption\"</code>"
     },
     "selectRoot": {
       "description": "Styles applied to {{nodeName}}.",
@@ -53,10 +54,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the MenuItem component"
     },
-    "displayedRows": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the displayed rows Typography element"
-    },
     "actions": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the internal `TablePaginationActions` component"

packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.test.tsx

@@ -2,107 +2,60 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import TextField from '@material-ui/core/TextField';
-import { act, fireEvent, screen } from 'test/utils';
+import { fireEvent, screen, waitFor } from 'test/utils';
 import DesktopDatePicker from '@material-ui/lab/DesktopDatePicker';
 import {
   createPickerRender,
   FakeTransitionComponent,
   adapterToUse,
   getByMuiTest,
+  openDesktopPicker,
 } from '../internal/pickers/test-utils';
 
-const UncontrolledOpenDesktopDatePicker = (({
-  onClose = () => {},
-  onOpen = () => {},
-  open: openProp,
-  defaultOpen,
-  ...other
-}: any) => {
-  if (openProp != null) {
-    throw new TypeError('Controlling `open` is not supported. Use `defaultOpen` instead.');
-  }
-  const [open, setOpen] = React.useState(defaultOpen);
-
-  return (
-    <DesktopDatePicker
-      open={open}
-      onClose={(...args) => {
-        setOpen(false);
-        onClose(...args);
-      }}
-      onOpen={(...args) => {
-        setOpen(true);
-        onOpen(...args);
-      }}
-      {...other}
-    />
-  );
-}) as typeof DesktopDatePicker;
-
 describe('<DesktopDatePicker />', () => {
   const render = createPickerRender({ strict: false });
 
-  it('opens when "Choose date" is clicked', () => {
-    const handleOpen = spy();
-    render(
-      <DesktopDatePicker
-        value={adapterToUse.date('2019-01-01T00:00:00.000')}
-        onChange={() => {}}
-        onOpen={handleOpen}
-        TransitionComponent={FakeTransitionComponent}
-        renderInput={(params) => <TextField {...params} />}
-      />,
-    );
-
-    act(() => {
-      screen.getByLabelText(/Choose date/).click();
-    });
-
-    expect(handleOpen.callCount).to.equal(1);
-    expect(screen.queryByRole('dialog')).not.to.equal(null);
-  });
-
   it('accepts date on day button click', () => {
     const onChangeMock = spy();
+
     render(
-      <UncontrolledOpenDesktopDatePicker
-        // @ts-expect-error internal prop
-        defaultOpen
+      <DesktopDatePicker
         value={adapterToUse.date('2019-01-01T00:00:00.000')}
         onChange={onChangeMock}
         TransitionComponent={FakeTransitionComponent}
         renderInput={(params) => <TextField {...params} />}
       />,
     );
 
-    fireEvent.click(screen.getByLabelText('Jan 2, 2019'));
+    openDesktopPicker();
 
+    fireEvent.click(screen.getByLabelText('Jan 2, 2019'));
     expect(onChangeMock.callCount).to.equal(1);
+
     expect(screen.queryByRole('dialog')).to.equal(null);
   });
 
-  it('closes on selection', () => {
+  it('closes picker on selection in Desktop mode', async () => {
     render(
-      <UncontrolledOpenDesktopDatePicker
-        // @ts-expect-error internal prop
-        defaultOpen
+      <DesktopDatePicker
         TransitionComponent={FakeTransitionComponent}
         value={adapterToUse.date('2018-01-01T00:00:00.000')}
         onChange={() => {}}
         renderInput={(params) => <TextField {...params} />}
       />,
     );
 
+    fireEvent.click(screen.getByLabelText('Choose date, selected date is Jan 1, 2018'));
+
+    await waitFor(() => screen.getByRole('dialog'));
     fireEvent.click(screen.getByLabelText('Jan 2, 2018'));
 
     expect(screen.queryByRole('dialog')).to.equal(null);
   });
 
   it("prop `disableCloseOnSelect` – if `true` doesn't close picker", () => {
     render(
-      <UncontrolledOpenDesktopDatePicker
-        // @ts-expect-error internal prop
-        defaultOpen
+      <DesktopDatePicker
         TransitionComponent={FakeTransitionComponent}
         disableCloseOnSelect
         value={adapterToUse.date('2018-01-01T00:00:00.000')}
@@ -111,25 +64,28 @@ describe('<DesktopDatePicker />', () => {
       />,
     );
 
+    openDesktopPicker();
     fireEvent.click(screen.getByLabelText('Jan 2, 2018'));
 
     expect(screen.queryByRole('dialog')).toBeVisible();
   });
 
-  it('does not call onChange if same date selected', () => {
+  it('does not call onChange if same date selected', async () => {
     const onChangeMock = spy();
+
     render(
       <DesktopDatePicker
-        open
         TransitionComponent={FakeTransitionComponent}
         value={adapterToUse.date('2018-01-01T00:00:00.000')}
         onChange={onChangeMock}
         renderInput={(params) => <TextField {...params} />}
       />,
     );
 
-    fireEvent.click(screen.getByLabelText('Jan 1, 2018'));
+    fireEvent.click(screen.getByLabelText('Choose date, selected date is Jan 1, 2018'));
+    await waitFor(() => screen.getByRole('dialog'));
 
+    fireEvent.click(screen.getByLabelText('Jan 1, 2018'));
     expect(onChangeMock.callCount).to.equal(0);
   });
 

packages/material-ui-lab/src/internal/pickers/PickersPopper.tsx

@@ -68,7 +68,7 @@ const PickersPopper: React.FC<PickerPopperProps & WithStyles<typeof styles>> = (
   const handleRef = useForkRef(paperRef, containerRef);
   const lastFocusedElementRef = React.useRef<Element | null>(null);
 
-  const handlePaperRef = useEventCallback((node: HTMLElement) => {
+  const handlePaperRef = useEventCallback((node) => {
     setRef(handleRef, node);
 
     if (node) {

packages/material-ui-lab/src/internal/pickers/test-utils.tsx

@@ -82,6 +82,10 @@ export function getByMuiTest(...args: Parameters<typeof getAllByMuiTest>): Eleme
   );
 }
 
+export function openDesktopPicker() {
+  fireEvent.click(screen.getByLabelText(/choose date/i));
+}
+
 export function openMobilePicker() {
   fireEvent.click(screen.getByRole('textbox'));
 }

packages/material-ui/src/Accordion/Accordion.d.ts

@@ -21,6 +21,8 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
     expanded?: string;
     /** Pseudo-class applied to the root element if `disabled={true}`. */
     disabled?: string;
+    /** Styles applied to the root element unless `disableGutters={true}`. */
+    gutters?: string;
     /** Styles applied to the region element, the container of the children. */
     region?: string;
   };
@@ -34,6 +36,11 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * If `true`, the bottom margin of an expanded accordion is removed and the `AccordionSummary` height did not change.
+   * @default false
+   */
+  disableGutters?: boolean;
   /**
    * If `true`, expands the accordion, otherwise collapse it.
    * Setting this prop enables control over the accordion.