Color picker

import * as React from 'react';
import {
  ColorBuilder,
  ColorInputPanel,
  ColorPicker,
  ColorValue,
  IconButton,
  ColorSwatch,
  Popover,
} from '@itwin/itwinui-react';

export default () => {
  const [activeColor, setActiveColor] = React.useState(
    ColorValue.create('#0073ba'),
  );

  const onColorChanged = (color) => {
    setActiveColor(color);
  };

  return (
    <Popover
      content={
        <ColorPicker
          selectedColor={activeColor}
          onChangeComplete={onColorChanged}
        >
          <ColorBuilder />
          <ColorInputPanel defaultColorFormat={'hsl'} />
        </ColorPicker>
      }
    >
      <IconButton label='Show color picker'>
        <ColorSwatch style={{ pointerEvents: 'none' }} color={activeColor} />
      </IconButton>
    </Popover>
  );
};

import * as React from 'react';
import {
  ColorPalette,
  ColorPicker,
  ColorSwatch,
  Button,
  Popover,
} from '@itwin/itwinui-react';

export default () => {
  const ColorsList = [
    { color: '#ffffff', name: 'WHITE' },
    { color: '#5a6973', name: 'GREY' },
    { color: '#00121d', name: 'KURETAKE BLACK MANGA' },
    { color: '#002a44', name: 'RHAPSODY IN BLUE' },
    { color: '#00426b', name: 'DARK IMPERIAL BLUE' },
    { color: '#005a92', name: 'JETSKI RACE' },
    { color: '#0073ba', name: 'FRENCH BLUE' },
    { color: '#008be1', name: 'BLUE COLA' },
    { color: '#30b0ff', name: 'FANTASY CONSOLE SKY' },
    { color: '#58bfff', name: 'HELLO SUMMER' },
    { color: '#7fceff', name: 'CHROMIS DAMSEL BLUE' },
    { color: '#a6ddff', name: 'DROPLET' },
    { color: '#cdecff', name: 'LUCID DREAMS' },
    { color: '#e5f5fd', name: 'KODAMA WHITE' },
    { color: '#010200', name: 'REGISTRATION BLACK' },
    { color: '#122306', name: 'YUZU SOY' },
    { color: '#23450b', name: 'FOREST GREEN' },
    { color: '#346711', name: 'TATZELWURM GREEN' },
    { color: '#458816', name: 'CHLOROPHYLL' },
    { color: '#56aa1c', name: 'PLASTIC PINES' },
    { color: '#5fbb1f', name: 'FIELD GREEN' },
    { color: '#67cc22', name: 'GREEN HIGH' },
    { color: '#91e458', name: 'LILLIPUTIAN LIME' },
    { color: '#b2ec8b', name: 'GREEN DAY' },
    { color: '#d4f4bd', name: 'TEA GREEN' },
    { color: '#eef6e8', name: 'VERDE PASTEL' },
    { color: '#9ba5af', name: 'SERYI GREY' },
    { color: '#cf0000', name: 'RED EPIPHYLLUM' },
    { color: '#ff6300', name: 'SAFETY ORANGE' },
    { color: '#ffc335', name: 'RISE-N-SHINE' },
  ];

  const [isOpen, setIsOpen] = React.useState(false);
  const [activeColor, setActiveColor] = React.useState(ColorsList[5]);
  const [colorName, setColorName] = React.useState(ColorsList[5].name);

  const onColorChanged = (color) => {
    const hexString = color.toHexString();
    const index = ColorsList.findIndex(
      (swatch) => swatch.color === hexString.toLowerCase(),
    );
    setActiveColor(ColorsList[index]);
    setColorName(ColorsList[index].name);
    setIsOpen(false);
  };

  return (
    <Popover
      visible={isOpen}
      onVisibleChange={setIsOpen}
      content={
        <ColorPicker
          selectedColor={activeColor.color}
          onChangeComplete={onColorChanged}
        >
          <ColorPalette colors={ColorsList.map(({ color }) => color)} />
        </ColorPicker>
      }
    >
      <Button
        startIcon={
          <ColorSwatch
            className='demo-color-swatch'
            color={activeColor.color}
          />
        }
      >
        {colorName}
      </Button>
    </Popover>
  );
};

import * as React from 'react';
import {
  ColorBuilder,
  ColorInputPanel,
  ColorPalette,
  ColorPicker,
  ColorValue,
} from '@itwin/itwinui-react';

export default () => {
  const [selectedColor, setSelectedColor] = React.useState(
    ColorValue.create({ r: 90, g: 105, b: 115, a: 0.4 }),
  );

  const onColorChanged = (color) => {
    setSelectedColor(color);
  };

  return (
    <ColorPicker
      selectedColor={selectedColor}
      onChangeComplete={onColorChanged}
      showAlpha={true}
    >
      <ColorBuilder />
      <ColorInputPanel defaultColorFormat='rgb' />
      <ColorPalette
        label='Saved Colors'
        colors={[
          { r: 90, g: 105, b: 115, a: 1 },
          { r: 90, g: 105, b: 115, a: 0.81 },
          { r: 90, g: 105, b: 115, a: 0.4 },
        ]}
      />
    </ColorPicker>
  );
};

import * as React from 'react';
import {
  ColorBuilder,
  ColorPalette,
  ColorPicker,
  ColorValue,
  ButtonGroup,
  ColorSwatch,
  IconButton,
  Button,
} from '@itwin/itwinui-react';
import { Popover } from '@itwin/itwinui-react';
import { SvgSwap } from '@itwin/itwinui-icons-react';

export default () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const [selectedColor, setSelectedColor] = React.useState(
    ColorValue.create({ h: 0, s: 100, l: 50 }),
  );

  const formats = ['hsl', 'rgb', 'hex'];
  const [currentFormat, setCurrentFormat] = React.useState(formats[0]);

  const onColorChanged = (color) => {
    setSelectedColor(color);
  };

  const getDisplayString = (color = selectedColor) => {
    switch (currentFormat) {
      case 'hsl':
        return color.toHslString(true);
      case 'rgb':
        return color.toRgbString(true);
      case 'hex':
        return color.toHexString(true);
    }
  };

  return (
    <>
      <ButtonGroup>
        <Popover
          content={
            <ColorPicker
              selectedColor={selectedColor}
              onChangeComplete={onColorChanged}
            >
              <ColorBuilder />
              <ColorPalette
                label='Saved Colors'
                colors={[
                  { h: 0, s: 100, l: 50 },
                  { r: 255, g: 98, b: 0 },
                  '#fec134',
                  '#5A6973',
                  { h: 95, s: 83, v: 72 },
                  { h: 250, s: 100, l: 59 },
                ]}
              />
            </ColorPicker>
          }
          portal={{ to: () => document.body }}
          visible={isOpen}
          onVisibleChange={setIsOpen}
          placement='bottom-start'
        >
          <IconButton label='Show color picker'>
            <ColorSwatch color={selectedColor} className='demo-color-swatch' />
          </IconButton>
        </Popover>
        <Button
          onClick={() => {
            setCurrentFormat(
              formats[(formats.indexOf(currentFormat) + 1) % formats.length],
            );
          }}
          endIcon={<SvgSwap />}
        >
          <div className='demo-label'>
            {getDisplayString() ?? 'No color selected.'}
          </div>
        </Button>
      </ButtonGroup>
    </>
  );
};