Provide built-in css classes for text badges

[cronik]

Restores stylized text only badges lost in 2.0 refactor. Text only badges (no icon or link) will render with rounded corners and default background color that matches the text color but with some opacity.

Before:

After:

Submitter checklist

• Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
• Ensure that the pull request title represents the desired changelog entry
• Please describe what you did
• Link to relevant issues in GitHub or Jira
• Link to relevant pull requests, esp. upstream and downstream changes
• Ensure you have provided tests - that demonstrates feature works or fixes the issue

[strangelookingnerd]

The functionality itself was not really „lost“ but removed intentionally. I wanted to simplify the implementation of this plugin and more importantly give users full control over the badge styling. Any „implicit styling“ was therefore removed and I’m not really convinced that restoring it is a good idea.

Maybe a provocative question, but what if I actually want a text only badge without border / background?

Possibly related #177

[cronik]

I was able to reproduce something with a similar effect with a bunch of css

addBadge(text: "1.0.0", style: 'color: var(--green); border-radius: 5px; background: var(--light-green); padding: 0 0.4rem !important;')

Users need to dig deep into css to make a simple text tag look somewhat presentable. The end user pays the cost of the plugin simplification given the same could have been accomplished before with:

addShortText(text: '1.0.0', color: 'success')

It appears this cost transfer was intentional so as a compromise would you be ok with bundling some default css classes that can be explicitly added rather than included by default?

addBadge(text: "1.0.0", style: 'color: var(--success-color);', cssClass: 'badge-textTag')

If that sounds reasonable I can rework this PR and update documentation.

[strangelookingnerd]

Having a set of pre-defined CSS classes sounds like a great idea. We could add those to the documentation similar to the various examples for symbols.

[cronik]

Refactored to include 2 text badge css classes:

• badge-text--background - Adds colored background with rounded corners.
• badge-text--bordered - Adds border that is the same color as the text.

Examples on how they can be combined and tweaked with the style parameter

addBadge(text: "1.0.0", style: 'color: var(--success-color);', cssClass: 'badge-text--background')
addBadge(text: "2.0.0", style: 'color: var(--warning-color);', cssClass: 'badge-text--bordered')
addBadge(text: "3.0.0", style: 'color: var(--warning-color); border-radius: 6px;', cssClass: 'badge-text--bordered')
addBadge(text: "4.0.0", style: 'color: var(--warning-color);', cssClass: 'badge-text--background badge-text--bordered')
addBadge(text: "5.0.0", cssClass: 'badge-text--background badge-text--bordered')

[mPokornyETM]

Refactored to include 2 text badge css classes:

• badge-text--background - Adds colored background with rounded corners.
• badge-text--bordered - Adds border that is the same color as the text.

Examples on how they can be combined and tweaked with the style parameter

addBadge(text: "1.0.0", style: 'color: var(--success-color);', cssClass: 'badge-text--background')
addBadge(text: "2.0.0", style: 'color: var(--warning-color);', cssClass: 'badge-text--bordered')
addBadge(text: "3.0.0", style: 'color: var(--warning-color); border-radius: 6px;', cssClass: 'badge-text--bordered')
addBadge(text: "4.0.0", style: 'color: var(--warning-color);', cssClass: 'badge-text--background badge-text--bordered')
addBadge(text: "5.0.0", cssClass: 'badge-text--background badge-text--bordered')

it will be fine, when you bring this examplesalso in the 'official' (readme) documentation

[mPokornyETM]

LGTM

[strangelookingnerd]

I’ll wait for #200 to be resolved before releasing this change. Thanks for the contribution @cronik

[jimklimov]

FWIW, in my use-cases I went with a CSS file that can be served from $JENKINS_HOME/userContent and requested via theme plugins (also, several CSS files can be served by one including them), and applying one of several classes depending on the message and its severity, e.g.

• https://github.com/networkupstools/nut/blob/master/docs/images/ci/ci-root.css
• https://github.com/networkupstools/jenkins-dynamatrix/blob/master/jenkins-dynamatrix-badges.css
• https://github.com/networkupstools/jenkins-dynamatrix/blob/176b2a0e00441a42b141e949338d6b4d686751ad/vars/reportBuildCause.groovy#L107-L112
• https://github.com/networkupstools/jenkins-dynamatrix/blob/176b2a0e00441a42b141e949338d6b4d686751ad/src/org/nut/dynamatrix/Dynamatrix.groovy#L599-L602
• https://github.com/networkupstools/jenkins-dynamatrix/blob/176b2a0e00441a42b141e949338d6b4d686751ad/vars/dynamatrixPipeline.groovy#L1231-L1244
• etc.

...this did partially start out from an attempt to recreate the Badge v1.9.x experience with the newer plugin releases, which this PR I think largely restores as a choosable option :)