fix: position ColorLoupe relative to ColorHandle in V3 ColorWheel (#8846)

yihuiliao · web-flow · commit 7ffbbc30c107 · 2025-09-11T16:45:04.000Z
* fix: position color loupe relative to the color handle in V3 ColorWheel

* fix lint
diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx
@@ -69,11 +69,15 @@ function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {
   let thumbTop = style.top || '50%';
   if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {
     thumbTop = parseFloat(style.top || '50%') / 100 * containerRect.height;
+  } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {
+    thumbTop = parseFloat(thumbTop);
   }
 
   let thumbLeft = style.left || '50%';
   if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {
     thumbLeft = parseFloat(thumbLeft || '50%') / 100 * containerRect.width;
+  } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {
+    thumbLeft = parseFloat(thumbLeft);
   }
 
   return (

Original file line number	Diff line number	Diff line change
`@@ -69,11 +69,15 @@ function ColorLoupe({isOpen, valueCSS, containerRef, loupeRef, style}: any) {`
`69`	`69`	`let thumbTop = style.top \|\| '50%';`
`70`	`70`	`if (typeof thumbTop === 'string' && thumbTop.endsWith('%')) {`
`71`	`71`	`thumbTop = parseFloat(style.top \|\| '50%') / 100 * containerRect.height;`
	`72`	`+ } else if (typeof thumbTop === 'string' && thumbTop.endsWith('px')) {`
	`73`	`+ thumbTop = parseFloat(thumbTop);`
`72`	`74`	`}`
`73`	`75`
`74`	`76`	`let thumbLeft = style.left \|\| '50%';`
`75`	`77`	`if (typeof thumbLeft === 'string' && thumbLeft.endsWith('%')) {`
`76`	`78`	`thumbLeft = parseFloat(thumbLeft \|\| '50%') / 100 * containerRect.width;`
	`79`	`+ } else if (typeof thumbLeft === 'string' && thumbLeft.endsWith('px')) {`
	`80`	`+ thumbLeft = parseFloat(thumbLeft);`
`77`	`81`	`}`
`78`	`82`
`79`	`83`	`return (`