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.

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

fix(react-color-picker): place thumb outside of Sliders and ColorArea #33880

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

ValentinaKozlova
Copy link
Contributor

@ValentinaKozlova ValentinaKozlova commented Feb 21, 2025

Fix for thumb positioning looks weird on edges:
thumb-positioning

image
image

Talked to @gouttierre and Toshie, we decided to stay with this design which is currently in V8.
image
image

Previous Behavior

  • Slider wasn't moving on edges
  • Spacing is too narrow
    image

New Behavior

  • Slider is moving on edges
  • Part of thumb is visible outside of ColorSlider and ColorArea
  • Spacing is bigger between sliders and color area
    image

Copy link

github-actions bot commented Feb 21, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-color-picker-preview
ColorArea
50.445 kB
17.675 kB
50.028 kB
17.589 kB
-417 B
-86 B
react-color-picker-preview
ColorPicker
18.581 kB
7.371 kB
18.668 kB
7.431 kB
87 B
60 B
react-color-picker-preview
ColorSlider
42.458 kB
15.707 kB
42.212 kB
15.639 kB
-246 B
-68 B

🤖 This report was generated against a218a5dc65fafa2e5b18a8ec8258d08b0da4dcbf

Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Feb 21, 2025

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

ColorPicker Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
ColorPicker Converged.shape.default.chromium.png 10446 Changed
ColorPicker Converged.Default.default.chromium.png 2960 Changed
ColorPicker Converged.Alpha Sliders.default.chromium.png 66 Changed
ColorPicker Converged.Default - RTL.default.chromium.png 2961 Changed
ColorPicker Converged.Default - Dark Mode.default.chromium.png 13634 Changed
ColorPicker Converged.Default - High Contrast.default.chromium.png 17524 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full - Dark Mode.chromium.png 991 Changed

@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review February 25, 2025 15:11
@ValentinaKozlova ValentinaKozlova requested a review from a team as a code owner February 25, 2025 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants