A suggestion to make it easier to style individual pieces

[Asmor]

As best I can tell based on the documentation, there are a handful of properties you can modify, but there's no way to add a class and/or arbitrary styles to the color picker or any of its components. This severely limits the customizability of the picker, and would be relatively simple to address by providing a way to configure classes and/or styles to the picker and components.

Iro and its components should...

• accept a className property, which can be a string (which will be split on whitespace) or an array of strings. Each of these strings would be added to the classList of the appropriate element.
  • element.classList.add(...classes)
• accept a style property, which must be an object. Each property of the style object should be applied to the element's own style object.
  • Object.keys(styles).forEach( key => element.style[key] = styles[key])

Here's an example of what it might look like in use.

const picker = new iro.ColorPicker(el, {
    layout: [
        { component: iro.ui.Box, options: {
            style: { borderRadius: 0 },
        }},
        { component: iro.ui.Slider, options: {
            sliderType: "hue",
            className: "middle-slider",
        },
        { component: iro.ui.Slider, options: { sliderType: "alpha" } },
    ],
    className: ["hat-color-picker"],
    style: {
        position: "fixed",
        top: 0,
        left: 0
    },
});

[jaames]

The color picker has an id option already, which can be used to give it a custom HTML id="..." attribute, so you can target a specific color picker in CSS that way. That isn't available for components though.

I've been playing around with the idea of possibly moving to webcomponents for the next version of iro.js, and targeting shadowDOM elements with CSS isn't really possible, so I'll need to think a bit more about styling components. I wouldn't want to introduce something now only to take it away in the next major version.