ColorPicker component - Research

[ValentinaKozlova]

Intro

The ColorPicker is used to browse through and select colors. By default, it lets people navigate through colors on a color spectrum; or specify a color in either Red-Green-Blue (RGB); or alpha color code; or Hexadecimal textboxes.

Layout variants:

Vertical

When color names and button on the bottom side

Horizontal

When color names and buttons from the right side

Choosing color on click in React spectrum

Props

ColorPicker

• defaultValue
• value
• onChange
• sliderShape - some partners might want to change a shape

ColorSlider
AlphaChannelSlider
PreviewBox:

• shape
• size

Example of existing (V8) ColorPicker

[Add a picture here]

https://developer.microsoft.com/en-us/fluentui#/controls/web/colorpicker
https://learn.microsoft.com/en-us/windows/apps/design/controls/color-picker

---

Fabric (v8)

import * as React from 'react';
import {
  ColorPicker,
  ChoiceGroup,
  IChoiceGroupOption,
  getColorFromString,
  IColor,
  IColorPickerStyles,
  IColorPickerProps,
} from '@fluentui/react';

const white = getColorFromString('#ffffff')!;

const ColorPickerBasicExample: React.FunctionComponent = () => {
  const [color, setColor] = React.useState(white);
  const [showPreview, setShowPreview] = React.useState(true);
  const [alphaType, setAlphaType] = React.useState<IColorPickerProps['alphaType']>('alpha');

  const updateColor = React.useCallback((ev: any, colorObj: IColor) => setColor(colorObj), []);

  return (
    <div>
      <div id={`${baseId}-circle`}>Simple circle swatch color picker:</div>
      <ColorPicker
        color={color}
        onChange={updateColor}
        alphaType={alphaType}
        showPreview={showPreview}
        styles={colorPickerStyles}
        // The ColorPicker provides default English strings for visible text.
        // If your app is localized, you MUST provide the `strings` prop with localized strings.
        strings={{
          // By default, the sliders will use the text field labels as their aria labels.
          // Previously this example had more detailed instructions in the labels, but this is
          // a bad practice and not recommended. Labels should be concise, and match visible text when possible.
          hueAriaLabel: 'Hue',
        }}
      />
    </div>
  );
};

Component structure

ColorPicker component

Color picker can contain sub-components:

• Gradient preview
• Color slider
• Alpha channel slider
• Preview box (can have shapes)
• Color values

Color format:

• HEX
• RGB(A)
• named color

Questions:

Notes:

Resources:

For learning and research I used Adobe DS: https://react-spectrum.adobe.com/react-spectrum/ColorPicker.html