Support CSS classes to set widget background color

Created on 25 February 2021, over 3 years ago
Updated 20 July 2023, 11 months ago

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

✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada nedjo

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡­πŸ‡ΊHungary Pasqualle πŸ‡­πŸ‡Ί Budapest

    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]
    
  • πŸ‡ΊπŸ‡ΈUnited States justcaldwell

    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 no, then it seems like you're just providing a dropdown list of classes (?), and I think that could be done with a core 'List (text)' field.

    If 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.

Production build 0.69.0 2024