Replace prepend-left-5 class

This replaces the prepend-left-5 css
class for the gl-ml-2 utility class
from GitLab-UI

app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue

@@ -59,14 +59,14 @@ export default {
         </div>
         <div class="col-4 col-md-3 gl-pl-0">
           <loading-button
-            class="js-error-tracking-connect prepend-left-5 d-inline-flex"
+            class="js-error-tracking-connect gl-ml-2 d-inline-flex"
             :label="isLoadingProjects ? __('Connecting') : __('Connect')"
             :loading="isLoadingProjects"
             @click="fetchProjects"
           />
           <icon
             v-show="connectSuccessful"
-            class="js-error-tracking-connect-success prepend-left-5 text-success align-middle"
+            class="js-error-tracking-connect-success gl-ml-2 text-success align-middle"
             :aria-label="__('Projects Successfully Retrieved')"
             name="check-circle"
           />

app/assets/javascripts/gfm_auto_complete.js

@@ -30,7 +30,7 @@ export function membersBeforeSave(members) {
     const imgAvatar = `<img src="${member.avatar_url}" alt="${member.username}" class="avatar ${rectAvatarClass} avatar-inline center s26"/>`;
     const txtAvatar = `<div class="avatar ${rectAvatarClass} center avatar-inline s26">${autoCompleteAvatar}</div>`;
     const avatarIcon = member.mentionsDisabled
-      ? spriteIcon('notifications-off', 's16 vertical-align-middle prepend-left-5')
+      ? spriteIcon('notifications-off', 's16 vertical-align-middle gl-ml-2')
       : '';
 
     return {

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

@@ -76,7 +76,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        class="prepend-left-5 ide-file-modified"
+        class="gl-ml-2 ide-file-modified"
       />
     </span>
     <changed-file-icon

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

@@ -77,7 +77,7 @@ export default {
         <gl-link
           v-if="rawPath"
           :href="rawPath"
-          class="js-raw-link text-plain text-underline prepend-left-5"
+          class="js-raw-link text-plain text-underline gl-ml-2"
           >{{ s__('Job|Complete Raw') }}</gl-link
         >
       </template>

app/assets/javascripts/reports/components/report_section.vue

@@ -179,7 +179,7 @@ export default {
           <div>
             {{ headerText }}
             <slot :name="slotName"></slot>
-            <popover v-if="hasPopover" :options="popoverOptions" class="prepend-left-5" />
+            <popover v-if="hasPopover" :options="popoverOptions" class="gl-ml-2" />
           </div>
           <slot name="subHeading"></slot>
         </div>

app/helpers/dashboard_helper.rb

@@ -41,7 +41,7 @@ module DashboardHelper
 
       if doc_href.present?
         link_to_doc = link_to(sprite_icon('question', size: 16), doc_href,
-                              class: 'prepend-left-5', title: _('Documentation'),
+                              class: 'gl-ml-2', title: _('Documentation'),
                               target: '_blank', rel: 'noopener noreferrer')
 
         concat(link_to_doc)

app/views/projects/branches/_branch.html.haml

@@ -8,13 +8,13 @@
       = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated-100 ref-name gl-ml-3 qa-branch-name' do
         = branch.name
       - if branch.name == @repository.root_ref
-        %span.badge.badge-primary.prepend-left-5 default
+        %span.badge.badge-primary.gl-ml-2 default
       - elsif merged
-        %span.badge.badge-info.has-tooltip.prepend-left-5{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
+        %span.badge.badge-info.has-tooltip.gl-ml-2{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
           = s_('Branches|merged')
 
       - if protected_branch?(@project, branch)
-        %span.badge.badge-success.prepend-left-5
+        %span.badge.badge-success.gl-ml-2
           = s_('Branches|protected')
 
       = render_if_exists 'projects/branches/diverged_from_upstream', branch: branch

app/views/projects/commit/_limit_exceeded_message.html.haml

-.has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message } } }
+.has-tooltip{ class: "limit-box limit-box-#{objects} gl-ml-2", data: { title: _('Project has too many %{label_for_message} to search') % { label_for_message: label_for_message } } }
   .limit-icon
     - if objects == :branch
       = sprite_icon('fork', size: 12)

app/views/projects/diffs/_stats.html.haml

@@ -4,7 +4,7 @@
   Showing
   %button.diff-stats-summary-toggler.js-diff-stats-dropdown{ type: "button", data: { toggle: "dropdown", display: "static" } }<
     = pluralize(diff_files.size, "changed file")
-    = icon("caret-down", class: "prepend-left-5")
+    = icon("caret-down", class: "gl-ml-2")
   %span.diff-stats-additions-deletions-expanded#diff-stats
     with
     %strong.cgreen= pluralize(sum_added_lines, 'addition')

app/views/projects/protected_branches/shared/_matching_branch.html.haml

@@ -3,7 +3,7 @@
     = link_to matching_branch.name, project_ref_path(@project, matching_branch.name), class: 'ref-name'
 
     - if @project.root_ref?(matching_branch.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - commit = @project.commit(matching_branch.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')

app/views/projects/protected_tags/shared/_matching_tag.html.haml

@@ -3,7 +3,7 @@
     = link_to matching_tag.name, project_ref_path(@project, matching_tag.name), class: 'ref-name'
 
     - if @project.root_ref?(matching_tag.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - commit = @project.commit(matching_tag.name)
     = link_to(commit.short_id, project_commit_path(@project, commit.id), class: 'commit-sha')

app/views/projects/protected_tags/shared/_protected_tag.html.haml

@@ -3,7 +3,7 @@
     %span.ref-name= protected_tag.name
 
     - if @project.root_ref?(protected_tag.name)
-      %span.badge.badge-info.prepend-left-5 default
+      %span.badge.badge-info.gl-ml-2 default
   %td
     - if protected_tag.wildcard?
       - matching_tags = protected_tag.matching(repository.tags)

app/views/projects/starrers/_starrer.html.haml

@@ -13,7 +13,7 @@
           %span.cgray= starrer.user.to_reference
 
           - if starrer.user == current_user
-            %span.badge.badge-success.prepend-left-5= _("It's you")
+            %span.badge.badge-success.gl-ml-2= _("It's you")
 
         .block-truncated
           = time_ago_with_tooltip(starrer.starred_since)

app/views/projects/tree/_tree_row.html.haml

@@ -14,7 +14,7 @@
       %a.str-truncated{ href: fast_project_blob_path(@project, tree_join(@id || @commit.id, tree_row_name)), title: tree_row_name }
         %span= tree_row_name
       - if @lfs_blob_ids.include?(tree_row.id)
-        %span.badge.label-lfs.prepend-left-5 LFS
+        %span.badge.label-lfs.gl-ml-2 LFS
 
     - elsif tree_row_type == :commit
       = tree_icon('archive', tree_row.mode, tree_row.name)

app/views/search/results/_issue.html.haml

@@ -4,7 +4,7 @@
     = link_to namespace_project_issue_path(issue.project.namespace.becomes(Namespace), issue.project, issue) do
       %span.term.str-truncated= issue.title
     - if issue.closed?
-      %span.badge.badge-danger.prepend-left-5= _("Closed")
+      %span.badge.badge-danger.gl-ml-2= _("Closed")
     .float-right ##{issue.iid}
   - if issue.description.present?
     .description.term

app/views/search/results/_merge_request.html.haml

@@ -3,9 +3,9 @@
     = link_to namespace_project_merge_request_path(merge_request.target_project.namespace.becomes(Namespace), merge_request.target_project, merge_request) do
       %span.term.str-truncated= merge_request.title
     - if merge_request.merged?
-      %span.badge.badge-primary.prepend-left-5= _("Merged")
+      %span.badge.badge-primary.gl-ml-2= _("Merged")
     - elsif merge_request.closed?
-      %span.badge.badge-danger.prepend-left-5= _("Closed")
+      %span.badge.badge-danger.gl-ml-2= _("Closed")
     .float-right= merge_request.to_reference
   - if merge_request.description.present?
     .description.term

app/views/shared/issuable/form/_branch_chooser.html.haml

@@ -18,7 +18,7 @@
     - elsif issuable.for_fork?
       %code= issuable.target_project_path + ":"
   - unless issuable.new_record?
-    %span.dropdown.prepend-left-5.d-inline-block
+    %span.dropdown.gl-ml-2.d-inline-block
       = form.hidden_field(:target_branch,
         { class: 'target_branch js-target-branch-select ref-name mw-xl',
           data: { placeholder: _('Select branch'), endpoint: refs_project_path(@project, sort: 'updated_desc', find: 'branches') }})

ee/app/assets/javascripts/add_gitlab_slack_application/components/add_gitlab_slack_application.vue

@@ -134,7 +134,7 @@ export default {
       </span>
     </div>
 
-    <div class="center prepend-top-20 append-bottom-10 gl-mr-2 prepend-left-5">
+    <div class="center prepend-top-20 append-bottom-10 gl-mr-2 gl-ml-2">
       <img v-once :src="gitlabForSlackGifPath" class="gitlab-slack-gif" />
     </div>
 

ee/app/assets/javascripts/epic/components/sidebar_items/sidebar_date_picker.vue

@@ -229,7 +229,7 @@ export default {
           type="radio"
           @click="toggleDateType(true)"
         />
-        <span v-show="!editing" class="prepend-left-5">{{ __('Fixed:') }}</span>
+        <span v-show="!editing" class="gl-ml-2">{{ __('Fixed:') }}</span>
         <date-picker
           v-if="editing"
           :selected-date="dateFixed"
@@ -244,7 +244,7 @@ export default {
               v-if="isDateInvalid && selectedDateIsFixed"
               v-popover="dateInvalidPopoverOptions"
               name="warning"
-              class="date-warning-icon gl-mr-2 prepend-left-5"
+              class="date-warning-icon gl-mr-2 gl-ml-2"
               tabindex="0"
             />
             <span v-if="selectedAndEditable" class="no-value d-flex">
@@ -277,13 +277,13 @@ export default {
           type="radio"
           @click="toggleDateType(false)"
         />
-        <span class="prepend-left-5">{{ __('Inherited:') }}</span>
+        <span class="gl-ml-2">{{ __('Inherited:') }}</span>
         <span class="value-content gl-ml-1">{{ dateFromMilestonesWords }}</span>
         <icon
           v-if="isDateInvalid && !selectedDateIsFixed"
           v-popover="dateInvalidPopoverOptions"
           name="warning"
-          class="date-warning-icon prepend-left-5"
+          class="date-warning-icon gl-ml-2"
           tabindex="0"
         />
       </abbr>

ee/app/assets/javascripts/security_dashboard/components/project_security_dashboard.vue

@@ -115,7 +115,7 @@ export default {
           <span class="js-security-dashboard-right pull-right">
             <icon name="branch" />
             <gl-link :href="branch.path" class="monospace">{{ branch.id }}</gl-link>
-            <span class="text-muted prepend-left-5 gl-mr-2">&middot;</span>
+            <span class="text-muted gl-ml-2 gl-mr-2">&middot;</span>
             <icon name="commit" />
             <gl-link :href="commit.path" class="monospace">{{ commit.id }}</gl-link>
           </span>

ee/app/views/admin/geo/projects/_registry_failed.html.haml

@@ -42,12 +42,12 @@
               - if project_registry.last_repository_sync_failure
                 %li.d-flex.text-danger-500
                   = sprite_icon('warning', size: 18)
-                  %span.prepend-left-5
+                  %span.gl-ml-2
                     = s_('Geo|Synchronization failed - %{error}') % { error: project_registry.last_repository_sync_failure }
               - if project_registry.last_repository_verification_failure
                 %li.d-flex.text-danger-500
                   = sprite_icon('warning', size: 18)
-                  %span.prepend-left-5
+                  %span.gl-ml-2
                     = s_('Geo|Verification failed - %{error}') % { error: project_registry.last_repository_verification_failure }
           .col-sm-4.mt-3.mt-sm-0
             .project-status-title.text-muted

ee/app/views/admin/geo/projects/_registry_never.html.haml

@@ -43,12 +43,12 @@
                 - if project_registry.last_repository_sync_failure
                   %li.d-flex.text-danger-500
                     = sprite_icon('warning', size: 18)
-                    %span.prepend-left-5
+                    %span.gl-ml-2
                       = s_('Geo|Synchronization failed - %{error}') % { error: project_registry.last_repository_sync_failure }
                 - if project_registry.last_repository_verification_failure
                   %li.d-flex.text-danger-500
                     = sprite_icon('warning', size: 18)
-                    %span.prepend-left-5
+                    %span.gl-ml-2
                       = s_('Geo|Verification failed - %{error}') % { error: project_registry.last_repository_verification_failure }
             .col-sm-4.mt-3.mt-sm-0
               .project-status-title.text-muted

ee/app/views/projects/branches/_diverged_from_upstream.html.haml

 - if @project.mirror_ever_updated_successfully? && @repository.diverged_from_upstream?(branch.name)
-  %span.badge.badge-danger.prepend-left-5.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
+  %span.badge.badge-danger.gl-ml-2.has-tooltip{ data: { html: "true", title: branch_diverged_tooltip_message } }
     = icon('exclamation-triangle')
     = s_('Branches|diverged from upstream')

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

@@ -5,7 +5,7 @@
   .dropdown.boards-add-list.prepend-left-10#js-add-list
     %button.btn.btn-success.btn-inverted.d-flex.js-new-board-list{ type: "button", data: board_list_data }
       %span Add list
-      = sprite_icon('chevron-down', size: 16, css_class: 'prepend-left-5 btn-success-board-list-chevron')
+      = sprite_icon('chevron-down', size: 16, css_class: 'gl-ml-2 btn-success-board-list-chevron')
     .dropdown-menu.dropdown-menu-paging.dropdown-menu-right.dropdown-menu-issues-board-new.dropdown-menu-selectable.dropdown-menu-tabs.pt-0
       %ul.nav.nav-tabs.dropdown-tabs-list.d-flex.js-new-board-list-tabs{ role: 'tablist' }
         %li.nav-item.dropdown-tab-item.flex-grow-1.flex-shrink-1.w-0.border-left-0.js-tab-button-labels

ee/app/views/users/_custom_project_templates_from_groups.html.haml

@@ -9,7 +9,7 @@
               = sprite_icon('angle-right', css_class: 's16 options-collapsed-icon')
             .avatar-container.s40
               = group_icon(group, alt: group.name, class: 'btn-template-icon avatar s40 avatar-tile', lazy: false)
-            .template-subgroup-name.prepend-left-5
+            .template-subgroup-name.gl-ml-2
               %strong= group.full_name
               - if group.description.present?
                 .text-muted
@@ -23,7 +23,7 @@
           .template-option.align-items-center.qa-template-option-row
             .avatar-container.s40
               = project_icon(project, alt: project.name, class: 'btn-template-icon avatar s40 avatar-tile', lazy: false)
-            .description.prepend-left-5
+            .description.gl-ml-2
               %strong
                 = project.title
               %br

ee/spec/frontend/epic/components/sidebar_items/__snapshots__/sidebar_date_picker_spec.js.snap

@@ -56,7 +56,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
       />
        
       <span
-        class="prepend-left-5"
+        class="gl-ml-2"
       >
         Fixed:
       </span>
@@ -85,7 +85,7 @@ exports[`SidebarDatePicker renders expected template 1`] = `
       />
        
       <span
-        class="prepend-left-5"
+        class="gl-ml-2"
       >
         Inherited:
       </span>

ee/spec/frontend/security_dashboard/components/__snapshots__/project_security_dashboard_spec.js.snap

@@ -34,7 +34,7 @@ exports[`Project Security Dashboard component Headline renders renders branch an
   </a>
    
   <span
-    class="text-muted prepend-left-5 gl-mr-2"
+    class="text-muted gl-ml-2 gl-mr-2"
   >
     ·
   </span>

spec/frontend/gfm_auto_complete_spec.js

@@ -312,7 +312,7 @@ describe('GfmAutoComplete', () => {
           title: 'My Group',
           search: 'my-group My Group',
           icon:
-            '<svg class="s16 vertical-align-middle prepend-left-5"><use xlink:href="undefined#notifications-off" /></svg>',
+            '<svg class="s16 vertical-align-middle gl-ml-2"><use xlink:href="undefined#notifications-off" /></svg>',
         },
       ]);
     });