From aa0c6b2c5dec0e48373256f99062a708a14166f3 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 8 Jan 2023 12:17:36 +0530 Subject: [PATCH 01/11] replace SliderUnstyled with useSlider hook --- packages/mui-material/src/Slider/Slider.js | 387 ++++++++++++++---- .../mui-material/src/Slider/Slider.test.js | 4 +- .../src/Slider/SliderValueLabel.tsx | 63 +++ .../src/Slider/SliderValueLabel.types.ts | 23 ++ packages/mui-material/src/Slider/index.d.ts | 1 + packages/mui-material/src/Slider/index.js | 1 + 6 files changed, 388 insertions(+), 91 deletions(-) create mode 100644 packages/mui-material/src/Slider/SliderValueLabel.tsx create mode 100644 packages/mui-material/src/Slider/SliderValueLabel.types.ts diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 24573b1243930d..41eb8a730ba766 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -1,33 +1,24 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { chainPropTypes } from '@mui/utils'; import { - chainPropTypes, - unstable_generateUtilityClasses as generateUtilityClasses, -} from '@mui/utils'; -import SliderUnstyled, { - SliderValueLabelUnstyled, - sliderUnstyledClasses, - getSliderUtilityClass, -} from '@mui/base/SliderUnstyled'; + isHostComponent, + useSlotProps, + unstable_composeClasses as composeClasses, +} from '@mui/base'; +import { useSlider, getSliderUtilityClass } from '@mui/base/SliderUnstyled'; import { alpha, lighten, darken } from '@mui/system'; import useThemeProps from '../styles/useThemeProps'; import styled, { slotShouldForwardProp } from '../styles/styled'; import useTheme from '../styles/useTheme'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; +import SliderValueLabelComponent, { sliderClasses } from './SliderValueLabel'; -export const sliderClasses = { - ...sliderUnstyledClasses, - ...generateUtilityClasses('MuiSlider', [ - 'colorPrimary', - 'colorSecondary', - 'thumbColorPrimary', - 'thumbColorSecondary', - 'sizeSmall', - 'thumbSizeSmall', - ]), -}; +const valueToPercent = (value, min, max) => ((value - min) * 100) / (max - min); + +const Identity = (x) => x; const SliderRoot = styled('span', { name: 'MuiSlider', @@ -304,7 +295,7 @@ SliderThumb.propTypes /* remove-proptypes */ = { export { SliderThumb }; -const SliderValueLabel = styled(SliderValueLabelUnstyled, { +const SliderValueLabel = styled(SliderValueLabelComponent, { name: 'MuiSlider', slot: 'ValueLabel', overridesResolver: (props, styles) => styles.valueLabel, @@ -460,28 +451,44 @@ SliderMarkLabel.propTypes /* remove-proptypes */ = { export { SliderMarkLabel }; -const extendUtilityClasses = (ownerState) => { - const { color, size, classes = {} } = ownerState; +const useUtilityClasses = (ownerState) => { + const { disabled, dragging, marked, orientation, track, classes, color, size } = ownerState; - return { - ...classes, - root: clsx( - classes.root, - getSliderUtilityClass(`color${capitalize(color)}`), - classes[`color${capitalize(color)}`], - size && getSliderUtilityClass(`size${capitalize(size)}`), - size && classes[`size${capitalize(size)}`], - ), - thumb: clsx( - classes.thumb, - getSliderUtilityClass(`thumbColor${capitalize(color)}`), - classes[`thumbColor${capitalize(color)}`], - size && getSliderUtilityClass(`thumbSize${capitalize(size)}`), - size && classes[`thumbSize${capitalize(size)}`], - ), + const slots = { + root: [ + 'root', + disabled && 'disabled', + dragging && 'dragging', + marked && 'marked', + orientation === 'vertical' && 'vertical', + track === 'inverted' && 'trackInverted', + track === false && 'trackFalse', + color && `color${capitalize(color)}`, + size && `size${capitalize(size)}`, + ], + rail: ['rail'], + track: ['track'], + mark: ['mark'], + markActive: ['markActive'], + markLabel: ['markLabel'], + markLabelActive: ['markLabelActive'], + valueLabel: ['valueLabel'], + thumb: [ + 'thumb', + disabled && 'disabled', + size && `thumbSize${capitalize(size)}`, + color && `thumbColor${capitalize(color)}`, + ], + active: ['active'], + disabled: ['disabled'], + focusVisible: ['focusVisible'], }; + + return composeClasses(slots, getSliderUtilityClass, classes); }; +const Forward = ({ children }) => children; + const Slider = React.forwardRef(function Slider(inputProps, ref) { const props = useThemeProps({ props: inputProps, name: 'MuiSlider' }); @@ -489,20 +496,82 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { const isRtl = theme.direction === 'rtl'; const { + 'aria-label': ariaLabel, + 'aria-valuetext': ariaValuetext, + 'aria-labelledby': ariaLabelledby, // eslint-disable-next-line react/prop-types component = 'span', components = {}, componentsProps = {}, color = 'primary', + classes: classesProp, + // eslint-disable-next-line react/prop-types + className, + disableSwap = false, + disabled = false, + getAriaLabel, + getAriaValueText, + marks: marksProp = false, + max = 100, + min = 0, + name, + onChange, + onChangeCommitted, + orientation = 'horizontal', size = 'medium', + step = 1, + scale = Identity, slotProps, slots, + tabIndex, + track = 'normal', + value: valueProp, + valueLabelDisplay = 'off', + valueLabelFormat = Identity, ...other } = props; - const ownerState = { ...props, color, size }; + const ownerState = { + ...props, + isRtl, + max, + min, + classes: classesProp, + disabled, + disableSwap, + orientation, + marks: marksProp, + color, + size, + step, + scale, + track, + valueLabelDisplay, + valueLabelFormat, + }; + + const { + axisProps, + getRootProps, + getHiddenInputProps, + getThumbProps, + open, + active, + axis, + focusedThumbIndex, + range, + dragging, + marks, + values, + trackOffset, + trackLeap, + } = useSlider({ ...ownerState, ref }); - const classes = extendUtilityClasses(ownerState); + ownerState.marked = marks.length > 0 && marks.some((mark) => mark.label); + ownerState.dragging = dragging; + ownerState.focusedThumbIndex = focusedThumbIndex; + + const classes = useUtilityClasses(ownerState); // support both `slots` and `components` for backward compatibility const RootSlot = slots?.root ?? components.Root ?? SliderRoot; @@ -512,7 +581,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel; const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark; const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel; - const InputSlot = slots?.input ?? components.Input; + const InputSlot = slots?.input ?? components.Input ?? 'input'; const rootSlotProps = slotProps?.root ?? componentsProps.root; const railSlotProps = slotProps?.rail ?? componentsProps.rail; @@ -523,55 +592,195 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { const markLabelSlotProps = slotProps?.markLabel ?? componentsProps.markLabel; const inputSlotProps = slotProps?.input ?? componentsProps.input; + const rootProps = useSlotProps({ + elementType: RootSlot, + getSlotProps: getRootProps, + externalSlotProps: rootSlotProps, + externalForwardedProps: other, + additionalProps: { + ...(shouldSpreadAdditionalProps(RootSlot) && { + as: component, + }), + }, + ownerState: { + ...ownerState, + ...rootSlotProps?.ownerState, + color, + size, + }, + className: [classes.root, className], + }); + + const railProps = useSlotProps({ + elementType: RailSlot, + externalSlotProps: railSlotProps, + ownerState, + className: classes.rail, + }); + + const trackProps = useSlotProps({ + elementType: TrackSlot, + externalSlotProps: trackSlotProps, + additionalProps: { + style: { + ...axisProps[axis].offset(trackOffset), + ...axisProps[axis].leap(trackLeap), + }, + }, + ownerState: { + ...ownerState, + ...trackSlotProps?.ownerState, + color, + size, + }, + className: classes.track, + }); + + const thumbProps = useSlotProps({ + elementType: ThumbSlot, + getSlotProps: getThumbProps, + externalSlotProps: thumbSlotProps, + ownerState, + }); + + const valueLabelProps = useSlotProps({ + elementType: ValueLabelSlot, + externalSlotProps: valueLabelSlotProps, + ownerState, + className: classes.valueLabel, + }); + + const markProps = useSlotProps({ + elementType: MarkSlot, + externalSlotProps: markSlotProps, + ownerState, + className: classes.mark, + }); + + const markLabelProps = useSlotProps({ + elementType: MarkLabelSlot, + externalSlotProps: markLabelSlotProps, + ownerState, + }); + + const inputSliderProps = useSlotProps({ + elementType: InputSlot, + getSlotProps: getHiddenInputProps, + externalSlotProps: inputSlotProps, + ownerState, + }); + return ( - + + + + {marks + .filter((mark) => mark.value >= min && mark.value <= max) + .map((mark, index) => { + const percent = valueToPercent(mark.value, min, max); + const style = axisProps[axis].offset(percent); + + let markActive; + if (track === false) { + markActive = values.indexOf(mark.value) !== -1; + } else { + markActive = + (track === 'normal' && + (range + ? mark.value >= values[0] && mark.value <= values[values.length - 1] + : mark.value <= values[0])) || + (track === 'inverted' && + (range + ? mark.value <= values[0] || mark.value >= values[values.length - 1] + : mark.value >= values[0])); + } + + return ( + + + {mark.label != null ? ( + + {mark.label} + + ) : null} + + ); + })} + {values.map((value, index) => { + const percent = valueToPercent(value, min, max); + const style = axisProps[axis].offset(percent); + + const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot; + + return ( + + {/* TODO v6: Change component structure. It will help in avoiding complicated React.cloneElement in SlderValueLabel. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */} + + + + + + + ); + })} + ); }); diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index ea495be50ec8cc..a8adadcf2f77d0 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -29,11 +29,11 @@ describe('', () => { const { render } = createRenderer(); - describeConformance( + describeConformance.only( , () => ({ classes, - inheritComponent: SliderUnstyled, + inheritComponent: 'span', render, refInstanceof: window.HTMLSpanElement, muiName: 'MuiSlider', diff --git a/packages/mui-material/src/Slider/SliderValueLabel.tsx b/packages/mui-material/src/Slider/SliderValueLabel.tsx new file mode 100644 index 00000000000000..e80ab59cd11e33 --- /dev/null +++ b/packages/mui-material/src/Slider/SliderValueLabel.tsx @@ -0,0 +1,63 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils'; +import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; +import { SliderValueLabelProps } from './SliderValueLabel.types'; + +export const sliderClasses = { + ...sliderUnstyledClasses, + ...generateUtilityClasses('MuiSlider', [ + 'colorPrimary', + 'colorSecondary', + 'thumbColorPrimary', + 'thumbColorSecondary', + 'sizeSmall', + 'thumbSizeSmall', + ]), +}; + +const useValueLabelClasses = (open: SliderValueLabelProps['open']) => { + const utilityClasses = { + offset: clsx({ + [sliderClasses.valueLabelOpen]: open, + }), + circle: sliderClasses.valueLabelCircle, + label: sliderClasses.valueLabelLabel, + }; + + return utilityClasses; +}; + +/** + * @ignore - internal component. + */ +export default function SliderValueLabel(props: SliderValueLabelProps) { + const { children, className, value, open } = props; + const classes = useValueLabelClasses(open); + + if (!children) { + return null; + } + + return React.cloneElement( + children, + { + className: clsx(children.props.className), + }, + + {children.props.children} + + + {value} + + + , + ); +} + +SliderValueLabel.propTypes = { + children: PropTypes.element.isRequired, + className: PropTypes.string, + value: PropTypes.node, +}; diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts new file mode 100644 index 00000000000000..21747c25bb3537 --- /dev/null +++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts @@ -0,0 +1,23 @@ +export interface SliderValueLabelProps { + children: React.ReactElement; + className?: string; + style?: React.CSSProperties; + /** + * If `true`, the value label is visible. + */ + open: boolean; + /** + * The value of the slider. + * For ranged sliders, provide an array with two values. + */ + value: number; + /** + * Controls when the value label is displayed: + * + * - `auto` the value label will display when the thumb is hovered or focused. + * - `on` will display persistently. + * - `off` will never display. + * @default 'off' + */ + valueLabelDisplay?: 'on' | 'auto' | 'off'; +} diff --git a/packages/mui-material/src/Slider/index.d.ts b/packages/mui-material/src/Slider/index.d.ts index 006f966fe2404f..9f6070cb0fe099 100644 --- a/packages/mui-material/src/Slider/index.d.ts +++ b/packages/mui-material/src/Slider/index.d.ts @@ -1,2 +1,3 @@ export { default } from './Slider'; export * from './Slider'; +export { sliderClasses } from './SliderValueLabel'; diff --git a/packages/mui-material/src/Slider/index.js b/packages/mui-material/src/Slider/index.js index 006f966fe2404f..9f6070cb0fe099 100644 --- a/packages/mui-material/src/Slider/index.js +++ b/packages/mui-material/src/Slider/index.js @@ -1,2 +1,3 @@ export { default } from './Slider'; export * from './Slider'; +export { sliderClasses } from './SliderValueLabel'; From a41b147a42ea24356afe08ec6f8ef53f5748f4ee Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 8 Jan 2023 12:24:26 +0530 Subject: [PATCH 02/11] remove ony constraint in test --- packages/mui-material/src/Slider/Slider.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js index a8adadcf2f77d0..d2d842e0106d13 100644 --- a/packages/mui-material/src/Slider/Slider.test.js +++ b/packages/mui-material/src/Slider/Slider.test.js @@ -29,7 +29,7 @@ describe('', () => { const { render } = createRenderer(); - describeConformance.only( + describeConformance( , () => ({ classes, From 6195b05a4a0ac14dc8320be78aacc412d397868d Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 8 Jan 2023 13:59:37 +0530 Subject: [PATCH 03/11] use SliderValueLabelProps from Material-UI Slider --- packages/mui-material/src/Slider/Slider.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index ddf13dd5ff2416..8533e18d096d5d 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -3,12 +3,12 @@ import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled, SliderUnstyledTypeMap, - SliderValueLabelProps, } from '@mui/base/SliderUnstyled'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { Theme } from '../styles'; import { OverrideProps } from '../OverridableComponent'; +import { SliderValueLabelProps } from './SliderValueLabel.types'; export interface SliderPropsColorOverrides {} @@ -84,7 +84,7 @@ export type SliderTypeMap< defaultComponent: D; }>; -export { SliderValueLabelProps } from '@mui/base/SliderUnstyled'; +export { SliderValueLabelProps }; type SliderRootProps = NonNullable['root']; type SliderMarkProps = NonNullable['mark']; From 9e2f66fd226748105b7d16ec092acdf7e1cbb32a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sun, 8 Jan 2023 14:01:29 +0530 Subject: [PATCH 04/11] yarn docs:api --- docs/pages/material-ui/api/slider.json | 2 +- packages/mui-material/src/Slider/Slider.d.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/pages/material-ui/api/slider.json b/docs/pages/material-ui/api/slider.json index aa9ca8c8932c9e..3b9b5f1c2e8379 100644 --- a/docs/pages/material-ui/api/slider.json +++ b/docs/pages/material-ui/api/slider.json @@ -137,7 +137,7 @@ "spread": true, "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/Slider/Slider.js", - "inheritance": { "component": "SliderUnstyled", "pathname": "/base/api/slider-unstyled/" }, + "inheritance": null, "demos": "", "cssComponent": false } diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index 8533e18d096d5d..f760426867684c 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -110,7 +110,6 @@ export declare const SliderValueLabel: React.FC; * API: * * - [Slider API](https://mui.com/material-ui/api/slider/) - * - inherits [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/) */ declare const Slider: ExtendSliderUnstyled; From 9ad9b37e1d8ea1adec6e22fb1739f102f2ac90c3 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 9 Jan 2023 13:52:27 +0530 Subject: [PATCH 05/11] make children type optional --- packages/mui-material/src/Slider/SliderValueLabel.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts index 21747c25bb3537..68fe865e14d10f 100644 --- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts +++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts @@ -1,5 +1,5 @@ export interface SliderValueLabelProps { - children: React.ReactElement; + children?: React.ReactElement; className?: string; style?: React.CSSProperties; /** From 130239ffe82abfb2dcdfacc10fb7b4cb9a852d74 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 9 Jan 2023 14:13:31 +0530 Subject: [PATCH 06/11] yarn docs:typescript:formatted --- docs/data/material/components/slider/CustomizedSlider.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js index 1b089da28314a5..4040349336d025 100644 --- a/docs/data/material/components/slider/CustomizedSlider.js +++ b/docs/data/material/components/slider/CustomizedSlider.js @@ -17,7 +17,11 @@ function ValueLabelComponent(props) { } ValueLabelComponent.propTypes = { - children: PropTypes.element.isRequired, + children: PropTypes.element, + /** + * The value of the slider. + * For ranged sliders, provide an array with two values. + */ value: PropTypes.number.isRequired, }; From 02650e52f29dce9e058f08cb7cd441a1881026c0 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 9 Jan 2023 15:07:12 +0530 Subject: [PATCH 07/11] fix types --- packages/mui-material/src/Slider/Slider.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index f760426867684c..1922ef01e6b711 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -3,12 +3,12 @@ import { ExtendSliderUnstyledTypeMap, ExtendSliderUnstyled, SliderUnstyledTypeMap, + SliderValueLabelProps, } from '@mui/base/SliderUnstyled'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { Theme } from '../styles'; import { OverrideProps } from '../OverridableComponent'; -import { SliderValueLabelProps } from './SliderValueLabel.types'; export interface SliderPropsColorOverrides {} From 376b41d5cceef0e482a5dc7269bedeaa05a425c9 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 9 Jan 2023 15:16:38 +0530 Subject: [PATCH 08/11] yarn docs:typescript:formatted --- docs/data/material/components/slider/CustomizedSlider.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js index 4040349336d025..1b089da28314a5 100644 --- a/docs/data/material/components/slider/CustomizedSlider.js +++ b/docs/data/material/components/slider/CustomizedSlider.js @@ -17,11 +17,7 @@ function ValueLabelComponent(props) { } ValueLabelComponent.propTypes = { - children: PropTypes.element, - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ + children: PropTypes.element.isRequired, value: PropTypes.number.isRequired, }; From af8f3c152e37950e1c9365a986ddc82b9e46d281 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Mon, 9 Jan 2023 16:01:18 +0530 Subject: [PATCH 09/11] Update packages/mui-material/src/Slider/Slider.js Signed-off-by: Zeeshan Tamboli --- packages/mui-material/src/Slider/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 41eb8a730ba766..e622d8824b00c7 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -735,7 +735,7 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { return ( - {/* TODO v6: Change component structure. It will help in avoiding complicated React.cloneElement in SlderValueLabel. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */} + {/* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */} Date: Mon, 9 Jan 2023 19:21:09 +0530 Subject: [PATCH 10/11] address PR comments --- packages/mui-material/src/Slider/Slider.js | 17 ++++++++------- .../src/Slider/SliderValueLabel.tsx | 21 +++++-------------- packages/mui-material/src/Slider/index.d.ts | 2 +- packages/mui-material/src/Slider/index.js | 2 +- .../mui-material/src/Slider/sliderClasses.ts | 16 ++++++++++++++ 5 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 packages/mui-material/src/Slider/sliderClasses.ts diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index e622d8824b00c7..abc9f58cf1b99f 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -14,7 +14,8 @@ import styled, { slotShouldForwardProp } from '../styles/styled'; import useTheme from '../styles/useTheme'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; -import SliderValueLabelComponent, { sliderClasses } from './SliderValueLabel'; +import SliderValueLabelComponent from './SliderValueLabel'; +import sliderClasses from './sliderClasses'; const valueToPercent = (value, min, max) => ((value - min) * 100) / (max - min); @@ -605,8 +606,6 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ownerState: { ...ownerState, ...rootSlotProps?.ownerState, - color, - size, }, className: [classes.root, className], }); @@ -630,8 +629,6 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { ownerState: { ...ownerState, ...trackSlotProps?.ownerState, - color, - size, }, className: classes.track, }); @@ -640,13 +637,19 @@ const Slider = React.forwardRef(function Slider(inputProps, ref) { elementType: ThumbSlot, getSlotProps: getThumbProps, externalSlotProps: thumbSlotProps, - ownerState, + ownerState: { + ...ownerState, + ...thumbSlotProps?.ownerState, + }, }); const valueLabelProps = useSlotProps({ elementType: ValueLabelSlot, externalSlotProps: valueLabelSlotProps, - ownerState, + ownerState: { + ...ownerState, + ...valueLabelSlotProps?.ownerState, + }, className: classes.valueLabel, }); diff --git a/packages/mui-material/src/Slider/SliderValueLabel.tsx b/packages/mui-material/src/Slider/SliderValueLabel.tsx index e80ab59cd11e33..d5f1364b87f0fe 100644 --- a/packages/mui-material/src/Slider/SliderValueLabel.tsx +++ b/packages/mui-material/src/Slider/SliderValueLabel.tsx @@ -1,23 +1,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils'; -import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; import { SliderValueLabelProps } from './SliderValueLabel.types'; +import sliderClasses from './sliderClasses'; -export const sliderClasses = { - ...sliderUnstyledClasses, - ...generateUtilityClasses('MuiSlider', [ - 'colorPrimary', - 'colorSecondary', - 'thumbColorPrimary', - 'thumbColorSecondary', - 'sizeSmall', - 'thumbSizeSmall', - ]), -}; +const useValueLabelClasses = (props: SliderValueLabelProps) => { + const { open } = props; -const useValueLabelClasses = (open: SliderValueLabelProps['open']) => { const utilityClasses = { offset: clsx({ [sliderClasses.valueLabelOpen]: open, @@ -33,8 +22,8 @@ const useValueLabelClasses = (open: SliderValueLabelProps['open']) => { * @ignore - internal component. */ export default function SliderValueLabel(props: SliderValueLabelProps) { - const { children, className, value, open } = props; - const classes = useValueLabelClasses(open); + const { children, className, value } = props; + const classes = useValueLabelClasses(props); if (!children) { return null; diff --git a/packages/mui-material/src/Slider/index.d.ts b/packages/mui-material/src/Slider/index.d.ts index 9f6070cb0fe099..b367aa2014dc31 100644 --- a/packages/mui-material/src/Slider/index.d.ts +++ b/packages/mui-material/src/Slider/index.d.ts @@ -1,3 +1,3 @@ export { default } from './Slider'; export * from './Slider'; -export { sliderClasses } from './SliderValueLabel'; +export { default as sliderClasses } from './sliderClasses'; diff --git a/packages/mui-material/src/Slider/index.js b/packages/mui-material/src/Slider/index.js index 9f6070cb0fe099..b367aa2014dc31 100644 --- a/packages/mui-material/src/Slider/index.js +++ b/packages/mui-material/src/Slider/index.js @@ -1,3 +1,3 @@ export { default } from './Slider'; export * from './Slider'; -export { sliderClasses } from './SliderValueLabel'; +export { default as sliderClasses } from './sliderClasses'; diff --git a/packages/mui-material/src/Slider/sliderClasses.ts b/packages/mui-material/src/Slider/sliderClasses.ts new file mode 100644 index 00000000000000..36228115c31e2c --- /dev/null +++ b/packages/mui-material/src/Slider/sliderClasses.ts @@ -0,0 +1,16 @@ +import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils'; +import { sliderUnstyledClasses } from '@mui/base/SliderUnstyled'; + +const sliderClasses = { + ...sliderUnstyledClasses, + ...generateUtilityClasses('MuiSlider', [ + 'colorPrimary', + 'colorSecondary', + 'thumbColorPrimary', + 'thumbColorSecondary', + 'sizeSmall', + 'thumbSizeSmall', + ]), +}; + +export default sliderClasses; From f7176e694dfcf1dbf943e2d0857541948aa0b33a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 9 Jan 2023 19:46:57 +0530 Subject: [PATCH 11/11] make children prop required in SlideValueLabelProps --- packages/mui-material/src/Slider/SliderValueLabel.tsx | 4 ---- packages/mui-material/src/Slider/SliderValueLabel.types.ts | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/mui-material/src/Slider/SliderValueLabel.tsx b/packages/mui-material/src/Slider/SliderValueLabel.tsx index d5f1364b87f0fe..0b1ac785d0192f 100644 --- a/packages/mui-material/src/Slider/SliderValueLabel.tsx +++ b/packages/mui-material/src/Slider/SliderValueLabel.tsx @@ -25,10 +25,6 @@ export default function SliderValueLabel(props: SliderValueLabelProps) { const { children, className, value } = props; const classes = useValueLabelClasses(props); - if (!children) { - return null; - } - return React.cloneElement( children, { diff --git a/packages/mui-material/src/Slider/SliderValueLabel.types.ts b/packages/mui-material/src/Slider/SliderValueLabel.types.ts index 68fe865e14d10f..21747c25bb3537 100644 --- a/packages/mui-material/src/Slider/SliderValueLabel.types.ts +++ b/packages/mui-material/src/Slider/SliderValueLabel.types.ts @@ -1,5 +1,5 @@ export interface SliderValueLabelProps { - children?: React.ReactElement; + children: React.ReactElement; className?: string; style?: React.CSSProperties; /**