From c380c75a122159bc7d0c8e940a2caf48327d972b Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 21 Sep 2023 13:43:19 +0800
Subject: [PATCH] Add back component prop

---
 .../mui-material-next/src/FormControl/FormControl.test.js    | 5 +++--
 packages/mui-material-next/src/FormControl/FormControl.tsx   | 5 ++++-
 .../mui-material-next/src/FormControl/FormControl.types.ts   | 4 +++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/mui-material-next/src/FormControl/FormControl.test.js b/packages/mui-material-next/src/FormControl/FormControl.test.js
index 2c0db66326258c..d98f4e24c68375 100644
--- a/packages/mui-material-next/src/FormControl/FormControl.test.js
+++ b/packages/mui-material-next/src/FormControl/FormControl.test.js
@@ -26,14 +26,15 @@ describe('<FormControl />', () => {
     render,
     refInstanceof: window.HTMLDivElement,
     muiName: 'MuiFormControl',
-    testVariantProps: { margin: 'dense' },
     slots: {
       root: {
         expectedClassName: classes.root,
         testWithElement: 'fieldset',
       },
     },
-    skip: ['componentProp', 'componentsProp'],
+    testComponentPropWith: 'fieldset',
+    testVariantProps: { margin: 'dense' },
+    skip: ['componentsProp'],
   }));
 
   describe('initial state', () => {
diff --git a/packages/mui-material-next/src/FormControl/FormControl.tsx b/packages/mui-material-next/src/FormControl/FormControl.tsx
index 8ff9a8ed83f54d..2e9a81c6567ff8 100644
--- a/packages/mui-material-next/src/FormControl/FormControl.tsx
+++ b/packages/mui-material-next/src/FormControl/FormControl.tsx
@@ -88,7 +88,9 @@ const FormControl = React.forwardRef(function FormControl<
   const {
     children,
     className,
+    classes: classesProp,
     color = 'primary',
+    component: ComponentProp = 'div',
     disabled = false,
     error = false,
     focused: visuallyFocused,
@@ -182,6 +184,7 @@ const FormControl = React.forwardRef(function FormControl<
     ...props,
     classes: props.classes ?? {},
     color,
+    component: ComponentProp,
     disabled,
     error,
     filled,
@@ -239,7 +242,7 @@ const FormControl = React.forwardRef(function FormControl<
     variant,
   ]);
 
-  const Root = slots.root || FormControlRoot;
+  const Root = slots.root ?? ComponentProp ?? FormControlRoot;
   const rootProps = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
diff --git a/packages/mui-material-next/src/FormControl/FormControl.types.ts b/packages/mui-material-next/src/FormControl/FormControl.types.ts
index 09bb1aa0cc97eb..848054e6ad7577 100644
--- a/packages/mui-material-next/src/FormControl/FormControl.types.ts
+++ b/packages/mui-material-next/src/FormControl/FormControl.types.ts
@@ -75,7 +75,9 @@ export interface FormControlTypeMap<
 export type FormControlProps<
   RootComponentType extends React.ElementType = FormControlTypeMap['defaultComponent'],
   AdditionalProps = {},
-> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponentType>, RootComponentType>;
+> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponentType>, RootComponentType> & {
+  component?: React.ElementType;
+};
 
 type MaterialYouOwnerStateKeys =
   | 'classes'