Add titles to palette, use palette only

[David Casey]

I'd like the ability to add titles to the palette swatch (provided as a json array in palette: options)

Also I'd like the ability to use only the palette, removing the gradient color picker. This allows me to use the same tool for every color picking feature I want to implement.

[Matt Wiebe]

The "palette only" thing seems a bit too edge-case-y for my liking. You could always hide things with CSS on the one(s) where you want just palettes.

Titles on palette items sounds like an ok thing. Send in a PR and I'll review it.

[David Casey]

I like the idea of using CSS to hide the color picker, but it appears that the container size is not dynamically set based on its contents. (This was my original thought of just getting it done.) I've used both CSS: .iris-picker-inner, .my-color-field { display: none; } and JS: $('.iris-picker-inner, .my-color-field').hide(); to eliminate the gradient picker. But it feels hacky to manually set the container size with JS. Suggestions?

I'll see what I can do to work out the titles.

Thanks for the consideration.

[Matt Wiebe]

Not sure on the sizing bits, but you can always use !important in a stylesheet to override inline styles.

[Josh Junon]

Using !important is generally a hack, though, right?

[Robert Rothermel]

Not really. CSS Specificity allows you to set "more specific" CSS selectors which override the styles of "less specific" CSS selectors. The simplest example is something like:

h1 { font-size: 1.5em; }
h1.page-title { font-size: 1.8em; }

Because the second selector (h1.page-title) is more specific, those CSS properties will override the properties of the less specific selector (h1). This works regardless of where the two selectors are placed. But developers that don't know about specificity start by using !important, which is like using a sledgehammer to force your styles to take effect :-p That's when you should consider it a hack.

However, Javascript almost always applies styles using the style attribute on elements. This overrides almost all CSS stylesheet selectors, so you must use !important to override the Javascript assigned styles. The only downside is that now the Javascript style properties overridden in your !important CSS are not contolled by the JS, so you have to use this trick with care and cunning (specifically, if you override a JS set width, you'd better make sure your CSS width: XX !important; works with the JS's value gone/replaced).

[colinduwe]

Regardless of anyone's opinion regarding !important would you be open to PR to add a pallete only option? I'm looking here as a reference: https://bgrins.github.io/spectrum/#options-showPaletteOnly

[Alfred Yrelin]

I would also like a "palette only" option.

To just view the palette one might use the css below, but it would be better to have an option for that in my opinion.

.wp-picker-container .iris-picker {
    height: 17px !important;
    width: 160px !important;
    position: absolute;
}

.wp-picker-input-wrap, .iris-picker-inner, .my-color-field {
    display: none !important;
}

[Piers Beckley]

Stick me down as a plus-one here.

[Corey Worrell]

This is definitely useful, why would I ever want my client to choose ANY color?? What is this, 1995? Alright, aside from that little exaggeration, this would be incredibly useful, because honestly what is the use case for selecting a "visibly correct" color from the color wheel? Almost always you'll want to use an exact pre-selected color that you either enter into the text field, or select from a palette. This keeps your site's colors the same across the site.

And using CSS does not work, because the palette isn't always going to be a certain (17px?) height. It needs to be dynamic.
+1