Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix underline behavior in Link component #2249

Merged
merged 13 commits into from
Sep 19, 2023
7 changes: 7 additions & 0 deletions .changeset/olive-melons-smell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@primer/view-components': patch
---

Fix underline behavior in Link component

<!-- Changed components: Primer::Beta::Link -->
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions app/components/primer/beta/link.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

.Link {
color: var(--fgColor-accent);
text-decoration: none;

&:hover {
text-decoration: underline;
Expand All @@ -18,6 +19,10 @@
}
}

.Link--underline {
text-decoration: underline;
}

.Link--primary {
color: var(--fgColor-default) !important;

Expand Down
4 changes: 2 additions & 2 deletions app/components/primer/beta/link.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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
camertron marked this conversation as resolved.
Show resolved Hide resolved
)
end

Expand Down
3 changes: 3 additions & 0 deletions static/classes.json
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,9 @@
"Link--secondary": [
"Primer::Beta::Link"
],
"Link--underline": [
"Primer::Beta::Link"
],
"Overlay": [
"Primer::Alpha::Dialog",
"Primer::Alpha::Overlay"
Expand Down
10 changes: 8 additions & 2 deletions test/components/beta/link_test.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading