Refactor(Purchase Flow): use added `gl-*`-styles

app/assets/javascripts/ide/components/ide_status_mr.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex-center flex-nowrap text-nowrap js-ide-status-mr">
+  <div class="d-flex-center gl-flex-nowrap text-nowrap js-ide-status-mr">
     <gl-icon name="merge-request" />
     <span class="ml-1 d-none d-sm-block">{{ s__('WebIDE|Merge request') }}</span>
     <gl-link class="ml-1" :href="url">{{ text }}</gl-link>

app/assets/javascripts/ide/components/nav_dropdown_button.vue

@@ -31,7 +31,7 @@ export default {
 
 <template>
   <dropdown-button>
-    <span class="row flex-nowrap">
+    <span class="row gl-flex-nowrap">
       <span class="col-auto flex-fill text-truncate">
         <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }}
       </span>

app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue

@@ -111,7 +111,7 @@ export default {
       </gl-link>
     </td>
     <td
-      class="gl-display-flex gl-flex-sm-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
+      class="gl-display-flex gl-sm-flex-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
       data-testid="fullPath"
       data-qa-selector="project_path_content"
     >

app/assets/javascripts/monitoring/components/links_section.vue

@@ -15,7 +15,7 @@ export default {
 <template>
   <div
     ref="linksSection"
-    class="gl-sm-display-flex gl-flex-sm-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
+    class="gl-sm-display-flex gl-sm-flex-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
   >
     <div
       v-for="(link, key) in links"

app/views/import/shared/_new_project_form.html.haml

@@ -5,7 +5,7 @@
   .form-group.col-12.col-sm-6
     = label_tag :namespace_id, _('Project URL'), class: 'label-bold'
     .form-group
-      .input-group.flex-nowrap
+      .input-group.gl-flex-nowrap
         - if current_user.can_select_namespace?
           .input-group-prepend.flex-shrink-0.has-tooltip{ title: root_url }
             .input-group-text

app/views/projects/_new_project_fields.html.haml

@@ -12,7 +12,7 @@
   .form-group.project-path.col-sm-6
     = f.label :namespace_id, class: 'label-bold' do
       %span= s_("Project URL")
-    .input-group.flex-nowrap
+    .input-group.gl-flex-nowrap
       - if current_user.can_select_namespace?
         .input-group-prepend.flex-shrink-0.has-tooltip{ title: root_url }
           .input-group-text

app/views/shared/projects/_search_bar.html.haml

@@ -3,7 +3,7 @@
 - flex_grow_and_shrink_xs = 'd-flex flex-xs-grow-1 flex-xs-shrink-1 flex-grow-0 flex-shrink-0'
 
 .filtered-search-block.row-content-block.bt-0
-  .filtered-search-wrapper.d-flex.flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
+  .filtered-search-wrapper.d-flex.gl-flex-nowrap.flex-column.flex-sm-wrap.flex-sm-row.flex-xl-nowrap
     - unless project_tab_filter == :starred
       .filtered-search-nav.mb-2.mb-lg-0{ class: flex_grow_and_shrink_xs }
         = render 'dashboard/projects/nav', project_tab_filter: project_tab_filter

ee/app/assets/javascripts/other_storage_counter/components/project.vue

@@ -97,7 +97,7 @@ export default {
       @click="toggleProject"
     >
       <div
-        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-70 gl-text-truncate"
+        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-70 gl-text-truncate"
         role="gridcell"
       >
         <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -119,7 +119,7 @@ export default {
         </div>
       </div>
       <div
-        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-30 gl-text-truncate"
+        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-30 gl-text-truncate"
         role="gridcell"
       >
         <div class="table-mobile-header gl-font-weight-bold" role="rowheader">

ee/app/assets/javascripts/other_storage_counter/components/project_with_excess_storage.vue

@@ -110,7 +110,7 @@ export default {
     data-testid="projectTableRow"
   >
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-50 gl-text-truncate gl-pr-5"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-50 gl-text-truncate gl-pr-5"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -140,7 +140,7 @@ export default {
       </div>
     </div>
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-15 gl-text-truncate"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -149,7 +149,7 @@ export default {
       <div class="table-mobile-content gl-text-gray-900">{{ storageSize }}</div>
     </div>
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-15 gl-text-truncate"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">

ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue

@@ -99,7 +99,7 @@ export default {
 <template>
   <div class="epics-filters epics-roadmap-filters epics-roadmap-filters-gl-ui">
     <div
-      class="epics-details-filters filtered-search-block gl-display-flex gl-flex-direction-column flex-xl-row row-content-block second-block"
+      class="epics-details-filters filtered-search-block gl-display-flex gl-flex-direction-column gl-xl-flex-direction-row row-content-block second-block"
     >
       <gl-form-group class="mb-0">
         <gl-segmented-control

ee/app/assets/javascripts/storage_counter/components/project.vue

@@ -97,7 +97,7 @@ export default {
       @click="toggleProject"
     >
       <div
-        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-70 gl-text-truncate"
+        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-70 gl-text-truncate"
         role="gridcell"
       >
         <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -119,7 +119,7 @@ export default {
         </div>
       </div>
       <div
-        class="table-section gl-white-space-normal! gl-flex-sm-wrap section-30 gl-text-truncate"
+        class="table-section gl-white-space-normal! gl-sm-flex-wrap section-30 gl-text-truncate"
         role="gridcell"
       >
         <div class="table-mobile-header gl-font-weight-bold" role="rowheader">

ee/app/assets/javascripts/storage_counter/components/project_with_excess_storage.vue

@@ -110,7 +110,7 @@ export default {
     data-testid="projectTableRow"
   >
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-50 gl-text-truncate gl-pr-5"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-50 gl-text-truncate gl-pr-5"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -140,7 +140,7 @@ export default {
       </div>
     </div>
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-15 gl-text-truncate"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">
@@ -149,7 +149,7 @@ export default {
       <div class="table-mobile-content gl-text-gray-900">{{ storageSize }}</div>
     </div>
     <div
-      class="table-section gl-white-space-normal! gl-flex-sm-wrap section-15 gl-text-truncate"
+      class="table-section gl-white-space-normal! gl-sm-flex-wrap section-15 gl-text-truncate"
       role="gridcell"
     >
       <div class="table-mobile-header gl-font-weight-bold" role="rowheader">

ee/app/assets/javascripts/vue_shared/purchase_flow/components/step_order_app.vue

 <template>
   <div
-    class="row gl-flex-grow-1 gl-flex-direction-column flex-nowrap gl-lg-flex-direction-row flex-xl-row flex-lg-wrap flex-xl-wrap"
+    class="row gl-flex-grow-1 gl-flex-direction-column gl-flex-nowrap gl-lg-flex-direction-row gl-xl-flex-direction-row gl-lg-flex-wrap gl-xl-flex-wrap"
   >
     <div
       class="checkout-pane gl-px-3 gl-align-items-center gl-bg-gray-10 col-lg-7 gl-display-flex gl-flex-direction-column gl-flex-grow-1"
@@ -8,7 +8,7 @@
       <slot name="checkout"></slot>
     </div>
     <div
-      class="gl-pb-3 gl-px-3 px-lg-7 col-lg-5 gl-display-flex gl-flex-direction-row gl-justify-content-center"
+      class="gl-pb-3 gl-px-3 gl-lg-px-7 col-lg-5 gl-display-flex gl-flex-direction-row gl-justify-content-center"
     >
       <slot name="order-summary"></slot>
     </div>