[Slider][base] Drop component prop (#37056)

docs/data/base/components/slider/slider.md

@@ -98,27 +98,17 @@ The Slider component is composed of a root `<span>` that houses several interior
 Both the `mark` and `markLabel` slots have corresponding `*Active` classes that are applied conditionally.
 :::
 
-### Slot props
+### Custom structure
 
-:::info
-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:
-
-```jsx
-<Slider component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Slider slots={{ root: 'div', thumb: 'div' }} />
 ```
 
-:::warning
-If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
+:::info
+The `slots` prop is available on all non-utility Base components.
+See [Overriding component structure](/base/guides/overriding-component-structure/) for full details.
 :::
 
 Use the `slotProps` prop to pass custom props to internal slots.
@@ -128,6 +118,20 @@ The following code snippet applies a CSS class called `my-rail` to the rail slot
 <Slider slotProps={{ rail: { className: 'my-rail' } }} />
 ```
 
+#### Usage with TypeScript
+
+In TypeScript, you can specify the custom component type used in the `slots.root` as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:
+
+```tsx
+<Slider<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />
+```
+
+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Slider<'input'> slots={{ root: 'input' }} autoFocus={true} />
+```
+
 ## Hook
 
 ```js

docs/data/base/components/switch/switch.md

@@ -60,13 +60,7 @@ 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:
-
-```jsx
-<Switch component="div" />
-```
-
-Use the `slots` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override the root or any other interior slot:
 
 ```jsx
 <Switch slots={{ root: 'div', track: 'div' }} />

docs/pages/base/api/slider.json

@@ -3,7 +3,6 @@
     "aria-label": { "type": { "name": "custom", "description": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
-    "component": { "type": { "name": "elementType" } },
     "defaultValue": {
       "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
     },

docs/translations/api-docs-base/slider/slider.json

@@ -4,7 +4,6 @@
     "aria-label": "The label of the slider.",
     "aria-labelledby": "The id of the element containing a label for the slider.",
     "aria-valuetext": "A string value that provides a user-friendly name for the current value of the slider.",
-    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "disabled": "If <code>true</code>, the component is disabled.",
     "disableSwap": "If <code>true</code>, the active thumb doesn&#39;t swap when moving pointer over a thumb while dragging another thumb.",

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

@@ -92,19 +92,38 @@ const polymorphicComponentTest = () => {
       {/* @ts-expect-error */}
       <Slider invalidProp={0} />
 
-      <Slider component="a" href="#" />
+      <Slider<'a'>
+        slots={{
+          root: 'a',
+        }}
+        href="#"
+      />
 
-      <Slider component={CustomComponent} stringProp="test" numberProp={0} />
+      <Slider<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+        stringProp="test"
+        numberProp={0}
+      />
       {/* @ts-expect-error */}
-      <Slider component={CustomComponent} />
+      <Slider<typeof CustomComponent>
+        slots={{
+          root: CustomComponent,
+        }}
+      />
 
-      <Slider
-        component="button"
+      <Slider<'button'>
+        slots={{
+          root: 'button',
+        }}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
       />
 
       <Slider<'button'>
-        component="button"
+        slots={{
+          root: 'button',
+        }}
         ref={(elem) => {
           expectType<HTMLButtonElement | null, typeof elem>(elem);
         }}

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

@@ -60,6 +60,7 @@ describe('<Slider />', () => {
         expectedClassName: classes.rail,
       },
     },
+    skip: ['componentProp'],
   }));
 
   it('forwards style props on the Root component', () => {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { OverridableComponent } from '@mui/types';
+import { PolymorphicComponent } from '../utils/PolymorphicComponent';
 import isHostComponent from '../utils/isHostComponent';
 import composeClasses from '../composeClasses';
 import { getSliderUtilityClass } from './sliderClasses';
@@ -64,7 +64,6 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
     'aria-valuetext': ariaValuetext,
     'aria-labelledby': ariaLabelledby,
     className,
-    component,
     disableSwap = false,
     disabled = false,
     getAriaLabel,
@@ -131,7 +130,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
 
   const classes = useUtilityClasses(ownerState);
 
-  const Root = component ?? slots.root ?? 'span';
+  const Root = slots.root ?? 'span';
   const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
@@ -307,7 +306,7 @@ const Slider = React.forwardRef(function Slider<RootComponentType extends React.
       })}
     </Root>
   );
-}) as OverridableComponent<SliderTypeMap>;
+}) as PolymorphicComponent<SliderTypeMap>;
 
 Slider.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
@@ -346,19 +345,6 @@ Slider.propTypes /* remove-proptypes */ = {
 
     return null;
   }),
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    */

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

@@ -1,6 +1,6 @@
-import { OverridableComponent, OverridableTypeMap, OverrideProps, Simplify } from '@mui/types';
+import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
 import * as React from 'react';
-import { SlotComponentProps } from '../utils';
+import { PolymorphicProps, SlotComponentProps } from '../utils';
 import {
   UseSliderHiddenInputProps,
   UseSliderParameters,
@@ -171,9 +171,7 @@ export type ExtendSlider<M extends OverridableTypeMap> = OverridableComponent<
 
 export type SliderProps<
   RootComponentType extends React.ElementType = SliderTypeMap['defaultComponent'],
-> = OverrideProps<SliderTypeMap<{}, RootComponentType>, RootComponentType> & {
-  component?: RootComponentType;
-};
+> = PolymorphicProps<SliderTypeMap<{}, RootComponentType>, RootComponentType>;
 
 export type SliderRootSlotProps = UseSliderRootSlotProps & {
   children: React.ReactNode;