Implement ColorArea component

[devongovett]

🙋 Feature Request

The color area component is a two-dimensional area that allows users to drag a handle to select two different color channel values. These channels are configurable: for example, the color area could allow selecting both hue and saturation, saturation and brightness, or various properties of RGB.

💁 Possible Solution

See #973 which describes the API for the Color object we will use to represent colors. A base has already been implemented and merged, though additional color formats may need to be implemented.

The props for the ColorArea component are as follows:

interface ColorAreaProps extends ValueBase<Color> {
  xChannel: ColorChannel,
  yChannel: ColorChannel,
  step?: number,
  isDisabled?: boolean,
  onChangeEnd?: (value: Color) => void
}

The useMove hook added in #1106 can be used to implement the drag behavior for the handle. In addition, for accessibility, two visually hidden <input type="range"> elements should be used to represent the selected values for the two channels. Changing these should update the color value by modifying the value for that channel.

The React Stately and React Aria APIs could look something like this:

interface ColorAreaState {
  readonly value: Color,
  setValue(value: string | Color): void,

  // Numeric values for the x/y channels.
  xValue: number,
  setXValue(value: number): void,
  yValue: number,
  setYValue(value: number): void,
}

declare function useColorAreaState(props: ColorAreaProps): ColorAreaState;

interface ColorAreaAria {
  colorAreaProps: HTMLAttributes<HTMLElement>,
  thumbProps: HTMLAttributes<HTMLElement>,
  xInputProps: InputHTMLAttributes<HTMLInputElement>,
  yInputProps: InputHTMLAttributes<HTMLInputElement>
}

declare function useColorArea(props: ColorAreaProps, state: ColorAreaState): ColorAreaAria;

These should be implemented in the @react-spectrum/color/@react-aria/color/@react-stately/color packages, respectively.

See the spectrum website for details on the behavior. The CSS for ColorArea is already implemented in Spectrum CSS. We also have an internal prototype of this component available for reference by Adobe employees.

ColorThumb

This component also depends on the internal ColorThumb component, which also includes a color loupe. This component is used as the thumb the user drags, and the loupe appears when they are pressing to show a preview of the color being chosen.

The API for ColorThumb could be as follows:

interface ColorThumbProps {
  value: Color,
  isDisabled?: boolean,
  isDragging?: boolean, // shows the color loupe
  isFocused?: boolean // makes the circle larger
}

🧢 Your Company/Team

RSP

[DennisSmolek]

@majornista I see a lot of stuff from May but this wasn't added in the beta with ColorSlider etc. I was thinking of working on this as I had it in a tool from a previous life, however your commits seem like it was almost at the finish line...

[majornista]

@DennisSmolek There is an open PR #1732 that awaits final review and approval. I think one hold up has been the approach to color naming for accessibility. @devongovett put some work into an approach that reduces the number of strings to be translated and the package size and I've implemented the suggested changes, but it still needs review and approval from 2 committers to merge.

[DennisSmolek]

@DennisSmolek There is an open PR #1732 that awaits final review and approval. I think one hold up has been the approach to color naming for accessibility. @devongovett put some work into an approach that reduces the number of strings to be translated and the package size and I've implemented the suggested changes, but it still needs review and approval from 2 committers to merge.

Apologies!
I saw the PR only after my comment.

Is the intent for the color names to satisfy WCAG 2.0 1.4.1?

I couldn't see in any of the other Spectrum specs for color tools that they use "color names" so I was curious why you added it.

[majornista]

@DennisSmolek The intent of adding color names is to make the tool more useful for users who are blind or color blind, so that in addition to the RGB, HSV or HSL announcement on value change, the user is provided with a descriptive name for the color. Inspired in part by this tool: https://www.color-blindness.com/color-name-hue/.