Add text badge css classes

Add CSS classes for text only badges to simplify common styling consistent with the Jenkins design library.
jenkinsci · Oct 14, 2024 · f907020 · f907020
1 parent 46e3895
commit f907020
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 3 deletions.
diff --git a/src/main/resources/com/jenkinsci/plugins/badge/action/BadgeAction/badge.jelly b/src/main/resources/com/jenkinsci/plugins/badge/action/BadgeAction/badge.jelly
@@ -24,7 +24,7 @@ THE SOFTWARE.
 -->
 
 <?jelly escape-by-default='false'?>
-<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:st="jelly:stapler">
     <j:choose>
         <!-- icon -->
         <j:when test="${it.icon != null &amp;&amp; it.icon != ''}">
@@ -48,6 +48,7 @@ THE SOFTWARE.
         <j:otherwise>
             <!-- text -->
             <j:if test="${it.text != null &amp;&amp; it.text != ''}">
+                <st:adjunct includes="com.jenkinsci.plugins.badge.assets"/>
                 <j:choose>
                     <!-- text with link -->
                     <j:when test="${it.link != null &amp;&amp; it.link != ''}">

diff --git a/src/main/resources/com/jenkinsci/plugins/badge/assets.css b/src/main/resources/com/jenkinsci/plugins/badge/assets.css
@@ -0,0 +1,44 @@
+.badge-text--background {
+    display: inline-block;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0 0.4rem !important;
+    margin: 0 0.1rem 0 0;
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+}
+
+.badge-text--background::before {
+    inset: -0px -0px;
+    border-radius: 6px;
+    background: currentColor;
+    opacity: .2;
+    content: "";
+    position: absolute;
+}
+
+.badge-text--background::after {
+    inset: -5px -0px;
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+    content: "";
+    position: absolute;
+}
+
+.badge-text--bordered {
+    display: inline-block;
+    border: 0.1rem solid currentColor;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0 0.2rem !important;
+    margin: 0 0.1rem 0 0;
+    text-decoration: none;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+}
diff --git a/src/main/resources/com/jenkinsci/plugins/badge/dsl/AddBadgeStep/help-cssClass.html b/src/main/resources/com/jenkinsci/plugins/badge/dsl/AddBadgeStep/help-cssClass.html
@@ -1,4 +1,13 @@
 <div>
-    Optional CSS class for the badge. Classes will be applied to the enclosing <code>&lt;span&gt;</code> of a badge.
-    User can also reference Jenkins built-in CSS classes such as <code>icon-sm</code> - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
+    <p>
+        Optional CSS class for the badge. Classes will be applied to the enclosing <code>&lt;span&gt;</code> of a badge.
+        User can also reference Jenkins built-in CSS classes such as <code>icon-sm</code> - see <a href="https://weekly.ci.jenkins.io/design-library">Jenkins Design Library</a> for more details.
+    </p>
+    <p>
+        This plugin includes pre-defined CSS classes for text only badges:
+        <ul>
+        <li><code>badge-text--background</code> - Adds colored background with rounded corners.</li>
+        <li><code>badge-text--bordered</code> - Adds border that is the same color as the text.</li>
+        </ul>
+    </p>
 </div>
diff --git a/src/main/resources/com/jenkinsci/plugins/badge/dsl/AddBadgeStep/help.html b/src/main/resources/com/jenkinsci/plugins/badge/dsl/AddBadgeStep/help.html
@@ -58,4 +58,15 @@
         <pre><code>addBadge icon: 'symbol-bug plugin-ionicons-api', text: 'This is a red bug with a link', style: 'color: red', link: 'https://issues.jenkins.io/browse/JENKINS-59646'</code></pre>
     </p>
 
+    <strong><a id="badge-text-with-css-class">Example: Text badge with CSS styles</a></strong>
+    <p>
+        The following example adds text only badge that uses included CSS styles:
+    <pre><code>
+    // Add shaded background color with rounded corners
+    addBadge text: 'ok', style: 'color: var(--success-color)', cssClass: 'badge-text--background'
+    // Add additional border around badge
+    addBadge text: '1.0.0', cssClass: 'badge-text--background badge-text--bordered'
+    </code></pre>
+    </p>
+
 </div>