Skip to content

Remove !important clauses from button disabled styles

What does this MR do?

The !important clauses in GitLab’s button [disabled] styles overwrite GitLab UI Button component’s [disabled] styles. This MR replaces the !important clauses with using a :not(.disabled) pseudo-selector where disabled styles are incorrectly overwritten.

Screenshots

I tested the following scenarios:

  • A button with a variant.
  • A button with an inverted variant.
  • A button with a text-field style variant.
  • A button with a btn-link variant.

Except for the btn-link variant, when disabled, all buttons look like:

simple-variant

A disabled btn-link button looks like this even when hovered:

link variant

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Merge request reports