CNV-21086: Change Not migratable label style

[hstastna]

📝 Description

This is another PR for the feature: https://issues.redhat.com/browse/CNV-21086

Change the label to Compact, Unfilled, Orange, according to the design changes and Patternfly styles.

More on Patternfly Label component:
https://www.patternfly.org/v4/components/label
https://www.patternfly.org/v4/components/label/design-guidelines#when-to-use-filled-or-unfilled-labels

🎥 Screenshots

Before:
VMs list:

VM Overview tab:

VM Details tab:

After:

[openshift-ci-robot]

@hstastna: This pull request references CNV-21086 which is a valid jira issue.

In response to this:

📝 Description

This is another PR for the feature: https://issues.redhat.com/browse/CNV-21086

Change the label to Compact, Unfilled, Orange, according to the design changes and Patternfly styles.

More on Patternfly Label component:
https://www.patternfly.org/v4/components/label
https://www.patternfly.org/v4/components/label/design-guidelines#when-to-use-filled-or-unfilled-labels

🎥 Screenshots

Before:
VMs list:

VM Overview tab:

VM Details tab:

After:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[hstastna]

@metalice @upalatucci @vojtechszocs please review

[hstastna]

@metalice @upalatucci @vojtechszocs please review

[hstastna]

@metalice @upalatucci @vojtechszocs please review

[metalice]

Can we use instead of orange hardcoded classname with patternfly variable ?

[hstastna]

Can we use instead of orange hardcoded classname with patternfly variable ?

I can try but there are more orange-like PF variables, so I don't guarantee I use the right one.
I got a very vague info from the UX, regarding this change.

[hstastna]

@metalice So I've tried to implement what you've suggested - to use the PF variable instead of the orange hardcoded color, but unfortunately, this is not how the Label PF component works.

I've tried to use color variables suggested here or also the label's ones. Nothing worked, it was ignored, and the default color was used - the grey one, for the component.

Simply, the Label component requires to use one of a few colors:

Also color is simply a prop of the Label component, and when specifying the color the other way, it doesn't work. Seems that Label component doesn't expect to get a color specification other than via its color prop. And that's why it didn't work also when I tried to add the color via className to the Label. Even when I simply used color: "orange" for the class I've created for this purpose (no, I didn't forget to import the css file). Spent hours trying. It didn't worth...

[hstastna]

@metalice @upalatucci @vojtechszocs please review

[metalice]

@metalice So I've tried to implement what you've suggested - to use the PF variable instead of the orange hardcoded color, but unfortunately, this is not how the Label PF component works.

I've tried to use color variables suggested here or also the label's ones. Nothing worked, it was ignored, and the default color was used - the grey one, for the component.

Simply, the Label component requires to use one of a few colors:

Also color is simply a prop of the Label component, and when specifying the color the other way, it doesn't work. Seems that Label component doesn't expect to get a color specification other than via its color prop. And that's why it didn't work also when I tried to add the color via className to the Label. Even when I simply used color: "orange" for the class I've created for this purpose (no, I didn't forget to import the css file). Spent hours trying. It didn't worth...

what I mean is instead of using color prop add to the component a className and in the CSS file use color: --(var) that will resolve to orange

[hstastna]

what I mean is instead of using color prop add to the component a className and in the CSS file use color: --(var) that will resolve to orange

@metalice I know what you mean and that's exactly what doesn't work, because of what I've mentioned earlier. It's because of how the Label component was designed. color prop has the priority and the default is grey, so whatever you define via className, regarding color, simply won't work.

[hstastna]

@upalatucci @vojtechszocs please review

[metalice]

what I mean is instead of using color prop add to the component a className and in the CSS file use color: --(var) that will resolve to orange

@metalice I know what you mean and that's exactly what doesn't work, because of what I've mentioned earlier. It's because of how the Label component was designed. color prop has the priority and the default is grey, so whatever you define via className, regarding color, simply won't work.

Label component support out-of-the-box in some variants but every component which is an HTML element can be override styling with CSS. if you will need in dark purple for example label use the Label from patternfly it's still possible.

for example, this is the override:

this is the result:

this is the original:

am I missing something? is this not what u meant to do? or something else completely?
if you prefer to use still the hardcoded values it's possible as the CSS change after making this example is no longer a single line but a few so it doesn't really matter anymore as it's less maintainable.

[hstastna]

am I missing something? is this not what u meant to do? or something else completely? if you prefer to use still the hardcoded values it's possible as the CSS change after making this example is no longer a single line but a few so it doesn't really matter anymore as it's less maintainable.

Thanks a lot for the more detailed suggestion, it helped me to make it work the way you've suggested! The problem was with my css file and the variables used in there. We need to use exactly such a (simple) way like in the css I've created (nothing more in there), otherwise overriding won't work and the default grey color will be used instead.

Just a note we need to change the text of the label to some kind of orange, not label's background color. And IMO overriding PF variables like that is not nice, we should avoid that unless necessary, because yes, such a code is less maintainable than using simply color="orange" only on one place and for the component, that was designed to have such a prop (color) (so it should be used instead of less simple overriding values by css), for reasons we are dealing with actually in here. Additionally, I had to explore the PF color variables to find the one that match with the same color as when using simply "orange". And I am still not sure if I used the correct color. And the designer said to me to use simply use "orange" as the color, as it was designed to be used for PF Label component 😀 🤷🏼‍♀️

[metalice]

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: hstastna, metalice

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [metalice]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment