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) |
![]() ![]() ![]() ![]() |
![]() ![]() ![]() ![]() |
primary States: disabled normal hover focus active |
!39988 (merged) |
![]() ![]() ![]() ![]() ![]() |
![]() ![]() ![]() ![]() ![]() |
success States: normal hover focus active |
!39904 (merged) |
![]() ![]() ![]() ![]() |
![]() ![]() ![]() ![]() |
danger-secondary States: normal hover focus active |
!41899 (merged) |
![]() ![]() ![]() ![]() |
![]() ![]() ![]() ![]() |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
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