Add additional span inside the link to be able to limit the underline…

… effect to the actual text instead of overflowing into the white space between text and leading/trailing icons

app/components/primer/beta/link.html.erb

@@ -1,15 +1,13 @@
 <%= render Primer::ConditionalWrapper.new(condition: tooltip?, trim: true, tag: :span, position: :relative) do %>
   <%= render(Primer::BaseComponent.new(trim: true, **@system_arguments)) do %>
-    <% if leading_visual %>
-      <span>
+    <%= render(Primer::BaseComponent.new(tag: :span, classes: "Link-content", trim: true)) do %>
+      <% if leading_visual %>
         <%= leading_visual %>
-      </span>
-    <% end %>
-    <%= content %>
-    <% if trailing_visual %>
-      <span>
+      <% end %>
+      <%= content %>
+      <% if trailing_visual %>
         <%= trailing_visual %>
-      </span>
+      <% end %>
     <% end %>
   <% end %>
   <%= tooltip if tooltip? %>

app/components/primer/beta/link.pcss

@@ -67,3 +67,10 @@
     color: inherit !important;
   }
 }
+
+.Link-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-4);
+  text-decoration: inherit;
+}

test/components/beta/link_test.rb

@@ -15,7 +15,7 @@ def test_renders_content_and_not_muted_link
   def test_renders_no_additional_whitespace
     result = render_inline(Primer::Beta::Link.new(href: "http://joe-jonas-shirtless.com")) { "content" }
 
-    assert_match(%r{^<a[^>]+>content</a>$}, result.to_s)
+    assert_match(%r{^<a[^>]+><span[^>]+>content</span></a>$}, result.to_s)
   end
 
   def test_renders_without_trailing_newline
@@ -111,7 +111,7 @@ def test_renders_trailing_visual_icon
     end
 
     assert_selector("a[href='http://google.com']")
-    assert_selector("a span:first-child .octicon-plus")
-    assert_selector("a span:nth-child(2) .octicon-alert")
+    assert_selector("a svg:first-child.octicon-plus")
+    assert_selector("a svg:nth-child(2).octicon-alert")
   end
 end