Migrate gl-transition-medium and gl-transition-slow
What does this MR do and why?
CSS in js file:
diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 4ea1abdc7da6..d898286be792 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
/**
- * The following 578 definitions need to be migrated to Tailwind.
+ * The following 577 definitions need to be migrated to Tailwind.
* Let's do this! 🚀
*/
module.exports = {
@@ -652,7 +652,6 @@ module.exports = {
'.transition-duration-slow': { 'transition-duration': '0.4s' },
'.transition-duration-medium': { 'transition-duration': '0.2s' },
'.transition-timing-function-ease': { 'transition-timing-function': 'ease' },
- '.transition-slow': { transition: 'all 0.4s ease' },
'.transition-medium': { transition: 'all 0.2s ease' },
'.font-style-italic': { 'font-style': 'italic' },
'.heading-5': {
I suppose the gl-transition-medium
is not removed from our css_in_js file because we have one usage in gitlab ui.
before | after |
---|---|
gl-transition-medium |
gl-transition-all |
gl-transition-slow |
gl-transition-all and gl-duration-slow
|
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.
Screenshots or screen recordings
gl-transition-medium | gl-transition-all |
---|---|
gl-transition-slow (before) | gl-transition-all gl-duration-slow |
---|---|
How to set up and validate locally
Easiest way is to verify gl-transition-slow
through the side menu.
For the gl-transition-medium
:
- Import https://gitlab.com/gitlab-examples/security/security-reports/
- Run a pipeline against the default branch
- Go to Secure > Vulnerability Report
- Group the report by State
- Check the chevron right
Related to #456637 (closed)
Edited by Savas Vedova