Remove btn-link styling from buttons.scss

What does this MR do and why?

Removes .btn-link styling from buttons.scss in favor of .gl-button.gl-button.btn-link stylings from GitLab-UI

Removing this styling creates an issue for elements that btn-link class that do not also have a gl-button, that is, in non pajamas compliant button links, as a work around for this, gl-button is manually added where ever btn-link is added manually. Ideally, these should be migrated to pajama compliant components that will have both btn-link and gl-button added automatically.

Please be aware that .btn-link styling was preiouvsly removed in #362686 (closed) and added again in !88967 (merged) due to regression

Below is a list of each rule in .btn-link and the corresponding rule in .gl-button.gl-button.btn-link stylings from GitLab-UI that replaces the rule

.btn-link	.gl-button.gl-button.btn-link
padding: 0;	@include gl-py-0; @include gl-px-0;
background-color: transparent;	@include gl-bg-transparent;
color: $blue-600;	color: var(--gl-button-link-text-color-default);
font-weight: normal;	inherits font-weight: 400 from .btn which are equivalent
border-radius: 0;	@apply gl-border-0; means there is no border at all, so no border radius needed
border-color: transparent;	@apply gl-border-0; means there is no border at all, so no border radius needed
border-width: 0;	@apply gl-border-0

.btn-link &:hover, &:active, &:focus	.gl-button.gl-button.btn-link:active
color: $blue-800;	color: var(--gl-button-link-text-color-active);
text-decoration: underline;	text-decoration:underline;
background-color: transparent;	background-color: transparent;
border-color: transparent;	Does not change from default state

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Apply patch for buttons demo storybook entry

``` diff --git a/app/assets/javascripts/gitlab-ui/buttons_demo.stories.js b/app/assets/javascripts/gitlab-ui/buttons_demo.stories.js new file mode 100644 index 000000000000..cc32d91cfb90 --- /dev/null +++ b/app/assets/javascripts/gitlab-ui/buttons_demo.stories.js @@ -0,0 +1,57 @@ +import { GlButton } from '@gitlab/ui'; + +const buttonCategoryOptions = { + primary: 'primary', + secondary: 'secondary', + tertiary: 'tertiary', +}; + +const buttonVariantOptions = { + default: 'default', + confirm: 'confirm', + info: 'info (deprecated)', + success: 'success (deprecated)', + danger: 'danger', + dashed: 'dashed', + link: 'link', + /** + * The "reset" variant can be used when customization of GlButton styles is required + * (e.g. for the "close" button in GlLabel). + * It should be used sparingly and only when other approaches fail. + * Prefer supported variants where ever possible. + */ + reset: 'gl-reset', +}; + +const components = { GlButton }; + +export default { + title: 'gitlab-ui/buttons', +}; + +export const AllVariantsAndCategories = (args, { argTypes = {} }) => ({ + props: Object.keys(argTypes), + components, + variants: Object.keys(buttonVariantOptions).filter( + (variant) => !buttonVariantOptions[variant].includes('deprecated'), + ), + categories: buttonCategoryOptions, + style: { + display: 'grid', + gridTemplateColumns: 'repeat(3, 150px)', + rowGap: '8px', + textAlign: 'center', + }, + template: ` +

+ +

+ + {{ category }} {{ variant }} + +

+ +

+ `, +}); +AllVariantsAndCategories.parameters = { controls: { disable: true } }; ```

2. run `yarn storybook:start`

3. Open http://localhost:9002/?path=/story/gitlab-ui-buttons--all-variants-and-categories

4. inspect and validate primary link buttons CSS

Related to #476567 (closed)