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

[ShaneH]

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

[cmallonee]

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

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.

[ShaneH]

Thank you!

[cmallonee]

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.

[ShaneH]

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

[cmallonee]

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.

[ShaneH]

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

[cmallonee]

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.

[brayden.uber]

Hey, I'm on Ignition 8.3.5 and I can't seem to get progress bar to use my style color. I have tried deleting anything called color and have tried binding the class to both the style in the bar section and the style in the determinate section. Do you have an example of it working in the newer versions?

[cmallonee]

This post is about the text of the Progress Bar. For that, you should focus on Progressbar.props.valueDisplay.style.color.

If you're looking to style the bar itself, you need to do two things:

1. Delete the ProgressBar.props.bar.color property.

2. In your style class, you need to set the background-color property.