@gitlab/ui 86.12.0 → 86.13.0

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -267,7 +267,7 @@ export default {
     },
     panelClasses() {
       return {
-        'gl-display-block!': this.visible,
+        '!gl-block': this.visible,
         [FIXED_WIDTH_CLASS]: !this.fluidWidth,
         'gl-fixed': this.openedYet && this.isFixed,
         'gl-absolute': this.openedYet && !this.isFixed,
@@ -478,7 +478,7 @@ export default {
 <template>
   <component
     :is="wrapperComponent"
-    :class="[$options.BASE_DROPDOWN_CLASS, { 'gl-display-block!': block }]"
+    :class="[$options.BASE_DROPDOWN_CLASS, { '!gl-block': block }]"
     @close="close"
   >
     <component

package/src/components/base/new_dropdowns/base_dropdown/constants.js

@@ -1,2 +1,2 @@
-export const FIXED_WIDTH_CLASS = 'gl-w-31!';
+export const FIXED_WIDTH_CLASS = '!gl-w-31';
 export const DEFAULT_OFFSET = 4;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -112,7 +112,7 @@ template. If you want to render a custom template for items, use the
 ```html
 <gl-disclosure-dropdown :items="items">
   <template #list-item="{ item }">
-    <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+    <span class="gl-flex gl-items-center gl-justify-between">
       {{item.text}}
       <gl-icon v-if="item.icon" :name="item.icon" />
     </span>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -81,11 +81,11 @@ export default {
       v-if="showHeader"
       :id="nameId"
       aria-hidden="true"
-      class="gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold"
+      class="gl-py-2 gl-pl-4 gl-text-sm gl-font-bold"
     >
       <slot name="group-label">{{ group.name }}</slot>
     </div>
-    <ul :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
+    <ul :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-list-none gl-pl-0">
       <slot>
         <!-- eslint-disable vue/valid-v-for -->
         <gl-disclosure-dropdown-item

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -30,7 +30,7 @@ export const mockItems = [
       console.log('CLOSED');
     },
     extraAttrs: {
-      class: 'gl-text-red-500!',
+      class: '!gl-text-red-500',
       rel: 'nofollow',
       'data-method': 'put',
     },
@@ -74,7 +74,7 @@ export const mockItemsCustomItem = [
       // eslint-disable-next-line no-console
       console.log('clicked!');
     },
-    wrapperClass: 'gl-sm-display-none!',
+    wrapperClass: 'sm:!gl-hidden',
   },
 ];
 

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

@@ -89,10 +89,10 @@ template. If you want to render a custom template for items, use the
 ```html
 <gl-collapsible-listbox :items="items">
   <template #list-item="{ item }">
-    <span class="gl-display-flex gl-align-items-center">
+    <span class="gl-flex gl-items-center">
       <gl-avatar :size="32" class-="gl-mr-3"/>
-      <span class="gl-display-flex gl-flex-direction-column">
-        <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
+      <span class="gl-flex gl-flex-col">
+        <span class="gl-font-bold gl-whitespace-nowrap">{{ item.text }}</span>
         <span class="gl-text-subtle"> {{ item.secondaryText }}</span>
       </span>
     </span>

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

@@ -471,7 +471,7 @@ export default {
       const toggleClasses = [this.toggleClass];
 
       if (!this.hasSelection) {
-        toggleClasses.push('gl-text-gray-500!');
+        toggleClasses.push('!gl-text-gray-500');
       }
       return toggleClasses;
     },
@@ -790,12 +790,12 @@ export default {
 
     <div
       v-if="headerText"
-      class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8"
+      class="gl-flex gl-min-h-8 gl-items-center !gl-p-4"
       :class="$options.HEADER_ITEMS_BORDER_CLASSES"
     >
       <div
         :id="headerId"
-        class="gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-pr-2"
+        class="gl-grow gl-pr-2 gl-text-sm gl-font-bold"
         data-testid="listbox-header-text"
       >
         {{ headerText }}
@@ -803,7 +803,7 @@ export default {
       <gl-button
         v-if="showResetButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
         data-testid="listbox-reset-button"
         @click="onResetButtonClicked"
       >
@@ -812,7 +812,7 @@ export default {
       <gl-button
         v-if="showSelectAllButton"
         category="tertiary"
-        class="gl-focus-inset-border-2-blue-400! gl-flex-shrink-0 gl-font-sm! gl-px-2! gl-py-2! gl-w-auto! gl-m-0! gl-max-w-50p gl-text-overflow-ellipsis"
+        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-py-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
         data-testid="listbox-select-all-button"
         @click="onSelectAllButtonClicked"
       >
@@ -919,7 +919,7 @@ export default {
         aria-hidden="true"
         data-testid="bottom-scrim"
       >
-        <div class="bottom-scrim" :class="{ 'gl-rounded-0!': hasFooter }"></div>
+        <div class="bottom-scrim" :class="{ '!gl-rounded-none': hasFooter }"></div>
       </component>
     </component>
     <span
@@ -937,7 +937,7 @@ export default {
     <div
       v-else-if="showNoResultsText"
       aria-live="assertive"
-      class="gl-pl-7 gl-pr-5 gl-py-3 gl-font-base gl-text-gray-600"
+      class="gl-py-3 gl-pl-7 gl-pr-5 gl-text-base gl-text-gray-600"
       data-testid="listbox-no-results-text"
     >
       {{ noResultsText }}

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -25,7 +25,7 @@ export default {
     <li
       :id="nameId"
       role="presentation"
-      class="gl-pl-4 gl-pt-3 gl-pb-2 gl-font-sm gl-font-weight-bold"
+      class="gl-pb-2 gl-pl-4 gl-pt-3 gl-text-sm gl-font-bold"
       :class="{ 'gl-sr-only': textSrOnly }"
     >
       <slot name="group-label">{{ name }}</slot>

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -31,7 +31,7 @@ export default {
         return '';
       }
 
-      return 'gl-mt-3 gl-align-self-start';
+      return 'gl-mt-3 gl-self-start';
     },
   },
   methods: {
@@ -65,7 +65,7 @@ export default {
         data-testid="dropdown-item-checkbox"
         :class="[
           'gl-new-dropdown-item-check-icon',
-          { 'gl-visibility-hidden': !isSelected },
+          { 'gl-invisible': !isSelected },
           checkedClasses,
         ]"
       />

package/src/components/base/pagination/pagination.vue

@@ -402,7 +402,7 @@ export default {
         <component
           :is="prevPageIsDisabled ? 'span' : 'a'"
           data-testid="page-link"
-          class="gl-link page-link prev-page-item gl-display-flex"
+          class="gl-link page-link prev-page-item gl-flex"
           :aria-label="prevPageAriaLabel"
           :href="prevPageHref"
           @click="handlePrevious($event, value - 1)"
@@ -469,7 +469,7 @@ export default {
         <component
           :is="nextPageIsDisabled ? 'span' : 'a'"
           data-testid="page-link"
-          class="gl-link page-link next-page-item gl-display-flex"
+          class="gl-link page-link next-page-item gl-flex"
           :aria-label="nextPageAriaLabel"
           :href="nextPageHref"
           @click="handleNext($event, value + 1)"

package/src/components/base/path/path.vue

@@ -185,7 +185,7 @@ export default {
             class="gl-mr-2"
             data-testid="gl-path-item-icon"
           />{{ item.title
-          }}<span v-if="item.metric" class="gl-font-weight-normal gl-pl-2">{{ item.metric }}</span>
+          }}<span v-if="item.metric" class="gl-pl-2 gl-font-normal">{{ item.metric }}</span>
         </button>
         <!--
           @slot Additional content to be displayed in a path item.

package/src/components/base/popover/popover.vue

@@ -98,9 +98,9 @@ export default {
       <slot name="title">
         {{ title }}
       </slot>
-      <div v-if="showCloseButton" class="gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0">
+      <div v-if="showCloseButton" class="-gl-mr-3 -gl-mt-2 gl-ml-3 gl-h-0">
         <close-button
-          :class="{ 'gl-mt-2 gl-float-right': !hasTitle }"
+          :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
           data-testid="close-button"
           @click="close"
         />

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -219,7 +219,7 @@ export default {
       >
         <template #header>
           <div
-            class="gl-search-box-by-click-history-header gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-gray-200 gl-flex-grow-1 gl-font-weight-bold gl-font-sm gl-border-b-solid"
+            class="gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-gray-200 !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"
           >
             {{ recentSearchesHeader }}
           </div>
@@ -238,18 +238,18 @@ export default {
             </template>
           </gl-disclosure-dropdown-item>
         </template>
-        <div v-else class="gl-font-sm gl-py-2 gl-px-4 gl-text-secondary">
+        <div v-else class="gl-px-4 gl-py-2 gl-text-sm gl-text-secondary">
           {{ noRecentSearchesText }}
         </div>
 
         <template v-if="historyItems.length" #footer>
           <div
-            class="gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2 gl-border-t-solid"
+            class="gl-flex gl-flex-col gl-border-t-1 gl-border-t-gray-200 gl-p-2 gl-border-t-solid"
           >
             <gl-button
               ref="clearHistory"
               category="tertiary"
-              class="gl-justify-content-start!"
+              class="!gl-justify-start"
               @click="emitClearHistory"
             >
               {{ clearRecentSearchesText }}
@@ -263,7 +263,7 @@ export default {
         ref="input"
         v-model="currentValue"
         class="gl-search-box-by-click-input"
-        :class="{ 'gl-rounded-base!': !showSearchButton }"
+        :class="{ '!gl-rounded-base': !showSearchButton }"
         v-bind="inputAttributes"
         :disabled="disabled"
         @focus="isFocused = true"

package/src/components/base/skeleton_loader/skeleton_loader.md

@@ -22,9 +22,9 @@ CSS-based approach:
 
 ```html
 <div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-20!"></div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-30!"></div>
-  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 gl-max-w-26!"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-20"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-30"></div>
+  <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-my-3 !gl-max-w-26"></div>
 </div>
 ```
 

package/src/components/base/table/table.vue

@@ -108,15 +108,15 @@ export default {
       <slot :name="slotName" v-bind="scope"></slot>
     </template>
     <template v-for="headSlotName in headSlots" #[headSlotName]="scope">
-      <div :key="headSlotName" class="gl-display-flex">
+      <div :key="headSlotName" class="gl-flex">
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <div class="gl-ml-2 gl-w-5 gl-display-flex gl-justify-content-center">
+          <div class="gl-ml-2 gl-flex gl-w-5 gl-justify-center">
             <span
               name="sort-icon"
               data-testid="sort-icon"
-              :class="{ 'gl-display-none': !activeSortingColumn(scope) }"
+              :class="{ 'gl-hidden': !activeSortingColumn(scope) }"
             >
               {{ getSortingIcon(scope) }}
             </span>

package/src/components/base/toggle/toggle.vue

@@ -141,9 +141,9 @@ export default {
 
 <template>
   <div
-    class="gl-toggle-wrapper gl-display-flex gl-mb-0"
+    class="gl-toggle-wrapper gl-mb-0 gl-flex"
     :class="{
-      'gl-flex-direction-column': isVerticalLayout,
+      'gl-flex-col': isVerticalLayout,
       'gl-toggle-label-inline': !isVerticalLayout,
       'is-disabled': disabled,
     }"

package/src/components/base/token_selector/token_container.vue

@@ -128,10 +128,10 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-flex-nowrap gl-align-items-flex-start gl-w-full">
+  <div class="gl-flex gl-w-full gl-flex-nowrap gl-items-start">
     <div
       ref="tokenContainer"
-      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
+      class="-gl-mx-1 -gl-my-1 gl-flex gl-w-full gl-flex-wrap gl-items-center"
       role="listbox"
       aria-multiselectable="false"
       aria-orientation="horizontal"

package/src/components/base/token_selector/token_selector.vue

@@ -176,12 +176,12 @@ export default {
     },
     stateClass() {
       if (this.state === null) {
-        return 'gl-inset-border-1-gray-400!';
+        return '!gl-shadow-inner-1-gray-400';
       }
 
       return this.state
-        ? 'is-valid gl-inset-border-1-gray-400!'
-        : 'is-invalid gl-inset-border-1-red-500!';
+        ? 'is-valid !gl-shadow-inner-1-gray-400'
+        : 'is-invalid !gl-shadow-inner-1-red-500';
     },
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
@@ -385,7 +385,7 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
+      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2"
       :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
       @click="handleContainerClick"
     >
@@ -415,7 +415,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p gl-text-gray-900"
+            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

package/src/components/base/token_selector/token_selector_dropdown.vue

@@ -195,7 +195,7 @@ export default {
           tabindex="-1"
           @click="handleDropdownItemClick(dropdownItem)"
         >
-          <div class="gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
+          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(dropdownItem)">
             <slot name="dropdown-item-content" :dropdown-item="dropdownItem">
               {{ dropdownItem.name }}
             </slot>
@@ -210,7 +210,7 @@ export default {
           active-class="is-focused"
           @click="handleDropdownItemClick(null)"
         >
-          <div class="gl-mx-n4 gl-my-n3 gl-px-4 gl-py-3" @mousedown="handleMousedown(null)">
+          <div class="-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3" @mousedown="handleMousedown(null)">
             <slot name="user-defined-token-content" :input-text="inputText">
               Add "{{ inputText }}"
             </slot>

package/src/components/charts/area/area.vue

@@ -319,7 +319,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/charts/bar/bar.vue

@@ -221,7 +221,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/charts/column/column.vue

@@ -178,7 +178,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -183,7 +183,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/charts/heatmap/heatmap.vue

@@ -257,7 +257,7 @@ export default {
   <div class="gl-heatmap" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="computedOptions"
       @created="onCreated"

package/src/components/charts/legend/legend.vue

@@ -199,7 +199,7 @@ export default {
           :class="{
             'text-muted': disabledSeries[key],
             'w-100': seriesNameIsLong(series.name),
-            'gl-hover-cursor-not-allowed!':
+            'hover:!gl-cursor-not-allowed':
               hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
           }"
           class="gl-legend-inline-series"
@@ -216,11 +216,11 @@ export default {
             class="gl-legend-inline-series-label"
             :class="{ 'w-75': seriesNameIsLong(series.name) }"
           >
-            <gl-truncate class="gl-font-weight-bold" :text="series.name" />
+            <gl-truncate class="gl-font-bold" :text="series.name" />
           </gl-chart-series-label>
           <span
             v-if="series.data && series.data.length"
-            :class="{ 'gl-white-space-nowrap': seriesNameIsLong(series.name) }"
+            :class="{ 'gl-whitespace-nowrap': seriesNameIsLong(series.name) }"
           >
             {{ averageText }}: {{ seriesAverage(series.data) }} · {{ maxText }}:
             {{ seriesMax(series.data) }}
@@ -243,7 +243,7 @@ export default {
             :key="key"
             :class="{
               'text-muted': disabledSeries[key],
-              'gl-hover-cursor-not-allowed!':
+              'hover:!gl-cursor-not-allowed':
                 hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
             }"
             class="gl-legend-tabular-row"
@@ -260,7 +260,7 @@ export default {
                 :style="fontStyle"
                 :type="series.type"
               >
-                <gl-truncate class="gl-font-weight-bold" :text="series.name" />
+                <gl-truncate class="gl-font-bold" :text="series.name" />
               </gl-chart-series-label>
             </div>
 

package/src/components/charts/line/line.vue

@@ -315,7 +315,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/charts/single_stat/single_stat.vue

@@ -116,25 +116,19 @@ export default {
 </script>
 
 <template>
-  <div
-    class="gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <div class="gl-display-flex gl-align-items-center gl-mb-2 gl-text-gray-700">
+  <div class="gl-single-stat gl-flex gl-flex-col gl-p-2" v-bind="$attrs" v-on="$listeners">
+    <div class="gl-mb-2 gl-flex gl-items-center gl-text-gray-700">
       <gl-icon
         v-if="showTitleIcon"
         :name="titleIcon"
         :class="['gl-mr-2', titleIconClass]"
         data-testid="title-icon"
       />
-      <span class="gl-font-base gl-font-weight-normal" data-testid="title-text">{{ title }}</span>
+      <span class="gl-text-base gl-font-normal" data-testid="title-text">{{ title }}</span>
     </div>
-    <div
-      class="gl-single-stat-content gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"
-    >
+    <div class="gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-gray-900">
       <span
-        class="gl-single-stat-number gl-line-height-1"
+        class="gl-single-stat-number gl-leading-1"
         :class="{ 'gl-mr-2': !unit }"
         data-testid="displayValue"
       >
@@ -150,8 +144,8 @@ export default {
       >
       <span
         v-if="unit"
-        class="gl-font-sm gl-mx-2 gl-transition-medium gl-opacity-10"
-        :class="{ 'gl-opacity-0!': hideUnits }"
+        class="gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all"
+        :class="{ '!gl-opacity-0': hideUnits }"
         data-testid="unit"
         >{{ unit }}</span
       >

package/src/components/charts/sparkline/sparkline.vue

@@ -240,18 +240,18 @@ export default {
 <template>
   <div
     v-resize-observer="handleResize"
-    class="gl-display-flex gl-align-items-center"
+    class="gl-flex gl-items-center"
     :class="{ 'gl-h-full': autoHeight }"
   >
     <slot name="default"></slot>
     <div
       data-testid="chart-container"
-      class="gl-flex-grow-1 gl-relative"
+      class="gl-relative gl-grow"
       :class="{ [$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES]: autoHeight }"
     >
       <chart
         v-bind="$attrs"
-        :class="{ 'gl-flex-grow-1': autoHeight }"
+        :class="{ 'gl-grow': autoHeight }"
         :height="height"
         :options="options"
         @created="onChartCreated"
@@ -266,13 +266,13 @@ export default {
         placement="top"
       >
         <template #title>
-          <div data-testid="tooltip-title" class="gl-white-space-nowrap">
+          <div data-testid="tooltip-title" class="gl-whitespace-nowrap">
             {{ tooltip.title }}
           </div>
         </template>
         <template #default>
-          <div class="gl-display-flex" data-testid="tooltip-content">
-            <span v-if="tooltipLabel" class="gl-pr-6 gl-mr-auto">{{ tooltipLabel }}</span>
+          <div class="gl-flex" data-testid="tooltip-content">
+            <span v-if="tooltipLabel" class="gl-mr-auto gl-pr-6">{{ tooltipLabel }}</span>
             <strong>{{ tooltip.content }}</strong>
           </div>
         </template>
@@ -280,7 +280,7 @@ export default {
     </div>
     <span
       v-if="showLastYValue"
-      class="gl-display-inline-flex gl-justify-content-center gl-ml-5"
+      class="gl-ml-5 gl-inline-flex gl-justify-center"
       data-testid="last-y-value"
     >
       {{ lastYValue }}

package/src/components/charts/stacked_column/stacked_column.vue

@@ -294,7 +294,7 @@ export default {
   <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
     <chart
       v-bind="$attrs"
-      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :class="{ 'gl-grow': autoHeight }"
       :height="height"
       :options="options"
       v-on="$listeners"

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -62,19 +62,16 @@ export default {
 </script>
 <template>
   <div
-    :class="[
-      'gl-display-flex gl-flex-direction-column gl-justify-content-end',
-      { 'insert-code-hidden': !enableCodeInsertion },
-    ]"
+    :class="['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !enableCodeInsertion }]"
   >
     <div
       v-if="showDelimiter"
-      class="gl-my-5 gl-display-flex gl-align-items-center gl-gap-4 gl-text-gray-500"
+      class="gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500"
       data-testid="conversation-delimiter"
     >
-      <hr class="gl-flex-grow-1" />
+      <hr class="gl-grow" />
       <span>{{ $options.i18n.CONVERSATION_NEW_CHAT }}</span>
-      <hr class="gl-flex-grow-1" />
+      <hr class="gl-grow" />
     </div>
     <gl-duo-chat-message
       v-for="(msg, index) in messages"

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -61,8 +61,8 @@ export default {
 </script>
 
 <template>
-  <div class="duo-chat-loader gl-display-flex gl-align-items-center">
-    <div class="gl-display-flex gl-mr-3">
+  <div class="duo-chat-loader gl-flex gl-items-center">
+    <div class="gl-mr-3 gl-flex">
       <div class="duo-chat-loader__dot duo-chat-loader__dot--1"></div>
       <div class="duo-chat-loader__dot duo-chat-loader__dot--2"></div>
       <div class="duo-chat-loader__dot duo-chat-loader__dot--3"></div>
@@ -76,7 +76,7 @@ export default {
           <transition-group
             ref="transition"
             name="text"
-            class="transition gl-display-inline-block gl-vertical-align-bottom gl-relative"
+            class="transition gl-relative gl-inline-block gl-align-bottom"
             @after-leave="computeTransitionWidth"
           >
             <span
@@ -85,7 +85,7 @@ export default {
               :ref="isCurrentTransition(index) ? 'currentTransition' : ''"
               :key="message"
               :data-testid="isCurrentTransition(index) ? 'current-transition' : ''"
-              class="gl-white-space-nowrap gl-absolute gl-bottom-0 gl-left-0"
+              class="gl-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap"
               >{{ message }}</span
             >
           </transition-group>