[core] Ensure component class keys aren't missing

mui · May 10, 2021 · 6ace5a0 · 6ace5a0
1 parent 8cb115b
commit 6ace5a0
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 46 deletions.
diff --git a/packages/material-ui/src/Accordion/Accordion.d.ts b/packages/material-ui/src/Accordion/Accordion.d.ts
@@ -3,6 +3,7 @@ import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
 import { PaperProps } from '../Paper';
+import { AccordionClasses } from './accordionClasses';
 
 export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   /**
@@ -12,20 +13,7 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element unless `square={true}`. */
-    rounded?: string;
-    /** Pseudo-class applied to the root element if `expanded={true}`. */
-    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;
-  };
+  classes?: Partial<AccordionClasses>;
   /**
    * If `true`, expands the accordion by default.
    * @default false
@@ -72,8 +60,6 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   TransitionProps?: TransitionProps;
 }
 
-export type AccordionClassKey = keyof NonNullable<AccordionProps['classes']>;
-
 /**
  *
  * Demos:

diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js
@@ -53,7 +53,6 @@ const AccordionRoot = experimentalStyled(
     };
 
     return {
-      /* Styles applied to the root element. */
       position: 'relative',
       transition: theme.transitions.create(['margin'], transition),
       overflowAnchor: 'none', // Keep the same scrolling position
@@ -73,7 +72,6 @@ const AccordionRoot = experimentalStyled(
           display: 'none',
         },
       },
-      /* Styles applied to the root element if `expanded={true}`. */
       [`&.${accordionClasses.expanded}`]: {
         '&:before': {
           opacity: 0,
@@ -90,14 +88,12 @@ const AccordionRoot = experimentalStyled(
           },
         },
       },
-      /* Styles applied to the root element if `disabled={true}`. */
       [`&.${accordionClasses.disabled}`]: {
         backgroundColor: theme.palette.action.disabledBackground,
       },
     };
   },
   ({ theme, styleProps }) => ({
-    /* Styles applied to the root element unless `square={true}`. */
     ...(!styleProps.square && {
       borderRadius: 0,
       '&:first-of-type': {
@@ -114,7 +110,6 @@ const AccordionRoot = experimentalStyled(
         },
       },
     }),
-    /* Styles applied to the root element unless `disableGutters={true}`. */
     ...(!styleProps.disableGutters && {
       [`&.${accordionClasses.expanded}`]: {
         margin: '16px 0',

diff --git a/packages/material-ui/src/Accordion/accordionClasses.d.ts b/packages/material-ui/src/Accordion/accordionClasses.d.ts
diff --git a/packages/material-ui/src/Accordion/accordionClasses.js b/packages/material-ui/src/Accordion/accordionClasses.js
diff --git a/packages/material-ui/src/Accordion/accordionClasses.ts b/packages/material-ui/src/Accordion/accordionClasses.ts
@@ -0,0 +1,33 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface AccordionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element unless `square={true}`. */
+  rounded: string;
+  /** Pseudo-class applied to the root element if `expanded={true}`. */
+  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;
+}
+
+export type AccordionClassKey = keyof AccordionClasses;
+
+export function getAccordionUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiAccordion', slot);
+}
+
+const accordionClasses: AccordionClasses = generateUtilityClasses('MuiAccordion', [
+  'root',
+  'rounded',
+  'expanded',
+  'disabled',
+  'gutters',
+  'region',
+]);
+
+export default accordionClasses;