Skip to content

Migrate gl-transition-medium and gl-transition-slow

Savas Vedova requested to merge 456637-migrate-gl-transition-to-tailwind into master

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-medium gl-transition-all
gl-transition-slow (before) gl-transition-all gl-duration-slow
gl-transition-slow-before gl-transition-slow-after

How to set up and validate locally

Easiest way is to verify gl-transition-slow through the side menu. For the gl-transition-medium:

  1. Import https://gitlab.com/gitlab-examples/security/security-reports/
  2. Run a pipeline against the default branch
  3. Go to Secure > Vulnerability Report
  4. Group the report by State
  5. Check the chevron right

Related to #456637

Edited by Savas Vedova

Merge request reports