Updates

[gilbarbara]

This pull request introduces several improvements to the color picker component, focusing on better ref handling for host popover compatibility, refactoring of internal refs, and enhanced accessibility and usability for the gradient slider. It also includes updates to documentation and tests to reflect these changes.

Ref and Popover Compatibility Improvements:

• ColorPicker now uses forwardRef to allow consumers to attach refs directly to the picker root, improving integration with host popover components. The root ref is forwarded and merged with internal refs for seamless interoperability. [1] [2] [3] [4] [5]
• Documentation in ARCHITECTURE.md updated to explain how host popovers can check if a click is outside the picker using the forwarded ref and portal data attribute.

Refactoring and Cleanup:

• The internal containerRef has been removed from useColorPicker and related types, as it is now redundant due to ref forwarding. [1] [2] [3] [4] [5]
• The related documentation in HOOK.md has been updated to remove references to containerRef.

Gradient Slider Accessibility and Usability:

• The gradient slider thumb now uses appropriate cursor styles (grab and grabbing), disables pointer events only when necessary, and adds a larger hit area for better accessibility. [1] [2]
• Storybook stories and test snapshots have been updated to reflect the new slider thumb behavior and class names. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]

[Copilot]

Pull request overview

Copilot reviewed 43 out of 43 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/components/GradientSlider.tsx:275

• Keyboard stepping quantizes with quantize(next, step) but drag/programmatic changes quantize with an origin offset (quantize(raw, step, minValue)). When minValue is not 0 (or not aligned to step), the current keydown path can snap to the wrong values (e.g., min=1 step=2: 1→3 becomes 4). Quantize keyboard values using the same minValue origin to keep the step grid consistent.

    const large = step * 10;
    let next: number | null = null;

    switch (event.key) {
      case 'ArrowLeft':
      case 'ArrowDown':
        next = value - (event.shiftKey ? large : step);
        break;
      case 'ArrowRight':
      case 'ArrowUp':
        next = value + (event.shiftKey ? large : step);
        break;
      case 'PageDown':
        next = value - large;
        break;
      case 'PageUp':
        next = value + large;
        break;
      case 'Home':
        next = minValue;
        break;
      case 'End':
        next = maxValue;
        break;
      default:
        return;
    }

    event.preventDefault();

    const clamped = clamp(quantize(next, step), minValue, maxValue);

    if (clamped === value) return;

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
97.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud