[Slider] pr comments

Author: CodySchaaf

docs/src/pages/components/icons/icons-zh.md

@@ -309,7 +309,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
 
 ```jsx
 import Icon from '@material-ui/core/Icon';
-import { visuallyHidden } from '@material-ui/system';
+import { visuallyHidden } from '@material-ui/utils';
 import { makeStyles } from '@material-ui/core/styles';
 
 const classes = makeStyles({ visuallyHidden })();

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

@@ -9,8 +9,9 @@ import {
   unstable_useEventCallback as useEventCallback,
   unstable_useForkRef as useForkRef,
   unstable_useControlled as useControlled,
+  visuallyHidden,
 } from '@material-ui/utils';
-import { visuallyHidden } from '@material-ui/system';
+
 import isHostComponent from '../utils/isHostComponent';
 import sliderUnstyledClasses from './sliderUnstyledClasses';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
@@ -20,6 +21,9 @@ function asc(a, b) {
 }
 
 function clamp(value, min, max) {
+  if (value == null) {
+    return min;
+  }
   return Math.min(Math.max(min, value), max);
 }
 
@@ -221,7 +225,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
 
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
-    default: defaultValue,
+    default: defaultValue ?? min,
     name: 'Slider',
   });
 
@@ -689,7 +693,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
               disabled={disabled}
               value={values[index]}
               onChange={handleHiddenInputChange}
-              style={{ ...visuallyHidden, direction: theme?.direction ?? 'ltr' }} // TODO is there a better way to do this using the utilityClasses object?
+              style={{ ...visuallyHidden, direction: isRtl ? 'rtl' : 'ltr' }}
             />
             <ValueLabelComponent
               valueLabelFormat={valueLabelFormat}

packages/material-ui-utils/src/index.ts

@@ -8,6 +8,7 @@ export { default as getDisplayName } from './getDisplayName';
 export { default as HTMLElementType } from './HTMLElementType';
 export { default as ponyfillGlobal } from './ponyfillGlobal';
 export { default as refType } from './refType';
+export { default as visuallyHidden } from './visuallyHidden';
 export { default as unstable_capitalize } from './capitalize';
 export { default as unstable_createChainedFunction } from './createChainedFunction';
 export { default as unstable_debounce } from './debounce';

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

@@ -874,11 +874,9 @@ describe('<Slider />', () => {
 
       expect(() => {
         setProps({ value: undefined });
-      }).toErrorDev([
-        // TODO Not sure if we should try and silence this warning or if it is ok to keep
-        'Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string.',
+      }).toErrorDev(
         'Material-UI: A component is changing the controlled value state of Slider to be uncontrolled.',
-      ]);
+      );
     });
 
     it('should warn when switching between uncontrolled to controlled', () => {