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

feat(Slider): make thumb position clearer when the value is set near edge #32051

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(Slider): make thumb position clearer when the value is set near edge #32051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ee03fe8
feat(Slider): make thumb position clearer when the value is set near …
Thulof Jul 18, 2024
c7c6627
Merge branch 'master' into master
dmytrokirpa Aug 26, 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
7 changes: 7 additions & 0 deletions change/@fluentui-react-slider-2fad34fd-35cd-408f-b940-e8d8b1e0c817.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Aug 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 3 Changed
Avatar Converged.badgeMask.chromium.png 5 Changed
Drawer 2 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay Dark Mode.chromium.png 991 Changed
Drawer.overlay drawer full.chromium.png 3302 Changed
Field 1 screenshots
Image Name Diff(in Pixels) Image Type
Field.Slider.chromium.png 279 Changed
Slider Converged 18 screenshots
Image Name Diff(in Pixels) Image Type
Slider Converged.Disabled Dark Mode.chromium.png 34 Changed
Slider Converged.Horizontal - 100%.chromium.png 139 Changed
Slider Converged.Disabled High Contrast.chromium.png 122 Changed
Slider Converged.Horizontal 0 RTL.chromium.png 139 Changed
Slider Converged.Disabled.chromium.png 44 Changed
Slider Converged.Disabled Vertical.chromium.png 44 Changed
Slider Converged.Root High Contrast.chromium.png 155 Changed
Slider Converged.Horizontal 100 RTL.chromium.png 139 Changed
Slider Converged.Root Dark Mode.chromium.png 64 Changed
Slider Converged.Horizontal - 0%.chromium.png 139 Changed
Slider Converged.Vertical - 0%.chromium.png 140 Changed
Slider Converged.Root.chromium.png 92 Changed
Slider Converged.Root RTL.chromium.png 92 Changed
Slider Converged.Vertical - 100%.chromium.png 140 Changed
Slider Converged.Vertical 0 RTL.chromium.png 140 Changed
Slider Converged.Vertical RTL.chromium.png 92 Changed
Slider Converged.Vertical 100 RTL.chromium.png 140 Changed
Slider Converged.Vertical.chromium.png 92 Changed

"type": "minor",
"comment": "feat(Slider): make thumb position clearer when the value is set near edge",
"packageName": "@fluentui/react-slider",
"email": "[email protected]",
"dependentChangeType": "patch"
}
4 changes: 3 additions & 1 deletion packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
import { sliderCSSVars } from './useSliderStyles.styles';
import type { SliderState, SliderProps } from './Slider.types';

const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;
const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar, sliderThumbOffsetRatio } = sliderCSSVars;

const getPercent = (value: number, min: number, max: number) => {
return max === min ? 0 : ((value - min) / (max - min)) * 100;
Expand All @@ -22,6 +22,7 @@ export const useSliderState_unstable = (state: SliderState, props: SliderProps)
});
const clampedValue = clamp(currentValue, min, max);
const valuePercent = getPercent(clampedValue, min, max);
const thumbOffsetRatio = 0.5 - (valuePercent / 100);

const inputOnChange = state.input.onChange;
const propsOnChange = props.onChange;
Expand All @@ -41,6 +42,7 @@ export const useSliderState_unstable = (state: SliderState, props: SliderProps)
[sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
[sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',
[sliderProgressVar]: `${valuePercent}%`,
[sliderThumbOffsetRatio]: thumbOffsetRatio,
};

// Root props
Expand Down
7 changes: 4 additions & 3 deletions ...ges/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@ export const sliderCSSVars = {
sliderDirectionVar: `--fui-Slider--direction`,
sliderProgressVar: `--fui-Slider--progress`,
sliderStepsPercentVar: `--fui-Slider--steps-percent`,
sliderThumbOffsetRatio: `--fui-Slider__thumb--offset-ratio`,
};

const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;
const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar, sliderThumbOffsetRatio } = sliderCSSVars;

/**
* Styles for the root slot
Expand Down Expand Up @@ -214,11 +215,11 @@ const useThumbStyles = makeStyles({
},
horizontal: {
transform: 'translateX(-50%)',
left: `var(${sliderProgressVar})`,
left: `calc(var(${sliderProgressVar}) + var(${sliderThumbOffsetRatio}) * var(${thumbSizeVar}))`,
},
vertical: {
transform: 'translateY(50%)',
bottom: `var(${sliderProgressVar})`,
bottom: `calc(var(${sliderProgressVar}) + var(${sliderThumbOffsetRatio}) * var(${thumbSizeVar}))`,
},
});

Expand Down
Loading