fix(#3273): useColorWheelState getDisplayColor should not include alpha channel (#3274)

* fix(#3273): useColorWheelState getDisplayColor should not include alpha channel

Author: Michael Jordan

packages/@react-spectrum/color/test/ColorWheel.test.tsx

@@ -331,4 +331,25 @@ describe('ColorWheel', () => {
       expect(onChangeEndSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('thumb background color should not include alpha channel', () => {
+    let defaultColor = parseColor('hsla(0, 100%, 50%, 0.5)');
+    let {container: _container} = render(<ColorWheel defaultValue={defaultColor} />);
+    /*
+     Current DOM structure for ColorWheel, starting at the container:
+
+     div
+       div.spectrum-ColorWheel
+         div.spectrum-ColorWheel-gradient
+         div.spectrum-ColorWheel-handle
+             div.spectrum-ColorHandle-color
+             svg.spectrum-ColorLoupe
+               ...
+             input.spectrum-ColorWheel-slider
+    */
+    let handleColorElement = _container.firstChild.firstChild.nextSibling.firstChild as HTMLElement;
+    let thumbColor = parseColor(handleColorElement.style.backgroundColor);
+    expect(defaultColor.getChannelValue('alpha')).toEqual(0.5);
+    expect(thumbColor.getChannelValue('alpha')).toEqual(1);
+  });
 });

packages/@react-stately/color/src/useColorWheelState.ts

@@ -168,7 +168,7 @@ export function useColorWheelState(props: ColorWheelProps): ColorWheelState {
     },
     isDragging,
     getDisplayColor() {
-      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+      return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);
     }
   };
 }