Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][Slider] Refactor style to use CSS variables #43900

Closed
wants to merge 5 commits into from
Closed

[material-ui][Slider] Refactor style to use CSS variables #43900

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
13ef4fc
Replace most size values with variables
albarv340 Sep 27, 2024
d340029
Run prettier
albarv340 Sep 27, 2024
40a20c8
Switch back to using memoTheme, to fix issue with builds failing
albarv340 Sep 27, 2024
e42588f
Revert "Switch back to using memoTheme, to fix issue with builds fail…
albarv340 Oct 2, 2024
1e71664
Switch to ownerState again, with optional chaining to not fail build
albarv340 Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 92 additions & 99 deletions packages/mui-material/src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,90 +39,89 @@ export const SliderRoot = styled('span', {
ownerState.track === false && styles.trackFalse,
];
},
})(
memoTheme(({ theme }) => ({
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
WebkitTapHighlightColor: 'transparent',
'@media print': {
colorAdjust: 'exact',
},
[`&.${sliderClasses.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400],
},
[`&.${sliderClasses.dragging}`]: {
[`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
transition: 'none',
},
})(({ theme, ownerState }) => ({
'--md-comp-slider-root-size': '4px',
'--md-comp-slider-root-span': '100%',
'--md-comp-slider-root-padding': '13px',
'--md-comp-slider-root-padding-touch': '20px',
'--md-comp-slider-root-mark-margin': '0',
'--md-comp-slider-thumb-size': '20px',
'--md-comp-slider-thumb-target-size': '42px',
'--md-comp-slider-value-padding': '0.25rem 0.75rem',
'--md-comp-slider-value-arrow-size': '8px',
'--md-comp-slider-mark-size': '2px',
borderRadius: 12,
boxSizing: 'content-box',
display: 'inline-block',
position: 'relative',
cursor: 'pointer',
touchAction: 'none',
WebkitTapHighlightColor: 'transparent',
'@media print': {
colorAdjust: 'exact',
},
[`&.${sliderClasses.disabled}`]: {
pointerEvents: 'none',
cursor: 'default',
color: (theme.vars || theme).palette.grey[400],
},
[`&.${sliderClasses.dragging}`]: {
[`& .${sliderClasses.thumb}, & .${sliderClasses.track}`]: {
transition: 'none',
},
variants: [
...Object.entries(theme.palette)
.filter(createSimplePaletteValueFilter())
.map(([color]) => ({
props: { color },
style: {
color: (theme.vars || theme).palette[color].main,
},
})),
{
props: { orientation: 'horizontal' },
style: {
height: 4,
width: '100%',
padding: '13px 0',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '20px 0',
},
},
},
{
props: { orientation: 'horizontal', size: 'small' },
style: {
height: 2,
},
},
{
props: { orientation: 'horizontal', marked: true },
style: {
marginBottom: 20,
},
},
{
props: { orientation: 'vertical' },
},
...(ownerState?.size === 'small' && {
'--md-comp-slider-root-size': '2px',
'--md-comp-slider-thumb-size': '12px',
'--md-comp-slider-value-padding': '0.25rem 0.5rem',
}),
...(ownerState?.marked &&
ownerState.orientation === 'horizontal' && {
'--md-comp-slider-root-mark-margin': '20px',
}),
...(ownerState?.marked &&
ownerState.orientation === 'vertical' && {
'--md-comp-slider-root-mark-margin': '44px',
}),
variants: [
...Object.entries(theme.palette)
.filter(createSimplePaletteValueFilter())
.map(([color]) => ({
props: { color },
style: {
height: '100%',
width: 4,
padding: '0 13px',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 20px',
},
color: (theme.vars || theme).palette[color].main,
},
},
{
props: { orientation: 'vertical', size: 'small' },
style: {
width: 2,
})),
{
props: { orientation: 'horizontal' },
style: {
height: 'var(--md-comp-slider-root-size)',
width: 'var(--md-comp-slider-root-span)',
padding: 'var(--md-comp-slider-root-padding) 0',
marginBottom: 'var(--md-comp-slider-root-mark-margin)',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: 'var(--md-comp-slider-root-padding-touch) 0',
},
},
{
props: { orientation: 'vertical', marked: true },
style: {
marginRight: 44,
},
{
props: { orientation: 'vertical' },
style: {
height: 'var(--md-comp-slider-root-span)',
width: 'var(--md-comp-slider-root-size)',
padding: '0 var(--md-comp-slider-root-padding)',
marginRight: 'var(--md-comp-slider-root-mark-margin)',
// The primary input mechanism of the device includes a pointing device of limited accuracy.
'@media (pointer: coarse)': {
// Reach 42px touch target, about ~8mm on screen.
padding: '0 var(--md-comp-slider-root-padding-touch)',
},
},
],
})),
);
},
],
}));

export const SliderRail = styled('span', {
name: 'MuiSlider',
Expand Down Expand Up @@ -247,8 +246,8 @@ export const SliderThumb = styled('span', {
})(
memoTheme(({ theme }) => ({
position: 'absolute',
width: 20,
height: 20,
width: 'var(--md-comp-slider-thumb-size)',
height: 'var(--md-comp-slider-thumb-size)',
boxSizing: 'border-box',
borderRadius: '50%',
outline: 0,
Expand All @@ -272,8 +271,8 @@ export const SliderThumb = styled('span', {
content: '""',
borderRadius: '50%',
// 42px is the hit target
width: 42,
height: 42,
width: 'var(--md-comp-slider-thumb-target-size)',
height: 'var(--md-comp-slider-thumb-target-size)',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
Expand All @@ -287,8 +286,6 @@ export const SliderThumb = styled('span', {
{
props: { size: 'small' },
style: {
width: 12,
height: 12,
'&::before': {
boxShadow: 'none',
},
Expand Down Expand Up @@ -360,21 +357,23 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '0.25rem 0.75rem',
padding: 'var(--md-comp-slider-value-padding)',
'&::before': {
position: 'absolute',
content: '""',
width: 'var(--md-comp-slider-value-arrow-size)',
height: 'var(--md-comp-slider-value-arrow-size)',
backgroundColor: 'inherit',
},
variants: [
{
props: { orientation: 'horizontal' },
style: {
transform: 'translateY(-100%) scale(0)',
top: '-10px',
top: 'calc(-2px - var(--md-comp-slider-value-arrow-size))',
transformOrigin: 'bottom center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, 50%) rotate(45deg)',
backgroundColor: 'inherit',
bottom: 0,
left: '50%',
},
Expand All @@ -391,13 +390,8 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
top: '50%',
transformOrigin: 'right center',
'&::before': {
position: 'absolute',
content: '""',
width: 8,
height: 8,
transform: 'translate(-50%, -50%) rotate(45deg)',
backgroundColor: 'inherit',
right: -8,
right: 'calc(-1 * var(--md-comp-slider-value-arrow-size))',
top: '50%',
},
[`&.${sliderClasses.valueLabelOpen}`]: {
Expand All @@ -409,7 +403,6 @@ export const SliderValueLabel = styled(BaseSliderValueLabel, {
props: { size: 'small' },
style: {
fontSize: theme.typography.pxToRem(12),
padding: '0.25rem 0.5rem',
},
},
{
Expand All @@ -434,8 +427,8 @@ export const SliderMark = styled('span', {
})(
memoTheme(({ theme }) => ({
position: 'absolute',
width: 2,
height: 2,
width: 'var(--md-comp-slider-mark-size)',
height: 'var(--md-comp-slider-mark-size)',
borderRadius: 1,
backgroundColor: 'currentColor',
variants: [
Expand Down