Skip to content

Commit

Permalink
[SliderUnstyled] Improved logic for displaying the value label (#35805)
Browse files Browse the repository at this point in the history
Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Co-authored-by: Marija Najdova <mnajdova@gmail.com>
Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>
  • Loading branch information
3 people authored Jan 23, 2023
1 parent 0ff044d commit 6311da5
Show file tree
Hide file tree
Showing 34 changed files with 793 additions and 379 deletions.
20 changes: 15 additions & 5 deletions docs/data/base/components/slider/DiscreteSlider.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, alpha, Box } from '@mui/system';
import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';

Expand Down Expand Up @@ -77,6 +78,8 @@ const StyledSlider = styled(SliderUnstyled)(
outline: 0;
border: 3px solid currentColor;
background-color: #fff;
display: flex;
flex-direction: column-reverse;
:hover,
&.${sliderUnstyledClasses.focusVisible} {
Expand Down Expand Up @@ -109,18 +112,25 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
& .valueLabel {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
top: -1em;
text-align: center;
transform: translateX(-50%);
align-self: center;
}
`,
);

function SliderValueLabel({ children }) {
return <span className="valueLabel">{children}</span>;
}

SliderValueLabel.propTypes = {
children: PropTypes.element.isRequired,
};

function valuetext(value) {
return `${value}°C`;
}
Expand All @@ -132,11 +142,11 @@ export default function DiscreteSlider() {
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
step={10}
marks
min={10}
max={110}
slots={{ valueLabel: SliderValueLabel }}
/>
</Box>
);
Expand Down
19 changes: 14 additions & 5 deletions docs/data/base/components/slider/DiscreteSlider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ const StyledSlider = styled(SliderUnstyled)(
outline: 0;
border: 3px solid currentColor;
background-color: #fff;
display: flex;
flex-direction: column-reverse;
:hover,
&.${sliderUnstyledClasses.focusVisible} {
Expand Down Expand Up @@ -109,18 +111,25 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
& .valueLabel {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
top: -1em;
text-align: center;
transform: translateX(-50%);
align-self: center;
}
`,
);

interface SliderValueLabelProps {
children: React.ReactElement;
}

function SliderValueLabel({ children }: SliderValueLabelProps) {
return <span className="valueLabel">{children}</span>;
}

function valuetext(value: number) {
return `${value}°C`;
}
Expand All @@ -132,11 +141,11 @@ export default function DiscreteSlider() {
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
step={10}
marks
min={10}
max={110}
slots={{ valueLabel: SliderValueLabel }}
/>
</Box>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
valueLabelDisplay="auto"
step={10}
marks
min={10}
max={110}
slots={{ valueLabel: SliderValueLabel }}
/>
10 changes: 0 additions & 10 deletions docs/data/base/components/slider/DiscreteSliderMarks.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
text-align: center;
transform: translateX(-50%);
}
& .${sliderUnstyledClasses.markLabel} {
font-family: IBM Plex Sans;
font-size: 12px;
Expand Down
10 changes: 0 additions & 10 deletions docs/data/base/components/slider/DiscreteSliderMarks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
text-align: center;
transform: translateX(-50%);
}
& .${sliderUnstyledClasses.markLabel} {
font-family: IBM Plex Sans;
font-size: 12px;
Expand Down
10 changes: 0 additions & 10 deletions docs/data/base/components/slider/DiscreteSliderValues.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
text-align: center;
transform: translateX(-50%);
}
& .${sliderUnstyledClasses.markLabel} {
font-family: IBM Plex Sans;
font-size: 12px;
Expand Down
10 changes: 0 additions & 10 deletions docs/data/base/components/slider/DiscreteSliderValues.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
background-color: #fff;
}
& .${sliderUnstyledClasses.valueLabel} {
font-family: IBM Plex Sans;
font-size: 14px;
display: block;
position: relative;
top: -1.6em;
text-align: center;
transform: translateX(-50%);
}
& .${sliderUnstyledClasses.markLabel} {
font-family: IBM Plex Sans;
font-size: 12px;
Expand Down
135 changes: 135 additions & 0 deletions docs/data/base/components/slider/LabeledValuesSlider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled, alpha, Box } from '@mui/system';
import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';

const blue = {
100: '#DAECFF',
200: '#99CCF3',
400: '#3399FF',
300: '#66B2FF',
500: '#007FFF',
600: '#0072E5',
900: '#003A75',
};

const grey = {
50: '#f6f8fa',
100: '#eaeef2',
200: '#d0d7de',
300: '#afb8c1',
400: '#8c959f',
500: '#6e7781',
600: '#57606a',
700: '#424a53',
800: '#32383f',
900: '#24292f',
};

const StyledSlider = styled(SliderUnstyled)(
({ theme }) => `
color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
height: 6px;
width: 100%;
padding: 16px 0;
display: inline-block;
position: relative;
cursor: pointer;
touch-action: none;
-webkit-tap-highlight-color: transparent;
&:hover {
opacity: 1;
}
&.${sliderUnstyledClasses.disabled} {
pointer-events: none;
cursor: default;
color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
opacity: 0.5;
}
& .${sliderUnstyledClasses.rail} {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 2px;
background-color: currentColor;
opacity: 0.4;
}
& .${sliderUnstyledClasses.track} {
display: block;
position: absolute;
height: 4px;
border-radius: 2px;
background-color: currentColor;
}
& .${sliderUnstyledClasses.thumb} {
position: absolute;
width: 16px;
height: 16px;
margin-left: -6px;
margin-top: -6px;
box-sizing: border-box;
border-radius: 50%;
outline: 0;
border: 3px solid currentColor;
background-color: #fff;
:hover,
&.${sliderUnstyledClasses.focusVisible} {
box-shadow: 0 0 0 0.25rem ${alpha(
theme.palette.mode === 'light' ? blue[400] : blue[300],
0.15,
)};
}
& .label {
background: unset;
background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
width: 32px;
height: 32px;
padding: 0px;
visibility: hidden;
color: #fff;
border-radius: 50% 50% 50% 0;
position: absolute;
transform: translate(-35%, -140%) rotate(-45deg) scale(0);
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
:hover .label {
visibility: visible;
transform: translate(-35%, -140%) rotate(-45deg) scale(1);
}
:hover .value {
transform: rotate(45deg);
text-align: center;
}
&.${sliderUnstyledClasses.active} {
box-shadow: 0 0 0 0.25rem ${alpha(
theme.palette.mode === 'light' ? blue[200] : blue[300],
0.3,
)};
}
}
`,
);

function SliderValueLabel({ children }) {
return (
<span className="label">
<div className="value">{children}</div>
</span>
);
}

SliderValueLabel.propTypes = {
children: PropTypes.element.isRequired,
};

export default function LabeledValuesSlider() {
return (
<Box sx={{ width: 300 }}>
<StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
</Box>
);
}
Loading

0 comments on commit 6311da5

Please sign in to comment.