Skip to content

Migrate element with 'btn-link' class in in app/assets/javascripts/ide/components/branches/item.vue to Pajamas compliant component

In app/assets/javascripts/ide/components/branches/item.vue there is an element that uses btn-link and gl-button classes for it's styling without using a Pajamas compliant component. This means that the styling might not work as expected.

To fix this, we need to rewrite the link so that it is Pajamas compliant. There are a few options to do this:

  1. We could use the rails link_to helper method for a normal link. for example, here is an implementation from app/views/admin/application_settings/_ci_cd.html.haml :

              = link_to _('Learn more.'), help_page_path('topics/autodevops/stages', anchor: 'auto-review-apps'), target: '_blank', rel: 'noopener noreferrer'
    
  2. If it is a button styled as a link, we can use the Pajamas Button component

Pajamas::ButtonComponent.new(variant:'link)

You can find more information at https://design.gitlab.com/components/link/ and https://design.gitlab.com/components/button/lookbook

Edited by James Rushford