Fix underline behavior in Link component (#2249)

Co-authored-by: camertron <camertron@users.noreply.github.com>
primer · Sep 19, 2023 · 1209d24 · 1209d24
1 parent 9885a5d
commit 1209d24
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 4 deletions.
diff --git a/.changeset/olive-melons-smell.md b/.changeset/olive-melons-smell.md
@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+Fix underline behavior in Link component
+
+<!-- Changed components: Primer::Beta::Link -->
diff --git a/...ht/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png b/...ht/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png
diff --git a/...ht/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png b/...ht/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png
diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss
@@ -2,6 +2,7 @@
 
 .Link {
   color: var(--fgColor-accent);
+  text-decoration: none;
 
   &:hover {
     text-decoration: underline;
@@ -18,6 +19,10 @@
   }
 }
 
+.Link--underline {
+  text-decoration: underline;
+}
+
 .Link--primary {
   color: var(--fgColor-default) !important;
 

diff --git a/app/components/primer/beta/link.rb b/app/components/primer/beta/link.rb
@@ -35,7 +35,7 @@ class Link < Primer::Component
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
       # @param underline [Boolean] Whether or not to underline the link.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
+      def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: false, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
         @id = @system_arguments[:id]
@@ -47,7 +47,7 @@ def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: true,
           SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
           "Link",
           "Link--muted" => muted,
-          "no-underline" => !underline
+          "Link--underline" => underline
         )
       end
 

diff --git a/static/classes.json b/static/classes.json
@@ -362,6 +362,9 @@
   "Link--secondary": [
     "Primer::Beta::Link"
   ],
+  "Link--underline": [
+    "Primer::Beta::Link"
+  ],
   "Overlay": [
     "Primer::Alpha::Dialog",
     "Primer::Alpha::Overlay"

diff --git a/test/components/beta/link_test.rb b/test/components/beta/link_test.rb
@@ -50,10 +50,16 @@ def test_renders_muted_and_custom_css_class
     assert_selector(".foo.Link--muted")
   end
 
+  def test_renders_underline
+    render_inline(Primer::Beta::Link.new(href: "http://google.com", underline: true)) { "content" }
+
+    assert_selector(".Link--underline")
+  end
+
   def test_renders_no_underline
-    render_inline(Primer::Beta::Link.new(href: "http://google.com", underline: false)) { "content" }
+    render_inline(Primer::Beta::Link.new(href: "http://google.com")) { "content" }
 
-    assert_selector(".no-underline")
+    refute_selector(".Link--underline")
   end
 
   def test_schemes