Add a badge CSS style for tables

[uhafner]

What feature do you want to see added?

For table cells we currently have the styling

jenkins-table__link jenkins-table__badge model-link inside

to show a badge-style link for model elements:

It would be helpful for plugins like the warnings and code coverage plugins (and maybe a lot of otheres), if there would be similar stylings available to show plugin results with a specific color. E.g. the code coverage as a percentage, where the background color can be customized by the plugin, e.g. red on bad coverage results, green for good, etc.

I tried to extract that part of the CSS from our Jenkins styles but I must admit that I did not understand how you achieved this existing styling in our complex CSS and LESS structure. Additionally, it might make sense if we would provide such kind of styling in a general way in Jenkins, so other plugins would not reinvent the wheel.

Upstream changes

No response

[timja]

cc @janfaracik

[janfaracik]

Good idea! :)

I'm working on just that for the eventual plugins manager redesign as demoed way back in the day on the UX sig.

It'll be as simple as adding a colour class e.g. jenkins-!-color-pink to change the tag colour.

[janfaracik]

I've opened a PR for this jenkinsci/jenkins#6538 :)

[uhafner]

Ok thanks! If I understand correctly, jenkinsci/jenkins#6538 only adds the colors. That means the badge still is not available as a separate CSS class?

[janfaracik]

Ok thanks! If I understand correctly, jenkinsci/jenkins#6538 only adds the colors. That means the badge still is not available as a separate CSS class?

If I'm understanding correctly, you'd want the 'badge' component on a page, not inside a table? Currently the badge has to be inside a table, I can work on changing that if so 👍

[uhafner]

No, I actually want the badge in the table but I did only manage to get the badge (jenkins-table__badge) that has the additional space for the model links, or am I missing something?

But having the badge as a separate concept globally would make sense as well 😄
E.g. we could show the number of warnings, code coverage percentage as a decorator for side panel links.

[mPokornyETM]

Will welcome the badge as extra component as well