[Button][base] Drop component prop

docs/data/base/components/button/UnstyledButtonCustom.js

@@ -108,7 +108,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 );
 
 const SvgButton = React.forwardRef(function SvgButton(props, ref) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {

docs/data/base/components/button/UnstyledButtonCustom.tsx

@@ -112,7 +112,7 @@ const SvgButton = React.forwardRef(function SvgButton(
   props: ButtonUnstyledProps,
   ref: React.ForwardedRef<any>,
 ) {
-  return <ButtonUnstyled {...props} component={CustomButtonRoot} ref={ref} />;
+  return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} ref={ref} />;
 });
 
 export default function UnstyledButtonCustom() {

docs/data/base/components/button/UnstyledButtonsSpan.js

@@ -43,8 +43,8 @@ const CustomButton = styled(ButtonUnstyled)`
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>

docs/data/base/components/button/UnstyledButtonsSpan.tsx

@@ -47,8 +47,8 @@ const CustomButton = styled(ButtonUnstyled)`
 export default function UnstyledButtonsSpan() {
   return (
     <Stack spacing={2} direction="row">
-      <CustomButton component="span">Button</CustomButton>
-      <CustomButton component="span" disabled>
+      <CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+      <CustomButton slots={{ root: 'span' }} disabled>
         Disabled
       </CustomButton>
     </Stack>

docs/data/base/components/button/UnstyledButtonsSpan.tsx.preview

@@ -1,4 +1,4 @@
-<CustomButton component="span">Button</CustomButton>
-<CustomButton component="span" disabled>
+<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
+<CustomButton slots={{ root: 'span' }} disabled>
   Disabled
 </CustomButton>

docs/data/base/components/button/button.md

@@ -59,10 +59,10 @@ The following props are available on all non-utility Base components.
 See [Usage](/base/getting-started/usage/) for full details.
 :::
 
-Use the `component` prop to override the root slot with a custom element:
+Use the `slots.root` prop to override the root slot with a custom element:
 
 ```jsx
-<ButtonUnstyled component="div" />
+<ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
 If you provide a non-interactive element such as a `<span>`, the Unstyled Button component will automatically add the necessary accessibility attributes.
@@ -72,8 +72,8 @@ Compare the attributes on the `<span>` in this demo with the Button from the pre
 {{"demo": "UnstyledButtonsSpan.js"}}
 
 :::warning
-If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled component="span" />`), it will not submit the form it's in when clicked.
-Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its parent form.
+If an Unstyled Button is customized with a non-button element (i.e. `<ButtonUnstyled slots={{ root: "span" }} />`), it will not submit the form it's in when clicked.
+Similarly, `<ButtonUnstyled slots={{ root: "span" }} type="reset">` will not reset its parent form.
 :::
 
 ## Hook

docs/pages/base/api/button-unstyled.json

@@ -6,7 +6,6 @@
         "description": "func<br>&#124;&nbsp;{ current?: { focusVisible: func } }"
       }
     },
-    "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "focusableWhenDisabled": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": {

docs/translations/api-docs/button-unstyled/button-unstyled.json

@@ -2,7 +2,6 @@
   "componentDescription": "The foundation for building custom-styled buttons.",
   "propDescriptions": {
     "action": "A ref for imperative actions. It currently only supports <code>focusVisible()</code> action.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "focusableWhenDisabled": "If <code>true</code>, allows a disabled button to receive focus.",
     "slotProps": "The props used for each slot inside the Button.",

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx

@@ -22,38 +22,3 @@ const CustomButtonRoot = React.forwardRef(function CustomButtonRoot(
 function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
   return <ButtonUnstyled {...props} slots={{ root: CustomButtonRoot }} />;
 }
-
-const polymorphicComponentTest = () => {
-  const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
-    function CustomComponent() {
-      return <div />;
-    };
-
-  return (
-    <div>
-      {/* @ts-expect-error */}
-      <ButtonUnstyled invalidProp={0} />
-
-      <ButtonUnstyled component="a" href="#" />
-
-      <ButtonUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
-      {/* @ts-expect-error */}
-      <ButtonUnstyled component={CustomComponent} />
-
-      <ButtonUnstyled
-        component="button"
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
-      />
-
-      <ButtonUnstyled<'div'>
-        component="div"
-        ref={(elem) => {
-          expectType<HTMLDivElement | null, typeof elem>(elem);
-        }}
-        onClick={(e) => {
-          expectType<React.MouseEvent<HTMLDivElement, MouseEvent>, typeof e>(e);
-        }}
-      />
-    </div>
-  );
-};

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.test.tsx

@@ -30,7 +30,7 @@ describe('<ButtonUnstyled />', () => {
 
   describe('role attribute', () => {
     it('is set when the root component is an HTML element other than a button', () => {
-      const { getByRole } = render(<ButtonUnstyled component="span" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'span' }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -42,7 +42,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <span role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedSpan} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedSpan }} />);
       expect(getByRole('button')).not.to.equal(null);
     });
 
@@ -54,7 +54,7 @@ describe('<ButtonUnstyled />', () => {
         ) => <button role={props.role} ref={ref} />,
       );
 
-      const { getByRole } = render(<ButtonUnstyled component={WrappedButton} />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: WrappedButton }} />);
       expect(getByRole('button')).not.to.have.attribute('role');
     });
   });
@@ -104,7 +104,7 @@ describe('<ButtonUnstyled />', () => {
     describe('as non-button element', () => {
       it('can receive focus when focusableWhenDisabled is set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -117,7 +117,7 @@ describe('<ButtonUnstyled />', () => {
 
       it('has aria-disabled and tabIndex attributes set', () => {
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled />,
+          <ButtonUnstyled slots={{ root: 'span' }} focusableWhenDisabled disabled />,
         );
 
         const button = getByRole('button');
@@ -129,7 +129,12 @@ describe('<ButtonUnstyled />', () => {
       it('does not respond to user actions when disabled and focused', () => {
         const handleClick = spy();
         const { getByRole } = render(
-          <ButtonUnstyled component="span" focusableWhenDisabled disabled onClick={handleClick} />,
+          <ButtonUnstyled
+            slots={{ root: 'span' }}
+            focusableWhenDisabled
+            disabled
+            onClick={handleClick}
+          />,
         );
 
         const button = getByRole('button');
@@ -155,7 +160,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "href" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" href="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} href="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 
@@ -172,7 +177,7 @@ describe('<ButtonUnstyled />', () => {
     });
 
     it('renders as the element provided in the "component" prop, even with a "to" prop', () => {
-      const { getByRole } = render(<ButtonUnstyled component="h1" to="#" />);
+      const { getByRole } = render(<ButtonUnstyled slots={{ root: 'h1' }} to="#" />);
       expect(getByRole('heading')).not.to.equal(null);
     });
 

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
 import { getButtonUnstyledUtilityClass } from './buttonUnstyledClasses';
 import {
   ButtonUnstyledProps,
   ButtonUnstyledOwnProps,
-  ButtonUnstyledTypeMap,
   ButtonUnstyledRootSlotProps,
 } from './ButtonUnstyled.types';
 import useButton from '../useButton';
@@ -39,13 +37,13 @@ const useUtilityClasses = (ownerState: ButtonUnstyledOwnerState) => {
  *
  * - [ButtonUnstyled API](https://mui.com/base/api/button-unstyled/)
  */
-const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
-  BaseComponentType extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
->(props: ButtonUnstyledProps<BaseComponentType>, forwardedRef: React.ForwardedRef<any>) {
+const ButtonUnstyled = React.forwardRef(function ButtonUnstyled(
+  props: ButtonUnstyledProps,
+  forwardedRef: React.ForwardedRef<any>,
+) {
   const {
     action,
     children,
-    component,
     disabled,
     focusableWhenDisabled = false,
     onBlur,
@@ -88,7 +86,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   const classes = useUtilityClasses(ownerState);
 
   const defaultElement = other.href || other.to ? 'a' : 'button';
-  const Root: React.ElementType = component ?? slots.root ?? defaultElement;
+  const Root: React.ElementType = slots.root ?? defaultElement;
   const rootProps: WithOptionalOwnerState<ButtonUnstyledRootSlotProps> = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -102,7 +100,7 @@ const ButtonUnstyled = React.forwardRef(function ButtonUnstyled<
   });
 
   return <Root {...rootProps}>{children}</Root>;
-}) as OverridableComponent<ButtonUnstyledTypeMap>;
+});
 
 ButtonUnstyled.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -124,11 +122,6 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * If `true`, the component is disabled.
    * @default false

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { OverrideProps, Simplify } from '@mui/types';
+import { DefaultComponentProps, Simplify } from '@mui/types';
 import { UseButtonParameters, UseButtonRootSlotProps } from '../useButton';
 import { SlotComponentProps } from '../utils';
 
@@ -43,11 +43,7 @@ export interface ButtonUnstyledSlots {
   root?: React.ElementType;
 }
 
-export type ButtonUnstyledProps<
-  D extends React.ElementType = ButtonUnstyledTypeMap['defaultComponent'],
-> = OverrideProps<ButtonUnstyledTypeMap<{}, D>, D> & {
-  component?: D;
-};
+export type ButtonUnstyledProps = DefaultComponentProps<ButtonUnstyledTypeMap>;
 
 export interface ButtonUnstyledTypeMap<P = {}, D extends React.ElementType = 'button'> {
   props: P & ButtonUnstyledOwnProps;

packages/mui-base/src/MenuUnstyled/MenuUnstyled.test.tsx

@@ -35,7 +35,7 @@ describe('<MenuUnstyled />', () => {
         expectedClassName: menuUnstyledClasses.listbox,
       },
     },
-    skip: ['reactTestRenderer', 'propsSpread', 'componentProp', 'slotsProp'],
+    skip: ['reactTestRenderer', 'propsSpread', 'slotsProp'],
   }));
 
   describe('after initialization', () => {

packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx

@@ -23,7 +23,6 @@ describe('<TextareaAutosize />', () => {
     slots: {},
     skip: [
       // doesn't have slots, so these tests are irrelevant:
-      'componentProp',
       'mergeClassName',
       'ownerStatePropagation',
       'propsSpread',

test/utils/describeConformanceUnstyled.tsx

@@ -9,7 +9,6 @@ import {
   describeRef,
   randomStringValue,
   testClassName,
-  testComponentProp,
   testReactTestRenderer,
 } from './describeConformance';
 
@@ -102,7 +101,7 @@ function testPropForwarding(
 }
 
 function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledConformanceOptions) {
-  const { render, slots, testComponentPropWith: Element = 'div' } = getOptions();
+  const { render, slots } = getOptions();
 
   if (!render) {
     throwMissingPropError('render');
@@ -163,36 +162,6 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
       });
     }
   });
-
-  it('uses the component provided in the `component` prop when both `component` and `slots.root` are provided', () => {
-    const RootComponentA = React.forwardRef(
-      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
-        // @ts-ignore
-        <Element data-testid="a" ref={ref}>
-          {children}
-        </Element>
-      ),
-    );
-
-    const RootComponentB = React.forwardRef(
-      ({ children }: React.PropsWithChildren<{}>, ref: React.Ref<any>) => (
-        // @ts-ignore
-        <Element data-testid="b" ref={ref}>
-          {children}
-        </Element>
-      ),
-    );
-
-    const { queryByTestId } = render(
-      React.cloneElement(element, {
-        component: RootComponentA,
-        slots: { root: RootComponentB },
-      }),
-    );
-
-    expect(queryByTestId('a')).not.to.equal(null);
-    expect(queryByTestId('b')).to.equal(null);
-  });
 }
 
 function testSlotPropsProp(
@@ -342,7 +311,6 @@ function testDisablingClassGeneration(
 }
 
 const fullSuite = {
-  componentProp: testComponentProp,
   slotsProp: testSlotsProp,
   slotPropsProp: testSlotPropsProp,
   slotPropsCallbacks: testSlotPropsCallbacks,