SubComponents

Control

The control subcomponent is required to render the Control of the ColorPicker component. Because of this, this component extends the native div props. Because of this, you can use all of the native props. This is a required children.

Control API

Notice that there is a difference between using isDisabled here or in the parent component. It is not recommended to change this props in the Control subcomponent, because this props can be inherited from the Wrapper. If you use it in the Control subcomponent, you will get the state only in the field.

Props	Type	Required
hex	string	❌
rgb	{ r:number, g: number, b: number, a?: number}	❌
hsl	{h: number, s: number, l: number, a?: number}	❌
defaultHex	string	❌
defaultRgb	{ r:number, g: number, b: number, a?: number}	❌
defaultHsl	{h: number, s: number, l: number, a?: number}	❌
defaultColorFormat	'rgb' | 'hsl' | 'hex';	❌
onColorChange	(e: ColorPickerChangeEventProps ) => void;	❌

hex, rgb, hsl

These props are used for the controlled approach of the component. Developers are able to to use only one format to work with: hex, rgb or hsl. If developers attempt to use more than one format to share to the color picker the value it should have, it will trigger an error.

defaultHex, defaultRgb, defaultHsl

These props, just like the hex, rgb and hsl, help developers to share the value that should be displayed on the color picker, with the main difference these are for the uncontrolled approach, and will affect only the initial value. Once the user interacts with the color picker, it will internally manage the color value and share it back to developers through the onColorChange event.

Developers can only use one format at the time.

defaultColorFormat

Color Picker component has the ability to jump from hex, to rgb and to hsl formats, facilitating users the convertions of the colors and to work with their prefer color format.

This props manages the initial presentation of the color picker, by default, it show hexadecimal color code, but if the project requires to work more with rgb, for example, devs can set the initial presentation to be on rgb color format.

onColorChange

Custom event of the component where it is shared back to developers the selected color on the color picker after the user has interacted with it.

This event returns an object with the same color in three different formats: hex, rgb and hsl.

If developers are using typescript, they can use the type ColorPickerChangeEventProps for the event function.

HelpText

The HelpText subcomponent extends the SDS label component. See for reference: HelpText.

Label

The Label subcomponent extends the SDS label component. See for reference: Label.

Utilities

Interacting with colors can be complicated, more taking in consideration there are a lot of different tools to work with them. By default, the Color Picker component offers developers some utilities that can help them with the color convertions.

• colorPickerRgbToString: Transforms the rgb object the Color Picker returns into a string with the correct format.

• colorPickerHslToString: Transforms the hsl object the Color Picker returns into a string with the correct format.

• colorPickerStringValidator: Validates string colors. It can receive hex, rgb and hsl string values.

• colorPickerStringToColor: Transforms string colors into selected color format.

const rgbWhiteColorString = colorPickerRgbToString({
    r: 255,
    g: 255,
    b: 255,
    a: 0.85
}) //Returns 'rgba(255, 255, 255, 0.85)'

const hslWhiteColorString = colorPickerRgbToString({
    h: 0,
    s: 0,
    l: 100,
    a: 0.85
}) //Returns 'hsla(0, 0, 100, 0.85)'

const validationTest1 = colorPickerStringValidator('#ffffff') // true
const validationTest2 = colorPickerStringValidator('hello') // false

const. rgbWhiteColorObject = colorPickerStringToColor('hsla(0, 0, 100, 0.85)', 'rgb')
// {r: 255, g: 255, b: 255, a: 0.85}