## Context Before we had styling button stylings coming from "gl-button", they came from "btn" from bootstrap and then we overrode the stylings in `buttons.scss`. In our current state, all buttons coming from Pajamas also have a class of "btn" and the bootstrap styles are overwritten in `buttons.scss` in GitLab-UI (https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/base/button/button.scss) So this class was remaining to style any existing components with the class of "btn" but no class of "gl-button", in this MR gitlab!167831 we the renamed "btn" class name to "quarantined-deprecated-btn" so that it will still receive the same css at the same specificity and we added it to the any component that did not also have a class of "gl-button". Why did we add "quarantined-deprecated-btn" instead of replacing "btn"? This was answered here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/167831#note_2139004814 ## Implementation Plan We need to replace the component in each of these issues with a Pajamas Compliant component. (Pajamas is GitLab's design system, more information here: https://design.gitlab.com/) Most of these components will probably be best to migrate to a Pajamas Button, https://design.gitlab.com/components/button, on that page you can see both the Vue and the Rails implementation of Pajamas Buttons. You can find lots of examples of how to complete these migrations in the parent epic of this epic: https://gitlab.com/groups/gitlab-org/-/epics/1049 Vue examples: https://gitlab.com/groups/gitlab-org/-/epics/8151 HAML examples: https://gitlab.com/groups/gitlab-org/-/epics/8153 ## How to Validate Changes: Validating changes within the GitLab codebase can be tricky! Here's a structured approach to help you out: 1. **Tips and Tricks for Navigating the GitLab Codebase:** Here is a little course on how to navigatie the Gitlab codebase for frontend changes: https://docs.gitlab.com/ee/development/fe_guide/onboarding_course/lesson_1.html#navigating-the-gitlab- 2. **Create a Storybook Entry:** If the component you are changing does not already have a storybook entry, It is possible to create one. Here are the docs on how storybook works on the GitLab project: https://docs.gitlab.com/ee/development/fe_guide/storybook.html Here is the link to the deployed version of storybook: https://gitlab-org.gitlab.io/gitlab/storybook/ And here is a short video of James using the storybook creation script to get a running start in the creation of the storybook entry: https://youtu.be/mEZEepGEBHE 3. **Reach out on Discord:** If you're still feeling stuck, don't hesitate to ask for help on our Discord server: https://discord.com/invite/gitlab **Important Note:** Validating changes in the GitLab codebase can be challenging, and everyone faces difficulties at some point. Don't be afraid to ask for help or clarification ## Other notes Thanks so much for working on these! I'm still learning how best to outline epics like this that are specifically for community contributors, if you have any advice or suggestions (or complaints), please feel free to share in the comments in this epic As much I would like to review every MR that comes from this epic, I just don't have the capacity for it, please make use of the GitLab-bot and tag it to get a reviewer assigned to your MR Thanks so much! James Rushford (@jrushford )