[Accordion] Move properties to the AccordionOwnProps interface

[Aleksan4e3]

Description

Extract props into a separate interface AccordionOwnProps.

Advantages

• This enables extending AccordionOwnProps interface through the Declaration Merging mechanism in TypeScript.

• As a result, developers can add custom properties to Accordion without modifying the library’s source code.

• This approach is consistent with how other MUI components are implemented.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-47348--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 155f2f9

[mj12albert]

This approach is consistent with how other MUI components are implemented.

It looks to me this isn't really consistently applied; how does this change help you over just extending AccordionProps

[Aleksan4e3]

This approach is consistent with how other MUI components are implemented.

It looks to me this isn't really consistently applied; how does this change help you over just extending AccordionProps

I will use it like this:

1. extending AccordionOwnProps interface through the Declaration Merging mechanism:

declare module '@mui/material/Accordion' {
    interface AccordionOwnProps {
        customProp?: 'custom1' | 'custom2';
    }
}

2. define styles for Accordion 'customProp':

const theme = createTheme({
  components: {
    MuiAccordion: {
      variants: [
        {
          props: { customProp: 'custom1' },
          style: {
            // styles for 'custom1'
            },
          },
        },
        {
          props: { customProp: 'custom2' },
          style: {
            // styles for 'custom2'
            },
          },
        },
      ],
    },
  },
});

3. Now I can use 'customProp' for Accordion. Accordion knows how to render itself with 'customProp'. Also TypeScript knows about 'customProp' and will show hint

import Accordion from '@mui/material/Accordion';

<Accordion customProp='custom1'>
...
</Accordion>