From 04903d29a823b1758655c4ca7c7041994058ddfd Mon Sep 17 00:00:00 2001
From: Shreedhar Bhat <shridharbhat1998@gmail.com>
Date: Thu, 13 Jan 2022 21:38:39 +0530
Subject: [PATCH 1/3] feat(css): Addition Add `gl-sm-pr-3 ` and `gl-sm-w-half`
 `gl-md-ml-3` utility class

Relates to the issue https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
---
 src/scss/utility-mixins/sizing.scss  |  6 ++++++
 src/scss/utility-mixins/spacing.scss | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/scss/utility-mixins/sizing.scss b/src/scss/utility-mixins/sizing.scss
index 64bdcc65d6..2f8ca4b1b6 100644
--- a/src/scss/utility-mixins/sizing.scss
+++ b/src/scss/utility-mixins/sizing.scss
@@ -206,6 +206,12 @@
   }
 }
 
+@mixin gl-sm-w-half {
+  @include gl-media-breakpoint-up(sm) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;
diff --git a/src/scss/utility-mixins/spacing.scss b/src/scss/utility-mixins/spacing.scss
index 0c11bd4bea..ed3c14fa05 100644
--- a/src/scss/utility-mixins/spacing.scss
+++ b/src/scss/utility-mixins/spacing.scss
@@ -821,6 +821,12 @@
   }
 }
 
+@mixin gl-md-ml-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-ml-3;
+  }
+}
+
 @mixin gl-md-mr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-mr-3;
@@ -894,6 +900,12 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
+@mixin gl-sm-pr-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-3;
+  }
+}
+
 @mixin gl-sm-pr-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
-- 
GitLab


From 1b7235bcea56dee11e4542c017ff35ab8552c443 Mon Sep 17 00:00:00 2001
From: Shreedhar Bhat <shridharbhat1998@gmail.com>
Date: Fri, 14 Jan 2022 11:01:49 +0530
Subject: [PATCH 2/3] Added and organised the padding utilities from 0 to 5 and
 in ordering of TRBL

Relates to the comment https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2608\#note_810321321
---
 src/scss/utility-mixins/spacing.scss | 383 ++++++++++++++++++++++++++-
 1 file changed, 381 insertions(+), 2 deletions(-)

diff --git a/src/scss/utility-mixins/spacing.scss b/src/scss/utility-mixins/spacing.scss
index ed3c14fa05..b6eac140c8 100644
--- a/src/scss/utility-mixins/spacing.scss
+++ b/src/scss/utility-mixins/spacing.scss
@@ -900,24 +900,187 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
+
+@mixin gl-sm-pt-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-sm-pt-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-sm-pt-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-sm-pt-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-sm-pt-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-sm-pt-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-sm-pr-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-sm-pr-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-sm-pr-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-2;
+  }
+}
+
 @mixin gl-sm-pr-3 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-3;
   }
 }
 
+@mixin gl-sm-pr-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-sm-pr-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pr-5;
   }
 }
 
+@mixin gl-sm-pb-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-sm-pb-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-sm-pb-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-sm-pb-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-sm-pb-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-sm-pb-5 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-sm-pl-0 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-sm-pl-1 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-sm-pl-2 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-sm-pl-3 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-sm-pl-4 {
+  @include gl-media-breakpoint-down(sm) {
+    @include gl-pl-4;
+  }
+}
+
 @mixin gl-sm-pl-5 {
   @include gl-media-breakpoint-down(sm) {
     @include gl-pl-5;
   }
 }
 
+@mixin gl-md-pt-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-md-pt-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-md-pt-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-md-pt-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-md-pt-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-md-pt-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pt-5;
+  }
+}
+
 @mixin gl-md-pr-0 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-0;
@@ -936,24 +1099,240 @@
   }
 }
 
+@mixin gl-md-pr-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-md-pr-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-md-pr-5 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-5;
   }
 }
 
+@mixin gl-md-pb-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-md-pb-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-md-pb-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-md-pb-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-md-pb-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-md-pb-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-md-pl-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-md-pl-1 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-md-pl-2 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-md-pl-3 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-3;
+  }
+}
+
+@mixin gl-md-pl-4 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-md-pl-5 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-pl-5;
+  }
+}
+
+@mixin gl-lg-pt-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-0;
+  }
+}
+
+@mixin gl-lg-pt-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-1;
+  }
+}
+
+@mixin gl-lg-pt-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-2;
+  }
+}
+
+@mixin gl-lg-pt-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-3;
+  }
+}
+
+@mixin gl-lg-pt-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-4;
+  }
+}
+
+@mixin gl-lg-pt-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pt-5;
+  }
+}
+
+@mixin gl-lg-pr-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-0;
+  }
+}
+
+@mixin gl-lg-pr-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-1;
+  }
+}
+
+@mixin gl-lg-pr-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-2;
+  }
+}
+
+@mixin gl-lg-pr-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-3;
+  }
+}
+
+@mixin gl-lg-pr-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pr-4;
+  }
+}
+
 @mixin gl-lg-pr-5 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pr-5;
   }
 }
 
-@mixin gl-md-pl-3 {
-  @include gl-media-breakpoint-up(md) {
+@mixin gl-lg-pb-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-0;
+  }
+}
+
+@mixin gl-lg-pb-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-1;
+  }
+}
+
+@mixin gl-lg-pb-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-2;
+  }
+}
+
+@mixin gl-lg-pb-3 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-3;
+  }
+}
+
+@mixin gl-lg-pb-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-4;
+  }
+}
+
+@mixin gl-lg-pb-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pb-5;
+  }
+}
+
+@mixin gl-lg-pl-0 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-0;
+  }
+}
+
+@mixin gl-lg-pl-1 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-1;
+  }
+}
+
+@mixin gl-lg-pl-2 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-2;
+  }
+}
+
+@mixin gl-lg-pl-3 {
+  @include gl-media-breakpoint-up(lg) {
     @include gl-pl-3;
   }
 }
 
+@mixin gl-lg-pl-4 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-4;
+  }
+}
+
+@mixin gl-lg-pl-5 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-pl-5;
+  }
+}
+
 /**
   * Remove margin and padding from empty elements
   * to prevent them from inadvertantly taking up
-- 
GitLab


From 37d4e0b55a9ad6b2f994059abf11c7ac1ad14a80 Mon Sep 17 00:00:00 2001
From: Shreedhar Bhat <shridharbhat1998@gmail.com>
Date: Fri, 14 Jan 2022 11:11:56 +0530
Subject: [PATCH 3/3] Added and organised the width utilities

Relates to the comment https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2608\#note_810321319
---
 src/scss/utility-mixins/sizing.scss | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/scss/utility-mixins/sizing.scss b/src/scss/utility-mixins/sizing.scss
index 2f8ca4b1b6..0e14782e39 100644
--- a/src/scss/utility-mixins/sizing.scss
+++ b/src/scss/utility-mixins/sizing.scss
@@ -218,14 +218,26 @@
   }
 }
 
+@mixin gl-md-w-50p {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
 @mixin gl-lg-w-1px {
-  @media (min-width: $breakpoint-lg) {
+  @include gl-media-breakpoint-up(lg) {
     width: 1px;
   }
 }
 
-@mixin gl-md-w-50p {
-  @include gl-media-breakpoint-up(md) {
+@mixin gl-lg-w-auto {
+  @include gl-media-breakpoint-up(lg) {
+    width: auto;
+  }
+}
+
+@mixin gl-lg-w-50p {
+  @include gl-media-breakpoint-up(lg) {
     width: 50%;
   }
 }
-- 
GitLab