Skip to content

Migrate gl--flex-center usage to Tailwind utilities

Mark Florian requested to merge 456623-tailwind-flex-utilities-part-0 into master

What does this MR do and why?

This migrates the gl--flex-center utility class to Tailwind's gl-flex gl-justify-center gl-items-center classes.

Rather than recreate a class for this, we're leaning into Tailwind's utility-first approach. See https://tailwindcss.com/docs/reusing-styles for more rationale.

The fact that there were a couple of places where gl--flex-center was used with gl-display-flex suggests that the compound nature of the class isn't always obvious. So, let's stick to simple utility classes.

Part of #456623.

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

There should be no visual changes.

These are just spot-checks, since the migration is straight forward.

Before After
system_note_before system_note_after
web_ide_before web_ide_after
whitespace_before whitespace_after

Tailwind css_in_js diff 

diff --git a/home/markrian/dev/gitlab/config/helpers/tailwind/css_in_js.js b/home/markrian/dev/gdk-ee-2021-11-04/gitlab/config/helpers/tailwind/css_in_js.js
index 641691d4cc82..bde975fe7b89 100644
--- a/home/markrian/dev/gitlab/config/helpers/tailwind/css_in_js.js
+++ b/home/markrian/dev/gdk-ee-2021-11-04/gitlab/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 523 definitions need to be migrated to Tailwind.
+ * The following 522 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -178,7 +178,6 @@ module.exports = {
   '.hover-text-blue-800': { '&:hover': { color: 'var(--blue-800, #064787)' } },
   '.hover-text-blue-800\\!': { '&:hover': { color: 'var(--blue-800, #064787) !important' } },
   '.text-red-500\\!': { color: 'var(--red-500, #dd2b0e) !important' },
-  '.-flex-center': { display: 'flex', 'align-items': 'center', 'justify-content': 'center' },
   '.focus--focus': {
     '&:focus': {
       'box-shadow': '0 0 0 1px var(--white, #fff), 0 0 0 3px var(--blue-400, #428fdc)',

How to set up and validate locally

Visit any page that used gl--flex-center. For instance:

  • To see the system note icon, visit a commit page whose commit has been mentioned in an issue.
  • To see the "whitespace" message, create a merge request which changes a file's whitespace and nothing else. Then uncheck "Show whitespace changes" in the view settings.

Related to #456623

Edited by Mark Florian

Merge request reports