GitLab UI integration branch for 1455-flex-rename

app/assets/javascripts/ci_settings_pipeline_triggers/components/triggers_list.vue

@@ -93,7 +93,7 @@ export default {
           placement="top"
           class="trigger-description gl-display-flex"
         >
-          <div class="gl-flex-fill-1 gl-text-truncate">{{ item.description }}</div>
+          <div class="gl-flex-grow-1 gl-text-truncate">{{ item.description }}</div>
         </tooltip-on-truncate>
       </template>
       <template #cell(owner)="{ item }">

app/assets/javascripts/emoji/components/picker.vue

@@ -111,7 +111,7 @@ export default {
             'gl-text-body! emoji-picker-category-active': index === currentCategory,
           }"
           type="button"
-          class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-fill-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"
+          class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-grow-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"
           :aria-label="category.name"
           @click="scrollToCategory(category.name)"
         >

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

@@ -89,7 +89,7 @@ export default {
       data-testid="manual-action-link"
       @click="onClickAction(action)"
     >
-      <span class="gl-flex-fill-1">{{ action.name }}</span>
+      <span class="gl-flex-grow-1">{{ action.name }}</span>
       <span v-if="action.scheduledAt" class="gl-text-gray-500 float-right">
         <gl-icon name="clock" />
         {{ remainingTime(action) }}

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

@@ -121,7 +121,7 @@ export default {
           variant="info"
           category="secondary"
           type="button"
-          class="gl-mb-3 gl-flex-fill-1"
+          class="gl-mb-3 gl-flex-grow-1"
           >{{ $options.i18n.reviewAppButtonLabel }}</gl-button
         >
         <gl-button

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

@@ -58,7 +58,7 @@ export default {
           <span
             v-gl-tooltip
             :title="environment.name"
-            class="gl-text-truncate gl-ml-2 gl-mr-2 gl-flex-fill"
+            class="gl-text-truncate gl-ml-2 gl-mr-2 gl-flex-grow-1"
           >
             {{ environment.name }}?
           </span>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -260,7 +260,7 @@ export default {
               </template>
               <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
             </gl-dropdown>
-            <div class="filtered-search-input-container gl-flex-fill-1">
+            <div class="filtered-search-input-container gl-flex-grow-1">
               <gl-form-input
                 v-model="errorSearchQuery"
                 class="pl-2 filtered-search"

app/assets/javascripts/import_entities/import_groups/components/import_table_row.vue

@@ -157,7 +157,7 @@ export default {
           :text="importTarget.target_namespace"
           :disabled="isAlreadyImported"
           toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
-          class="import-entities-namespace-dropdown gl-h-7 gl-flex-fill-1"
+          class="import-entities-namespace-dropdown gl-h-7 gl-flex-grow-1"
           data-qa-selector="target_namespace_selector_dropdown"
         >
           <gl-dropdown-item @click="$emit('update-target-namespace', '')">{{
@@ -184,7 +184,7 @@ export default {
         >
           /
         </div>
-        <div class="gl-flex-fill-1">
+        <div class="gl-flex-grow-1">
           <gl-form-input
             class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
             :class="{ 'is-invalid': isInvalid && !isAlreadyImported }"

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

@@ -36,7 +36,7 @@ export default {
 <template>
   <div class="top-area">
     <gl-tabs
-      class="gl-display-flex gl-flex-fill-1 gl-p-0 gl-m-0 mobile-separator issuable-state-filters"
+      class="gl-display-flex gl-flex-grow-1 gl-p-0 gl-m-0 mobile-separator issuable-state-filters"
       nav-class="gl-border-b-0"
     >
       <gl-tab

app/assets/javascripts/packages/details/components/package_files.vue

@@ -148,7 +148,7 @@ export default {
 
       <template #row-details="{ item }">
         <div
-          class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100"
+          class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100"
         >
           <file-sha
             v-if="item.file_sha256"

app/assets/javascripts/pages/projects/shared/permissions/components/project_feature_setting.vue

@@ -91,7 +91,7 @@ export default {
       label-position="hidden"
       @change="toggleFeature"
     />
-    <div class="select-wrapper gl-flex-fill-1">
+    <div class="select-wrapper gl-flex-grow-1">
       <select
         :disabled="displaySelectInput"
         class="form-control project-repo-select select-control"

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

@@ -381,7 +381,7 @@ export default {
         :label="s__('ProjectSettings|Project visibility')"
       >
         <div class="project-feature-controls gl-display-flex gl-align-items-center gl-my-3 gl-mx-0">
-          <div class="select-wrapper gl-flex-fill-1">
+          <div class="select-wrapper gl-flex-grow-1">
             <select
               v-model="visibilityLevel"
               :disabled="!canChangeVisibilityLevel"

app/assets/javascripts/reports/codequality_report/components/codequality_issue_body.vue

@@ -61,7 +61,7 @@ export default {
     <span :class="severityClass" class="gl-mr-5" data-testid="codequality-severity-icon">
       <gl-icon v-tooltip="severityLabel" :name="severityIcon" :size="12" />
     </span>
-    <div class="gl-flex-fill-1">
+    <div class="gl-flex-grow-1">
       <div>
         <strong v-if="isStatusSuccess">{{ s__('ciReport|Fixed:') }}</strong>
         {{ issueName }}

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

@@ -48,7 +48,7 @@ export default {
 <template>
   <gl-form class="search-page-form" @submit.prevent="applyQuery">
     <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">
+      <div class="gl-flex-grow-1 gl-mb-4 gl-lg-mb-0 gl-lg-mr-2">
         <label>{{ __('What are you searching for?') }}</label>
         <gl-search-box-by-type
           id="dashboard_search"

app/assets/javascripts/user_lists/components/user_list_form.vue

@@ -75,7 +75,7 @@ export default {
           </template>
         </gl-sprintf>
       </div>
-      <div class="gl-flex-fill-1 gl-ml-7">
+      <div class="gl-flex-grow-1 gl-ml-7">
         <gl-form-group
           label-for="user-list-name"
           :label="$options.translations.nameLabel"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_expandable_section.vue

@@ -51,7 +51,7 @@ export default {
         <gl-icon :name="iconName" :size="24" />
       </span>
 
-      <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column gl-md-flex-direction-row">
+      <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column gl-md-flex-direction-row">
         <slot name="header"></slot>
 
         <div>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -160,7 +160,7 @@ export default {
   <div class="ci-widget media">
     <template v-if="hasCIError">
       <gl-icon name="status_failed" class="gl-text-red-500" :size="24" />
-      <p class="gl-flex-fill-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
+      <p class="gl-flex-grow-1 gl-ml-5 gl-mb-0" data-testid="ci-error-message">
         <gl-sprintf :message="$options.errorText">
           <template #link="{ content }">
             <gl-link :href="mrTroubleshootingDocsPath">{{ content }}</gl-link>
@@ -171,7 +171,7 @@ export default {
     <template v-else-if="!hasPipeline">
       <gl-loading-icon size="md" />
       <p
-        class="gl-flex-fill-1 gl-display-flex gl-ml-5 gl-mb-0"
+        class="gl-flex-grow-1 gl-display-flex gl-ml-5 gl-mb-0"
         data-testid="monitoring-pipeline-message"
       >
         {{ $options.monitoringPipelineText }}

app/assets/javascripts/vue_merge_request_widget/components/terraform/mr_widget_terraform_container.vue

@@ -107,7 +107,7 @@ export default {
       <template #header>
         <div
           data-testid="terraform-header-text"
-          class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column"
+          class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column"
         >
           <p v-if="validPlanCountText" class="gl-m-0">
             <gl-sprintf :message="validPlanCountText">

app/assets/javascripts/vue_merge_request_widget/components/terraform/terraform_plan.vue

@@ -71,8 +71,8 @@ export default {
       <gl-icon :name="iconType" :size="16" data-testid="change-type-icon" />
     </span>
 
-    <div class="gl-display-flex gl-flex-fill-1 gl-flex-direction-column flex-md-row gl-pl-3">
-      <div class="gl-flex-fill-1 gl-display-flex gl-flex-direction-column gl-pr-3">
+    <div class="gl-display-flex gl-flex-grow-1 gl-flex-direction-column flex-md-row gl-pl-3">
+      <div class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-pr-3">
         <p class="gl-mb-3 gl-line-height-normal">
           <gl-sprintf :message="reportHeaderText">
             <template #name>

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

@@ -62,7 +62,7 @@ export default {
         <slot name="left-action"></slot>
       </div>
       <div
-        class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
+        class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-grow-1"
       >
         <div class="gl-display-flex gl-flex-direction-column gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1">
           <div
@@ -81,7 +81,7 @@ export default {
           </div>
           <div
             v-if="$slots['left-secondary']"
-            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
+            class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
           >
             <slot name="left-secondary"></slot>
           </div>
@@ -114,7 +114,7 @@ export default {
       <div class="gl-w-7"></div>
       <div
         v-if="isDetailsShown"
-        class="gl-display-flex gl-flex-direction-column gl-flex-fill-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
+        class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-bg-gray-10 gl-rounded-base gl-inset-border-1-gray-100 gl-mb-3"
       >
         <div
           v-for="(row, detailIndex) in detailsSlots"

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

@@ -109,7 +109,7 @@ export default {
   <div class="gl-display-flex gl-p-5 gl-bg-gray-10 gl-border-solid gl-border-1 gl-border-gray-100">
     <gl-filtered-search
       v-model="internalFilter"
-      class="gl-mr-4 gl-flex-fill-1"
+      class="gl-mr-4 gl-flex-grow-1"
       :placeholder="__('Filter results')"
       :available-tokens="tokens"
       @submit="submitSearch"

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue

@@ -225,7 +225,7 @@ export default {
       <template v-if="!instructionsEmpty">
         <div class="gl-display-flex">
           <pre
-            class="gl-bg-gray gl-flex-fill-1 gl-white-space-pre-line"
+            class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
             data-testid="binary-instructions"
             >{{ instructions.installInstructions }}</pre
           >
@@ -241,7 +241,7 @@ export default {
         <h5 class="gl-mb-3">{{ $options.i18n.registerRunnerCommand }}</h5>
         <div class="gl-display-flex">
           <pre
-            class="gl-bg-gray gl-flex-fill-1 gl-white-space-pre-line"
+            class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
             data-testid="register-command"
             >{{ instructions.registerInstructions }}</pre
           >

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

@@ -37,7 +37,7 @@
   .todos-filters
     .issues-details-filters.row-content-block.second-block
       = form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row' do
-        .filter-categories.gl-display-flex.gl-flex-direction-column.gl-md-flex-direction-row.gl-flex-fill-1.gl-flex-wrap.gl-mx-n2
+        .filter-categories.gl-display-flex.gl-flex-direction-column.gl-md-flex-direction-row.gl-flex-grow-1.gl-flex-wrap.gl-mx-n2
           .filter-item.gl-m-2
             - if params[:group_id].present?
               = hidden_field_tag(:group_id, params[:group_id])

app/views/layouts/fullscreen.html.haml

@@ -13,5 +13,5 @@
       = render "layouts/flash"
     .content-wrapper.hide-when-top-nav-responsive-open{ id: "content-body", class: "d-flex flex-column align-items-stretch" }
       = yield
-    = render "layouts/nav/top_nav_responsive", class: "gl-flex-fill-1 gl-overflow-y-auto"
+    = render "layouts/nav/top_nav_responsive", class: "gl-flex-grow-1 gl-overflow-y-auto"
     = footer_message

app/views/search/_results.html.haml

@@ -4,7 +4,7 @@
   .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
+    .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
       = render partial: "search/results/empty"
       = render_if_exists 'shared/promotions/promote_advanced_search'
 - else
@@ -14,7 +14,7 @@
   .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
+    .gl-w-full.gl-flex-grow-1.gl-overflow-x-hidden
       - if @scope == 'commits'
         %ul.content-list.commit-list
           = render partial: "search/results/commit", collection: @search_objects

app/views/shared/wikis/diff.html.haml

@@ -5,7 +5,7 @@
 .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button
 
-  %h3.page-title.gl-flex-fill-1
+  %h3.page-title.gl-flex-grow-1
     = link_to_wiki_page @page
     %span.light
       ·

app/views/shared/wikis/edit.html.haml

@@ -7,7 +7,7 @@
 .wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   = wiki_sidebar_toggle_button
 
-  %h3.page-title.gl-flex-fill-1
+  %h3.page-title.gl-flex-grow-1
     - if @page.persisted?
       = link_to_wiki_page @page
       %span.light

app/views/shared/wikis/pages.html.haml

@@ -5,7 +5,7 @@
 - add_page_specific_style 'page_bundles/wiki'
 
 .wiki-page-header.top-area.flex-column.flex-lg-row
-  %h3.page-title.gl-flex-fill-1
+  %h3.page-title.gl-flex-grow-1
     = s_("Wiki|Wiki Pages")
 
   .nav-controls.pb-md-3.pb-lg-0

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -118,7 +118,7 @@ export default {
 <template>
   <gl-dropdown ref="groupsDropdown" class="dropdown dropdown-groups" toggle-class="gl-shadow-none">
     <template #button-content>
-      <div class="gl-display-flex gl-flex-fill-1">
+      <div class="gl-display-flex gl-flex-grow-1">
         <gl-avatar
           v-if="selectedGroup.name"
           :src="selectedGroup.avatar_url"

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -166,7 +166,7 @@ export default {
     toggle-class="gl-shadow-none"
   >
     <template #button-content>
-      <div class="gl-display-flex gl-flex-fill-1">
+      <div class="gl-display-flex gl-flex-grow-1">
         <gl-avatar
           v-if="isOnlyOneProjectSelected"
           :src="selectedProjects[0].avatarUrl"

ee/app/assets/javascripts/audit_events/components/date_range_field.vue

@@ -60,8 +60,8 @@ export default {
       :default-max-date="$options.CURRENT_DATE"
       :max-date-range="$options.MAX_DATE_RANGE"
       :same-day-selection="true"
-      start-picker-class="gl-mb-5 gl-pr-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-fill-1 gl-lg-align-items-flex-end"
-      end-picker-class="gl-mb-5 gl-lg-pr-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-fill-1 gl-lg-align-items-flex-end"
+      start-picker-class="gl-mb-5 gl-pr-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-grow-1 gl-lg-align-items-flex-end"
+      end-picker-class="gl-mb-5 gl-lg-pr-5 gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-flex-grow-1 gl-lg-align-items-flex-end"
       @input="onInput"
     />
   </div>

ee/app/assets/javascripts/geo_nodes/components/details/geo_node_details.vue

@@ -33,20 +33,20 @@ export default {
       class="gl-display-flex gl-sm-flex-direction-column gl-align-items-flex-start gl-h-full gl-w-full"
     >
       <geo-node-verification-info
-        class="gl-flex-fill-1 gl-mb-5 gl-md-mb-0 gl-md-mr-5 gl-h-full gl-w-full"
+        class="gl-flex-grow-1 gl-mb-5 gl-md-mb-0 gl-md-mr-5 gl-h-full gl-w-full"
         :node="node"
       />
-      <geo-node-primary-other-info class="gl-flex-fill-1 gl-h-full gl-w-full" :node="node" />
+      <geo-node-primary-other-info class="gl-flex-grow-1 gl-h-full gl-w-full" :node="node" />
     </div>
     <div v-else class="gl-display-flex gl-flex-direction-column gl-h-full gl-w-full">
       <div
         class="gl-display-flex gl-sm-flex-direction-column gl-align-items-flex-start gl-h-full gl-w-full gl-mb-5"
       >
         <geo-node-replication-summary
-          class="gl-flex-fill-1 gl-mb-5 gl-md-mb-0 gl-md-mr-5 gl-h-full gl-w-full"
+          class="gl-flex-grow-1 gl-mb-5 gl-md-mb-0 gl-md-mr-5 gl-h-full gl-w-full"
           :node="node"
         />
-        <geo-node-secondary-other-info class="gl-flex-fill-1 gl-h-full gl-w-full" :node="node" />
+        <geo-node-secondary-other-info class="gl-flex-grow-1 gl-h-full gl-w-full" :node="node" />
       </div>
       <geo-node-replication-details :node="node" />
     </div>

ee/app/assets/javascripts/geo_nodes/components/details/geo_node_progress_bar.vue

@@ -89,22 +89,22 @@ export default {
       <section>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-transparent gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.total }}</span>
+          <span class="gl-flex-grow-1 gl-mr-4">{{ $options.i18n.total }}</span>
           <span class="gl-font-weight-bold">{{ totalCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-green-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ successLabel }}</span>
+          <span class="gl-flex-grow-1 gl-mr-4">{{ successLabel }}</span>
           <span class="gl-font-weight-bold">{{ successCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-gray-200 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ queuedLabel }}</span>
+          <span class="gl-flex-grow-1 gl-mr-4">{{ queuedLabel }}</span>
           <span class="gl-font-weight-bold">{{ queuedCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-red-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ failedLabel }}</span>
+          <span class="gl-flex-grow-1 gl-mr-4">{{ failedLabel }}</span>
           <span class="gl-font-weight-bold">{{ failureCount.toLocaleString() }}</span>
         </div>
       </section>

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_counts.vue

@@ -53,9 +53,9 @@ export default {
 <template>
   <div>
     <div class="gl-display-flex gl-align-items-center gl-mb-3">
-      <span class="gl-flex-fill-1">{{ $options.i18n.dataType }}</span>
-      <span class="gl-flex-fill-1">{{ $options.i18n.synchronization }}</span>
-      <span class="gl-flex-fill-1">{{ $options.i18n.verification }}</span>
+      <span class="gl-flex-grow-1">{{ $options.i18n.dataType }}</span>
+      <span class="gl-flex-grow-1">{{ $options.i18n.synchronization }}</span>
+      <span class="gl-flex-grow-1">{{ $options.i18n.verification }}</span>
     </div>
     <div
       v-for="type in replicationOverview"
@@ -63,7 +63,7 @@ export default {
       class="gl-display-flex gl-align-items-center gl-mb-3"
       data-testid="replication-type"
     >
-      <span class="gl-flex-fill-1" data-testid="replicable-title">{{ type.title }}</span>
+      <span class="gl-flex-grow-1" data-testid="replicable-title">{{ type.title }}</span>
       <geo-node-replication-sync-percentage :values="type.sync" />
       <geo-node-replication-sync-percentage :values="type.verification" />
     </div>

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_sync_percentage.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-align-items-center gl-flex-fill-1">
+  <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
     <div :class="percentColor" class="gl-rounded-full gl-w-3 gl-h-3 gl-mr-2"></div>
     <span class="gl-font-weight-bold">
       {{ percent === null ? $options.i18n.nA : `${percent}%` }}

ee/app/assets/javascripts/geo_nodes/components/header/geo_node_header.vue

@@ -60,15 +60,15 @@ export default {
         @click="$emit('collapse')"
       />
       <div
-        class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-flex-fill-1"
+        class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-flex-grow-1"
       >
-        <div class="gl-display-flex gl-align-items-center gl-flex-fill-1">
+        <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
           <gl-badge v-if="node.current" variant="info" class="gl-mr-2">{{
             $options.i18n.currentNodeLabel
           }}</gl-badge>
           <h4 class="gl-font-lg">{{ node.name }}</h4>
         </div>
-        <div class="gl-display-flex gl-align-items-center gl-flex-fill-2">
+        <div class="gl-display-flex gl-align-items-center gl-flex-grow-2">
           <geo-node-health-status :status="node.healthStatus" />
           <geo-node-last-updated
             v-if="statusCheckTimestamp"

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

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-p-5 gl-my-5 gl-bg-gray-10 gl-flex-fill-1 gl-white-space-nowrap" :class="cssClass">
+  <div class="gl-p-5 gl-my-5 gl-bg-gray-10 gl-flex-grow-1 gl-white-space-nowrap" :class="cssClass">
     <p class="mb-2">
       <gl-sprintf :message="__('%{size} %{unit}')">
         <template #size>

ee/app/assets/javascripts/security_dashboard/components/shared/project_security_status_chart.vue

@@ -159,7 +159,7 @@ export default {
     <gl-loading-icon v-if="isLoadingGrades" size="lg" class="gl-my-12" />
     <accordion
       v-else
-      class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-fill-1 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
+      class="security-dashboard-accordion gl-px-5 gl-display-flex gl-flex-grow-1 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
     >
       <template #default="{ accordionId }">
         <accordion-item

ee/app/assets/javascripts/security_dashboard/components/shared/selection_summary.vue

@@ -121,7 +121,7 @@ export default {
             ><b>{{ selectedVulnerabilitiesCount }}</b> {{ $options.i18n.selected }}</span
           >
         </div>
-        <div class="gl-flex-fill-1 gl-ml-6 gl-mr-4">
+        <div class="gl-flex-grow-1 gl-ml-6 gl-mr-4">
           <status-dropdown @change="handleStatusDropdownChange" />
         </div>
         <template v-if="shouldShowActionButtons">

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

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-p-5 gl-my-5 gl-bg-gray-10 gl-flex-fill-1 gl-white-space-nowrap" :class="cssClass">
+  <div class="gl-p-5 gl-my-5 gl-bg-gray-10 gl-flex-grow-1 gl-white-space-nowrap" :class="cssClass">
     <p class="mb-2">
       <gl-sprintf :message="__('%{size} %{unit}')">
         <template #size>

ee/app/assets/stylesheets/page_bundles/security_dashboard.scss

@@ -44,7 +44,7 @@ $selection-summary-with-error-height: 118px;
 
 .security-dashboard-accordion > ul {
   @include gl-display-flex;
-  @include gl-flex-fill-1;
+  @include gl-flex-grow-1;
 }
 
 .security-charts > section {

ee/app/assets/stylesheets/pages/billings.scss

@@ -150,7 +150,7 @@ $badge-height: $gl-spacing-scale-7;
     }
 
     .card-wrapper {
-      @include gl-flex-fill-1;
+      @include gl-flex-grow-1;
       @include gl-mb-0;
       @include gl-overflow-hidden;
       @include gl-w-auto;

package.json

@@ -56,7 +56,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/svgs": "1.199.0",
     "@gitlab/tributejs": "1.0.0",
-    "@gitlab/ui": "29.34.0",
+    "@gitlab/ui": "29.34.1",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "6.1.3-2",
     "@rails/ujs": "6.1.3-2",

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

@@ -11,7 +11,7 @@ exports[`packages_list_row renders 1`] = `
     <!---->
      
     <div
-      class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
+      class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-grow-1"
     >
       <div
         class="gl-display-flex gl-flex-direction-column gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
@@ -42,7 +42,7 @@ exports[`packages_list_row renders 1`] = `
         </div>
          
         <div
-          class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
+          class="gl-display-flex gl-align-items-center gl-text-gray-500 gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
         >
           <div
             class="gl-display-flex"

yarn.lock

@@ -908,10 +908,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/tributejs/-/tributejs-1.0.0.tgz#672befa222aeffc83e7d799b0500a7a4418e59b8"
   integrity sha512-nmKw1+hB6MHvlmPz63yPwVs1qQkycHwsKgxpEbzmky16Y6mL4EJMk3w1b8QlOAF/AIAzjCERPhe/R4MJiohbZw==
 
-"@gitlab/ui@29.34.0":
-  version "29.34.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-29.34.0.tgz#c8e9d7411f98537d3153d99b6c614583d4d1285d"
-  integrity sha512-ukEHnvd+4f9M+K4b5EArVygUDbS+kUcsP94f6I7Rvd95TR/LlJXwf6vtFdgdBNbk8W98AzW9GwdlT4hmgWfRdw==
+"@gitlab/ui@29.34.1":
+  version "29.34.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-29.34.1.tgz#1dfd6864c0c7b325745f28ec708d1f187df3acd8"
+  integrity sha512-uNS3KNAzDFELq5SkfN7Yg9F8Pc98kcPVaXVhZGvw8JcjyVdLF4AORUbzFBsAtJXOwkWPH8yfBQY7+RVC9wkjGg==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"