design-library-plugin
design-library-plugin copied to clipboard
jenkinsci
Add a badge CSS style for tables
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
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.
I've opened a PR for this https://github.com/jenkinsci/jenkins/pull/6538 :)
Ok thanks! If I understand correctly, https://github.com/jenkinsci/jenkins/pull/6538 only adds the colors. That means the badge still is not available as a separate CSS class?
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 👍
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.
