From c2e0ff28192e04da31e698faae0c9c0bd441140b Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 18 Nov 2022 05:57:59 +0000 Subject: [PATCH 1/4] Add `Link` styles from PCSS --- app/components/primer/beta/link.pcss | 60 ++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 app/components/primer/beta/link.pcss diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss new file mode 100644 index 0000000000..f29cef3d91 --- /dev/null +++ b/app/components/primer/beta/link.pcss @@ -0,0 +1,60 @@ +// Links + +.Link { + color: var(--color-accent-fg); + + &:hover { + text-decoration: underline; + cursor: pointer; + } + + &:focus, + &:focus-visible { + outline-offset: 0; + } +} + +.Link--primary { + color: var(--color-fg-default) !important; + + &:hover { + color: var(--color-accent-fg) !important; + } +} + +.Link--secondary { + color: var(--color-fg-muted) !important; + + &:hover { + color: var(--color-accent-fg) !important; + } +} + +.Link--muted { + color: var(--color-fg-muted) !important; + + &:hover { + color: var(--color-accent-fg) !important; + text-decoration: none; + } +} + +// Set the link color only on hover +// Useful when you want only part of a link to turn blue on hover +.Link--onHover { + &:hover { + color: var(--color-accent-fg) !important; + text-decoration: underline; + cursor: pointer; + } +} + +// When using a color utility class inside of a link class, +// color should change with link on hover. +.Link--secondary, +.Link--primary, +.Link--muted { + &:hover [class*='color-fg'] { + color: inherit !important; + } +} From da5fe6fc56780ca5a0e0ede1e7588db25034b0c2 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 18 Nov 2022 06:11:06 +0000 Subject: [PATCH 2/4] Convert .scss to .pcss --- app/components/primer/beta/link.pcss | 12 +++++++----- app/components/primer/primer.pcss | 1 + demo/app/assets/stylesheets/application.css | 1 - 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss index f29cef3d91..488577b877 100644 --- a/app/components/primer/beta/link.pcss +++ b/app/components/primer/beta/link.pcss @@ -1,4 +1,4 @@ -// Links +/* Link */ .Link { color: var(--color-accent-fg); @@ -39,8 +39,9 @@ } } -// Set the link color only on hover -// Useful when you want only part of a link to turn blue on hover +/* Set the link color only on hover +** Useful when you want only part of a link to turn blue on hover */ + .Link--onHover { &:hover { color: var(--color-accent-fg) !important; @@ -49,8 +50,9 @@ } } -// When using a color utility class inside of a link class, -// color should change with link on hover. +/* When using a color utility class inside of a link class, +** color should change with link on hover. */ + .Link--secondary, .Link--primary, .Link--muted { diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss index 86dca8dc9c..ce5294d187 100644 --- a/app/components/primer/primer.pcss +++ b/app/components/primer/primer.pcss @@ -10,6 +10,7 @@ @import "./beta/counter.pcss"; @import "./beta/flash.pcss"; @import "./beta/label.pcss"; +@import "./beta/link.pcss"; @import "./beta/blankslate.pcss"; @import "./beta/progress_bar.pcss"; @import "./beta/truncate.pcss"; diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css index ad3d3578ff..e3b58ef5eb 100644 --- a/demo/app/assets/stylesheets/application.css +++ b/demo/app/assets/stylesheets/application.css @@ -9,7 +9,6 @@ *= require @primer/css/dist/table-object.css *= require @primer/css/dist/forms.css *= require @primer/css/dist/layout.css - *= require @primer/css/dist/links.css *= require @primer/css/dist/navigation.css *= require @primer/css/dist/pagination.css *= require @primer/css/dist/tooltips.css From 6ac23540d5bd4e31a41a842eccb7de09046eb0e7 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 18 Nov 2022 06:32:42 +0000 Subject: [PATCH 3/4] Update Link preview --- previews/primer/beta/link_preview.rb | 40 +++++++++++++++---- test/css/component_specific_selectors_test.rb | 3 ++ 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/previews/primer/beta/link_preview.rb b/previews/primer/beta/link_preview.rb index 9ee83a74ac..976532dbdb 100644 --- a/previews/primer/beta/link_preview.rb +++ b/previews/primer/beta/link_preview.rb @@ -14,14 +14,9 @@ def playground(tag: :a, scheme: :default, muted: false, underline: true) render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" } end - # @label Default Options - # - # @param underline [Boolean] - # @param muted [Boolean] - # @param tag [Symbol] select [a, span] - # @param scheme [Symbol] select [default, primary, secondary] - def default(tag: :a, scheme: :default, muted: false, underline: true) - render(Primer::Beta::Link.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" } + # @label Default + def default + render(Primer::Beta::Link.new(href: "#")) { "This is a link!" } end # @label With Tooltip @@ -36,6 +31,35 @@ def tooltip(tag: :a, scheme: :default, muted: false, underline: true) "Link with tooltip" end end + + # @!group Options + # + # @label Default + def options_default + render(Primer::Beta::Link.new(href: "#")) { "Link" } + end + + # @label Primary + def options_primary + render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Link" } + end + + # @label Secondary + def options_secondary + render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Link" } + end + + # @label Muted + def options_muted + render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } + end + + # @label Without underline + def options_underline + render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } + end + # + # @!endgroup end end end diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb index 4aeabc9d62..3bddb303c1 100644 --- a/test/css/component_specific_selectors_test.rb +++ b/test/css/component_specific_selectors_test.rb @@ -71,6 +71,9 @@ class ComponentSpecificSelectorsTest < Minitest::Test ".Label--open", ".Label--closed" ], + Primer::Beta::Link => [ + ".Link" + ], Primer::Beta::Blankslate => [ ".blankslate code", ".blankslate-large img", From 942afdaf67104115fce84509e61488ba95d2cf8e Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 18 Nov 2022 15:36:33 +0900 Subject: [PATCH 4/4] Create olive-vans-think.md --- .changeset/olive-vans-think.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/olive-vans-think.md diff --git a/.changeset/olive-vans-think.md b/.changeset/olive-vans-think.md new file mode 100644 index 0000000000..0461142e81 --- /dev/null +++ b/.changeset/olive-vans-think.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Move `Link` styles to PVC