Replace append-right-default CSS class

This replaces append-right-default for
gl-mr-3 utility class from GitLab-UI

app/assets/javascripts/ide/components/branches/item.vue

@@ -33,7 +33,7 @@ export default {
 
 <template>
   <a :href="branchHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>

app/assets/javascripts/ide/components/commit_sidebar/empty_state.vue

@@ -12,7 +12,7 @@ export default {
   <div v-if="!lastCommitMsg" class="multi-file-commit-panel-section ide-commit-empty-state">
     <div class="ide-commit-empty-state-container">
       <div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
-      <div class="append-right-default gl-ml-3">
+      <div class="gl-mr-3 gl-ml-3">
         <div class="text-content text-center">
           <h4>{{ __('No changes') }}</h4>
           <p>{{ __('Edit files in the editor and commit changes here') }}</p>

app/assets/javascripts/ide/components/commit_sidebar/success_message.vue

@@ -13,7 +13,7 @@ export default {
     <div class="svg-content svg-80">
       <img :src="committedStateSvgPath" :alt="s__('IDE|Successful commit')" />
     </div>
-    <div class="append-right-default gl-ml-3">
+    <div class="gl-mr-3 gl-ml-3">
       <div class="text-content text-center">
         <h4>{{ __('All changes are committed') }}</h4>
         <p v-html="lastCommitMsg"></p>

app/assets/javascripts/ide/components/file_templates/bar.vue

@@ -48,7 +48,7 @@ export default {
 
 <template>
   <div class="d-flex align-items-center ide-file-templates qa-file-templates-bar">
-    <strong class="append-right-default"> {{ __('File templates') }} </strong>
+    <strong class="gl-mr-3"> {{ __('File templates') }} </strong>
     <dropdown
       :data="templateTypes"
       :label="selectedTemplateType.name || __('Choose a type...')"

app/assets/javascripts/ide/components/jobs/item.vue

@@ -26,7 +26,7 @@ export default {
 
 <template>
   <div class="ide-job-item">
-    <job-description :job="job" class="append-right-default" />
+    <job-description :job="job" class="gl-mr-3" />
     <div class="ml-auto align-self-center">
       <button v-if="job.started" type="button" class="btn btn-default btn-sm" @click="clickViewLog">
         {{ __('View log') }}

app/assets/javascripts/ide/components/merge_requests/item.vue

@@ -40,7 +40,7 @@ export default {
 
 <template>
   <a :href="mergeRequestHref" class="btn-link d-flex align-items-center">
-    <span class="d-flex append-right-default ide-search-list-current-icon">
+    <span class="d-flex gl-mr-3 ide-search-list-current-icon">
       <icon v-if="isActive" :size="18" name="mobile-issue-close" />
     </span>
     <span>

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -102,7 +102,7 @@ export default {
                 class="btn-link d-flex align-items-center"
                 @click.stop="setSearchType(searchType)"
               >
-                <span class="d-flex append-right-default ide-search-list-current-icon">
+                <span class="d-flex gl-mr-3 ide-search-list-current-icon">
                   <icon :size="18" name="search" />
                 </span>
                 <span>{{ searchType.label }}</span>

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

@@ -81,7 +81,7 @@ export default {
       v-if="shouldShowDeleteButton"
       :class="{ disabled: deleteLoading }"
       :disabled="deleteLoading"
-      class="btn btn-danger float-right append-right-default qa-delete-button"
+      class="btn btn-danger float-right gl-mr-3 qa-delete-button"
       type="button"
       @click="deleteIssuable"
     >

app/assets/javascripts/pipelines/components/test_reports/test_summary.vue

@@ -72,7 +72,7 @@ export default {
         <gl-deprecated-button
           v-if="showBack"
           size="sm"
-          class="append-right-default js-back-button"
+          class="gl-mr-3 js-back-button"
           @click="onBackClick"
         >
           <icon name="angle-left" />

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

@@ -52,7 +52,7 @@ export default {
       v-if="showReportSectionStatusIcon"
       :status="status"
       :status-icon-size="statusIconSize"
-      class="append-right-default"
+      class="gl-mr-3"
     />
 
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />

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

@@ -45,7 +45,7 @@ export default {
 </script>
 <template>
   <div class="report-block-list-issue report-block-list-issue-parent align-items-center">
-    <div class="report-block-list-icon append-right-default">
+    <div class="report-block-list-icon gl-mr-3">
       <gl-loading-icon
         v-if="statusIcon === 'loading'"
         css-class="report-block-list-loading-icon"

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

@@ -59,7 +59,7 @@ export default {
 
       <template v-else>
         <button
-          class="btn-blank btn s32 square append-right-default"
+          class="btn-blank btn s32 square gl-mr-3"
           type="button"
           :aria-label="ariaLabel"
           :disabled="isLoading"

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

@@ -46,7 +46,7 @@ export default {
   <div>
     <div class="mr-widget-body gl-display-flex">
       <span
-        class="gl-display-flex gl-align-items-center gl-justify-content-center append-right-default gl-align-self-start gl-mt-1"
+        class="gl-display-flex gl-align-items-center gl-justify-content-center gl-mr-3 gl-align-self-start gl-mt-1"
       >
         <gl-icon :name="iconName" :size="24" />
       </span>

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

@@ -13,7 +13,7 @@ export default {
 </script>
 
 <template>
-  <div class="circle-icon-container append-right-default align-self-start align-self-lg-center">
+  <div class="circle-icon-container gl-mr-3 align-self-start align-self-lg-center">
     <icon :name="name" :size="24" />
   </div>
 </template>

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

@@ -129,7 +129,7 @@ export default {
       <div class="media-body gl-ml-3" v-html="errorText"></div>
     </template>
     <template v-else-if="hasPipeline">
-      <a :href="status.details_path" class="align-self-start append-right-default">
+      <a :href="status.details_path" class="align-self-start gl-mr-3">
         <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
       </a>
       <div class="ci-widget-container d-flex">

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

@@ -33,7 +33,7 @@ export default {
 </script>
 <template>
   <div class="d-flex align-self-start">
-    <div class="square s24 h-auto d-flex-center append-right-default">
+    <div class="square s24 h-auto d-flex-center gl-mr-3">
       <div v-if="isLoading" class="mr-widget-icon d-inline-flex">
         <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
       </div>

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

@@ -83,7 +83,7 @@ export default {
       <gl-deprecated-button
         :aria-label="ariaLabel"
         variant="blank"
-        class="commit-edit-toggle square s24 append-right-default"
+        class="commit-edit-toggle square s24 gl-mr-3"
         @click.stop="toggle()"
       >
         <icon :name="collapseIcon" :size="16" />

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

@@ -58,7 +58,7 @@ export default {
 <template>
   <div class="gl-display-flex">
     <span
-      class="gl-display-flex gl-align-items-center gl-justify-content-center append-right-default gl-align-self-start gl-mt-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-mr-3 gl-align-self-start gl-mt-1"
     >
       <gl-icon :name="iconType" :size="18" data-testid="change-type-icon" />
     </span>

app/assets/javascripts/vue_shared/components/file_finder/index.vue

@@ -261,7 +261,7 @@ export default {
             </li>
           </template>
           <li v-else class="dropdown-menu-empty-item">
-            <div class="append-right-default gl-ml-3 gl-mt-3 gl-mb-3">
+            <div class="gl-mr-3 gl-ml-3 gl-mt-3 gl-mb-3">
               <template v-if="loading">
                 {{ __('Loading...') }}
               </template>

app/assets/stylesheets/framework/common.scss

@@ -408,7 +408,6 @@ img.emoji {
 .append-right-5 { margin-right: 5px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-15 { margin-right: 15px; }
-.append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-10 { margin-bottom: 10px; }
 .append-bottom-15 { margin-bottom: 15px; }

app/views/ci/variables/_variable_row.html.haml

@@ -42,7 +42,7 @@
         = link_to icon('question-circle'), help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'), target: '_blank', rel: 'noopener noreferrer'
     - unless only_key_value
       .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+        .gl-mr-3
           = s_("CiVariable|Protected")
         = render "shared/buttons/project_feature_toggle", is_checked: is_protected, label: s_("CiVariable|Toggle protected") do
           %input{ type: "hidden",
@@ -51,7 +51,7 @@
             value: is_protected,
             data: { default: is_protected_default.to_s } }
       .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0
-        .append-right-default
+        .gl-mr-3
           = s_("CiVariable|Masked")
         = render "shared/buttons/project_feature_toggle", is_checked: is_masked, label: s_("CiVariable|Toggle masked"), class_list: "js-project-feature-toggle project-feature-toggle qa-variable-masked" do
           %input{ type: "hidden",

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

@@ -25,7 +25,7 @@
 
     .nav-controls
       - if @todos.any?(&:pending?)
-        .append-right-default
+        .gl-mr-3
           = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn btn-loading d-flex align-items-center js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
             Mark all as done
             %span.spinner.ml-1

app/views/groups/_home_panel.html.haml

@@ -5,7 +5,7 @@
 .group-home-panel
   .row.mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
+      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-mr-3.float-none
         = group_icon(@group, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline

app/views/projects/_home_panel.html.haml

@@ -6,7 +6,7 @@
 .project-home-panel.js-show-on-project-root{ class: [("empty-project" if empty_repo)] }
   .row.gl-mb-3
     .home-panel-title-row.col-md-12.col-lg-6.d-flex
-      .avatar-container.rect-avatar.s64.home-panel-avatar.append-right-default.float-none
+      .avatar-container.rect-avatar.s64.home-panel-avatar.gl-mr-3.float-none
         = project_icon(@project, alt: @project.name, class: 'avatar avatar-tile s64', width: 64, height: 64)
       .d-flex.flex-column.flex-wrap.align-items-baseline
         .d-inline-flex.align-items-baseline

app/views/projects/forks/_fork_button.html.haml

@@ -2,7 +2,7 @@
 - can_create_project = current_user.can?(:create_projects, namespace)
 
 - if forked_project = namespace.find_fork_of(@project)
-  .bordered-box.fork-thumbnail.text-center.gl-ml-3.append-right-default.gl-mt-3.gl-mb-3.forked
+  .bordered-box.fork-thumbnail.text-center.gl-ml-3.gl-mr-3.gl-mt-3.gl-mb-3.forked
     = link_to project_path(forked_project) do
       - if /no_((\w*)_)*avatar/.match(avatar)
         = group_icon(namespace, class: "avatar rect-avatar s100 identicon mx-auto")
@@ -12,7 +12,7 @@
       %h5.gl-mt-3
         = namespace.human_name
 - else
-  .bordered-box.fork-thumbnail.text-center.gl-ml-3.append-right-default.gl-mt-3.gl-mb-3{ class: ("disabled" unless can_create_project) }
+  .bordered-box.fork-thumbnail.text-center.gl-ml-3.gl-mr-3.gl-mt-3.gl-mb-3{ class: ("disabled" unless can_create_project) }
     = link_to project_forks_path(@project, namespace_key: namespace.id),
         method: "POST",
         class: ("disabled has-tooltip" unless can_create_project),

app/views/projects/forks/new.html.haml

@@ -9,7 +9,7 @@
   .col-lg-9
     - if @namespaces.present?
       .fork-thumbnail-container.js-fork-content
-        %h5.gl-mt-0.gl-mb-0.gl-ml-3.append-right-default
+        %h5.gl-mt-0.gl-mb-0.gl-ml-3.gl-mr-3
           = _("Select a namespace to fork the project")
         - @namespaces.each do |namespace|
           = render 'fork_button', namespace: namespace

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

@@ -58,10 +58,10 @@
               = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: project
 
         - if show_last_commit_as_description
-          .description.d-none.d-sm-block.append-right-default
+          .description.d-none.d-sm-block.gl-mr-3
             = link_to_markdown(project.commit.title, project_commit_path(project, project.commit), class: "commit-row-message")
         - elsif project.description.present?
-          .description.d-none.d-sm-block.append-right-default
+          .description.d-none.d-sm-block.gl-mr-3
             = markdown_field(project, :description)
 
       .controls.d-flex.flex-sm-column.align-items-center.align-items-sm-end.flex-wrap.flex-shrink-0.text-secondary{ class: css_controls_class.join(" ") }

ee/app/assets/javascripts/packages/details/components/installation_tabs.vue

@@ -23,12 +23,12 @@ export default {
   <div class="gl-mb-3">
     <gl-tabs @input="trackInstallationTabChange">
       <gl-tab :title="s__('PackageRegistry|Installation')" title-item-class="js-installation-tab">
-        <div class="gl-ml-3 append-right-default">
+        <div class="gl-ml-3 gl-mr-3">
           <slot name="installation"></slot>
         </div>
       </gl-tab>
       <gl-tab :title="s__('PackageRegistry|Registry Setup')" title-item-class="js-setup-tab">
-        <div class="gl-ml-3 append-right-default">
+        <div class="gl-ml-3 gl-mr-3">
           <slot name="setup"></slot>
         </div>
       </gl-tab>

ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_footer.vue

@@ -69,7 +69,7 @@ export default {
   <div>
     <div class="mr-widget-extension d-flex align-items-center pl-3">
       <button
-        class="btn btn-blank square s32 append-right-default"
+        class="btn btn-blank square s32 gl-mr-3"
         type="button"
         :aria-label="ariaLabel"
         @click="toggle"

ee/app/assets/javascripts/vue_shared/license_compliance/components/admin_license_management_row.vue

@@ -66,7 +66,7 @@ export default {
 </script>
 <template>
   <div data-qa-selector="admin_license_compliance_row">
-    <issue-status-icon :status="status" class="float-left append-right-default" />
+    <issue-status-icon :status="status" class="float-left gl-mr-3" />
     <span class="js-license-name" data-qa-selector="license_name_content">{{ license.name }}</span>
     <div class="float-right">
       <div class="d-flex">

ee/app/assets/javascripts/vue_shared/license_compliance/mr_widget_license_report.vue

@@ -169,7 +169,7 @@ export default {
           </gl-link>
         </div>
       </template>
-      <div v-if="showActionButtons" slot="actionButtons" class="append-right-default">
+      <div v-if="showActionButtons" slot="actionButtons" class="gl-mr-3">
         <a
           v-if="licenseManagementSettingsPath"
           :class="{ 'gl-mr-3': fullReportPath }"

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

@@ -289,11 +289,7 @@ export default {
   >
     <template v-if="pipelinePath" #actionButtons>
       <div>
-        <a
-          :href="securityTab"
-          target="_blank"
-          class="btn btn-default btn-sm float-right append-right-default"
-        >
+        <a :href="securityTab" target="_blank" class="btn btn-default btn-sm float-right gl-mr-3">
           <span>{{ s__('ciReport|View full report') }}</span>
           <icon :size="16" name="external-link" />
         </a>

ee/app/views/shared/billings/_billing_plan_header.html.haml

@@ -6,12 +6,12 @@
 .billing-plan-header.content-block.center
   .billing-plan-logo
     - if namespace_for_user
-      .avatar-container.s96.home-panel-avatar.append-right-default.float-none.mx-auto.mb-4.mt-1
+      .avatar-container.s96.home-panel-avatar.gl-mr-3.float-none.mx-auto.mb-4.mt-1
         = user_avatar_without_link(user: current_user, class: 'mb-3', size: 96)
     - elsif @group.avatar_url.present?
       = group_icon(@group, class: 'border rounded mb-3 mt-1', width: 96, height: 96, alt: @group.name)
     - else
-      .avatar-container.rect-avatar.s96.home-panel-avatar.append-right-default.float-none.mx-auto.mb-4.mt-1.rounded.border
+      .avatar-container.rect-avatar.s96.home-panel-avatar.gl-mr-3.float-none.mx-auto.mb-4.mt-1.rounded.border
         = group_icon(@group, class: 'avatar avatar-tile s96', width: 96, height: 96, alt: @group.name)
 
   %h4

ee/app/views/shared/epic/_search_bar.html.haml

@@ -10,7 +10,7 @@
 .epics-filters{ class: "#{'epics-roadmap-filters' if show_roadmap_presets}" }
   .epics-details-filters.filtered-search-block.d-flex.flex-column.flex-md-row.row-content-block.second-block
     - if show_roadmap_presets
-      .btn-group.btn-group-toggle.append-right-default.js-btn-roadmap-presets{ data: { toggle: 'buttons' } }
+      .btn-group.btn-group-toggle.gl-mr-3.js-btn-roadmap-presets{ data: { toggle: 'buttons' } }
         %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_quarters) }
           %input{ type: 'radio', name: 'presetType', autocomplete: 'off', checked: ("checked" if is_quarters), value: 'QUARTERS' }
             = _('Quarters')
@@ -20,7 +20,7 @@
         %label.btn.btn-default.btn-roadmap-preset{ class: ("active" if is_weeks) }
           %input{ type: 'radio', name: 'presetType', autocomplete: 'off', checked: ("checked" if is_weeks), value: 'WEEKS' }
             = _('Weeks')
-      .filter-dropdown-container.append-right-default
+      .filter-dropdown-container.gl-mr-3
         = render 'shared/epic/state_dropdown'
     = form_tag page_filter_path, method: :get, class: 'flex-fill filter-form js-filter-form' do
       - if params[:search].present?

ee/spec/frontend/vue_shared/license_compliance/__snapshots__/mr_widget_license_report_spec.js.snap

@@ -47,7 +47,7 @@ exports[`License Report MR Widget report section should render correctly 1`] = `
 >
     
   <div
-    class="append-right-default"
+    class="gl-mr-3"
   >
     <a
       class="btn btn-default btn-sm js-manage-licenses gl-mr-3"