Skip to content

Migrate `gl-column-gap-*` to Tailwind equivalent

What does this MR do and why?

Related to #456631 (closed)

The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the gl-column-gap-* legacy utils to the Tailwind equivalent which is gl-gap-x-*

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

Legacy utils diff

--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 584 definitions need to be migrated to Tailwind.
+ * The following 580 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -534,10 +534,6 @@ module.exports = {
   '.mx-n4': { 'margin-left': '-0.75rem', 'margin-right': '-0.75rem' },
   '.mx-n5': { 'margin-left': '-1rem', 'margin-right': '-1rem' },
   '.sm-gap-3': { '@media (min-width: 576px)': { gap: '0.5rem' } },
-  '.column-gap-2': { 'column-gap': '0.25rem' },
-  '.column-gap-3': { 'column-gap': '0.5rem' },
-  '.column-gap-4': { 'column-gap': '0.75rem' },
-  '.column-gap-5': { 'column-gap': '1rem' },
   '.row-gap-2': { 'row-gap': '0.25rem' },
   '.row-gap-3': { 'row-gap': '0.5rem' },
   '.row-gap-5': { 'row-gap': '1rem' },

Organization groups

Before After
Screenshot_2024-05-06_at_10.47.00_AM Screenshot_2024-05-06_at_10.44.41_AM

Organization projects

Before After
Screenshot_2024-05-06_at_10.48.21_AM Screenshot_2024-05-06_at_10.49.13_AM

How to set up and validate locally

  • Enable ui_for_organizations feature flag
    • echo "Feature.enable(:ui_for_organizations)" | gdk rails c
  • Navigate to /-/organizations/default/groups_and_projects
Edited by Peter Hegman

Merge request reports