Rename responsive display utilities

All usages of display CSS utilities have been updated to reflect their
new names. Here's a summary of those updates:

- gl-display-sm-none -> gl-sm-display-none
- gl-display-md-none -> gl-md-display-none
- gl-display-lg-none -> gl-lg-display-none
- gl-display-sm-flex -> gl-sm-display-flex
- gl-display-md-flex -> gl-md-display-flex
- gl-display-lg-flex -> gl-lg-display-flex
- gl-display-sm-inline-flex -> gl-sm-display-inline-flex
- gl-display-lg-inline-flex -> gl-lg-display-inline-flex
- gl-display-sm-block -> gl-sm-display-block
- gl-display-md-block -> gl-md-display-block
- gl-display-lg-block -> gl-lg-display-block
- gl-display-lg-inline-block -> gl-lg-display-inline-block
- gl-display-lg-table-cell -> gl-lg-display-table-cell

app/assets/javascripts/blob/components/blob_header.vue

@@ -71,7 +71,7 @@ export default {
       </template>
     </blob-filepath>
 
-    <div class="gl-display-none gl-display-sm-flex">
+    <div class="gl-display-none gl-sm-display-flex">
       <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" />
 
       <slot name="actions"></slot>

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -197,7 +197,7 @@ export default {
       <gl-button
         v-if="canRenderPipelineButton"
         block
-        class="gl-mt-3 gl-mb-0 gl-display-md-none"
+        class="gl-mt-3 gl-mb-0 gl-md-display-none"
         variant="success"
         data-testid="run_pipeline_button_mobile"
         :loading="state.isRunningMergeRequestPipeline"

app/assets/javascripts/environments/components/environment_delete.vue

@@ -59,7 +59,7 @@ export default {
     :loading="isLoading"
     :title="title"
     :aria-label="title"
-    class="gl-display-none gl-display-md-block"
+    class="gl-display-none gl-md-display-block"
     variant="danger"
     category="primary"
     icon="remove"

app/assets/javascripts/environments/components/environment_item.vue

@@ -549,7 +549,7 @@ export default {
     upcomingDeploymentCellClasses() {
       return [
         this.tableData.upcoming.spacing,
-        { 'gl-display-none gl-display-md-block': !this.upcomingDeployment },
+        { 'gl-display-none gl-md-display-block': !this.upcomingDeployment },
       ];
     },
   },

app/assets/javascripts/environments/components/environment_monitoring.vue

@@ -30,7 +30,7 @@ export default {
     :href="monitoringUrl"
     :title="title"
     :aria-label="title"
-    class="monitoring-url gl-display-none gl-display-sm-none gl-display-md-block"
+    class="monitoring-url gl-display-none gl-sm-display-none gl-md-display-block"
     icon="chart"
     rel="noopener noreferrer nofollow"
     variant="default"

app/assets/javascripts/environments/components/environment_rollback.vue

@@ -68,7 +68,7 @@ export default {
   <gl-button
     v-gl-tooltip
     v-gl-modal.confirm-rollback-modal
-    class="gl-display-none gl-display-md-block text-secondary"
+    class="gl-display-none gl-md-display-block text-secondary"
     :loading="isLoading"
     :title="title"
     :icon="isLastDeployment ? 'repeat' : 'redo'"

app/assets/javascripts/environments/components/environments_app.vue

@@ -133,7 +133,7 @@ export default {
     <confirm-rollback-modal :environment="environmentInRollbackModal" />
 
     <div class="gl-w-full">
-      <div class="gl-display-flex gl-flex-direction-column gl-mt-3 gl-display-md-none!">
+      <div class="gl-display-flex gl-flex-direction-column gl-mt-3 gl-md-display-none!">
         <gl-button
           v-if="state.reviewAppDetails.can_setup_review_app"
           v-gl-modal="$options.modal.id"
@@ -167,7 +167,7 @@ export default {
         </gl-tab>
         <template #tabs-end>
           <div
-            class="gl-display-none gl-display-md-flex gl-lg-align-items-center gl-lg-flex-direction-row gl-lg-flex-fill-1 gl-lg-justify-content-end gl-lg-mt-0"
+            class="gl-display-none gl-md-display-flex gl-lg-align-items-center gl-lg-flex-direction-row gl-lg-flex-fill-1 gl-lg-justify-content-end gl-lg-mt-0"
           >
             <gl-button
               v-if="state.reviewAppDetails.can_setup_review_app"

app/assets/javascripts/feature_flags/components/feature_flags.vue

@@ -198,7 +198,7 @@ export default {
       @token="rotateInstanceId()"
     />
     <div :class="topAreaBaseClasses">
-      <div class="gl-display-flex gl-flex-direction-column gl-display-md-none!">
+      <div class="gl-display-flex gl-flex-direction-column gl-md-display-none!">
         <gl-button
           v-if="canUserConfigure"
           v-gl-modal="'configure-feature-flags'"
@@ -285,7 +285,7 @@ export default {
         </feature-flags-tab>
         <template #tabs-end>
           <li
-            class="gl-display-none gl-display-md-flex gl-align-items-center gl-flex-fill-1 gl-justify-content-end"
+            class="gl-display-none gl-md-display-flex gl-align-items-center gl-flex-fill-1 gl-justify-content-end"
           >
             <gl-button
               v-if="canUserConfigure"

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -196,7 +196,7 @@ export default {
           <li
             v-if="showDiscussions"
             data-testid="issuable-discussions"
-            class="issuable-comments gl-display-none gl-display-sm-block"
+            class="issuable-comments gl-display-none gl-sm-display-block"
           >
             <gl-link
               v-gl-tooltip:tooltipcontainer.top

app/assets/javascripts/issuable_show/components/issuable_header.vue

@@ -112,7 +112,7 @@ export default {
     </div>
     <div
       data-testid="header-actions"
-      class="detail-page-header-actions gl-display-flex gl-display-md-block"
+      class="detail-page-header-actions gl-display-flex gl-md-display-block"
     >
       <slot name="header-actions"></slot>
     </div>

app/assets/javascripts/issue_show/components/header_actions.vue

@@ -193,7 +193,7 @@ export default {
 <template>
   <div class="detail-page-header-actions">
     <gl-dropdown
-      class="gl-display-block gl-display-sm-none!"
+      class="gl-display-block gl-sm-display-none!"
       block
       :text="dropdownText"
       :loading="isToggleStateButtonLoading"
@@ -222,7 +222,7 @@ export default {
 
     <gl-button
       v-if="showToggleIssueStateButton"
-      class="gl-display-none gl-display-sm-inline-flex!"
+      class="gl-display-none gl-sm-display-inline-flex!"
       category="secondary"
       :data-qa-selector="qaSelector"
       :loading="isToggleStateButtonLoading"
@@ -233,7 +233,7 @@ export default {
     </gl-button>
 
     <gl-dropdown
-      class="gl-display-none gl-display-sm-inline-flex!"
+      class="gl-display-none gl-sm-display-inline-flex!"
       toggle-class="gl-border-0! gl-shadow-none!"
       no-caret
       right

app/assets/javascripts/issues_list/components/issuable.vue

@@ -414,7 +414,7 @@ export default {
               v-if="meta.visible"
               :key="meta.key"
               v-gl-tooltip
-              class="gl-display-none gl-display-sm-flex gl-align-items-center gl-ml-3"
+              class="gl-display-none gl-sm-display-flex gl-align-items-center gl-ml-3"
               :class="meta.class"
               :data-testid="meta.dataTestId"
               :title="meta.title"

app/assets/javascripts/jira_connect/components/groups_list_item.vue

@@ -19,7 +19,7 @@ export default {
   <li class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200">
     <div class="gl-display-flex gl-align-items-center gl-py-3">
       <gl-icon name="folder-o" class="gl-mr-3" />
-      <div class="gl-display-none gl-flex-shrink-0 gl-display-sm-flex gl-mr-3">
+      <div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3">
         <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" />
       </div>
       <div class="gl-min-w-0 gl-display-flex gl-flex-grow-1 gl-flex-shrink-1 gl-align-items-center">

app/assets/javascripts/jobs/components/sidebar.vue

@@ -110,7 +110,7 @@ export default {
           <gl-button
             :aria-label="$options.i18n.toggleSidebar"
             category="tertiary"
-            class="gl-display-md-none gl-ml-2 js-sidebar-build-toggle"
+            class="gl-md-display-none gl-ml-2 js-sidebar-build-toggle"
             icon="chevron-double-lg-right"
             @click="toggleSidebar"
           />

app/assets/javascripts/logs/components/environment_logs.vue

@@ -176,7 +176,7 @@ export default {
           id="environments-dropdown"
           :text="environments.current || managedApps.current"
           :disabled="environments.isLoading"
-          class="gl-mr-3 gl-mb-3 gl-display-flex gl-display-md-block js-environments-dropdown"
+          class="gl-mr-3 gl-mb-3 gl-display-flex gl-md-display-block js-environments-dropdown"
         >
           <gl-dropdown-section-header>
             {{ s__('Environments|Environments') }}

app/assets/javascripts/logs/components/log_simple_filters.vue

@@ -42,7 +42,7 @@ export default {
       ref="podsDropdown"
       :text="podDropdownText"
       :disabled="disabled"
-      class="gl-mr-3 gl-mb-3 gl-display-flex gl-display-md-block qa-pods-dropdown"
+      class="gl-mr-3 gl-mb-3 gl-display-flex gl-md-display-block qa-pods-dropdown"
     >
       <gl-dropdown-section-header>
         {{ s__('Environments|Select pod') }}

app/assets/javascripts/members/components/filter_sort/filter_sort_container.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 gl-display-md-flex">
+  <div v-if="showContainer" class="gl-bg-gray-10 gl-p-3 gl-md-display-flex">
     <members-filtered-search-bar v-if="filteredSearchBar.show" class="gl-p-3 gl-flex-grow-1" />
     <sort-dropdown v-if="showSortDropdown" class="gl-p-3 gl-flex-shrink-0" />
   </div>

app/assets/javascripts/members/components/table/members_table.vue

@@ -80,7 +80,7 @@ export default {
         return 'col-actions';
       }
 
-      return ['col-actions', 'gl-display-none!', 'gl-display-lg-table-cell!'];
+      return ['col-actions', 'gl-display-none!', 'gl-lg-display-table-cell!'];
     },
     tbodyTrAttr(member) {
       return {

app/assets/javascripts/merge_request/components/status_box.vue

@@ -61,10 +61,10 @@ export default {
   <div :class="statusBoxClass" class="issuable-status-box status-box">
     <gl-icon
       :name="statusIconName"
-      class="gl-display-block gl-display-sm-none!"
+      class="gl-display-block gl-sm-display-none!"
       data-testid="status-icon"
     />
-    <span class="gl-display-none gl-display-sm-block">
+    <span class="gl-display-none gl-sm-display-block">
       {{ statusHumanName }}
     </span>
   </div>

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

@@ -15,12 +15,12 @@ export default {
 <template>
   <div
     ref="linksSection"
-    class="gl-display-sm-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-flex-sm-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
   >
     <div
       v-for="(link, key) in links"
       :key="key"
-      class="gl-mb-1 gl-mr-5 gl-display-flex gl-display-sm-block gl-hover-text-blue-600-children gl-word-break-all"
+      class="gl-mb-1 gl-mr-5 gl-display-flex gl-sm-display-block gl-hover-text-blue-600-children gl-word-break-all"
     >
       <gl-link :href="link.url" class="gl-text-gray-900 gl-text-decoration-none!"
         ><gl-icon name="link" class="gl-text-gray-500 gl-vertical-align-text-bottom gl-mr-2" />{{

app/assets/javascripts/packages/shared/components/package_list_row.vue

@@ -88,7 +88,7 @@ export default {
       <div class="gl-display-flex">
         <span>{{ packageEntity.version }}</span>
 
-        <div v-if="hasPipeline" class="gl-display-none gl-display-sm-flex gl-ml-2">
+        <div v-if="hasPipeline" class="gl-display-none gl-sm-display-flex gl-ml-2">
           <gl-sprintf :message="s__('PackageRegistry|published by %{author}')">
             <template #author>{{ packageEntity.pipeline.user.name }}</template>
           </gl-sprintf>

app/assets/javascripts/packages/shared/components/package_tags.vue

@@ -91,7 +91,7 @@ export default {
       variant="muted"
       :title="moreTagsTooltip"
       size="sm"
-      class="gl-display-none gl-display-md-flex gl-ml-2"
+      class="gl-display-none gl-md-display-flex gl-ml-2"
       ><gl-sprintf :message="__('+%{tags} more')">
         <template #tags>
           {{ moreTagsDisplay }}
@@ -103,7 +103,7 @@ export default {
       v-if="moreTagsDisplay && hideLabel"
       data-testid="moreBadge"
       variant="muted"
-      class="gl-display-md-none gl-ml-2"
+      class="gl-md-display-none gl-ml-2"
       >{{ tagsDisplay }}</gl-badge
     >
   </div>

app/assets/javascripts/packages/shared/components/packages_list_loader.vue

@@ -21,7 +21,7 @@ export default {
 
 <template>
   <div>
-    <div class="gl-flex-direction-column gl-display-sm-none" data-testid="mobile-loader">
+    <div class="gl-flex-direction-column gl-sm-display-none" data-testid="mobile-loader">
       <gl-skeleton-loader
         v-for="index in $options.rowsToRender.mobile"
         :key="index"
@@ -37,7 +37,7 @@ export default {
       </gl-skeleton-loader>
     </div>
     <div
-      class="gl-display-none gl-display-sm-flex gl-flex-direction-column"
+      class="gl-display-none gl-sm-display-flex gl-flex-direction-column"
       data-testid="desktop-loader"
     >
       <gl-skeleton-loader

app/assets/javascripts/pages/projects/forks/new/components/fork_groups_list_item.vue

@@ -94,7 +94,7 @@ export default {
       </div>
       <gl-link
         :href="group.relative_path"
-        class="gl-display-none gl-flex-shrink-0 gl-display-sm-flex gl-mr-3"
+        class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3"
       >
         <gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatarUrl" />
       </gl-link>
@@ -113,7 +113,7 @@ export default {
             <gl-badge
               v-if="isGroupPendingRemoval"
               variant="warning"
-              class="gl-display-none gl-display-sm-flex gl-mt-3 gl-mr-1"
+              class="gl-display-none gl-sm-display-flex gl-mt-3 gl-mr-1"
               >{{ __('pending removal') }}</gl-badge
             >
             <span v-if="group.permission" class="user-access-role gl-mt-3">

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -302,7 +302,7 @@ export default {
     <gl-loading-icon v-if="isBlobContentLoading" size="lg" class="gl-m-3" />
     <div v-else-if="!isBlobContentError" class="gl-mt-4">
       <div class="file-editor gl-mb-3">
-        <div class="info-well gl-display-none gl-display-sm-block">
+        <div class="info-well gl-display-none gl-sm-display-block">
           <validation-segment
             class="well-segment"
             :loading="isCiConfigDataLoading"

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -436,12 +436,12 @@ export default {
               category="secondary"
               @click="removeVariable(index)"
             >
-              <gl-icon class="gl-mr-0! gl-display-none gl-display-md-block" name="clear" />
-              <span class="gl-display-md-none">{{ s__('CiVariables|Remove variable') }}</span>
+              <gl-icon class="gl-mr-0! gl-display-none gl-md-display-block" name="clear" />
+              <span class="gl-md-display-none">{{ s__('CiVariables|Remove variable') }}</span>
             </gl-button>
             <gl-button
               v-else
-              class="gl-md-ml-3 gl-mb-3 gl-display-none gl-display-md-block gl-visibility-hidden"
+              class="gl-md-ml-3 gl-mb-3 gl-display-none gl-md-display-block gl-visibility-hidden"
               icon="clear"
             />
           </template>

app/assets/javascripts/search/topbar/components/app.vue

@@ -47,7 +47,7 @@ export default {
 
 <template>
   <gl-form class="search-page-form" @submit.prevent="applyQuery">
-    <section class="gl-display-lg-flex gl-align-items-flex-end">
+    <section class="gl-lg-display-flex gl-align-items-flex-end">
       <div class="gl-flex-fill-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
         <label>{{ __('What are you searching for?') }}</label>
         <gl-search-box-by-type

app/assets/javascripts/vue_shared/components/registry/list_item.vue

@@ -57,7 +57,7 @@ export default {
     <div class="gl-display-flex gl-align-items-center gl-py-3">
       <div
         v-if="$slots['left-action']"
-        class="gl-w-7 gl-display-none gl-display-sm-flex gl-justify-content-start gl-pl-2"
+        class="gl-w-7 gl-display-none gl-sm-display-flex gl-justify-content-start gl-pl-2"
       >
         <slot name="left-action"></slot>
       </div>
@@ -75,7 +75,7 @@ export default {
               :selected="isDetailsShown"
               icon="ellipsis_h"
               size="small"
-              class="gl-ml-2 gl-display-none gl-display-sm-block"
+              class="gl-ml-2 gl-display-none gl-sm-display-block"
               @click="toggleDetails"
             />
           </div>
@@ -105,7 +105,7 @@ export default {
       </div>
       <div
         v-if="$slots['right-action']"
-        class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
+        class="gl-w-9 gl-display-none gl-sm-display-flex gl-justify-content-end gl-pr-1"
       >
         <slot name="right-action"></slot>
       </div>

app/views/admin/abuse_reports/_abuse_report.html.haml

@@ -13,7 +13,7 @@
   %td
     %strong.subheading.d-block.d-sm-none
       = _('Reported by %{reporter}').html_safe % { reporter: reporter ? link_to(reporter.name, reporter) : _('(removed)') }
-    .light.gl-display-none.gl-display-sm-block
+    .light.gl-display-none.gl-sm-display-block
       = link_to(reporter.name, reporter)
     .light.small
       = time_ago_with_tooltip(abuse_report.created_at)

app/views/admin/groups/_group.html.haml

@@ -14,7 +14,7 @@
       .description
         = markdown_field(group, :description)
 
-  .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-display-sm-flex
+  .stats.gl-text-gray-500.gl-flex-shrink-0.gl-display-none.gl-sm-display-flex
     %span.badge.badge-pill
       = storage_counter(group.storage_size)
 

app/views/dashboard/projects/index.html.haml

@@ -5,7 +5,7 @@
 
 - if show_customize_homepage_banner?(@customize_homepage)
   = content_for :customize_homepage_banner do
-    .gl-display-none.gl-display-md-block{ class: "gl-pt-6! gl-pb-2! #{(container_class unless @no_container)} #{@content_class}" }
+    .gl-display-none.gl-md-display-block{ class: "gl-pt-6! gl-pb-2! #{(container_class unless @no_container)} #{@content_class}" }
       .js-customize-homepage-banner{ data: { svg_path: image_path('illustrations/monitoring/getting_started.svg'),
         preferences_behavior_path: profile_preferences_path(anchor: 'behavior'),
         callouts_path: user_callouts_path,

app/views/projects/_files.html.haml

@@ -11,7 +11,7 @@
     = render 'projects/tree/tree_header', tree: @tree
 
   #js-last-commit
-    .info-well.gl-display-none.gl-display-sm-flex.project-last-commit
+    .info-well.gl-display-none.gl-sm-display-flex.project-last-commit
       .gl-spinner-container.m-auto
         = loading_icon(size: 'md', color: 'dark', css_class: 'align-text-bottom')
 

app/views/projects/merge_requests/_close_reopen_draft_report_toggle.html.haml

@@ -3,7 +3,7 @@
 - button_class = "btn gl-button #{!@merge_request.closed? && 'js-draft-toggle-button'}"
 - toggle_class = "btn gl-button dropdown-toggle"
 
-.float-left.btn-group.gl-ml-3.gl-display-none.gl-display-md-flex
+.float-left.btn-group.gl-ml-3.gl-display-none.gl-md-display-flex
   = link_to @merge_request.closed? ? reopen_issuable_path(@merge_request) : toggle_draft_merge_request_path(@merge_request), method: :put, class: "#{button_class} #{button_action_class}" do
     - if @merge_request.closed?
       = _('Reopen')

app/views/projects/merge_requests/_mr_title.html.haml

@@ -13,8 +13,8 @@
 .detail-page-header.border-bottom-0.pt-0.pb-0
   .detail-page-header-body
     .issuable-status-box.status-box.js-mr-status-box{ class: status_box_class(@merge_request), data: { state: @merge_request.state } }
-      = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-display-sm-none!')
-      %span.gl-display-none.gl-display-sm-block
+      = sprite_icon(state_icon_name, css_class: 'gl-display-block gl-sm-display-none!')
+      %span.gl-display-none.gl-sm-display-block
         = state_human_name
 
     .issuable-meta
@@ -26,7 +26,7 @@
 
   .detail-page-header-actions.js-issuable-actions
     .clearfix.dropdown
-      %button.gl-button.btn.btn-default.float-left.gl-display-md-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
+      %button.gl-button.btn.btn-default.float-left.gl-md-display-none.gl-w-full{ type: "button", data: { toggle: "dropdown" } }
         Options
         = sprite_icon('chevron-down', css_class: 'gl-text-gray-500')
       .dropdown-menu.dropdown-menu-right
@@ -50,4 +50,4 @@
       - if can_update_merge_request && !are_close_and_open_buttons_hidden
         = render 'projects/merge_requests/close_reopen_draft_report_toggle'
       - elsif !@merge_request.merged?
-        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-display-md-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')
+        = link_to _('Report abuse'), new_abuse_report_path(user_id: @merge_request.author.id, ref_url: merge_request_url(@merge_request)), class: 'gl-display-none gl-md-display-block gl-button btn btn-warning-secondary float-right gl-ml-3', title: _('Report abuse')

app/views/search/_results.html.haml

 - search_bar_classes = 'search-sidebar gl-display-flex gl-flex-direction-column gl-mr-4'
 
 - if @search_objects.to_a.empty?
-  .gl-display-md-flex
+  .gl-md-display-flex
     - if %w(issues merge_requests).include?(@scope)
       #js-search-sidebar{ class: search_bar_classes }
     .gl-w-full.gl-flex-fill-1.gl-overflow-x-hidden
@@ -11,7 +11,7 @@
   = render partial: 'search/results_status', locals: { search_service: @search_service }
   = render_if_exists 'shared/promotions/promote_advanced_search'
 
-  .results.gl-display-md-flex.gl-mt-3
+  .results.gl-md-display-flex.gl-mt-3
     - if %w(issues merge_requests).include?(@scope)
       #js-search-sidebar{ class: search_bar_classes }
     .gl-w-full.gl-flex-fill-1.gl-overflow-x-hidden

app/views/search/_results_status.html.haml

@@ -4,7 +4,7 @@
 
 .search-results-status
   .row-content-block.gl-display-flex
-    .gl-display-md-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1
+    .gl-md-display-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1
       - unless search_service.without_count?
         = search_entries_info(search_service.search_objects, search_service.scope, params[:search])
       - unless search_service.show_snippets?
@@ -21,5 +21,5 @@
           - link_to_group = link_to(search_service.group.name, search_service.group, class: 'ml-md-1')
           = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
     - if search_service.show_sort_dropdown?
-      .gl-display-md-flex.gl-flex-direction-column
+      .gl-md-display-flex.gl-flex-direction-column
         = render partial: 'search/sort_dropdown'

app/views/shared/_issuable_meta_data.html.haml

@@ -5,23 +5,23 @@
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.issuable-mr.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Related merge requests') }
+  %li.issuable-mr.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Related merge requests') }
     = sprite_icon('merge-request', css_class: "gl-vertical-align-middle")
     = issuable_mr
 
 - if upvotes > 0
-  %li.issuable-upvotes.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Upvotes') }
+  %li.issuable-upvotes.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Upvotes') }
     = sprite_icon('thumb-up', css_class: "gl-vertical-align-middle")
     = upvotes
 
 - if downvotes > 0
-  %li.issuable-downvotes.gl-display-none.gl-display-sm-block.has-tooltip{ title: _('Downvotes') }
+  %li.issuable-downvotes.gl-display-none.gl-sm-display-block.has-tooltip{ title: _('Downvotes') }
     = sprite_icon('thumb-down', css_class: "gl-vertical-align-middle")
     = downvotes
 
 = render_if_exists 'shared/issuable/blocking_issues_count', issuable: issuable
 
-%li.issuable-comments.gl-display-none.gl-display-sm-block
+%li.issuable-comments.gl-display-none.gl-sm-display-block
   = link_to issuable_path, class: ['has-tooltip', ('no-comments' if note_count == 0)], title: _('Comments') do
     = sprite_icon('comments', css_class: 'gl-vertical-align-text-bottom')
     = note_count

app/views/shared/_project_limit.html.haml

 - if cookies[:hide_project_limit_message].blank? && !current_user.hide_project_limit && !current_user.can_create_project? && current_user.projects_limit > 0
-  .project-limit-message.gl-alert.gl-alert-warning.gl-display-none.gl-display-sm-block
+  .project-limit-message.gl-alert.gl-alert-warning.gl-display-none.gl-sm-display-block
     = _("You won't be able to create new projects because you have reached your project limit.")
 
     .float-right

app/views/shared/issue_type/_details_header.html.haml

 .detail-page-header
   .detail-page-header-body
     .issuable-status-box.status-box.status-box-issue-closed{ class: issue_status_visibility(issuable, status_box: :closed) }
-      = sprite_icon('mobile-issue-close', css_class: 'gl-display-block gl-display-sm-none!')
-      .gl-display-none.gl-display-sm-block!
+      = sprite_icon('mobile-issue-close', css_class: 'gl-display-block gl-sm-display-none!')
+      .gl-display-none.gl-sm-display-block!
         = issue_closed_text(issuable, current_user)
     .issuable-status-box.status-box.status-box-open{ class: issue_status_visibility(issuable, status_box: :open) }
-      = sprite_icon('issue-open-m', css_class: 'gl-display-block gl-display-sm-none!')
-      %span.gl-display-none.gl-display-sm-block!
+      = sprite_icon('issue-open-m', css_class: 'gl-display-block gl-sm-display-none!')
+      %span.gl-display-none.gl-sm-display-block!
         = _('Open')
 
     .issuable-meta

ee/app/assets/javascripts/billings/seat_usage/components/subscription_seats.vue

@@ -101,7 +101,7 @@ export default {
 <template>
   <section>
     <div
-      class="gl-bg-gray-10 gl-p-6 gl-display-md-flex gl-justify-content-space-between gl-align-items-center"
+      class="gl-bg-gray-10 gl-p-6 gl-md-display-flex gl-justify-content-space-between gl-align-items-center"
     >
       <div data-testid="heading-info">
         <h4

ee/app/assets/javascripts/boards/components/toggle_epics_swimlanes.vue

@@ -50,7 +50,7 @@ export default {
 
 <template>
   <div
-    class="board-swimlanes-toggle-wrapper gl-display-md-flex gl-align-items-center gl-ml-3"
+    class="board-swimlanes-toggle-wrapper gl-md-display-flex gl-align-items-center gl-ml-3"
     data-testid="toggle-swimlanes"
   >
     <span

ee/app/assets/javascripts/compliance_dashboard/components/merge_requests/approvers.vue

@@ -61,7 +61,7 @@ export default {
       :collapsed="true"
       :max-visible="$options.PRESENTABLE_APPROVERS_LIMIT"
       :avatar-size="24"
-      class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
+      class="gl-display-inline-flex gl-lg-display-none! gl-ml-3"
       badge-tooltip-prop="name"
     >
       <template #avatar="{ avatar }">
@@ -89,7 +89,7 @@ export default {
       :href="approver.web_url"
       :data-user-id="approver.id"
       :data-name="approver.name"
-      class="gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+      class="gl-display-none gl-lg-display-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     >
       <gl-avatar
         :src="approver.avatar_url"
@@ -103,7 +103,7 @@ export default {
     <span
       v-if="isApproversOverLimit"
       v-gl-tooltip.top="approversOverLimitString"
-      class="gl-display-none gl-display-lg-inline-block! avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 gl-flex-grow-0"
+      class="gl-display-none gl-lg-display-inline-block! avatar-counter gl-ml-3 gl-px-2 gl-flex-shrink-0 gl-flex-grow-0"
       >+ {{ amountOfApproversOverLimit }}</span
     >
   </div>

ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_profiles_list.vue

@@ -201,7 +201,7 @@ export default {
               v-if="item.editPath"
               :href="item.editPath"
               category="tertiary"
-              class="gl-ml-3 gl-my-1 gl-display-md-none"
+              class="gl-ml-3 gl-my-1 gl-md-display-none"
               size="small"
               >{{ __('Edit') }}</gl-button
             >
@@ -211,7 +211,7 @@ export default {
               icon="remove"
               variant="danger"
               size="small"
-              class="gl-mx-3 gl-my-1 gl-display-md-none"
+              class="gl-mx-3 gl-my-1 gl-md-display-none"
               :title="s__('DastProfiles|Delete profile')"
               @click="prepareProfileDeletion(item.id)"
             />

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

@@ -10,7 +10,7 @@ export default {
 </script>
 <template>
   <div class="gl-border-b-solid gl-border-b-1 gl-border-gray-100">
-    <div class="gl-flex-direction-column gl-display-md-none" data-testid="mobile-loader">
+    <div class="gl-flex-direction-column gl-md-display-none" data-testid="mobile-loader">
       <div
         v-for="index in $options.SKELETON_LOADER_ROWS.mobile"
         :key="index"
@@ -24,7 +24,7 @@ export default {
       </div>
     </div>
     <div
-      class="gl-display-none gl-display-md-flex gl-flex-direction-column"
+      class="gl-display-none gl-md-display-flex gl-flex-direction-column"
       data-testid="desktop-loader"
     >
       <gl-skeleton-loader

ee/app/views/admin/geo/shared/_filter_nav.html.haml

@@ -4,9 +4,9 @@
 %nav.bg-secondary.border-bottom.border-secondary-100.p-3
   .row.d-flex.flex-column.flex-sm-row
     .col
-      .gl-display-sm-flex.gl-mx-n1
+      .gl-sm-display-flex.gl-mx-n1
         .dropdown.gl-px-2.gl-my-2.my-sm-0.gl-w-full
-          %a.gl-button.btn.gl-display-sm-flex.gl-align-items-center.gl-justify-content-space-between.gl-w-full{ href: '#', data: { toggle: 'dropdown' }, 'aria-haspopup' => 'true', 'aria-expanded' => 'false' }
+          %a.gl-button.btn.gl-sm-display-flex.gl-align-items-center.gl-justify-content-space-between.gl-w-full{ href: '#', data: { toggle: 'dropdown' }, 'aria-haspopup' => 'true', 'aria-expanded' => 'false' }
             = s_('Geo|Filter by status')
             = sprite_icon("chevron-down")
           %ul.dropdown-menu

ee/app/views/layouts/header/_ee_subscribable_banner.html.haml

@@ -7,7 +7,7 @@
       %button.gl-alert-dismiss{ type: 'button', 'aria-label' => 'Dismiss', data: { track_event: 'click_button', track_label: 'dismiss_subscribable_banner' } }
         = sprite_icon('close', css_class: 'gl-icon js-close')
       .gl-display-flex.gl-flex-direction-row
-        .gl-pr-6.gl-pl-5.gl-pt-3.gl-display-none.gl-display-sm-block
+        .gl-pr-6.gl-pl-5.gl-pt-3.gl-display-none.gl-sm-display-block
           - if subscribable.expired?
             - if subscribable.block_changes?
               = image_tag('illustrations/subscription-downgraded.svg')

ee/app/views/projects/_above_size_limit_warning.html.haml

 - size_checker = project.repository_size_checker
 - if size_checker.above_size_limit? && !project&.namespace&.additional_repo_storage_by_namespace_enabled?
-  .gl-alert.gl-alert-warning.gl-display-none.gl-display-sm-block
+  .gl-alert.gl-alert-warning.gl-display-none.gl-sm-display-block
     = sprite_icon('warning', css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
     = size_checker.error_message.above_size_limit_message

ee/app/views/shared/issuable/_blocking_issues_count.html.haml

 - blocking_issues_count = @issuable_meta_data[issuable.id]&.blocking_issues_count || 0
 
 - if blocking_issues_count > 0
-  %li.blocking-issues.gl-display-none.gl-display-sm-block.has-tooltip{ data: { testid: 'blocking-issues' }, title: _('Blocking issues') }
+  %li.blocking-issues.gl-display-none.gl-sm-display-block.has-tooltip{ data: { testid: 'blocking-issues' }, title: _('Blocking issues') }
     = sprite_icon('issue-block', css_class: "gl-vertical-align-middle")
     = blocking_issues_count

ee/spec/frontend/compliance_dashboard/components/merge_requests/__snapshots__/approvers_spec.js.snap

@@ -17,13 +17,13 @@ exports[`MergeRequest component when there are approvers matches snapshot 1`] =
     avatars="[object Object]"
     avatarsize="24"
     badgetooltipprop="name"
-    class="gl-display-inline-flex gl-display-lg-none! gl-ml-3"
+    class="gl-display-inline-flex gl-lg-display-none! gl-ml-3"
     collapsed="true"
     maxvisible="2"
   />
    
   <gl-link-stub
-    class="gl-avatar-link gl-display-none gl-display-lg-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
+    class="gl-avatar-link gl-display-none gl-lg-display-inline-flex! gl-align-items-center gl-justify-content-end gl-ml-3 gl-text-gray-900 author-link js-user-link"
     data-name="User 0"
     data-user-id="0"
     href="http://localhost:3000/user-0"

ee/spec/frontend/members/components/table/members_table_spec.js

@@ -79,7 +79,7 @@ describe('MemberList', () => {
 
           expect(
             findTableCellByMemberId('Actions', memberNoPermissions.id).classes(),
-          ).toStrictEqual(['col-actions', 'gl-display-none!', 'gl-display-lg-table-cell!']);
+          ).toStrictEqual(['col-actions', 'gl-display-none!', 'gl-lg-display-table-cell!']);
           expect(findTableCellByMemberId('Actions', memberCanOverride.id).classes()).toStrictEqual([
             'col-actions',
           ]);

ee/spec/frontend/storage_counter/components/projects_skeleton_loader_spec.js

@@ -30,7 +30,7 @@ describe('ProjectsSkeletonLoader', () => {
     it('has the correct classes', () => {
       expect(findDesktopLoader().classes()).toEqual([
         'gl-display-none',
-        'gl-display-md-flex',
+        'gl-md-display-flex',
         'gl-flex-direction-column',
       ]);
     });
@@ -44,7 +44,7 @@ describe('ProjectsSkeletonLoader', () => {
     it('has the correct classes', () => {
       expect(findMobileLoader().classes()).toEqual([
         'gl-flex-direction-column',
-        'gl-display-md-none',
+        'gl-md-display-none',
       ]);
     });
   });

spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap

@@ -9,7 +9,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
   />
    
   <div
-    class="gl-display-none gl-display-sm-flex"
+    class="gl-display-none gl-sm-display-flex"
   >
     <viewer-switcher-stub
       value="simple"

spec/frontend/members/components/table/members_table_spec.js

@@ -154,7 +154,7 @@ describe('MembersTable', () => {
           expect(findTableCellByMemberId('Actions', members[0].id).classes()).toStrictEqual([
             'col-actions',
             'gl-display-none!',
-            'gl-display-lg-table-cell!',
+            'gl-lg-display-table-cell!',
           ]);
           expect(findTableCellByMemberId('Actions', members[1].id).classes()).toStrictEqual([
             'col-actions',

spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap

@@ -97,7 +97,7 @@ exports[`packages_list_row renders 1`] = `
     </div>
      
     <div
-      class="gl-w-9 gl-display-none gl-display-sm-flex gl-justify-content-end gl-pr-1"
+      class="gl-w-9 gl-display-none gl-sm-display-flex gl-justify-content-end gl-pr-1"
     >
       <gl-button-stub
         aria-label="Remove package"

spec/frontend/packages/shared/components/packages_list_loader_spec.js

@@ -30,7 +30,7 @@ describe('PackagesListLoader', () => {
     it('has the correct classes', () => {
       expect(findDesktopShapes().classes()).toEqual([
         'gl-display-none',
-        'gl-display-sm-flex',
+        'gl-sm-display-flex',
         'gl-flex-direction-column',
       ]);
     });
@@ -44,7 +44,7 @@ describe('PackagesListLoader', () => {
     it('has the correct classes', () => {
       expect(findMobileShapes().classes()).toEqual([
         'gl-flex-direction-column',
-        'gl-display-sm-none',
+        'gl-sm-display-none',
       ]);
     });
   });