[myfaces-tobago] branch t5_selectMany updated: feat(selectMany): badge styling

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/t5_selectMany by this push:
     new c2c3d91e24 feat(selectMany): badge styling
c2c3d91e24 is described below

commit c2c3d91e24722047ffa356c63092fb78de2a92bc
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Nov 3 14:01:49 2022 +0100

    feat(selectMany): badge styling
    
    * use tobago-badge tag instead of span to have the style applied automatically
    
    Issue: TOBAGO-2159
---
 tobago-theme/src/main/scss/_tobago.scss                             | 6 +++---
 .../tobago-theme-standard/src/main/ts/tobago-select-many.ts         | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 5275976bdc..272a59ac8c 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1222,12 +1222,12 @@ tobago-select-many {
       padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
     }
 
-    .badge + .tobago-filter {
+    .btn-group + .tobago-filter {
       margin-left: 0.25rem;
     }
 
-    .badge {
-      margin: 0.125rem;
+    .btn-group {
+      margin-right: 0.25rem;
     }
 
     .tobago-filter {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
index ead14f6c17..4821d19dda 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -169,8 +169,8 @@ class SelectMany extends HTMLElement {
   getRowTemplate(value: string, text: string): string {
     return `
 <span class="btn-group" role="group" data-tobago-value="${value}">
-  <span class="btn badge text-bg-primary">${text}</span>
-  <button type="button" class="btn badge btn-secondary"><i class="bi-x-lg"></i></button>
+  <tobago-badge class="badge text-bg-primary btn">${text}</tobago-badge>
+  <button type="button" class="tobago-button btn btn-secondary badge"><i class="bi-x-lg"></i></button>
 </span>`;
   }