SwatchColorPicker component - Research

[ValentinaKozlova]

Intro

SwatchColorPicker is used in graphic and text editors.
As we're going to support images/patterns there are name proposals:

• SwatchPicker (preferred)
• PalletePicker
• SwatchGroup

We'll use SwatchPicker name. In case if partners need multiselect feature, we'll add a separate component SwatchGroup.

Layout variants:

• Grig
• Row

Variations

• solid color
  

• gradient color
  

• image/icon/pattern/texture
  

Shape

• square (default)
• circular
• rounded (not by default in V8)
  Proposal: rounded shape can be done using CSS.
  As this shape is not widely used there's no need to make it as part of props.
  But some partners asked about this feature. We'll need to come up with variants of border-radiuses.

States

• hover
• selected
• focused
• pressed

Sizes

• extra-small - 20px
• small - 24px
• medium - 28px
• large - 32px
  Custom width and height can be set up using CSS.

Density/Gap

Default gap proposal is 2px between swatches.
But it, also, can depend on a size.
Vertical and horizontal density might be set up using CSS.

Customizable props

SwatchPicker

• size
• shape
• layout (grid, row)

CSS customization:

• gap

SwatchColor/Image

• size
• shape

CSS customization:

• border (width, thickness, style, radius)
• shadow (if needed more than two borders, shadow can be used).

Example of existing (V8) SwatchColorPicker

https://developer.microsoft.com/en-us/fluentui#/controls/web/swatchcolorpicker

Examples of SwatchColorPickers:

Microsoft products

Themes in Sharepoint:

MS Teams

---

Fabric (v8)

import {
  IColorCellProps,
  SwatchColorPicker,
  ThemeProvider,
  initializeIcons,
} from '@fluentui/react/lib/SwatchColorPicker';

const colorCellsExample1 = [
  { id: 'a', label: 'orange', color: '#ca5010' },
  { id: 'b', label: 'cyan', color: '#038387' },
  { id: 'c', label: 'blueMagenta', color: '#8764b8' },
  { id: 'd', label: 'magenta', color: '#881798' },
  { id: 'e', label: 'white', color: '#ffffff' },
];

const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
  const [previewColor, setPreviewColor] = React.useState<string>();
  const baseId = useId('colorpicker');

  const swatchColorPickerOnCellHovered = (id: string, color: string) => {
    setPreviewColor(color!);
  };

  const renderCustomCellContent = (cellProps: IColorCellProps) => {
    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          borderRadius: '50%',
          background: cellProps.color,
        }}
      />
    );
  };

  return (
    <div>
      <div id={`${baseId}-circle`}>Simple circle swatch color picker:</div>
      <SwatchColorPicker
        columnCount={5}
        cellShape={'circle'}
        colorCells={colorCellsExample1}
        aria-labelledby={`${baseId}-circle`}
      />
      <div id={`${baseId}-square`}>Simple square swatch color picker with default size of 20px:</div>
      <SwatchColorPicker
        columnCount={5}
        cellShape={'square'}
        colorCells={colorCellsExample1}
        aria-labelledby={`${baseId}-square`}
      />
      <div id={`${baseId}-custom-size`}>Simple square swatch color picker with custom size of 35px:</div>
      <SwatchColorPicker
        columnCount={5}
        cellHeight={35}
        cellWidth={35}
        cellShape={'square'}
        colorCells={colorCellsExample1}
        aria-labelledby={`${baseId}-custom-size`}
      />
    </div>
  );
};

Component structure

SwatchPicker component

Contains rows and cells. Responsive by default.
Props:

• size
• shape
• layout (row, grid)

Adobe Spectrum has swatch types as props. In our case for JSX composition we'll have different components.

SwatchColor component

Component for colors and gradients.
Props:

• shape
• size
• disabled
• swatch
• id

ImageSwatch component

This component accepts image/pattern/texture.
Props:

• shape
• size
• disabled
• swatch or url
• id

In case if we need to support icons it can be a separate component.

Data format:

• id
• swatch (color or image)
• label (label will be set by partners. No need to add it as part of the component)

Selected swatch returns swatchId.
HEX format of the color is default.

Questions:

4. Is it possible to have disabled selected?
5. Is it possible to disable the whole grid of colors?
6. Do we need prop column count?

Notes:

• Feature request for custom SVGs: [Feature]: SwatchColorPicker should support custom svgs #22687
• Box-shadow, multiple borders and transparent background is supported using CSS.
• Borders for colors which are the same as background should be handled by theme.
• Contrast border should be handled by the partner. In case if e.g. white background and swatch is white, the partner should adjust border with a right contrast.
• Selected color will return colorId
• For the cases of low contrast, e.g. color is the same as a background or has low contrast, theme token for border should be used. Background and color swatch should pass AA or 3:1 contrast ratio.
• For HignContrast we propose to use patterns
• In Dark and HC mode colors should be applied according to the theme.

Resources:

For learning and research I used Adobe DS: https://spectrum.adobe.com/page/swatch-group/
For A11y check use https://accessible-colors.com/