view_components
view_components copied to clipboard
LinkComponent adding extraneous whitespace
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 %>
👋 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:
After:
How I reproduced:
- Create a new github/github codespace
- Clone the
primer/view_components
repo - Change line in Gemfile for
"primer_view_components"
to local path -
script/server
(which re-bootstraps successfully) - Navigate to page with link