Migrate legacy sizing CSS utility classes to Tailwind CSS
What does this MR do and why?
Related to #456629 (closed)
The CSS utils task group is in the process of migrating legacy CSS utilities to the Tailwind equivalent. This MR migrates the following legacy utils to their Tailwind equivalent:
.gl-w-grid-size-30
.gl-w-max-content
.gl-layout-w-limited
.gl-h-100vh
.gl-min-w-fit-content
.gl-min-h-100vh
.gl-max-w-max-content
.gl-max-w-100vw
.gl-max-w-50p
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-max-w-50p
is used in /src/components/base/new_dropdowns/listbox/listbox.vue#L798 so that will be removed when we migrate it in GitLab UI
--- 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 570 definitions need to be migrated to Tailwind.
* Let's do this! 🚀
*/
module.exports = {
@@ -380,15 +380,11 @@ module.exports = {
'.w-40p': { width: '40%' },
'.w-90p': { width: '90%' },
'.w-full\\!': { width: '100% !important' },
- '.w-grid-size-30': { width: '15rem' },
'.md-w-full': { '@media (min-width: 768px)': { width: '100%' } },
- '.w-max-content': { width: 'max-content' },
- '.layout-w-limited': { 'max-width': '1006px' },
'.h-auto\\!': { height: 'auto !important' },
'.h-6\\!': { height: '1.5rem !important' },
'.h-7\\!': { height: '2rem !important' },
'.h-full\\!': { height: '100% !important' },
- '.h-100vh': { height: '100vh' },
'.sm-w-auto': { '@media (min-width: 576px)': { width: 'auto' } },
'.sm-w-half': { '@media (min-width: 576px)': { width: '50%' } },
'.sm-w-25p': { '@media (min-width: 576px)': { width: '25%' } },
@@ -408,18 +404,14 @@ module.exports = {
'.lg-w-30p': { '@media (min-width: 992px)': { width: '30%' } },
'.lg-w-40p': { '@media (min-width: 992px)': { width: '40%' } },
'.min-w-full\\!': { 'min-width': '100% !important' },
- '.min-w-fit-content': { 'min-width': 'fit-content' },
'.min-w-fit-content\\!': { 'min-width': 'fit-content !important' },
'.min-h-6\\!': { 'min-height': '1.5rem !important' },
'.min-h-7\\!': { 'min-height': '2rem !important' },
- '.min-h-100vh': { 'min-height': '100vh' },
'.max-w-20\\!': { 'max-width': '10rem !important' },
'.max-w-30\\!': { 'max-width': '15rem !important' },
'.max-w-none\\!': { 'max-width': 'none !important' },
'.max-w-full\\!': { 'max-width': '100% !important' },
- '.max-w-max-content': { 'max-width': 'max-content' },
'.max-h-full\\!': { 'max-height': '100% !important' },
- '.max-w-100vw': { 'max-width': '100vw' },
'.max-w-50p': { 'max-width': '50%' },
'.md-max-w-26': { '@media (min-width: 768px)': { 'max-width': '13rem' } },
'.md-max-w-15p': { '@media (min-width: 768px)': { 'max-width': '15%' } },
See individual comments for some spot checking
Edited by Peter Hegman