[Slider][Badge] Fix classes prop not working

packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.js

@@ -40,7 +40,6 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
       vertical: 'top',
       horizontal: 'right',
     },
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     classes: classesProp = {},
     badgeContent: badgeContentProp,
     component: Component = 'span',
@@ -99,7 +98,7 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
     displayValue = badgeContent > max ? `${max}+` : badgeContent;
   }
 
-  const classes = useBadgeClasses(stateAndProps);
+  const classes = useBadgeClasses({ ...stateAndProps, classes: classesProp });
 
   const Root = components.Root || Component;
   const rootProps = componentsProps.root || {};

packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.test.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createMount, createClientRender, describeConformance } from 'test/utils';
-import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
+import BadgeUnstyled, {
+  badgeUnstyledClasses as classes,
+} from '@material-ui/unstyled/BadgeUnstyled';
 
 describe('<BadgeUnstyled />', () => {
   const mount = createMount();
@@ -12,7 +14,7 @@ describe('<BadgeUnstyled />', () => {
       <div />
     </BadgeUnstyled>,
     () => ({
-      classes: {},
+      classes,
       inheritComponent: 'span',
       mount,
       refInstanceof: window.HTMLSpanElement,

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.d.ts

@@ -101,11 +101,17 @@ export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'sp
       };
       mark?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<
+          SliderUnstyledTypeMap<P, D>['props'],
+          'components' | 'componentsProps'
+        > & { markActive?: boolean };
       };
       markLabel?: {
         as?: React.ElementType;
-        styleProps?: Omit<SliderUnstyledTypeMap<P, D>['props'], 'components' | 'componentsProps'>;
+        styleProps?: Omit<
+          SliderUnstyledTypeMap<P, D>['props'],
+          'components' | 'componentsProps'
+        > & { markLabelActive?: boolean };
       };
       valueLabel?: {
         as?: React.ElementType;

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js

@@ -151,6 +151,7 @@ const useSliderClasses = (props) => {
   const utilityClasses = {
     root: clsx(sliderUnstyledClasses['root'], classes['root'], {
       [sliderUnstyledClasses['disabled']]: disabled,
+      [classes['disabled']]: disabled,
       [sliderUnstyledClasses['marked']]: marked,
       [classes['marked']]: marked,
       [sliderUnstyledClasses['vertical']]: orientation === 'vertical',
@@ -163,12 +164,17 @@ const useSliderClasses = (props) => {
     rail: clsx(sliderUnstyledClasses['rail'], classes['rail']),
     track: clsx(sliderUnstyledClasses['track'], classes['track']),
     mark: clsx(sliderUnstyledClasses['mark'], classes['mark']),
+    markActive: clsx(sliderUnstyledClasses['markActive'], classes['markActive']),
     markLabel: clsx(sliderUnstyledClasses['markLabel'], classes['markLabel']),
+    markLabelActive: clsx(sliderUnstyledClasses['markLabelActive'], classes['markLabelActive']),
     valueLabel: clsx(sliderUnstyledClasses['valueLabel'], classes['valueLabel']),
     thumb: clsx(sliderUnstyledClasses['thumb'], classes['thumb'], {
+      [classes['disabled']]: disabled,
       [sliderUnstyledClasses['disabled']]: disabled,
-      [sliderUnstyledClasses['vertical']]: orientation === 'vertical',
     }),
+    active: clsx(sliderUnstyledClasses['active'], classes['active']),
+    disabled: clsx(sliderUnstyledClasses['disabled'], classes['disabled']),
+    focusVisible: clsx(sliderUnstyledClasses['focusVisible'], classes['focusVisible']),
   };
 
   return utilityClasses;
@@ -183,8 +189,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     'aria-valuetext': ariaValuetext,
     className,
     component: Component = 'span',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    classes: classesProps = {},
+    classes: classesProp = {},
     defaultValue,
     disabled = false,
     getAriaLabel,
@@ -615,7 +620,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     marked: marks.length > 0 && marks.some((mark) => mark.label),
   };
 
-  const utilityClasses = useSliderClasses(stateAndProps);
+  const utilityClasses = useSliderClasses({ ...stateAndProps, classes: classesProp });
 
   return (
     <Root
@@ -673,12 +678,12 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
               data-index={index}
               {...markProps}
               {...(!isHostComponent(Mark) && {
-                styleProps: { ...stateAndProps, ...markProps.styleProps },
+                styleProps: { ...stateAndProps, ...markProps.styleProps, markActive },
                 theme,
               })}
               style={{ ...style, ...markProps.style }}
               className={clsx(utilityClasses.mark, markProps.className, {
-                [sliderUnstyledClasses['markActive']]: markActive,
+                [utilityClasses['markActive']]: markActive,
               })}
             />
             {mark.label != null ? (
@@ -687,12 +692,16 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
                 data-index={index}
                 {...markLabelProps}
                 {...(!isHostComponent(MarkLabel) && {
-                  styleProps: { ...stateAndProps, ...markLabelProps.styleProps },
+                  styleProps: {
+                    ...stateAndProps,
+                    ...markLabelProps.styleProps,
+                    markLabelActive: markActive,
+                  },
                   theme,
                 })}
                 style={{ ...style, ...markLabelProps.style }}
                 className={clsx(utilityClasses.markLabel, markLabelProps.className, {
-                  [sliderUnstyledClasses['markLabelActive']]: markActive,
+                  [utilityClasses['markLabelActive']]: markActive,
                 })}
               >
                 {mark.label}
@@ -747,9 +756,8 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
               onMouseLeave={handleMouseLeave}
               {...thumbProps}
               className={clsx(utilityClasses.thumb, thumbProps.className, {
-                [sliderUnstyledClasses['active']]: active === index,
-                [sliderUnstyledClasses['disabled']]: disabled,
-                [sliderUnstyledClasses['focusVisible']]: focusVisible === index,
+                [utilityClasses['active']]: active === index,
+                [utilityClasses['focusVisible']]: focusVisible === index,
               })}
               {...(!isHostComponent(Thumb) && {
                 styleProps: { ...stateAndProps, ...thumbProps.styleProps },

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.test.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createMount, createClientRender, describeConformance } from 'test/utils';
-import SliderUnstyled from './SliderUnstyled';
+import SliderUnstyled, {
+  sliderUnstyledClasses as classes,
+} from '@material-ui/unstyled/SliderUnstyled';
 
 describe('<SliderUnstyled />', () => {
   before(function beforeHook() {
@@ -14,7 +16,7 @@ describe('<SliderUnstyled />', () => {
   const render = createClientRender();
 
   describeConformance(<SliderUnstyled value={0} />, () => ({
-    classes: {},
+    classes,
     inheritComponent: 'span',
     mount,
     refInstanceof: window.HTMLSpanElement,

packages/material-ui/src/Badge/Badge.test.js

@@ -25,7 +25,7 @@ describe('<Badge />', () => {
       <div />
     </Badge>,
     () => ({
-      classes: {},
+      classes,
       inheritComponent: BadgeUnstyled,
       mount,
       refInstanceof: window.HTMLSpanElement,

packages/material-ui/src/Slider/Slider.js

@@ -222,18 +222,18 @@ export const SliderThumb = experimentalStyled(
     height: 8,
     marginLeft: -4,
     marginTop: -3,
+    ...(props.styleProps.orientation === 'vertical' && {
+      marginLeft: -3,
+      marginBottom: -4,
+    }),
     '&:hover': {
       boxShadow: 'none',
     },
   },
-  [`&.${sliderClasses.vertical}`]: {
+  ...(props.styleProps.orientation === 'vertical' && {
     marginLeft: -5,
     marginBottom: -6,
-  },
-  [`&.${sliderClasses.vertical}&.${sliderClasses.disabled}`]: {
-    marginLeft: -3,
-    marginBottom: -4,
-  },
+  }),
   ...(props.styleProps.color === 'secondary' && {
     [`&:hover, &.${sliderClasses.focusVisible}`]: {
       boxShadow: `0px 0px 0px 8px ${alpha(props.theme.palette.secondary.main, 0.16)}`,
@@ -277,10 +277,10 @@ export const SliderMark = experimentalStyled(
   height: 2,
   borderRadius: 1,
   backgroundColor: 'currentColor',
-  [`&.${sliderClasses.markActive}`]: {
+  ...(props.styleProps.markActive && {
     backgroundColor: props.theme.palette.background.paper,
     opacity: 0.8,
-  },
+  }),
 }));
 
 export const SliderMarkLabel = experimentalStyled(
@@ -305,9 +305,9 @@ export const SliderMarkLabel = experimentalStyled(
       left: 31,
     }),
   },
-  [`&.${sliderClasses.markLabelActive}`]: {
+  ...(props.styleProps.markLabelActive && {
     color: props.theme.palette.text.primary,
-  },
+  }),
 }));
 
 SliderRoot.propTypes = {

packages/material-ui/src/Slider/Slider.test.js

@@ -32,7 +32,7 @@ describe('<Slider />', () => {
   const render = createClientRender();
 
   describeConformanceV5(<Slider value={0} />, () => ({
-    classes: {},
+    classes,
     inheritComponent: SliderUnstyled,
     mount,
     refInstanceof: window.HTMLSpanElement,

test/utils/describeConformance.js

@@ -80,11 +80,11 @@ export function testClassName(element, getOptions) {
 function testComponentProp(element, getOptions) {
   describe('prop: component', () => {
     it('can render another root component with the `component` prop', () => {
-      const { classes, mount, testComponentPropWith: component = 'em' } = getOptions();
+      const { mount, testComponentPropWith: component = 'em' } = getOptions();
 
       const wrapper = mount(React.cloneElement(element, { component }));
 
-      expect(findRootComponent(wrapper, { classes, component }).exists()).to.equal(true);
+      expect(findRootComponent(wrapper, { component }).exists()).to.equal(true);
     });
   });
 }

test/utils/describeConformanceV5.js

@@ -21,11 +21,11 @@ import {
 function testComponentsProp(element, getOptions) {
   describe('prop: components', () => {
     it('can render another root component with the `components` prop', () => {
-      const { classes, mount, testComponentsRootPropWith: component = 'em' } = getOptions();
+      const { mount, testComponentsRootPropWith: component = 'em' } = getOptions();
 
       const wrapper = mount(React.cloneElement(element, { components: { Root: component } }));
 
-      expect(findRootComponent(wrapper, { classes, component }).exists()).to.equal(true);
+      expect(findRootComponent(wrapper, { component }).exists()).to.equal(true);
     });
   });
 }