Add back component prop

mui · Sep 21, 2023 · c380c75 · c380c75
1 parent 8e940b8
commit c380c75
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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'