Add link underline effect to PageHeader descriptions

Author: HDinger

.changeset/hip-items-sip.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Add link underline effect to PageHeader descriptions and FormControl captions

app/components/primer/alpha/text_field.pcss

@@ -34,6 +34,10 @@
   color: var(--fgColor-muted);
 }
 
+.FormControl-caption a {
+  text-decoration: underline;
+}
+
 /* inline validation message */
 .FormControl-inlineValidation {
   display: flex;

app/components/primer/open_project/page_header.pcss

@@ -47,6 +47,11 @@
   flex: 1 100%;
 }
 
+.PageHeader-description a {
+  /* Ensure the accessibility is met, given that the description is written in light grey */
+  text-decoration: underline;
+}
+
 .PageHeader-tabNavBar {
   overflow: auto;
 }

previews/primer/open_project/page_header_preview.rb

@@ -266,6 +266,11 @@ def skip_breadcrumb_item
                                        "Baz"])
         end
       end
+
+      # @label With a link in the description
+      def description
+        render_with_template(template: "primer/open_project/page_header_preview/description")
+      end
     end
   end
 end

previews/primer/open_project/page_header_preview/description.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::OpenProject::PageHeader.new) do |component| %>
+  <% component.with_title do %>
+    Great news
+  <% end %>
+  <% component.with_description do %>
+    <%= render(Primer::Beta::Text.new) do %>
+      Last updated by
+      <%= render(Primer::Beta::Link.new(href: "/foo")) {"user Foo"} %>
+    <% end %>
+  <% end %>
+  <% component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]) %>
+<% end %>

test/css/component_specific_selectors_test.rb

@@ -69,6 +69,7 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".FormControl-inlineValidation--success",
       ".FormControl-checkbox",
       ".FormControl-radio",
+      ".FormControl-caption a"
     ],
     Primer::Alpha::ButtonMarketing => [
       ".btn-mktg.disabled",

test/system/open_project/page_header_test.rb

@@ -8,4 +8,13 @@ def test_renders_component
 
     assert_selector(".PageHeader")
   end
+
+  def test_highlights_links_in_description
+    visit_preview(:description)
+
+    assert_selector(".PageHeader-description")
+    assert_selector(".PageHeader-description a") do |link|
+      link.assert_matches_style("text-decoration-line" => "underline")
+    end
+  end
 end