Merge branch '54544-update-project-topics-styling-to-use-badges-design' into 'master'

Resolve "Update project topics styling to use badges design"

Closes #54544

See merge request gitlab-org/gitlab-ce!24415

4 files changed, 25 insertions, 4 deletions

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 15fe331f9e4..cb449b642e7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -89,6 +89,10 @@ hr {
 .str-truncated {
   @include str-truncated;
 
+  &-30 {
+    @include str-truncated(30%);
+  }
+
   &-60 {
     @include str-truncated(60%);
   }
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 7694217eb28..0be41b5888c 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -21,9 +21,14 @@
           - if @project.tag_list.present?
             %span.home-panel-topic-list.d-inline-flex.prepend-left-8.has-tooltip{ data: { container: 'body' }, title: @project.has_extra_topics? ? @project.tag_list.join(', ') : nil }
               = sprite_icon('tag', size: 16, css_class: 'icon append-right-4')
-              = @project.topics_to_show
+
+              - @project.topics_to_show.each do |topic|
+                %a{ class: 'badge badge-pill badge-secondary append-right-5 str-truncated-30', href: explore_projects_path(tag: topic) }
+                  = topic.titleize
+
               - if @project.has_extra_topics?
-                = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
+                .text-nowrap
+                  = _("+ %{count} more") % { count: @project.count_of_extra_topics_not_shown }
 
 
     .project-repo-buttons.col-md-12.col-lg-6.d-inline-flex.flex-wrap.justify-content-lg-end
diff --git a/changelogs/unreleased/54544-update-project-topics-styling-to-use-badges-design.yml b/changelogs/unreleased/54544-update-project-topics-styling-to-use-badges-design.yml
new file mode 100644
index 00000000000..de12c66e9ef
--- /dev/null
+++ b/changelogs/unreleased/54544-update-project-topics-styling-to-use-badges-design.yml
@@ -0,0 +1,5 @@
+---
+title: Update project topics styling to use badges design
+merge_request: 24415
+author:
+type: changed
diff --git a/spec/features/projects_spec.rb b/spec/features/projects_spec.rb
index f7efc3f325c..bc36c6f948f 100644
--- a/spec/features/projects_spec.rb
+++ b/spec/features/projects_spec.rb
@@ -110,16 +110,23 @@ describe 'Project' do
 
     it 'shows project topics' do
       project.update_attribute(:tag_list, 'topic1')
+
       visit path
+
       expect(page).to have_css('.home-panel-topic-list')
-      expect(page).to have_content('topic1')
+      expect(page).to have_link('Topic1', href: explore_projects_path(tag: 'topic1'))
     end
 
     it 'shows up to 3 project tags' do
       project.update_attribute(:tag_list, 'topic1, topic2, topic3, topic4')
+
       visit path
+
       expect(page).to have_css('.home-panel-topic-list')
-      expect(page).to have_content('topic1, topic2, topic3 + 1 more')
+      expect(page).to have_link('Topic1', href: explore_projects_path(tag: 'topic1'))
+      expect(page).to have_link('Topic2', href: explore_projects_path(tag: 'topic2'))
+      expect(page).to have_link('Topic3', href: explore_projects_path(tag: 'topic3'))
+      expect(page).to have_content('+ 1 more')
     end
   end