From cb2863c6105aab1d1a34ca4f7234388624ee870a Mon Sep 17 00:00:00 2001
From: Marc Wieland <marc@whatwedo.ch>
Date: Thu, 5 Dec 2024 13:42:42 +0700
Subject: [PATCH 1/2] feat(badge): add a badge for action button and include
 utility classes for more straightforward reference

---
 src/Resources/assets/styles/_tailwind.scss     | 16 ++++++++++++++++
 src/Resources/views/includes/_action.html.twig |  7 ++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/Resources/assets/styles/_tailwind.scss b/src/Resources/assets/styles/_tailwind.scss
index 83c92bc..a0201a0 100644
--- a/src/Resources/assets/styles/_tailwind.scss
+++ b/src/Resources/assets/styles/_tailwind.scss
@@ -105,6 +105,18 @@
         }
     }
 
+    .whatwedo-utility-button-badge {
+        @apply inline-flex items-center rounded-full px-2 py-0.5 ml-2 text-xs font-medium bg-primary-500 text-white;
+
+        &--primary {
+            @apply bg-primary-500 text-white;
+        }
+
+        &--white {
+            @apply bg-white text-primary-500;
+        }
+    }
+
     // Topbar
     .whatwedo-utility-topbar {
         @apply flex flex-grow-0 flex-auto px-4 py-2 md:py-4 md:min-h-[71px] justify-end items-center lg:justify-between;
@@ -212,6 +224,10 @@
             @apply text-neutral-700 bg-transparent hover:bg-neutral-200 font-semibold;
         }
     }
+
+    .whatwedo-utility-button-badge--white {
+        @extend .whatwedo-utility-button-badge--primary;
+    }
 }
 
 /* TomSelect */
diff --git a/src/Resources/views/includes/_action.html.twig b/src/Resources/views/includes/_action.html.twig
index ac89f79..462f7c1 100644
--- a/src/Resources/views/includes/_action.html.twig
+++ b/src/Resources/views/includes/_action.html.twig
@@ -65,7 +65,12 @@
                     class: 'inline h-4 w-4'~(not actionLabel is empty ? ' mr-2' : '')
                 }) }}
             {% endif %}
-            <span class="2xl:block">{{ actionLabel }}</span>
+            <span class="2xl:block">
+                {{ actionLabel }}
+                {% if action.option('attr')['count'] is defined %}
+                    <span class="whatwedo-utility-button-badge whatwedo-utility-button-badge--white">{{ action.option('attr')['count'] }}</span>
+                {% endif %}
+            </span>
         </a>
     {% endif %}
 {% endblock %}

From a1ba49caf6a749c7ee4a757fe2acedc0e3122283 Mon Sep 17 00:00:00 2001
From: Marc Wieland <marc@whatwedo.ch>
Date: Thu, 5 Dec 2024 14:12:47 +0700
Subject: [PATCH 2/2] fix(badge): improve styling for badge

---
 src/Resources/assets/styles/_tailwind.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Resources/assets/styles/_tailwind.scss b/src/Resources/assets/styles/_tailwind.scss
index a0201a0..07f6915 100644
--- a/src/Resources/assets/styles/_tailwind.scss
+++ b/src/Resources/assets/styles/_tailwind.scss
@@ -83,6 +83,7 @@
     // Badges
     .whatwedo-utility-badge {
         @apply inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-primary-500 text-white;
+        text-wrap: nowrap;
 
         &--success {
             @apply bg-success-500;
@@ -107,6 +108,7 @@
 
     .whatwedo-utility-button-badge {
         @apply inline-flex items-center rounded-full px-2 py-0.5 ml-2 text-xs font-medium bg-primary-500 text-white;
+        text-wrap: nowrap;
 
         &--primary {
             @apply bg-primary-500 text-white;