view_components icon indicating copy to clipboard operation
view_components copied to clipboard

LinkComponent adding extraneous whitespace

Open SamMorrowDrums opened this issue 2 years ago • 1 comments

Hi, I just wanted to mention that the Primer::LinkComponent appears to add spaces automatically, which is often desirable, or a no-op depending on where it is in the markup. However, there is no way to remove them which means that in order to use a period/full-stop at the end of a sentence, you are forced to directly use an <a> tag manually.

As a concrete example, these were both ViewComponents, however the latter I had to convert into an anchor tag because otherwise I couldn't end the sentence without Privacy Policy . rendering with the extra space.

So:

<%= render(Primer::LinkComponent.new(href: "#")) { "Terms of Use" } %> and
<a href="/copilot/signup#privacy-placeholder">Privacy Policy</a>.

Renders Terms of use and Privacy Policy. and:

<%= render(Primer::LinkComponent.new(href: "#")) { "Terms of Use" } %> and
<%= render(Primer::LinkComponent.new(href: "#")) { "Privacy Policy" } %>.

Renders Terms of use and Privacy Policy . for me. I looked and I can see <a> text </a> rather than <a>text</a> which I believe is because the erb does this:

<%= render Primer::BaseComponent.new(**@system_arguments) do %>
  <%= content %>
  <%= tooltip %>
<% end %>

And I think unfortunately to actually behave correctly it might need to look like this:

<%= render Primer::BaseComponent.new(**@system_arguments) do %><%= content %><%= tooltip %><% end %>

SamMorrowDrums avatar Apr 08 '22 15:04 SamMorrowDrums

👋 Hi, I think this is still an issue. I have a couple places (issue; usages in github/github code 1, 2) where I am seeing this regression in prod and can still reproduce it locally even with this fix. I've tried poking around at it and I'm not able to figure out what's wrong, so I'd appreciate any help with this.

Something that I've noticed with this fix is that the actual link does not contain the space anymore, but something is still producing an extra space. I've tried a few different things with how I use the component too, like putting the text in a do-end block, putting the text in curly braces, and ending with a -%>, but they all produce the same result.

Before: Screen Shot 2022-04-28 at 9 12 51 PM Screen Shot 2022-04-28 at 9 13 26 PM

After: Screen Shot 2022-04-28 at 9 22 12 PM Screen Shot 2022-04-28 at 9 22 41 PM

How I reproduced:

  1. Create a new github/github codespace
  2. Clone the primer/view_components repo
  3. Change line in Gemfile for "primer_view_components" to local path
  4. script/server (which re-bootstraps successfully)
  5. Navigate to page with link

guo-chris avatar Apr 29 '22 04:04 guo-chris