@gitlab/ui 93.1.0 → 93.2.0

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

@@ -1,20 +1,20 @@
 @mixin gl-tmp-dropdown-item-style {
-  @include gl-align-items-center;
+  @apply gl-items-center;
   @include gl-bg-transparent;
   @apply gl-border-0;
-  @include gl-display-flex;
-  @include gl-font-base;
-  @include gl-font-weight-normal;
-  @include gl-line-height-normal;
+  @apply gl-flex;
+  @apply gl-text-base;
+  @apply gl-font-normal;
+  @apply gl-leading-normal;
   @apply gl-px-5;
   @apply gl-py-0;
   position: relative;
-  @include gl-rounded-0;
+  @apply gl-rounded-none;
   @include gl-shadow-none;
   @include gl-text-gray-900;
   @include gl-text-left;
   @include gl-w-full;
-  @include gl-white-space-normal;
+  @apply gl-whitespace-normal;
 }
 
 .gl-dropdown-item {
@@ -23,18 +23,18 @@
     @include gl-cursor-pointer;
 
     .gl-avatar {
-      @include gl-flex-shrink-0;
+      @apply gl-shrink-0;
       @apply gl-mr-3;
     }
 
     .gl-dropdown-item-check-icon {
-      @include gl-flex-shrink-0;
+      @apply gl-shrink-0;
       @apply gl-mr-3;
       @include gl-text-gray-700;
     }
 
     .gl-dropdown-item-icon {
-      @include gl-flex-shrink-0;
+      @apply gl-shrink-0;
       @apply gl-mr-3;
     }
 
@@ -49,7 +49,7 @@
 
     .gl-dropdown-item-text-wrapper {
       @include gl-min-w-0;
-      @include gl-flex-grow-1;
+      @apply gl-grow;
       @apply gl-mr-3;
       @apply gl-py-3;
     }
@@ -60,18 +60,18 @@
     }
 
     &.disable-hover {
-      @include gl-text-decoration-none;
+      @apply gl-no-underline;
     }
 
     &:disabled {
       @include gl-text-gray-500;
 
       .gl-new-dropdown-item-check-icon {
-        @include gl-reset-color;
+        @apply gl-text-inherit;
       }
 
       .gl-new-dropdown-item-text-secondary {
-        @include gl-reset-color;
+        @apply gl-text-inherit;
       }
 
       .gl-avatar {
@@ -84,7 +84,7 @@
     &:focus,
     &.is-focused {
       @include gl-bg-gray-50;
-      @include gl-text-decoration-none;
+      @apply gl-no-underline;
       @include gl-text-gray-900;
 
       // make sure the text color is not overridden

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

@@ -1,12 +1,12 @@
 @mixin gl-tmp-dropdown-section-header-style {
-  @include gl-font-base;
+  @apply gl-text-base;
   @include gl-text-gray-900;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
   @include gl-text-left;
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
   @apply gl-py-3;
   @apply gl-px-4;
-  @include gl-white-space-normal;
+  @apply gl-whitespace-normal;
 }
 
 /* Styling when the component is used on its own */

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

@@ -1,14 +1,14 @@
 .gl-filtered-search-scrollable-container {
   @include gl-bg-white;
-  @include gl-display-flex;
-  @include gl-flex-grow-1;
-  @include gl-flex-basis-0;
+  @apply gl-flex;
+  @apply gl-grow;
+  @apply gl-basis-0;
   @include gl-overflow-hidden;
-  @include gl-align-items-center;
+  @apply gl-items-center;
   @apply gl-py-2;
   @apply gl-pl-4;
   @apply gl-pr-7;
-  @include gl-inset-border-1-gray-400;
+  @apply gl-shadow-inner-1-gray-400;
   @apply gl-border-none;
   @apply gl-rounded-base;
 
@@ -22,13 +22,13 @@
 }
 
 .gl-filtered-search-scrollable {
-  @include gl-display-flex;
+  @apply gl-flex;
   @include gl-overflow-y-auto;
   @include gl-w-full;
 }
 
 .gl-filtered-search-item {
-  @include gl-display-flex;
+  @apply gl-flex;
   @apply gl-px-1;
 
   &:first-child {
@@ -40,10 +40,10 @@
   .gl-filtered-search-term-value {
     @include gl-h-full;
     @include gl-w-full;
-    @include gl-align-items-center;
+    @apply gl-items-center;
   }
 
-  @include gl-flex-grow-1;
+  @apply gl-grow;
   @apply gl-p-0;
   @apply gl-pl-1;
   @include gl-h-6;

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

@@ -4,8 +4,8 @@
 
 .gl-filtered-search-suggestion-active {
   @include gl-bg-gray-100;
-  @include gl-text-decoration-none;
+  @apply gl-no-underline;
   @include gl-text-gray-900;
-  @include gl-outline-0;
+  @apply gl-outline-none;
   @include gl-focus($inset: true);
 }

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

@@ -2,7 +2,7 @@
 // GitLab
 
 .gl-filtered-search-suggestion-list.dropdown-menu {
-  @include gl-display-block;
+  @apply gl-block;
   width: $gl-dropdown-width;
   @apply gl-p-2;
   @apply gl-border-gray-200;
@@ -22,7 +22,7 @@
   }
 
   .gl-dropdown-divider {
-    @include gl-mx-n2;
+    @apply -gl-mx-2;
   }
 
   .gl-spinner-container {

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

@@ -4,8 +4,8 @@
   }
 
   @include gl-h-6;
-  @include gl-display-inline-flex;
-  @include gl-white-space-nowrap;
+  @apply gl-inline-flex;
+  @apply gl-whitespace-nowrap;
   @include gl-cursor-pointer;
 
   &.gl-filtered-search-token-hover {
@@ -23,13 +23,13 @@
 }
 
 .gl-token {
-  @include gl-rounded-0;
+  @apply gl-rounded-none;
 
   &.gl-filtered-search-token-type {
     @include gl-h-6;
     @include gl-bg-gray-50;
-    @include gl-rounded-top-right-none;
-    @include gl-rounded-bottom-right-none;
+    @apply gl-rounded-tr-none;
+    @apply gl-rounded-br-none;
     @apply gl-py-2;
     @apply gl-px-3;
     @apply gl-mr-1;
@@ -39,17 +39,17 @@
     @include gl-h-6;
     @include gl-bg-gray-50;
     @apply gl-mr-1;
-    @include gl-rounded-0;
+    @apply gl-rounded-none;
   }
 
   &.gl-filtered-search-token-data {
     @include gl-h-6;
     @include gl-bg-gray-100;
-    @include gl-rounded-top-right-small;
-    @include gl-rounded-bottom-right-small;
+    @apply gl-rounded-tr-small;
+    @apply gl-rounded-br-small;
 
     .gl-filtered-search-token-data-content {
-      @include gl-display-inline-flex;
+      @apply gl-inline-flex;
     }
   }
 }

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

@@ -1,9 +1,9 @@
 .gl-filtered-search-token-segment {
-  @include gl-display-inline-flex;
-  @include gl-align-items-center;
+  @apply gl-inline-flex;
+  @apply gl-items-center;
   @include gl-w-full;
   @include gl-h-6;
-  @include gl-white-space-nowrap;
+  @apply gl-whitespace-nowrap;
   @include gl-cursor-pointer;
 
   &.gl-filtered-search-token-segment-active {

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

@@ -1,30 +1,30 @@
 @mixin gl-tmp-form-checkbox-inline-styles {
   @apply gl-mt-1;
   @apply gl-ml-0;
-  @include gl-align-self-start;
+  @apply gl-self-start;
   position: static;
   @include gl-h-auto;
   @apply gl-mr-0;
 }
 
 .gl-form-checkbox-group {
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
 }
 
 .gl-form-checkbox,
 .gl-form-radio {
-  @include gl-font-base;
-  @include gl-line-height-normal;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
   color: var(--gl-text-color-default);
 
   &.form-check {
-    @include gl-display-flex;
+    @apply gl-flex;
     @apply gl-pl-0;
   }
 
   &.form-check-inline {
-    @include gl-display-inline-flex;
-    @include gl-align-items-center;
+    @apply gl-inline-flex;
+    @apply gl-items-center;
   }
 
   .form-check-input {
@@ -39,7 +39,7 @@
 
   .form-check-label {
     @apply gl-pl-3;
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
   }
 
   .form-check-input:disabled,
@@ -214,8 +214,8 @@
   .help-text {
     @apply gl-mt-2;
     @apply gl-mb-0;
-    @include gl-font-base;
-    @include gl-line-height-normal;
+    @apply gl-text-base;
+    @apply gl-leading-normal;
     color: var(--gl-text-color-subtle);
   }
 }

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

@@ -2,9 +2,9 @@
   @apply gl-mb-5;
 
   .col-form-label {
-    @include gl-font-base;
-    @include gl-font-weight-bold;
-    @include gl-line-height-normal;
+    @apply gl-text-base;
+    @apply gl-font-bold;
+    @apply gl-leading-normal;
     @apply gl-pt-0;
     @apply gl-pb-3;
     color: var(--gl-text-color-strong);
@@ -17,7 +17,7 @@
 
   .optional-label,
   .label-description {
-    @include gl-font-weight-normal;
+    @apply gl-font-normal;
   }
 
   .invalid-feedback {
@@ -32,8 +32,8 @@
   .valid-feedback,
   .text-muted,
   .gl-text-secondary {
-    @include gl-font-base;
-    @include gl-line-height-normal;
+    @apply gl-text-base;
+    @apply gl-leading-normal;
   }
 
   .text-muted {

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

@@ -1,8 +1,8 @@
 .gl-form-input,
 .gl-form-input.form-control {
   @include gl-font-regular;
-  @include gl-font-base;
-  @include gl-line-height-normal;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
   @apply gl-py-3;
   @apply gl-px-4;
   @include gl-h-auto;

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

@@ -42,13 +42,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
+          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
+            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`
           ),
         ];
       }
 
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return [`gl-form-input-${this.width}`];
     },
     listeners() {

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

@@ -1,4 +1,4 @@
 .gl-form-radio-group {
-  @include gl-font-base;
-  @include gl-line-height-normal;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
 }

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

@@ -9,14 +9,14 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
 
 /* stylelint-disable property-no-vendor-prefix */
 .gl-form-select {
-  @include gl-font-base;
+  @apply gl-text-base;
   @include gl-font-regular;
   @include gl-opacity-10;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
   @apply gl-py-3;
   @apply gl-pl-4;
   @include gl-h-auto;
-  @include gl-text-truncate;
+  @apply gl-truncate;
   @include gl-bg-no-repeat;
   @apply gl-border-none;
   appearance: none;

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

@@ -34,13 +34,16 @@ export default {
         const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
+          // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
           ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []),
           ...Object.entries(nonDefaultWidths).map(
+            // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
             ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`
           ),
         ];
       }
 
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     },
   },

package/src/components/base/infinite_scroll/infinite_scroll.scss

@@ -1,11 +1,11 @@
 .gl-infinite-scroll-container {
   @include gl-overflow-x-hidden;
   @include gl-overflow-y-auto;
-  @include gl-font-base;
+  @apply gl-text-base;
 }
 
 .gl-infinite-scroll-legend {
   @include gl-text-center;
-  @include gl-font-sm;
+  @apply gl-text-sm;
   @include gl-text-gray-900;
 }

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

@@ -4,15 +4,15 @@ $label-padding-horizontal: 0.75 * $grid-size;
 $label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label {
-  @include gl-align-items-center;
+  @apply gl-items-center;
   background-color: var(--gl-background-color-default);
   @include gl-overflow-hidden;
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
   @include gl-rounded-pill;
   position: relative;
   @include gl-max-w-full;
-  @include gl-font-sm;
-  @include gl-line-height-normal;
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
   box-shadow: var(--label-inset-border) !important;
 
   @media (forced-colors: active) {
@@ -28,16 +28,16 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   .gl-label-link {
-    @include gl-display-flex;
-    @include gl-font-weight-normal;
+    @apply gl-flex;
+    @apply gl-font-normal;
     @include gl-overflow-hidden;
-    @include gl-reset-color;
+    @apply gl-text-inherit;
     @include gl-max-w-full;
 
     &:hover,
     &:focus,
     &:focus:active {
-      @include gl-reset-color;
+      @apply gl-text-inherit;
       @include gl-shadow-none;
       @include gl-outline-none;
     }
@@ -58,14 +58,14 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 
   .gl-label-text,
   .gl-label-text-scoped {
-    @include gl-display-block;
+    @apply gl-block;
     padding: $gl-spacing-scale-1 $label-padding-horizontal;
     @include str-truncated($label-max-width);
   }
 
   > #{$label-close-button} {
     @apply gl-border-0;
-    @include gl-display-flex;
+    @apply gl-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);
     margin-left: -$label-padding-horizontal-half;
@@ -145,7 +145,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 }
 
 .gl-label-tooltip-title {
-  @include gl-display-block;
+  @apply gl-block;
   @include gl-text-theme-indigo-300;
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
 }

package/src/components/base/link/link.scss

@@ -7,7 +7,7 @@
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-text-decoration-underline;
+    @apply gl-underline;
     @include gl-focus($outline: true, $outline-offset: $outline-width);
   }
 }

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

@@ -29,18 +29,18 @@ $gl-loader-dots-size-xl: 1rem;
 }
 
 .gl-spinner-container {
-  @include gl-line-height-0;
+  @apply gl-leading-0;
   @include gl-text-center;
 }
 
 .gl-spinner {
   position: relative;
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
   @include gl-rounded-full;
   @apply gl-border-solid;
   @include gl-mx-auto;
   @apply gl-my-0;
-  @include gl-font-base;
+  @apply gl-text-base;
 
   animation-name: gl-spinner-rotate;
   animation-duration: 0.6s;
@@ -78,7 +78,7 @@ $gl-loader-dots-size-xl: 1rem;
 }
 
 .gl-dots-loader {
-  @include gl-line-height-0;
+  @apply gl-leading-0;
   @include gl-text-center;
 }
 

package/src/components/base/markdown/markdown.scss

@@ -1,9 +1,9 @@
 .gl-markdown {
-  @include gl-font-size-markdown;
-  @include gl-line-height-24;
+  @apply gl-text-lg;
+  @apply gl-leading-24;
   color: $gl-text-color;
   @include gl-font-regular;
-  @include gl-font-weight-normal;
+  @apply gl-font-normal;
 
   :first-child {
     @apply gl-mt-0;
@@ -57,13 +57,13 @@
 
     &.sm {
       @include gl-font-size-markdown-sm;
-      @include gl-line-height-20;
+      @apply gl-leading-20;
     }
   }
 
   .sm {
     @include gl-font-size-markdown-sm;
-    @include gl-line-height-20;
+    @apply gl-leading-20;
   }
 
   .monospace,
@@ -82,7 +82,7 @@
 
   .idiff {
     @apply gl-rounded-base;
-    @include gl-display-inline-flex;
+    @apply gl-inline-flex;
     @apply gl-px-2;
   }
 
@@ -112,15 +112,15 @@
 
     code {
       @include gl-bg-white;
-      @include gl-rounded-0;
+      @apply gl-rounded-none;
       @include gl-text-gray-900;
       @apply gl-p-0;
     }
   }
 
   .audio-container {
-    @include gl-display-inline-flex;
-    @include gl-flex-direction-column;
+    @apply gl-inline-flex;
+    @apply gl-flex-col;
     @include gl-w-full;
 
     audio {
@@ -147,12 +147,12 @@
       @apply gl-px-3;
       @apply gl-py-4;
       @include gl-inset-border-b-1-gray-100;
-      @include gl-vertical-align-top;
+      @apply gl-align-top;
     }
 
     th {
       @include gl-inset-border-y-1-gray-100;
-      @include gl-font-weight-bold;
+      @apply gl-font-bold;
     }
 
     thead {
@@ -166,8 +166,8 @@
 }
 
 .gl-compact-markdown {
-  @include gl-font-base;
-  @include gl-line-height-20;
+  @apply gl-text-base;
+  @apply gl-leading-20;
 
   h1,
   .gl-h1 {
@@ -206,7 +206,7 @@
   }
 
   .sm {
-    @include gl-font-sm;
+    @apply gl-text-sm;
   }
 
   .monospace,