@gitlab/ui 92.2.0 → 92.3.0

package/src/components/base/drawer/drawer.scss

@@ -35,7 +35,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
   .gl-drawer-header,
   .gl-drawer-body > * {
-    @include gl-p-5;
+    @apply gl-p-5;
   }
 }
 
@@ -47,22 +47,22 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
   .gl-drawer-header,
   .gl-drawer-body > * {
-    @include gl-py-5;
+    @apply gl-py-5;
   }
 
   .gl-drawer-body > * {
-    @include gl-mx-5;
+    @apply gl-mx-5;
   }
 
   .gl-drawer-header {
-    @include gl-px-5;
+    @apply gl-px-5;
   }
 }
 
 .gl-drawer-footer {
   @apply gl-border-t-solid gl-border-t-1;
   border-top-color: var(--gl-border-color-default);
-  @include gl-p-5;
+  @apply gl-p-5;
 }
 
 .gl-drawer-body-scrim-on-footer {

package/src/components/base/dropdown/dropdown.scss

@@ -3,19 +3,19 @@
     @apply gl-border-1 gl-border-gray-200;
     @apply gl-rounded-base;
     @include gl-bg-white;
-    @include gl-mt-2;
-    @include gl-mb-2;
-    @include gl-p-0;
+    @apply gl-mt-2;
+    @apply gl-mb-2;
+    @apply gl-p-0;
     @include gl-shadow-x0-y2-b4-s0;
     width: $gl-dropdown-width;
 
     .gl-search-box-by-type {
-      @include gl-m-3;
+      @apply gl-m-3;
     }
   }
 
   .dropdown-menu li {
-    @include gl-p-0;
+    @apply gl-p-0;
   }
 
   .gl-dropdown-inner {
@@ -24,11 +24,11 @@
     max-height: $gl-max-dropdown-max-height;
 
     > :first-child {
-      @include gl-pt-3;
+      @apply gl-pt-3;
     }
 
     > :last-child {
-      @include gl-pb-3;
+      @apply gl-pb-3;
     }
   }
 
@@ -44,10 +44,10 @@
     @include gl-font-weight-bold;
     @include gl-justify-content-center;
     @include gl-line-height-normal;
-    @include gl-m-0;
-    @include gl-mb-3;
-    @include gl-pb-3;
-    @include gl-px-5;
+    @apply gl-m-0;
+    @apply gl-mb-3;
+    @apply gl-pb-3;
+    @apply gl-px-5;
   }
 
   .gl-dropdown-header {
@@ -56,7 +56,7 @@
 
   .gl-dropdown-footer {
     @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
-    @include gl-py-3;
+    @apply gl-py-3;
   }
 
   .dropdown-toggle {
@@ -67,16 +67,16 @@
 
     &.gl-button,
     &.gl-button.btn-block {
-      @include gl-pr-3;
+      @apply gl-pr-3;
 
       &.btn-sm {
-        @include gl-pr-2;
+        @apply gl-pr-2;
       }
     }
 
     &.dropdown-toggle-no-caret,
     &.dropdown-toggle-no-caret.btn-sm {
-      @include gl-p-3;
+      @apply gl-p-3;
 
       .dropdown-chevron {
         display: none;
@@ -113,10 +113,10 @@
     }
 
     &.gl-button {
-      @include gl-px-3;
+      @apply gl-px-3;
 
       &.btn-sm {
-        @include gl-px-2;
+        @apply gl-px-2;
       }
     }
   }
@@ -146,8 +146,8 @@
   // The `&.dropdown` is necessary to strengthen the specificity of these selectors
   &.dropdown {
     &.btn-sm .gl-icon {
-      @include gl-mt-0;
-      @include gl-mb-0;
+      @apply gl-mt-0;
+      @apply gl-mb-0;
 
       &.dropdown-chevron {
         @include gl-h-5;
@@ -158,40 +158,40 @@
     .gl-button .dropdown-chevron,
     .gl-button.btn-block .dropdown-chevron,
     .dropdown-chevron {
-      @include gl-ml-2;
-      @include gl-mr-0;
+      @apply gl-ml-2;
+      @apply gl-mr-0;
     }
   }
 
   .dropdown-icon {
-    @include gl-mr-2;
+    @apply gl-mr-2;
   }
 
   .dropdown-icon-text,
   .dropdown-icon-only {
-    @include gl-pl-3;
+    @apply gl-pl-3;
   }
 
   .dropdown-icon-only {
     .dropdown-icon,
     .gl-button-icon.gl-button-icon {
-      @include gl-mr-0;
+      @apply gl-mr-0;
     }
 
     &.btn-sm .dropdown-chevron {
-      @include gl-mx-0;
+      @apply gl-mx-0;
     }
   }
 
   .split-content-button {
-    @include gl-px-4;
+    @apply gl-px-4;
   }
 
   .icon-split-content-button {
-    @include gl-pl-3;
+    @apply gl-pl-3;
 
     .dropdown-icon {
-      @include gl-mr-0;
+      @apply gl-mr-0;
     }
   }
 }

package/src/components/base/dropdown/dropdown_divider.scss

@@ -1,9 +1,9 @@
 @mixin gl-tmp-dropdown-divider-style {
   @include gl-overflow-hidden;
   @include gl-h-0;
-  @include gl-my-2;
-  @include gl-mx-0;
-  @include gl-p-0;
+  @apply gl-my-2;
+  @apply gl-mx-0;
+  @apply gl-p-0;
   @apply gl-border-t-1 gl-border-t-solid gl-border-t-gray-200;
 }
 

package/src/components/base/dropdown/dropdown_item.scss

@@ -6,8 +6,8 @@
   @include gl-font-base;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
-  @include gl-px-5;
-  @include gl-py-0;
+  @apply gl-px-5;
+  @apply gl-py-0;
   position: relative;
   @include gl-rounded-0;
   @include gl-shadow-none;
@@ -24,34 +24,34 @@
 
     .gl-avatar {
       @include gl-flex-shrink-0;
-      @include gl-mr-3;
+      @apply gl-mr-3;
     }
 
     .gl-dropdown-item-check-icon {
       @include gl-flex-shrink-0;
-      @include gl-mr-3;
+      @apply gl-mr-3;
       @include gl-text-gray-700;
     }
 
     .gl-dropdown-item-icon {
       @include gl-flex-shrink-0;
-      @include gl-mr-3;
+      @apply gl-mr-3;
     }
 
     .gl-dropdown-item-text-primary {
-      @include gl-m-0;
+      @apply gl-m-0;
     }
 
     .gl-dropdown-item-text-secondary {
-      @include gl-m-0;
+      @apply gl-m-0;
       @include gl-text-gray-700;
     }
 
     .gl-dropdown-item-text-wrapper {
       @include gl-min-w-0;
       @include gl-flex-grow-1;
-      @include gl-mr-3;
-      @include gl-py-3;
+      @apply gl-mr-3;
+      @apply gl-py-3;
     }
 
     // make sure the text color is not overridden

package/src/components/base/dropdown/dropdown_section_header.scss

@@ -4,8 +4,8 @@
   @include gl-line-height-normal;
   @include gl-text-left;
   @include gl-font-weight-bold;
-  @include gl-py-3;
-  @include gl-px-4;
+  @apply gl-py-3;
+  @apply gl-px-4;
   @include gl-white-space-normal;
 }
 

package/src/components/base/dropdown/dropdown_text.scss

@@ -1,6 +1,6 @@
 .gl-dropdown-text {
   .b-dropdown-text {
     @include gl-tmp-dropdown-item-style;
-    @include gl-py-3;
+    @apply gl-py-3;
   }
 }

package/src/components/base/filtered_search/filtered_search.scss

@@ -5,9 +5,9 @@
   @include gl-flex-basis-0;
   @include gl-overflow-hidden;
   @include gl-align-items-center;
-  @include gl-py-2;
-  @include gl-pl-4;
-  @include gl-pr-7;
+  @apply gl-py-2;
+  @apply gl-pl-4;
+  @apply gl-pr-7;
   @include gl-inset-border-1-gray-400;
   @apply gl-border-none;
   @apply gl-rounded-base;
@@ -29,10 +29,10 @@
 
 .gl-filtered-search-item {
   @include gl-display-flex;
-  @include gl-px-1;
+  @apply gl-px-1;
 
   &:first-child {
-    @include gl-pl-0;
+    @apply gl-pl-0;
   }
 }
 
@@ -44,8 +44,8 @@
   }
 
   @include gl-flex-grow-1;
-  @include gl-p-0;
-  @include gl-pl-1;
+  @apply gl-p-0;
+  @apply gl-pl-1;
   @include gl-h-6;
   min-width: $gl-spacing-scale-12;
 }

package/src/components/base/filtered_search/filtered_search_suggestion.scss

@@ -1,5 +1,5 @@
 .gl-filtered-search-suggestion {
-  @include gl-p-0;
+  @apply gl-p-0;
 }
 
 .gl-filtered-search-suggestion-active {

package/src/components/base/filtered_search/filtered_search_suggestion_list.scss

@@ -4,7 +4,7 @@
 .gl-filtered-search-suggestion-list.dropdown-menu {
   @include gl-display-block;
   width: $gl-dropdown-width;
-  @include gl-p-2;
+  @apply gl-p-2;
   @apply gl-border-gray-200;
   @include gl-rounded-lg;
   @include gl-shadow-md;
@@ -26,10 +26,10 @@
   }
 
   .gl-spinner-container {
-    @include gl-my-2;
+    @apply gl-my-2;
   }
 
   .gl-filtered-search-suggestion {
-    @include gl-p-0;
+    @apply gl-p-0;
   }
 }

package/src/components/base/filtered_search/filtered_search_term.scss

@@ -5,7 +5,7 @@
 }
 
 .gl-filtered-search-term-input {
-  @include gl-p-0;
+  @apply gl-p-0;
   @apply gl-border-none;
   @include gl-outline-none;
   @include gl-h-6;
@@ -14,5 +14,5 @@
 }
 
 .gl-filtered-search-term-icon {
-  @include gl-mr-2;
+  @apply gl-mr-2;
 }

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -30,15 +30,15 @@
     @include gl-bg-gray-50;
     @include gl-rounded-top-right-none;
     @include gl-rounded-bottom-right-none;
-    @include gl-py-2;
-    @include gl-px-3;
-    @include gl-mr-1;
+    @apply gl-py-2;
+    @apply gl-px-3;
+    @apply gl-mr-1;
   }
 
   &.gl-filtered-search-token-operator {
     @include gl-h-6;
     @include gl-bg-gray-50;
-    @include gl-mr-1;
+    @apply gl-mr-1;
     @include gl-rounded-0;
   }
 

package/src/components/base/filtered_search/filtered_search_token_segment.scss

@@ -12,7 +12,7 @@
 }
 
 .gl-filtered-search-token-segment-input {
-  @include gl-p-0;
+  @apply gl-p-0;
   @include gl-h-full;
   @apply gl-border-none;
   @include gl-outline-none;
@@ -20,5 +20,5 @@
 }
 
 .gl-filtered-search-token-segment-icon {
-  @include gl-mr-2;
+  @apply gl-mr-2;
 }

package/src/components/base/form/form_checkbox/form_checkbox.scss

@@ -1,10 +1,10 @@
 @mixin gl-tmp-form-checkbox-inline-styles {
-  @include gl-mt-1;
-  @include gl-ml-0;
+  @apply gl-mt-1;
+  @apply gl-ml-0;
   @include gl-align-self-start;
   position: static;
   @include gl-h-auto;
-  @include gl-mr-0;
+  @apply gl-mr-0;
 }
 
 .gl-form-checkbox-group {
@@ -19,7 +19,7 @@
 
   &.form-check {
     @include gl-display-flex;
-    @include gl-pl-0;
+    @apply gl-pl-0;
   }
 
   &.form-check-inline {
@@ -38,7 +38,7 @@
   }
 
   .form-check-label {
-    @include gl-pl-3;
+    @apply gl-pl-3;
     @include gl-line-height-normal;
   }
 
@@ -52,12 +52,12 @@
   }
 
   &.custom-control {
-    @include gl-pl-5;
+    @apply gl-pl-5;
 
     .custom-control-input ~ .custom-control-label {
       @include gl-cursor-pointer;
-      @include gl-pl-3;
-      @include gl-mb-3;
+      @apply gl-pl-3;
+      @apply gl-mb-3;
 
       &::before,
       &::after {
@@ -212,8 +212,8 @@
   }
 
   .help-text {
-    @include gl-mt-2;
-    @include gl-mb-0;
+    @apply gl-mt-2;
+    @apply gl-mb-0;
     @include gl-font-base;
     @include gl-line-height-normal;
     color: var(--gl-text-color-subtle);

package/src/components/base/form/form_group/form_group.scss

@@ -1,16 +1,16 @@
 .gl-form-group {
-  @include gl-mb-5;
+  @apply gl-mb-5;
 
   .col-form-label {
     @include gl-font-base;
     @include gl-font-weight-bold;
     @include gl-line-height-normal;
-    @include gl-pt-0;
-    @include gl-pb-3;
+    @apply gl-pt-0;
+    @apply gl-pb-3;
     color: var(--gl-text-color-strong);
 
     > .label-description {
-      @include gl-mt-3;
+      @apply gl-mt-3;
       color: var(--gl-text-color-subtle);
     }
   }
@@ -49,7 +49,7 @@
     &.is-valid + .invalid-feedback + .gl-text-secondary {
       // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2806
       // for the reasoning behind the "valid+invalid" selector above
-      @include gl-mt-3;
+      @apply gl-mt-3;
     }
   }
 

package/src/components/base/form/form_input/form_input.scss

@@ -3,8 +3,8 @@
   @include gl-font-regular;
   @include gl-font-base;
   @include gl-line-height-normal;
-  @include gl-py-3;
-  @include gl-px-4;
+  @apply gl-py-3;
+  @apply gl-px-4;
   @include gl-h-auto;
   @apply gl-border-none;
   @include form-control-focus($ignore-warning: true);

package/src/components/base/form/form_select/form_select.scss

@@ -13,8 +13,8 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-font-regular;
   @include gl-opacity-10;
   @include gl-line-height-normal;
-  @include gl-py-3;
-  @include gl-pl-4;
+  @apply gl-py-3;
+  @apply gl-pl-4;
   @include gl-h-auto;
   @include gl-text-truncate;
   @include gl-bg-no-repeat;

package/src/components/base/keyset_pagination/keyset_pagination.scss

@@ -3,7 +3,7 @@
   // for the reasoning behind the double .gl-button.gl-button
   .gl-button.gl-button {
     .gl-icon {
-      @include gl-m-0;
+      @apply gl-m-0;
     }
   }
 }

package/src/components/base/label/label.scss

@@ -70,7 +70,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     height: px-to-rem(14px);
     margin-left: -$label-padding-horizontal-half;
     margin-right: $label-padding-horizontal-half;
-    @include gl-p-0;
+    @apply gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;
 

package/src/components/base/loading_icon/loading_icon.scss

@@ -39,7 +39,7 @@ $gl-loader-dots-size-xl: 1rem;
   @include gl-rounded-full;
   @apply gl-border-solid;
   @include gl-mx-auto;
-  @include gl-my-0;
+  @apply gl-my-0;
   @include gl-font-base;
 
   animation-name: gl-spinner-rotate;