[IGN-6850] Unable to set Progress Bar text color via style class

Ignition
1

Perspective 8.1.20

Trying to set the text (value) color of a Perspective progress bar via a style class.

valueDisplay
   style
      classes:   MyStyle   <- setting text color here does NOT work
      color:  #ff0000   <- works

Hopefully someone can confirm, or maybe point out something I'm doing wrong.

Thanks.
-Shane

2

"Bug" might be a bit of an overstatement, but I can explain what you're seeing and how to work around it.

This is the rule within the theming files for setting the color of the progress bar's display value:

.ia_progressBar .ia_progressBar__display .ia_progressBar__displayValue {
    color: var(--neutral-90);
}

Notice how there are multiple levels specified? This rule essentially has a specificity level of 3 (three levels define the target).

Applying the Named Style actually works in that it is applied as intended, but because the rule is so simple it is overridden/overruled by the more specific rule above.

.psc-MyStyle {
    color: #00FF00;
}

To get around this, you can modify the named Style entry. Open the Named Style and in the color input field, add a space and the !important modifier. This will "force" the value to be used regardless of whatever rules are in place.

Screenshot 2022-11-16 at 6.42.17 PM
Screenshot 2022-11-16 at 6.42.17 PM788×255 13.4 KB

Alternatively, you could modify the theme files (progress-bar.css, specifically) to be less specific. Modifying the rule above to the following should alleviate your issue:

.ia_progressBar__displayValue {
    color: var(--neutral-90);
}

I'll open a ticket to update the theme files, but I expect any change in that area will not happen for a very long time.

3

Thank you!

4

The required change was simple enough that I was able to knock it out myself, so the fix will be present in 8.1.23rc1 and eventually the stable build of 8.1.23.

5

Thanks! Above and beyond.

One other thing, not really a bug, more of a feature enhancement. When you add the "!important" modifier to a color in the style class editor, the preview box stops displaying the color. You can see it in your screen shot above where you've entered "#00FF00 !important" (green) but the preview box is blank.

-Shane

6

Because we run the color value through a function to display it in the Designer, but the function isn't a CSS function, it just takes String color values and returns what they would look like. !important is obviously not a color value so the function returns nothing.

7

Sure, but you could have the function ignore everything after the first whitespace. :slight_smile:
Like I said, not a bug, but might make it more useful? Dunno.

8

No, because some people supply RGB colors like so: rgb(255, 0, 0). There are a whole bunch of different scenarios we would need to account for, but it would make the feature even more brittle and "expensive" long-term.