Skip to content

Migrate gl-outline-0 to gl-outline-none

Savas Vedova requested to merge 456627-migrate-gl-outline-0 into master

What does this MR do and why?

Migrates gl-outline-0 to gl-outline-none. This is slightly a different implementation than our current behaviour, because Tailwind still displays the outline border when the element is focused (as seen in the screenshots).

We decided to follow Tailwind implementation. This is the internal discussion of that decision.

diff --git a/config/helpers/tailwind/css_in_js.js b/config/helpers/tailwind/css_in_js.js
index 059f737c8923..234e2debffbc 100644
--- a/config/helpers/tailwind/css_in_js.js
+++ b/config/helpers/tailwind/css_in_js.js
@@ -1,5 +1,5 @@
 /**
- * The following 547 definitions need to be migrated to Tailwind.
+ * The following 543 definitions need to be migrated to Tailwind.
  * Let's do this! 🚀
  */
 module.exports = {
@@ -354,10 +354,6 @@ module.exports = {
   },
   '.list-style-none': { 'list-style-type': 'none' },
   '.opacity-0\\!': { opacity: '0 !important' },
-  '.outline-0': { outline: '0' },
-  '.outline-0\\!': { outline: '0 !important' },
-  '.outline-none': { outline: 'none' },
-  '.outline-none\\!': { outline: 'none !important' },
   '.overflow-hidden\\!': { overflow: 'hidden !important' },
   '.overflow-x-hidden\\!': { 'overflow-x': 'hidden !important' },
   '.overflow-wrap-break': { 'overflow-wrap': 'break-word' },

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

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

gl-outline-0 gl-outline-none
image image

How to set up and validate locally

  1. Visit an MR
  2. Scroll down the page
  3. The sticky header has a few tabs. Those tabs have the outline property.

Related to #456627 (closed)

Edited by Savas Vedova

Merge request reports