Skip to content

fix(button): Decrease button category styles specificity

Enrique Alcántara requested to merge refactor-decrease-button-styles-specificity into master

What does this MR do?

This MR contains a refactoring of the button styles to reduce the specificity of the variant + category styles. Before this change, the secondary and tertiary style selectors had the following shape:

.gl-button.gl-button.btn-success.btn-secondary:not(:disabled)

Using the specificity calculator, we can see that the specificity of that selector is 0,5,0. After this change, the selector changes to .gl-button.gl-button.btn-success-secondary which has a specificity of 0,3,0.

The goal of this refactoring is making these styles easier to understand and maintain.

NOTICE: This refactor will require to update snapshot tests in GitLab. It will also require updating three HAML buttons that use gl-button [variant] btn-secondary styles. I’ve created an integration MR for this gitlab!39716 (closed)

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.
Edited by Enrique Alcántara

Merge request reports