Problem/Motivation

Currently colorwidget supports defining a color or hex value that will be set as a background color.

A related use case is for a predefined CSS class. For example, if using Bulma or Bootstrap, rather than a color value, you might want to add a class that itself sets the background color.

In Bulma, you might be selecting the text color from options that include is-info. The widget item should then receive a corresponding Bulma background color class, has-background-info.

Supporting CSS classes would make colorwidget more useful for integrating with CSS frameworks.

Proposed resolution

Alongside the existing $details['css_color'] widget property, also support a $details['css_class']. If the latter is set, add it as a class to the radio element.

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork colorwidget-3200449

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

nedjo created an issue. See original summary.

nedjo opened merge request !4

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

Initial work in the feature branch adds this only to the element type, not (yet) to the field widget or formatter.

pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented
Title: Support predefined CSS classes as well as colors » Support CSS classes to set widget background color

  • Pasqualle committed 5517e9e on 1.0.x authored by nedjo 
    Issue #3200449 by nedjo: Support CSS classes to set widget background...
pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented

After thinking about the use case I think it makes sense. Merged.
Any suggestion how to support it with the field widget? I think we can still freely change the allowed values format, as the module does not have a widespread adoption yet..

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

Any suggestion how to support it with the field widget?

Add a setting to select the mode, either color or class. A somewhat comparable example is Image URL Formatter, relevant code here.

justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented

Just dropping a note that I started working on a patch for this use case, but it was quite a bit more complicated than I imagined, and I ended up creating Style Selector instead.

pasqualle’s picture

pasqualle
Location 🇭🇺 Budapest
commented

I am thinking of simple square brackets for using a class instead of style color in field widget.

for example:

info|Info/[has-background-info]
success|Success/[has-background-success]
warning|Warning/[has-background-warning]
danger|Error/[has-background-danger]
justcaldwell’s picture

justcaldwell
he/him
Primary language English
Location Austin, Texas
commented

Yeah, it seems like the brackets would be a simple way to differentiate between color and class values.

The next question, though, is do you plan to style the widget so that it provides a visual representation of the styles available for selection (as it does for color now)?

If the answer is no, then it seems like you're just providing a dropdown list of class names (?), and I that can be done with a core select list widget.

If it's yes, you need a way to get the CSS for those classes into the admin theme so it can be used to style the widget. As I said in #8, doing that starts to get complicated and that's why I ended up creating a new module to add that use case.