Skip to content

Migrate button styles in _ide_theme_overrides.scss

What does this MR do?

Issue: #241489 (closed)

Migrate button styles in _ide_theme_overrides.scss to use box-shadow instead of border

As per &3914 (closed), a migration is underway to replace all existing <button> and it variant elements with <gl-button>. The new <gl-button> doesn't use border at all and uses box-shadow to define borders instead. This means that all the button theme overrides defined for the Web IDE in _ide_theme_overrides.scss need to be migrated to use box-shadow instead.

We would need to retain the old border based styles as well, until all buttons in the Web IDE are replaced with <gl-button>. (They can be later removed once all gl-button migration in Web IDE is complete.)

This MR was tested after merging !39988 (merged), !41557 (merged), !39904 (merged), !42120 (merged) and !41899 (merged) in itself.

Screenshots

Button Migration MR Light Dark
default (secondary)

States:
normal
hover
focus
active
!39988 (merged), !41557 (merged), !42120 (merged) Screenshot_2020-10-13_at_3.26.14_AM
Screenshot_2020-10-13_at_4.09.50_AM
Screenshot_2020-10-13_at_4.09.58_AM
Screenshot_2020-10-13_at_4.10.05_AM
Screenshot_2020-10-13_at_3.11.00_AM
Screenshot_2020-10-13_at_3.11.17_AM
Screenshot_2020-10-13_at_3.11.26_AM
Screenshot_2020-10-13_at_3.11.26_AM
primary

States:
disabled
normal
hover
focus
active
!39988 (merged) Screenshot_2020-10-13_at_3.24.32_AM
Screenshot_2020-10-13_at_3.24.45_AM
Screenshot_2020-10-13_at_3.25.01_AM
Screenshot_2020-10-13_at_3.25.16_AM
Screenshot_2020-10-13_at_3.25.29_AM
Screenshot_2020-10-13_at_3.08.53_AM
Screenshot_2020-10-13_at_3.09.02_AM
Screenshot_2020-10-13_at_3.09.11_AM
Screenshot_2020-10-13_at_3.09.21_AM
Screenshot_2020-10-13_at_3.09.21_AM
success

States:
normal
hover
focus
active
!39904 (merged) Screenshot_2020-10-13_at_3.25.39_AM
Screenshot_2020-10-13_at_3.25.50_AM
Screenshot_2020-10-13_at_3.26.00_AM
Screenshot_2020-10-13_at_3.26.08_AM
Screenshot_2020-10-13_at_3.10.20_AM
Screenshot_2020-10-13_at_3.10.31_AM
Screenshot_2020-10-13_at_3.10.42_AM
Screenshot_2020-10-13_at_3.10.42_AM
danger-secondary

States:
normal
hover
focus
active
!41899 (merged) Screenshot_2020-10-13_at_3.31.01_AM
Screenshot_2020-10-13_at_3.31.10_AM
Screenshot_2020-10-13_at_3.31.18_AM
Screenshot_2020-10-13_at_4.11.45_AM
Screenshot_2020-10-13_at_3.11.31_AM
Screenshot_2020-10-13_at_3.11.45_AM
Screenshot_2020-10-13_at_3.11.52_AM
Screenshot_2020-10-13_at_3.11.52_AM

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
Edited by Himanshu Kapoor

Merge request reports