Merge branch '344360-make-topics-badges-pj-compliant' into 'master'

Make topics badges pajamas compliant

See merge request gitlab-org/gitlab!76164

app/views/shared/projects/_topics.html.haml

 - cache_enabled = false unless local_assigns[:cache_enabled] == true
 - max_project_topic_length = 15
-- project_topics_classes = "badge badge-pill badge-secondary gl-mr-2"
 
 - if project.topics.present?
   = cache_if(cache_enabled, [project, :topic_list], expires_in: 1.day) do
@@ -10,11 +9,11 @@
       - project.topics_to_show.each do |topic|
         - explore_project_topic_path = topic_explore_projects_path(topic_name: topic)
         - if topic.length > max_project_topic_length
-          %a{ class: "#{ project_topics_classes } str-truncated-30 has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
-            = truncate(topic, length: max_project_topic_length)
+          %a.gl-mr-3.has-tooltip{ data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
+            = gl_badge_tag truncate(topic, length: max_project_topic_length)
         - else
-          %a{ class: project_topics_classes, href: explore_project_topic_path, itemprop: 'keywords' }
-            = topic
+          %a.gl-mr-3{ href: explore_project_topic_path, itemprop: 'keywords' }
+            = gl_badge_tag topic
 
       - if project.has_extra_topics?
         - title = _('More topics')
@@ -23,10 +22,10 @@
             - project.topics_not_shown.each do |topic|
               - explore_project_topic_path = topic_explore_projects_path(topic_name: topic)
               - if topic.length > max_project_topic_length
-                %a{ class: "#{ project_topics_classes } gl-mb-3 str-truncated has-tooltip", data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
-                  = truncate(topic, length: max_project_topic_length)
+                %a.gl-mr-3.gl-mb-3.has-tooltip{ data: { container: "body" }, title: topic, href: explore_project_topic_path, itemprop: 'keywords' }
+                  = gl_badge_tag truncate(topic, length: max_project_topic_length)
               - else
-                %a{ class: "#{ project_topics_classes } gl-mb-3", href: explore_project_topic_path, itemprop: 'keywords' }
-                  = topic
+                %a.gl-mr-3.gl-mb-3{ href: explore_project_topic_path, itemprop: 'keywords' }
+                  = gl_badge_tag topic
         .text-nowrap{ role: 'button', tabindex: 0, data: { toggle: 'popover', html: 'true', placement: 'top', title: title, content: content } }
           = _("+ %{count} more") % { count: project.count_of_extra_topics_not_shown }