[Slider][material-next] Add Slider component with Material You design

packages/mui-material-next/src/Slider/Slider.test.js

@@ -53,7 +53,6 @@ describe('<Slider />', () => {
       testDeepOverrides: { slotName: 'thumb', slotClassName: classes.thumb },
       testVariantProps: { color: 'primary', orientation: 'vertical', size: 'small' },
       testStateOverrides: { prop: 'color', value: 'secondary', styleKey: 'colorSecondary' },
-      testLegacyComponentsProp: true,
       ThemeProvider: CssVarsProvider,
       createTheme: extendTheme,
       slots: {
@@ -80,6 +79,7 @@ describe('<Slider />', () => {
         },
       },
       skip: [
+        'componentsProp',
         'slotPropsCallback', // not supported yet
       ],
     }),
@@ -313,7 +313,7 @@ describe('<Slider />', () => {
     it('should focus the slider when dragging', () => {
       const { getByRole, getByTestId, container } = render(
         <Slider
-          componentsProps={{ thumb: { 'data-testid': 'thumb' } }}
+          slotProps={{ thumb: { 'data-testid': 'thumb' } }}
           defaultValue={30}
           step={10}
           marks
@@ -801,7 +801,7 @@ describe('<Slider />', () => {
         <Slider
           valueLabelDisplay="on"
           value={50}
-          componentsProps={{ thumb: { 'data-testid': 'thumb' } }}
+          slotProps={{ thumb: { 'data-testid': 'thumb' } }}
         />,
       );
       expect(document.querySelector(`.${classes.valueLabelOpen}`)).not.to.equal(null);
@@ -818,7 +818,7 @@ describe('<Slider />', () => {
         <Slider
           valueLabelDisplay="auto"
           value={50}
-          componentsProps={{ thumb: { 'data-testid': 'thumb' } }}
+          slotProps={{ thumb: { 'data-testid': 'thumb' } }}
         />,
       );
       const thumb = getByTestId('thumb');
@@ -841,11 +841,7 @@ describe('<Slider />', () => {
       ValueLabelComponent.propTypes = { value: PropTypes.number };
 
       const { setProps } = render(
-        <Slider
-          components={{ ValueLabel: ValueLabelComponent }}
-          valueLabelDisplay="on"
-          value={50}
-        />,
+        <Slider slots={{ valueLabel: ValueLabelComponent }} valueLabelDisplay="on" value={50} />,
       );
 
       expect(screen.queryByTestId('value-label')).to.have.class('open');
@@ -943,7 +939,7 @@ describe('<Slider />', () => {
           <Slider
             value={30}
             onChange={handleChange}
-            componentsProps={{ thumb: { 'data-testid': 'thumb' } }}
+            slotProps={{ thumb: { 'data-testid': 'thumb' } }}
           />
         </CssVarsProvider>,
       );
@@ -1105,7 +1101,7 @@ describe('<Slider />', () => {
       const { getByTestId } = render(
         <Slider
           value={10}
-          components={{ ValueLabel: ValueLabelComponent }}
+          slots={{ valueLabel: ValueLabelComponent }}
           valueLabelDisplay="on"
           valueLabelFormat={(n) => n.toString(2)}
         />,
@@ -1343,7 +1339,7 @@ describe('<Slider />', () => {
     });
   });
 
-  describe('prop: components', () => {
+  describe('prop: slots', () => {
     it('should render custom components if specified', () => {
       // ARRANGE
       const dataTestId = 'slider-input-testid';
@@ -1353,22 +1349,22 @@ describe('<Slider />', () => {
       }
 
       // ACT
-      const { getByTestId } = render(<Slider components={{ Input: CustomInput }} />);
+      const { getByTestId } = render(<Slider slots={{ input: CustomInput }} />);
 
       // ASSERT
       expect(getByTestId(dataTestId).name).to.equal(name);
     });
   });
 
-  describe('prop: componentsProps', () => {
+  describe('prop: slotProps', () => {
     it('should forward the props to their respective components', () => {
       // ARRANGE
       const dataTestId = 'slider-input-testid';
       const id = 'slider-input-id';
 
       // ACT
       const { getByTestId } = render(
-        <Slider defaultValue={10} componentsProps={{ input: { 'data-testid': dataTestId, id } }} />,
+        <Slider defaultValue={10} slotProps={{ input: { 'data-testid': dataTestId, id } }} />,
       );
 
       // ASSERT

packages/mui-material-next/src/Slider/Slider.tsx

@@ -526,8 +526,6 @@ const Slider = React.forwardRef(function Slider<
     'aria-valuetext': ariaValuetext,
     'aria-labelledby': ariaLabelledby,
     component = 'span',
-    components = {},
-    componentsProps = {},
     color = 'primary',
     classes: classesProp,
     className,
@@ -600,29 +598,19 @@ const Slider = React.forwardRef(function Slider<
 
   const classes = useUtilityClasses(ownerState);
 
-  // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? SliderRoot;
-  const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
-  const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
-  const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
-  const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? StyledSliderValueLabel;
-  const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
-  const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
-  const InputSlot = slots?.input ?? components.Input ?? 'input';
-
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const railSlotProps = slotProps?.rail ?? componentsProps.rail;
-  const trackSlotProps = slotProps?.track ?? componentsProps.track;
-  const thumbSlotProps = slotProps?.thumb ?? componentsProps.thumb;
-  const valueLabelSlotProps = slotProps?.valueLabel ?? componentsProps.valueLabel;
-  const markSlotProps = slotProps?.mark ?? componentsProps.mark;
-  const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel;
-  const inputSlotProps = slotProps?.input ?? componentsProps.input;
+  const RootSlot = slots?.root ?? SliderRoot;
+  const RailSlot = slots?.rail ?? SliderRail;
+  const TrackSlot = slots?.track ?? SliderTrack;
+  const ThumbSlot = slots?.thumb ?? SliderThumb;
+  const ValueLabelSlot = slots?.valueLabel ?? StyledSliderValueLabel;
+  const MarkSlot = slots?.mark ?? SliderMark;
+  const MarkLabelSlot = slots?.markLabel ?? SliderMarkLabel;
+  const InputSlot = slots?.input ?? 'input';
 
   const rootProps = useSlotProps({
     elementType: RootSlot,
     getSlotProps: getRootProps,
-    externalSlotProps: rootSlotProps,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: other,
     additionalProps: {
       ...(shouldSpreadAdditionalProps(RootSlot) && {
@@ -635,14 +623,14 @@ const Slider = React.forwardRef(function Slider<
 
   const railProps = useSlotProps({
     elementType: RailSlot,
-    externalSlotProps: railSlotProps,
+    externalSlotProps: slotProps?.rail,
     ownerState,
     className: classes.rail,
   });
 
   const trackProps = useSlotProps({
     elementType: TrackSlot,
-    externalSlotProps: trackSlotProps,
+    externalSlotProps: slotProps?.track,
     additionalProps: {
       style: {
         ...axisProps[axis].offset(trackOffset),
@@ -656,36 +644,36 @@ const Slider = React.forwardRef(function Slider<
   const thumbProps = useSlotProps({
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
-    externalSlotProps: thumbSlotProps,
+    externalSlotProps: slotProps?.thumb,
     ownerState,
     className: classes.thumb,
   });
 
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
-    externalSlotProps: valueLabelSlotProps,
+    externalSlotProps: slotProps?.valueLabel,
     ownerState,
     className: classes.valueLabel,
   });
 
   const markProps = useSlotProps({
     elementType: MarkSlot,
-    externalSlotProps: markSlotProps,
+    externalSlotProps: slotProps?.mark,
     ownerState,
     className: classes.mark,
   });
 
   const markLabelProps = useSlotProps({
     elementType: MarkLabelSlot,
-    externalSlotProps: markLabelSlotProps,
+    externalSlotProps: slotProps?.markLabel,
     ownerState,
     className: classes.markLabel,
   });
 
   const inputSliderProps = useSlotProps({
     elementType: InputSlot,
     getSlotProps: getHiddenInputProps,
-    externalSlotProps: inputSlotProps,
+    externalSlotProps: slotProps?.input,
     ownerState,
   });
 
@@ -856,53 +844,6 @@ Slider.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['primary', 'secondary']),
     PropTypes.string,
   ]),
-  /**
-   * The components used for each slot inside.
-   *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
-   *
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Input: PropTypes.elementType,
-    Mark: PropTypes.elementType,
-    MarkLabel: PropTypes.elementType,
-    Rail: PropTypes.elementType,
-    Root: PropTypes.elementType,
-    Thumb: PropTypes.elementType,
-    Track: PropTypes.elementType,
-    ValueLabel: PropTypes.elementType,
-  }),
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
-   *
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    valueLabel: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({
-        children: PropTypes.element,
-        className: PropTypes.string,
-        open: PropTypes.bool,
-        style: PropTypes.object,
-        value: PropTypes.number,
-        valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-      }),
-    ]),
-  }),
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -964,15 +905,15 @@ Slider.propTypes /* remove-proptypes */ = {
    *
    * @param {Event} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event.
+   * **Warning**: This is a generic event, not a change event.
    * @param {number | number[]} value The new value.
    * @param {number} activeThumb Index of the currently moved thumb.
    */
   onChange: PropTypes.func,
   /**
    * Callback function that is fired when the `mouseup` is triggered.
    *
-   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event, not a change event.
    * @param {number | number[]} value The new value.
    */
   onChangeCommitted: PropTypes.func,