Bug - Label - Links render with too little contrast in a colored Label.

[mvollmer]

Describe the problem
This is an issue with

• Patternfly 5

• Patternfly 6

• other

With the update from 6.4.0 to 6.5.2, links in colored labels now look "wrong".

They used to look like this:

and now they look like this:

Note how they used to have a text-colored underline, which works ok with the redish background. Now they have always-grey "underdots" which don't seem to take contrast with the background into consideration.

Is this even a supported thing to do? (Putting links into labels.) I think the fact that they turn out to be black instead of the usual blue in PF 6.4 is already unintended, maybe.

Any advice for how to design this properly would be appreciated.

Here is the code that produces that label:

<Label color="red"
                icon={<ErrorCircleOIcon />}
                className="resource-state-text"
                closeBtnAriaLabel={_("Close")}
                onClose={dismissError}
                id={`${valueId}-error`}>
                <>
                    {_("Failed")}
                    <Button variant="link" isInline>{_("view more...")}</Button>
                </>
            </Label>

The CSS for resource-state-class changes the layout, but doesn't do anything about colors or text styles, as far as I can see.

---

Jira Issue: PF-4274

[coderabbitai]

🔗 Related PRs

patternfly/patternfly#8248 - fix(jump-links): adjust accent line for unified theme [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[mcoker]

Hey @mvollmer! The recommended way to create a link or action in a label is to use the href or onClick props, which makes the entire label clickable - https://www.patternfly.org/components/label#label

[mvollmer]

Hey @mvollmer! The recommended way to create a link or action in a label is to use the href or onClick props, which makes the entire label clickable - https://www.patternfly.org/components/label#label

Thanks! That makes sense.

However, with just isClickable or onClick, the Label will look like this:

A Label with isEditable looks like a link, presumably to statically indicate that it can be clicked on:

I was expecting a clickable Label to also look like a link for the same reason. Is it intentional that it does not?

[mcoker]

@mvollmer they are the same until you hover/focus on them, but that's good feedback. The only guidance I could find is in the label component design guidelines with this recommendation:

Use the filled option to add more visual prominence to a label. If your use case requires a mix of clickable and non-clickable labels, consider using 1 type for clickable and another for non-clickable. Whatever convention you choose, be sure to maintain consistency through your UI.

@andrew-ronaldson @lboehling do you have any feedback or anything to add?

[mvollmer]

The only guidance I could find is in the label component design guidelines with this recommendation:

Thanks! I am now in favor of just not using a Label to show error messages and instead use toast notifications (cockpit-project/cockpit-machines#2666)