[core] Ensure component class keys aren't missing (#25754)

packages/material-ui-lab/src/TabList/TabList.test.js

@@ -21,6 +21,7 @@ describe('<TabList />', () => {
   }
 
   describeConformance(<TabList />, () => ({
+    // @ts-expect-error https://github.com/microsoft/TypeScript/issues/15300
     classes,
     inheritComponent: Tabs,
     /**
@@ -30,7 +31,7 @@ describe('<TabList />', () => {
     mount: mountInContext,
     refInstanceof: window.HTMLDivElement,
     // TODO: no idea why reactTestRenderer fails
-    skip: [/** @type {'reactTestRenderer'} */ ('reactTestRenderer')],
+    skip: ['reactTestRenderer'],
   }));
 
   // outside of TabContext pass every test in Tabs

packages/material-ui-lab/src/TabPanel/TabPanel.d.ts

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import { Theme } from '@material-ui/core/styles';
 import { SxProps } from '@material-ui/system';
-
-export type TabPanelClassKey = keyof NonNullable<TabPanelProps['classes']>;
+import { TabPanelClasses } from './tabPanelClasses';
 
 export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -13,10 +12,7 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-  };
+  classes?: Partial<TabPanelClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui-lab/src/TabPanel/tabPanelClasses.ts

@@ -0,0 +1,16 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface TabPanelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type TabPanelClassKey = keyof TabPanelClasses;
+
+export function getTabPanelUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiTabPanel', slot);
+}
+
+const tabPanelClasses: TabPanelClasses = generateUtilityClasses('MuiTabPanel', ['root']);
+
+export default tabPanelClasses;

packages/material-ui-lab/src/TimelineConnector/TimelineConnector.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
 import { Theme } from '@material-ui/core/styles';
 import { SxProps } from '@material-ui/system';
+import { TimelineConnectorClasses } from './timelineConnectorClasses';
 
 export interface TimelineConnectorProps
   extends StandardProps<React.HTMLAttributes<HTMLSpanElement>> {
@@ -12,18 +13,13 @@ export interface TimelineConnectorProps
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-  };
+  classes?: Partial<TimelineConnectorClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
 }
 
-export type TimelineConnectorClassKey = keyof NonNullable<TimelineConnectorProps['classes']>;
-
 /**
  *
  * Demos:

packages/material-ui-lab/src/TimelineConnector/timelineConnectorClasses.ts

@@ -0,0 +1,19 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface TimelineConnectorClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type TimelineConnectorClassKey = keyof TimelineConnectorClasses;
+
+export function getTimelineConnectorUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiTimelineConnector', slot);
+}
+
+const timelineConnectorClasses: TimelineConnectorClasses = generateUtilityClasses(
+  'MuiTimelineConnector',
+  ['root'],
+);
+
+export default timelineConnectorClasses;

packages/material-ui-lab/src/TimelineContent/TimelineContent.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '@material-ui/core/styles';
 import { InternalStandardProps as StandardProps, TypographyProps } from '@material-ui/core';
+import { TimelineContentClasses } from './timelineContentClasses';
 
 export interface TimelineContentProps extends StandardProps<TypographyProps> {
   /**
@@ -11,24 +12,13 @@ export interface TimelineContentProps extends StandardProps<TypographyProps> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `position="right"`. */
-    positionRight?: string;
-    /** Styles applied to the root element if `position="left"`. */
-    positionLeft?: string;
-    /** Styles applied to the root element if `position="alternate"`. */
-    positionAlternate?: string;
-  };
+  classes?: Partial<TimelineContentClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
 }
 
-export type TimelineContentClassKey = keyof NonNullable<TimelineContentProps['classes']>;
-
 /**
  *
  * Demos:

packages/material-ui-lab/src/TimelineContent/timelineContentClasses.ts

@@ -0,0 +1,25 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface TimelineContentClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `position="right"`. */
+  positionRight: string;
+  /** Styles applied to the root element if `position="left"`. */
+  positionLeft: string;
+  /** Styles applied to the root element if `position="alternate"`. */
+  positionAlternate: string;
+}
+
+export type TimelineContentClassKey = keyof TimelineContentClasses;
+
+export function getTimelineContentUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiTimelineContent', slot);
+}
+
+const timelineContentClasses: TimelineContentClasses = generateUtilityClasses(
+  'MuiTimelineContent',
+  ['root', 'positionLeft', 'positionRight', 'positionAlternate'],
+);
+
+export default timelineContentClasses;

packages/material-ui-lab/src/TimelineDot/TimelineDot.d.ts

@@ -3,6 +3,7 @@ import { OverridableStringUnion } from '@material-ui/types';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '@material-ui/core/styles';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { TimelineDotClasses } from './timelineDotClasses';
 
 export interface TimelineDotPropsVariantOverrides {}
 
@@ -14,26 +15,7 @@ export interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `variant="filled"`. */
-    filled?: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined?: string;
-    /** Styles applied to the root element if `color="grey"` and `variant="filled"`. */
-    filledGrey?: string;
-    /** Styles applied to the root element if `color="grey"` and `variant="outlined"`. */
-    outlinedGrey?: string;
-    /** Styles applied to the root element if `color="primary"` and `variant="filled"`. */
-    filledPrimary?: string;
-    /** Styles applied to the root element if `color="primary"` and `variant="outlined"`. */
-    outlinedPrimary?: string;
-    /** Styles applied to the root element if `color="secondary"` and `variant="filled"`. */
-    filledSecondary?: string;
-    /** Styles applied to the root element if `color="secondary"` and `variant="outlined"`. */
-    outlinedSecondary?: string;
-  };
+  classes?: Partial<TimelineDotClasses>;
   /**
    * The dot can have a different colors.
    * @default 'grey'
@@ -50,8 +32,6 @@ export interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTM
   variant?: OverridableStringUnion<'filled' | 'outlined', TimelineDotPropsVariantOverrides>;
 }
 
-export type TimelineDotClassKey = keyof NonNullable<TimelineDotProps['classes']>;
-
 /**
  *
  * Demos:

packages/material-ui-lab/src/TimelineDot/timelineDotClasses.ts

@@ -0,0 +1,42 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface TimelineDotClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="filled"`. */
+  filled: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** Styles applied to the root element if `color="grey"` and `variant="filled"`. */
+  filledGrey: string;
+  /** Styles applied to the root element if `color="grey"` and `variant="outlined"`. */
+  outlinedGrey: string;
+  /** Styles applied to the root element if `color="primary"` and `variant="filled"`. */
+  filledPrimary: string;
+  /** Styles applied to the root element if `color="primary"` and `variant="outlined"`. */
+  outlinedPrimary: string;
+  /** Styles applied to the root element if `color="secondary"` and `variant="filled"`. */
+  filledSecondary: string;
+  /** Styles applied to the root element if `color="secondary"` and `variant="outlined"`. */
+  outlinedSecondary: string;
+}
+
+export type TimelineDotClassKey = keyof TimelineDotClasses;
+
+export function getTimelineDotUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiTimelineDot', slot);
+}
+
+const timelineDotClasses: TimelineDotClasses = generateUtilityClasses('MuiTimelineDot', [
+  'root',
+  'filled',
+  'outlined',
+  'filledGrey',
+  'outlinedGrey',
+  'filledPrimary',
+  'outlinedPrimary',
+  'filledSecondary',
+  'outlinedSecondary',
+]);
+
+export default timelineDotClasses;

packages/material-ui-lab/src/TimelineItem/TimelineItem.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SxProps } from '@material-ui/system';
 import { Theme } from '@material-ui/core/styles';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { TimelineItemClasses } from './timelineItemClasses';
 
 export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
@@ -15,26 +16,13 @@ export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HT
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `position="left"`. */
-    positionLeft?: string;
-    /** Styles applied to the root element if `position="right"`. */
-    positionRight?: string;
-    /** Styles applied to the root element if `position="alternate"`. */
-    positionAlternate?: string;
-    /** Styles applied to the root element if TimelineOppositeContent isn't provided. */
-    missingOppositeContent?: string;
-  };
+  classes?: Partial<TimelineItemClasses>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
 }
 
-export type TimelineItemClassKey = keyof NonNullable<TimelineItemProps['classes']>;
-
 /**
  *
  * Demos: