add css to custom tags and display labels with correct UI

app/assets/stylesheets/02_utils.scss

@@ -37,7 +37,7 @@
 }
 
 .text-right {
-  text-align: right;
+  text-align: right !important;
 }
 
 .text-sm {

app/assets/stylesheets/dsfr.scss

@@ -263,12 +263,7 @@ button.fr-tag-bug {
   text-transform: lowercase;
 }
 
-// we use badge with small checkbox - to align them we need to reduce the margin
+// We don't want badge to split in two lines
-.fr-checkbox-group--sm.fr-checkbox-custom-with-labels input[type="checkbox"] + label::before {
+.fr-tag {
-  margin-top: 0.15rem;
+  white-space: nowrap;
-}
-
-// we use badge with checkbox so we need to add a background white to the uncheched checkbox
-.fr-checkbox-group input[type="checkbox"] + label::before {
-  background-color: #FFFFFF;
 }

app/assets/stylesheets/tags.scss

@@ -0,0 +1,38 @@
+@import "colors";
+@import "constants";
+
+$colors:
+"green-tilleul-verveine",
+"green-bourgeon",
+"green-emeraude",
+"green-menthe",
+"green-archipel",
+"blue-ecume",
+"blue-cumulus",
+"purple-glycine",
+"pink-macaron",
+"pink-tuile",
+"yellow-tournesol",
+"yellow-moutarde",
+"orange-terre-battue",
+"brown-cafe-creme",
+"brown-caramel",
+"brown-opera",
+"beige-gris-galet";
+
+
+@each $color in $colors {
+  .fr-tag--#{$color},
+    a.fr-tag--#{$color},
+    button.fr-tag--#{$color},
+    input[type=button].fr-tag--#{$color},
+    input[type=image].fr-tag--#{$color},
+    input[type=reset].fr-tag--#{$color},
+    input[type=submit].fr-tag--#{$color} {
+      --idle:transparent;
+      --hover:var(--background-action-low-#{$color}-hover);
+      --active:var(--background-action-low-#{$color}-active);
+      background-color:var(--background-action-low-#{$color});
+      color:var(--text-action-high-#{$color})
+    }
+}

app/helpers/dossier_helper.rb

@@ -118,12 +118,17 @@ module DossierHelper
     tag.span(Dossier.human_attribute_name("pending_correction.resolved"), class: ['fr-badge fr-badge--sm fr-badge--success super', html_class], role: 'status')
   end
 
-  def label_badges(badges)
+  def tags_label(tags)
-    badges.map { label_badge(_1[1], _1[2]) }.join('<br>').html_safe
+    if tags.count > 1
+      tag.div(tags.map { tag_label(_1[1], _1[2]) }.join('<br>').html_safe, class: 'fr-tags-group')
+    else
+      tag = tags.first
+      tag_label(tag[1], tag[2])
+    end
   end
 
-  def label_badge(name, color)
+  def tag_label(name, color)
-    tag.span(name, class: ["fr-badge fr-badge--sm fr fr-badge--#{color}"])
+    tag.span(name, class: "fr-tag fr-tag--sm  fr-tag--#{color}")
   end
 
   def demandeur_dossier(dossier)

app/views/instructeurs/dossiers/_header_top.html.haml

@@ -29,8 +29,7 @@
   .fr-mb-3w
     - if dossier.procedure_labels.present?
       - dossier.procedure_labels.each do |label|
-        .fr-badge.fr-badge--sm{ class: "fr-badge--#{label.color}" }
+        = tag_label(label.name, label.color)
-          = label.name
 
     = render Dropdown::MenuComponent.new(wrapper: :span, button_options: { class: ['fr-btn--sm fr-btn--tertiary-no-outline fr-pl-1v']}, menu_options: { class: ['dropdown-label left-aligned'] }) do |menu|
       - if dossier.procedure_labels.empty?
@@ -42,6 +41,6 @@
           %fieldset.fr-fieldset.fr-mt-2w.fr-mb-0
             = f.collection_check_boxes :procedure_label_id, dossier.procedure.procedure_labels, :id, :name, include_hidden: false do |b|
               .fr-fieldset__element
-                .fr-checkbox-group.fr-checkbox-group--sm.fr-checkbox-custom-with-labels.fr-mb-1w
+                .fr-checkbox-group.fr-checkbox-group--sm.fr-mb-1w
                   = b.check_box(checked: DossierLabel.find_by(dossier_id: dossier.id, procedure_label_id: b.value).present?  )
-                  = b.label(class: "fr-label fr-badge fr-badge--sm fr-badge--#{b.object.color}") { b.text }
+                  = b.label(class: "fr-label fr-tag fr-tag--sm fr-tag--#{b.object.color}") { b.text }

app/views/instructeurs/procedures/show.html.haml

@@ -132,12 +132,12 @@
                     %td
                       - if p.hidden_by_administration_at.present?
                         %span.cell-link
-                          = column.is_a?(Hash) ? label_badges(column[:value]) : column
+                          = column.is_a?(Hash) ? tags_label(column[:value]) : column
                           - if p.hidden_by_user_at.present?
                             = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}"
                       - else
                         %a.cell-link{ href: path }
-                          = column.is_a?(Hash) ? label_badges(column[:value]) : column
+                          = column.is_a?(Hash) ? tags_label(column[:value]) : column
                           = "- #{t("views.instructeurs.dossiers.deleted_reason.#{p.hidden_by_reason}")}" if p.hidden_by_user_at.present?
 
                   %td.status-col