fix(color-picker): prevent hue slider thumb from wrapping when dragge…

…d near/past the edge (#7009)

**Related Issue:** #7004

## Summary

Restores the fix from
#4734, which got
unintentionally removed in #2841.

src/components/color-picker/color-picker.e2e.ts

@@ -650,6 +650,34 @@ describe("calcite-color-picker", () => {
     expect(afterDragHsv.v).toBe(beforeDragHsv.v);
   });
 
+  it("does not wrap the hue slider thumb when dragging past the edge", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-color-picker></calcite-color-picker>`);
+    const [hueSliderX] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueSlider}`);
+
+    let [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
+
+    await page.mouse.move(hueScopeX, hueScopeY);
+    await page.mouse.down();
+    await page.mouse.move(0, hueScopeY);
+    await page.mouse.up();
+    await page.waitForChanges();
+
+    [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
+
+    expect(hueScopeX).toBe(hueSliderX);
+
+    await page.mouse.move(hueScopeX, hueScopeY);
+    await page.mouse.down();
+    await page.mouse.move(hueScopeX + DIMENSIONS.m.slider.width, hueScopeY);
+    await page.mouse.up();
+    await page.waitForChanges();
+
+    [hueScopeX] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
+
+    expect(hueScopeX).toBe(hueSliderX + DIMENSIONS.m.slider.width - 1);
+  });
+
   describe("unsupported value handling", () => {
     let page: E2EPage;
 

src/components/color-picker/color-picker.stories.ts

@@ -103,9 +103,6 @@ export const thumbsOnEdgeDoNotOverflowContainer_TestOnly = (): string => html`<d
   <calcite-color-picker value="#04006e"></calcite-color-picker>
 </div>`;
 
-export const thumbsOnEdgeDoNotSnapToFrontOfContainer_TestOnly = (): string =>
-  html`<calcite-color-picker value="#824142"></calcite-color-picker>`;
-
 export const ArabicLocale_TestOnly = (): string => html` <calcite-color-picker lang="ar"></calcite-color-picker> `;
 
 export const NorwegianLocale_TestOnly = (): string => html` <calcite-color-picker lang="no"></calcite-color-picker> `;

src/components/color-picker/color-picker.tsx

@@ -142,7 +142,6 @@ export class ColorPicker
    * The format of `value`.
    *
    * When `"auto"`, the format will be inferred from `value` when set.
-   *
    * @default "auto"
    */
   @Prop({ reflect: true }) format: Format = "auto";
@@ -155,7 +154,6 @@ export class ColorPicker
 
   /**
    * When `true`, hides the RGB/HSV channel inputs.
-   *
    * @deprecated use `channelsDisabled` instead
    */
   @Prop({ reflect: true }) hideChannels = false;
@@ -165,14 +163,12 @@ export class ColorPicker
 
   /**
    * When `true`, hides the hex input.
-   *
    * @deprecated use `hexDisabled` instead
    */
   @Prop({ reflect: true }) hideHex = false;
 
   /**
    * When `true`, hides the saved colors section.
-   *
    * @deprecated use `savedDisabled` instead
    */
   @Prop({ reflect: true }) hideSaved = false;
@@ -211,7 +207,6 @@ export class ColorPicker
    * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
    *
    * The type will be preserved as the color is updated.
-   *
    * @default "#007ac2"
    * @see [CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
    * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
@@ -617,7 +612,7 @@ export class ColorPicker
       } else if (clientX < bounds.x) {
         samplingX = 0;
       } else {
-        samplingX = bounds.width;
+        samplingX = bounds.width - 1;
       }
 
       if (clientY < bounds.y + bounds.height && clientY > bounds.y) {