diff --git a/.changeset/olive-melons-smell.md b/.changeset/olive-melons-smell.md new file mode 100644 index 0000000000..8499e8bf54 --- /dev/null +++ b/.changeset/olive-melons-smell.md @@ -0,0 +1,7 @@ +--- +'@primer/view-components': patch +--- + +Fix underline behavior in Link component + + diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png index cdff2bb418..f1b8ccb55d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png index b7b4be514c..2811a01217 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/link/default/focused.png differ diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss index c4050e7727..647736b767 100644 --- 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 index f776298d26..91462e6ae7 100644 --- 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 index c187d3aca1..47e2306bc0 100644 --- 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 index e79f3649ca..dbfbd7e94c 100644 --- 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