@gitlab/ui 93.1.0 → 93.3.0

package/src/components/base/modal/modal.scss

@@ -43,13 +43,13 @@ body.modal-open {
     color: var(--gl-text-color-default);
 
     > :first-child {
-      @include gl-rounded-top-left-base;
-      @include gl-rounded-top-right-base;
+      @apply gl-rounded-tl-base;
+      @apply gl-rounded-tr-base;
     }
 
     > :last-child {
-      @include gl-rounded-bottom-left-base;
-      @include gl-rounded-bottom-right-base;
+      @apply gl-rounded-bl-base;
+      @apply gl-rounded-br-base;
     }
   }
 
@@ -70,14 +70,14 @@ body.modal-open {
     @apply gl-p-5;
     @apply gl-py-3;
     @include gl-text-left;
-    @include gl-white-space-normal;
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-whitespace-normal;
+    @apply gl-text-base;
+    @apply gl-leading-20;
   }
 
   .modal-footer {
-    @include gl-display-flex;
-    @include gl-flex-direction-row;
+    @apply gl-flex;
+    @apply gl-flex-row;
     @apply gl-p-5;
     @apply gl-pt-3;
     @apply gl-border-none;
@@ -97,7 +97,7 @@ body.modal-open {
     }
 
     @include media-breakpoint-down(xs) {
-      @include gl-flex-direction-column;
+      @apply gl-flex-col;
 
       .btn + .btn:not(.dropdown-toggle-split),
       .btn + .btn-group,
@@ -122,8 +122,8 @@ body.modal-open {
     .modal-dialog {
       @include gl-mx-auto;
       @apply gl-my-0;
-      @include gl-display-flex;
-      @include gl-align-items-center;
+      @apply gl-flex;
+      @apply gl-items-center;
       min-height: calc(100% - 1rem);
     }
   }

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

@@ -1,6 +1,6 @@
 .gl-new-dropdown {
-  @include gl-display-inline-flex;
-  @include gl-vertical-align-middle;
+  @apply gl-inline-flex;
+  @apply gl-align-middle;
 
   .gl-new-dropdown-custom-toggle {
     *:first-child {
@@ -13,7 +13,7 @@
   }
 
   .gl-new-dropdown-panel {
-    @include gl-display-none;
+    @apply gl-hidden;
     @include gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
     @include gl-rounded-lg;
@@ -26,26 +26,26 @@
   }
 
   .gl-new-dropdown-inner {
-    @include gl-display-flex;
-    @include gl-flex-direction-column;
+    @apply gl-flex;
+    @apply gl-flex-col;
     max-height: $gl-max-dropdown-max-height;
   }
 
   .gl-new-dropdown-contents {
     position: relative;
-    @include gl-flex-grow-1;
+    @apply gl-grow;
     @include gl-overflow-y-auto;
     @apply gl-pl-0;
     @apply gl-mb-0;
     @apply gl-py-2;
-    @include gl-list-style-none;
+    @apply gl-list-none;
 
     &:focus-visible {
       @include gl-focus;
     }
 
     ul {
-      @include gl-list-style-none;
+      @apply gl-list-none;
     }
   }
 
@@ -60,20 +60,20 @@
     }
 
     &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
-      @include gl-display-none;
+      @apply gl-hidden;
     }
   }
 
   .gl-new-dropdown-toggle {
     .gl-button-text {
-      @include gl-display-inline-flex;
+      @apply gl-inline-flex;
     }
   }
 
   .gl-new-dropdown-button-text {
     @include gl-mr-auto;
     @include gl-overflow-hidden;
-    @include gl-text-overflow-ellipsis;
+    @apply gl-text-ellipsis;
   }
 
   &.btn-sm .gl-icon {
@@ -191,15 +191,15 @@
 .btn-group {
   .gl-new-dropdown:not(:last-child) {
     .gl-new-dropdown-toggle {
-      @include gl-rounded-top-right-none;
-      @include gl-rounded-bottom-right-none;
+      @apply gl-rounded-tr-none;
+      @apply gl-rounded-br-none;
     }
   }
 
   .gl-new-dropdown:not(:first-child) {
     .gl-new-dropdown-toggle {
-      @include gl-rounded-top-left-none;
-      @include gl-rounded-bottom-left-none;
+      @apply gl-rounded-tl-none;
+      @apply gl-rounded-bl-none;
 
       // Prevent double borders when buttons are next to each other
       margin-left: -1px;
@@ -225,14 +225,14 @@
 
   .gl-new-dropdown:hover {
     .gl-new-dropdown-toggle {
-      @include gl-z-index-1;
+      @apply gl-z-1;
     }
   }
 
   .gl-new-dropdown {
     .gl-new-dropdown-toggle:focus,
     .gl-new-dropdown-toggle:active {
-      @include gl-z-index-1;
+      @apply gl-z-1;
     }
   }
 }

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

@@ -81,36 +81,36 @@
     @apply gl-border-0;
     @include gl-w-full;
     @include gl-bg-transparent;
-    @include gl-align-items-center;
-    @include gl-display-flex;
-    @include gl-font-base;
-    @include gl-font-weight-normal;
-    @include gl-line-height-normal;
+    @apply gl-items-center;
+    @apply gl-flex;
+    @apply gl-text-base;
+    @apply gl-font-normal;
+    @apply gl-leading-normal;
     @apply gl-px-3;
     @apply gl-py-0;
     position: relative;
-    @include gl-text-decoration-none;
+    @apply gl-no-underline;
     @include gl-text-gray-900;
     @include gl-text-left;
-    @include gl-white-space-normal;
+    @apply gl-whitespace-normal;
     @include gl-prefers-reduced-motion-transition;
     transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
                 box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
 
     .gl-new-dropdown-item-check-icon {
-      @include gl-flex-shrink-0;
+      @apply gl-shrink-0;
       @apply gl-mr-3;
       @include gl-text-blue-500;
     }
 
     .gl-new-dropdown-item-icon {
-      @include gl-flex-shrink-0;
+      @apply gl-shrink-0;
       @apply gl-mr-3;
     }
 
     .gl-new-dropdown-item-text-wrapper {
       @include gl-min-w-0;
-      @include gl-flex-grow-1;
+      @apply gl-grow;
       @apply gl-py-3;
     }
   }

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -6,14 +6,14 @@ $clear-button-size: 24px;
 
   .gl-listbox-search-input {
     @include gl-w-full;
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @include gl-h-auto;
     @apply gl-border-none;
-    @include gl-rounded-0;
+    @apply gl-rounded-none;
     padding-left: calc(#{$gl-spacing-scale-7} + #{$gl-spacing-scale-2});
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
     @apply gl-py-4;
-    @include gl-font-base;
+    @apply gl-text-base;
 
     &:focus {
       @include gl-focus($inset: true);
@@ -24,7 +24,7 @@ $clear-button-size: 24px;
     }
 
     &::-webkit-search-cancel-button {
-      @include gl-display-none;
+      @apply gl-hidden;
     }
   }
 

package/src/components/base/pagination/pagination.scss

@@ -1,5 +1,5 @@
 .gl-pagination {
-  @include gl-font-base;
+  @apply gl-text-base;
 
   a {
     @include gl-text-gray-900;
@@ -7,7 +7,7 @@
 
   .page-link {
     @apply gl-border-gray-200;
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @apply gl-px-4;
     @apply gl-py-3;
 
@@ -21,7 +21,7 @@
       box-shadow: inset 0 0 0 1px $gray-400;
       border-color: $gray-400;
       background: $gray-50;
-      @include gl-z-index-1;
+      @apply gl-z-1;
     }
 
     &:not(.active):focus {
@@ -41,7 +41,7 @@
 
     &,
     &:active {
-      @include gl-text-decoration-none;
+      @apply gl-no-underline;
     }
   }
 
@@ -50,7 +50,7 @@
       @include gl-bg-blue-500;
       @apply gl-border-blue-500;
       @include gl-text-white;
-      @include gl-z-index-2;
+      @apply gl-z-2;
       @include gl-shadow-none;
 
       &:focus {

package/src/components/base/path/path.scss

@@ -28,13 +28,13 @@ $path-chevron-right-margin: px-to-rem(14px);
 
 .gl-path-nav {
   position: relative;
-  @include gl-display-flex;
+  @apply gl-flex;
 
   .gl-path-nav-list {
     @apply gl-p-1;
     @apply gl-m-0;
-    @include gl-list-style-none;
-    @include gl-display-inline-flex;
+    @apply gl-list-none;
+    @apply gl-inline-flex;
     @include gl-overflow-hidden;
     margin-left: -1px;
     position: relative;
@@ -54,13 +54,13 @@ $path-chevron-right-margin: px-to-rem(14px);
   .gl-path-button {
     @apply gl-pl-5;
     @apply gl-py-3;
-    @include gl-display-flex;
-    @include gl-font-base;
+    @apply gl-flex;
+    @apply gl-text-base;
     @include gl-z-index-0;
-    @include gl-font-weight-bold;
-    @include gl-line-height-normal;
-    @include gl-rounded-top-left-base;
-    @include gl-rounded-bottom-left-base;
+    @apply gl-font-bold;
+    @apply gl-leading-normal;
+    @apply gl-rounded-tl-base;
+    @apply gl-rounded-bl-base;
     @apply gl-border-none;
     background-color: var(--gl-action-neutral-background-color-default);
     color: var(--gl-action-neutral-foreground-color-default);
@@ -134,7 +134,7 @@ $path-chevron-right-margin: px-to-rem(14px);
   .gl-path-fade {
     @include gl-w-8;
     @include gl-h-full;
-    @include gl-z-index-2;
+    @apply gl-z-2;
     bottom: 0;
     color: var(--gl-text-color-subtle);
     position: absolute;
@@ -157,7 +157,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     color: var(--gl-icon-color-subtle);
 
     .gl-icon {
-      @include gl-vertical-align-middle;
+      @apply gl-align-middle;
     }
   }
 }

package/src/components/base/popover/popover.scss

@@ -6,7 +6,7 @@ $gl-popover-max-width: $grid-size * 35;
   max-width: $gl-popover-max-width;
   @apply gl-border-none;
   @include gl-shadow-md;
-  @include gl-font-sm;
+  @apply gl-text-sm;
 
   &,
   .popover-header {

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -1,5 +1,5 @@
 .gl-search-box-by-click {
-  @include gl-font-base;
+  @apply gl-text-base;
 
   .gl-search-box-by-click-history > .gl-button {
     padding-left: $gl-spacing-scale-4 !important;
@@ -7,16 +7,16 @@
     @apply gl-border-none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    @include gl-inset-border-1-gray-400;
+    @apply gl-shadow-inner-1-gray-400;
   }
 
   .gl-search-box-by-click-search-button.gl-button:not(:disabled) {
-    @include gl-inset-border-1-gray-400;
+    @apply gl-shadow-inner-1-gray-400;
   }
 
   .gl-search-box-by-click-input {
     &::-webkit-search-cancel-button {
-      @include gl-display-none;
+      @apply gl-hidden;
     }
   }
 
@@ -25,7 +25,7 @@
     top: $gl-spacing-scale-2;
     right: $gl-spacing-scale-2;
     @apply gl-mr-2;
-    @include gl-z-index-3;
+    @apply gl-z-3;
   }
 }
 

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -10,7 +10,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 }
 
 .gl-search-box-by-type {
-  @include gl-display-flex;
+  @apply gl-flex;
   position: relative;
 }
 
@@ -21,7 +21,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 }
 
 .gl-search-box-by-type-clear {
-  @include gl-z-index-3;
+  @apply gl-z-3;
 }
 
 .gl-search-box-by-type-input,
@@ -31,16 +31,16 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   padding-left: $gl-search-box-by-type-input-padding;
 
   &::-webkit-search-cancel-button {
-    @include gl-display-none;
+    @apply gl-hidden;
   }
 }
 
 .gl-search-box-by-type-input-borderless,
 .gl-search-box-by-type-input-borderless.gl-form-input {
   @apply gl-border-none;
-  @include gl-font-base;
+  @apply gl-text-base;
   @include gl-h-auto;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
   @apply gl-pl-7;
   @apply gl-py-4;
   @include gl-shadow-none;
@@ -57,14 +57,14 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 
   &::-webkit-search-cancel-button {
-    @include gl-display-none;
+    @apply gl-hidden;
   }
 }
 
 .gl-search-box-by-type-right-icons {
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-line-height-0;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-leading-0;
   right: $gl-spacing-scale-2;
   position: absolute;
   @include gl-h-full;

package/src/components/base/segmented_control/segmented_control.scss

@@ -33,8 +33,8 @@
   }
 
   .btn-gl-segmented-button {
-    @include gl-font-base;
-    @include gl-line-height-normal;
+    @apply gl-text-base;
+    @apply gl-leading-normal;
     @include gl-text-gray-900;
     @include gl-fill-current-color;
     @include gl-bg-gray-10;
@@ -54,13 +54,13 @@
     }
 
     &.focus {
-      @include gl-z-index-1;
+      @apply gl-z-1;
       @include gl-btn-gl-segmented-button-focus($gray-400);
       @include gl-bg-gray-50;
     }
 
     &.active {
-      @include gl-z-index-2;
+      @apply gl-z-2;
       @include gl-inset-border-2-gray-300;
       @include gl-bg-white;
 

package/src/components/base/table/table.scss

@@ -9,13 +9,13 @@ table.gl-table {
       border-color: var(--gl-border-color-default);
       @apply gl-p-5;
       @include gl-bg-transparent;
-      @include gl-line-height-normal;
-      @include gl-font-base;
-      @include gl-vertical-align-top;
+      @apply gl-leading-normal;
+      @apply gl-text-base;
+      @apply gl-align-top;
     }
 
     th {
-      @include gl-font-weight-bold;
+      @apply gl-font-bold;
       color: var(--gl-text-color-heading);
 
       &.gl-text-right > div {
@@ -72,7 +72,7 @@ table.gl-table {
         content: '';
         @include gl-h-6;
         @include gl-w-full;
-        @include gl-display-block;
+        @apply gl-block;
       }
 
       > td[data-label] {
@@ -93,7 +93,7 @@ table.gl-table {
 
       div {
         @include gl-text-right;
-        @include gl-overflow-wrap-break;
+        @apply gl-break-words;
       }
     }
   }

package/src/components/base/tabs/tabs/tabs.scss

@@ -6,10 +6,10 @@
   position: relative;
   @apply gl-px-4;
   @apply gl-py-5;
-  @include gl-line-height-normal;
-  @include gl-font-base;
-  @include gl-display-flex;
-  @include gl-justify-content-center;
+  @apply gl-leading-normal;
+  @apply gl-text-base;
+  @apply gl-flex;
+  @apply gl-justify-center;
   @apply gl-border;
   @include gl-action-neutral-colors;
   transition:
@@ -64,13 +64,13 @@
 
 .gl-tab-content {
   @apply gl-py-3;
-  @include gl-font-base;
-  @include gl-line-height-normal;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
   color: var(--gl-text-color-default);
 }
 
 .gl-tab-nav-item-active {
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
   z-index: 1;
 
   &:active,
@@ -104,28 +104,28 @@
 
 .gl-actions-tabs-start {
   @include gl-w-full;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
+  @apply gl-flex;
+  @apply gl-flex-col;
   @apply gl-mt-3;
-  @include gl-md-display-none;
+  @apply md:gl-hidden;
 }
 
 .gl-actions-tabs-end {
-  @include gl-display-none;
-  @include gl-flex-grow-1;
-  @include gl-justify-content-end;
-  @include gl-align-items-center;
-  @include gl-flex-direction-row;
+  @apply gl-hidden;
+  @apply gl-grow;
+  @apply gl-justify-end;
+  @apply gl-items-center;
+  @apply gl-flex-row;
   @apply gl-mt-0;
-  @include gl-md-display-flex;
+  @apply md:gl-flex;
 }
 
 .gl-actions-tabs-start,
 .gl-actions-tabs-end {
   button {
     @apply gl-mb-3;
-    @include gl-md-mr-3;
-    @include gl-md-mb-0;
+    @apply md:gl-mr-3;
+    @apply md:gl-mb-0;
   }
 
   button:last-child {

package/src/components/base/toast/toast.js

@@ -44,6 +44,7 @@ function renderTitle(h, toast, options) {
 }
 
 function showToast(message, options = {}) {
+  // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
   const id = `gl-toast-${toastsCount}`;
   toastsCount += 1;
   const hide = () => {

package/src/components/base/toast/toast.scss

@@ -20,25 +20,25 @@
 
   .gl-toast {
     @apply gl-rounded-base;
-    @include gl-font-base;
+    @apply gl-text-base;
     @apply gl-py-5;
     @apply gl-px-6;
-    @include gl-line-height-normal;
-    @include gl-display-flex;
-    @include gl-align-items-center;
-    @include gl-justify-content-space-between;
+    @apply gl-leading-normal;
+    @apply gl-flex;
+    @apply gl-items-center;
+    @apply gl-justify-between;
     background-color: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
   }
 
   .toast-body {
-    @include gl-font-weight-300;
+    @apply gl-font-300;
     @apply gl-pr-3;
     order: 1;
   }
 
   .toast-header {
-    @include gl-display-flex;
+    @apply gl-flex;
     order: 2;
   }
 
@@ -48,9 +48,9 @@
     @apply gl-m-0;
     @apply gl-ml-5;
     @include gl-text-transform-none;
-    @include gl-font-base;
-    @include gl-white-space-nowrap;
-    @include gl-font-weight-bold;
+    @apply gl-text-base;
+    @apply gl-whitespace-nowrap;
+    @apply gl-font-bold;
     @include gl-cursor-pointer;
   }