Merge branch 'consistent-pagination' into 'master'

Fix inconsistent pagination styles

Closes #58194

See merge request gitlab-org/gitlab-ce!25552

9 files changed, 19 insertions, 13 deletions

diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.vue b/app/assets/javascripts/vue_shared/components/table_pagination.vue
index 2a34b4630f2..9f38c2e4b9e 100644
--- a/app/assets/javascripts/vue_shared/components/table_pagination.vue
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.vue
@@ -149,9 +149,9 @@ export default {
         }"
         class="page-item"
       >
-        <a class="page-link" @click.prevent="changePage(item.title, item.disabled)">
+        <button type="button" class="page-link" @click="changePage(item.title, item.disabled)">
           {{ item.title }}
-        </a>
+        </button>
       </li>
     </ul>
   </div>
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index 814e802f7c1..9b52493fd4d 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -44,3 +44,4 @@ $spacers: (
   5: ($spacer * 4),
   6: ($spacer * 8)
 );
+$pagination-color: $gl-text-color;
diff --git a/changelogs/unreleased/consistent-pagination.yml b/changelogs/unreleased/consistent-pagination.yml
new file mode 100644
index 00000000000..95eefaeb31d
--- /dev/null
+++ b/changelogs/unreleased/consistent-pagination.yml
@@ -0,0 +1,5 @@
+---
+title: Fix inconsistent pagination styles
+merge_request:
+author:
+type: fixed
diff --git a/spec/features/projects/pipelines/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index ffa165c5440..88d7c9ef8bd 100644
--- a/spec/features/projects/pipelines/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -485,7 +485,7 @@ describe 'Pipelines', :js do
         it 'should show updated content' do
           visit project_pipelines_path(project)
           wait_for_requests
-          page.find('.js-next-button a').click
+          page.find('.js-next-button .page-link').click
 
           expect(page).to have_selector('.gl-pagination .page', count: 2)
         end
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index 04c8ab44405..fec01b1f0a3 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -87,7 +87,7 @@ describe('Pipelines table in Commits and Merge requests', function() {
             };
 
             vm.$nextTick(() => {
-              vm.$el.querySelector('.js-next-button a').click();
+              vm.$el.querySelector('.js-next-button .page-link').click();
 
               expect(vm.updateContent).toHaveBeenCalledWith({ page: '2' });
               done();
diff --git a/spec/javascripts/environments/environments_app_spec.js b/spec/javascripts/environments/environments_app_spec.js
index 9220f7a264f..b6a244f7cd3 100644
--- a/spec/javascripts/environments/environments_app_spec.js
+++ b/spec/javascripts/environments/environments_app_spec.js
@@ -94,7 +94,7 @@ describe('Environment', () => {
         it('should make an API request when page is clicked', done => {
           spyOn(component, 'updateContent');
           setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) a').click();
+            component.$el.querySelector('.gl-pagination li:nth-child(5) .page-link').click();
 
             expect(component.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
             done();
diff --git a/spec/javascripts/environments/folder/environments_folder_view_spec.js b/spec/javascripts/environments/folder/environments_folder_view_spec.js
index d9ee7e74e28..69ddd26eef1 100644
--- a/spec/javascripts/environments/folder/environments_folder_view_spec.js
+++ b/spec/javascripts/environments/folder/environments_folder_view_spec.js
@@ -107,7 +107,7 @@ describe('Environments Folder View', () => {
       it('should make an API request when changing page', done => {
         spyOn(component, 'updateContent');
         setTimeout(() => {
-          component.$el.querySelector('.gl-pagination .js-last-button a').click();
+          component.$el.querySelector('.gl-pagination .js-last-button .page-link').click();
 
           expect(component.updateContent).toHaveBeenCalledWith({
             scope: component.scope,
diff --git a/spec/javascripts/pipelines/pipelines_spec.js b/spec/javascripts/pipelines/pipelines_spec.js
index 97ded16db69..78187b69563 100644
--- a/spec/javascripts/pipelines/pipelines_spec.js
+++ b/spec/javascripts/pipelines/pipelines_spec.js
@@ -446,7 +446,7 @@ describe('Pipelines', () => {
             };
 
             vm.$nextTick(() => {
-              vm.$el.querySelector('.js-next-button a').click();
+              vm.$el.querySelector('.js-next-button .page-link').click();
 
               expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
 
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 0dcb712e720..407d1d59f83 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -53,7 +53,7 @@ describe('Pagination component', () => {
           component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
         ).toEqual(true);
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
 
         expect(spy).not.toHaveBeenCalled();
       });
@@ -71,7 +71,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-previous-button a').click();
+        component.$el.querySelector('.js-previous-button .page-link').click();
 
         expect(spy).toHaveBeenCalledWith(1);
       });
@@ -91,7 +91,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-first-button a');
+        const button = component.$el.querySelector('.js-first-button .page-link');
 
         expect(button.textContent.trim()).toEqual('« First');
 
@@ -115,7 +115,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        const button = component.$el.querySelector('.js-last-button a');
+        const button = component.$el.querySelector('.js-last-button .page-link');
 
         expect(button.textContent.trim()).toEqual('Last »');
 
@@ -141,7 +141,7 @@ describe('Pagination component', () => {
 
         expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next');
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
 
         expect(spy).not.toHaveBeenCalled();
       });
@@ -159,7 +159,7 @@ describe('Pagination component', () => {
           change: spy,
         });
 
-        component.$el.querySelector('.js-next-button a').click();
+        component.$el.querySelector('.js-next-button .page-link').click();
 
         expect(spy).toHaveBeenCalledWith(4);
       });