Draft: Resolve "Migrate element with 'btn-link' class in in app/views/help/index.html.haml to Pajamas compliant component"

• Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you can request access to GitLab Duo.

What does this MR do and why?

This MR tries to remove element which is using btn-link class and use Pajamas::ButtonComponent instead in app/views/help/index.html.haml

Some useful links I referred to,

6aafac76

!125005 (diffs)

https://gitlab-org.gitlab.io/frontend/tailwind-documentation/padding

https://design.gitlab.com/components/button/

https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-button--docs

On design.gitlab.com, I could not find the syntax for button for .html.haml files. HTML, Vue, Ruby syntax is available. I still believe that more classes which I have added can be eliminated by leveraging the options/props in component.

Screenshots

TBA

Closes to #479792

Thanks for your contribution to GitLab @heysujal! 🎉

Did you know about our community forks? Working from there will make your contribution process easier. Please check it out!

• If you need help, page a coach by clicking here or come say hi on Discord.
• When you're ready, request a review by clicking here.
• We welcome AI-generated contributions and offer complimentary access to GitLab Duo! Check out the top of the merge request description to learn more about using AI while contributing.
• To add labels to your merge request, comment @gitlab-bot label ~"label1" ~"label2".

This message was generated automatically. You're welcome to improve it.

added Community contribution workflowin dev labels

assigned to @heysujal

changed the description

This merge request will be counted as part of the running Hackathon!

Find yourself in the Hackathon Leaderboard or check out the Hackathon page for more information! 🎉

This message was generated automatically. You're welcome to improve it.

added Hackathon label

added linked-issue label

added docs-only label

mentioned in issue gitlab-org/quality/triage-reports#20370 (closed)

added 1 commit

• 9de0d98e - migrate to GlButton

Compare with previous version

removed docs-only label

added 356 commits

• 60032fb5...d40fe8fd - 356 commits from branch gitlab-org:master

Compare with previous version

added docs-only label

added 1 commit

• c61d7853 - Migrate from button to Pajamas::ButtonComponent

Compare with previous version

removed docs-only label

changed the description

mentioned in issue gitlab-org/quality/triage-reports#20432 (closed)

@gitlab-bot label frontend Category:Design System groupdesign system sectioncore platform CSS cleanup typemaintenance

added Category:Design System frontend labels

Could not add the following labels: sectioncore platform, CSS cleanup

added groupdesign system typemaintenance labels

@jrushford I need some help here too. Any suggestions for finding the syntax docs?

Hey @heysujal Sorry for the delay in getting back to you, I'm not sure what you mean by the syntax docs. Do you mean https://design.gitlab.com/components/button? That's the docs for how to use pajamas components, its not very complete though. Also,if you want a quick answer, its definitely worth asking on the GitLab discord https://discord.com/invite/gitlab, apologies if i've already suggested this

On design.gitlab.com, I could not find the syntax for button for .html.haml files. HTML, Vue, Ruby syntax is available. I still believe that more classes which I have added can be eliminated by leveraging the options/props in component.

this is from my PR description above. Yes, I will take help from discord too.

Hi @jrushford , the marked ones are rendered using my changes

I can see text overflow happening because the new component has a span inside it which has a white-space: nowrap applied to it. Turning it to normal seems to fix the issue. Please refer the video.

Screen_Recording_2024-11-16_at_2.49.52_AM

Also, there is below properties(not shown in the video) which the old button gets because of !gl-outline-none class but new button doesn't. The difference is not visible, so what should we do for these styles.

.\!gl-outline-none {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

hey @heysujal, If the styles aren't doing anything, feel free to remove them, just make sure you post the details of any investigating you did in the MR so that when it comes to reviewing the MR, the reviewer doesn't have to also research and make sure the classes are safe to remove

added UX label

added devopsfoundations sectioncore platform labels

@heysujal, it seems we're waiting on an action from you for approximately two weeks.

• Do you still have capacity to work on this? If not, you might want to close this MR and/or ask someone to take over.
• Do you need help in getting it ready? At any time, you can:
  • ask for help with @gitlab-bot help.
  • initiate a mentor session on Discord.
• If you're actually ready for a review, you can post @gitlab-bot ready.

This message was generated automatically. You're welcome to improve it.

added automation:author-reminded label

added docs-only label

added 1 commit

• 42d7d42b - add new buttons

Compare with previous version

removed docs-only label