Commit d2336e02 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'consistent-pagination' into 'master'

Fix inconsistent pagination styles

Closes #58194

See merge request gitlab-org/gitlab-ce!25552
parents d6696f81 d63483a2
...@@ -149,9 +149,9 @@ export default { ...@@ -149,9 +149,9 @@ export default {
}" }"
class="page-item" 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 }} {{ item.title }}
</a> </button>
</li> </li>
</ul> </ul>
</div> </div>
......
...@@ -44,3 +44,4 @@ $spacers: ( ...@@ -44,3 +44,4 @@ $spacers: (
5: ($spacer * 4), 5: ($spacer * 4),
6: ($spacer * 8) 6: ($spacer * 8)
); );
$pagination-color: $gl-text-color;
---
title: Fix inconsistent pagination styles
merge_request:
author:
type: fixed
...@@ -485,7 +485,7 @@ describe 'Pipelines', :js do ...@@ -485,7 +485,7 @@ describe 'Pipelines', :js do
it 'should show updated content' do it 'should show updated content' do
visit project_pipelines_path(project) visit project_pipelines_path(project)
wait_for_requests 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) expect(page).to have_selector('.gl-pagination .page', count: 2)
end end
......
...@@ -87,7 +87,7 @@ describe('Pipelines table in Commits and Merge requests', function() { ...@@ -87,7 +87,7 @@ describe('Pipelines table in Commits and Merge requests', function() {
}; };
vm.$nextTick(() => { 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' }); expect(vm.updateContent).toHaveBeenCalledWith({ page: '2' });
done(); done();
......
...@@ -94,7 +94,7 @@ describe('Environment', () => { ...@@ -94,7 +94,7 @@ describe('Environment', () => {
it('should make an API request when page is clicked', done => { it('should make an API request when page is clicked', done => {
spyOn(component, 'updateContent'); spyOn(component, 'updateContent');
setTimeout(() => { 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' }); expect(component.updateContent).toHaveBeenCalledWith({ scope: 'available', page: '2' });
done(); done();
......
...@@ -107,7 +107,7 @@ describe('Environments Folder View', () => { ...@@ -107,7 +107,7 @@ describe('Environments Folder View', () => {
it('should make an API request when changing page', done => { it('should make an API request when changing page', done => {
spyOn(component, 'updateContent'); spyOn(component, 'updateContent');
setTimeout(() => { 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({ expect(component.updateContent).toHaveBeenCalledWith({
scope: component.scope, scope: component.scope,
......
...@@ -446,7 +446,7 @@ describe('Pipelines', () => { ...@@ -446,7 +446,7 @@ describe('Pipelines', () => {
}; };
vm.$nextTick(() => { 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' }); expect(vm.updateContent).toHaveBeenCalledWith({ scope: 'all', page: '2' });
......
...@@ -53,7 +53,7 @@ describe('Pagination component', () => { ...@@ -53,7 +53,7 @@ describe('Pagination component', () => {
component.$el.querySelector('.js-previous-button').classList.contains('disabled'), component.$el.querySelector('.js-previous-button').classList.contains('disabled'),
).toEqual(true); ).toEqual(true);
component.$el.querySelector('.js-previous-button a').click(); component.$el.querySelector('.js-previous-button .page-link').click();
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
}); });
...@@ -71,7 +71,7 @@ describe('Pagination component', () => { ...@@ -71,7 +71,7 @@ describe('Pagination component', () => {
change: spy, change: spy,
}); });
component.$el.querySelector('.js-previous-button a').click(); component.$el.querySelector('.js-previous-button .page-link').click();
expect(spy).toHaveBeenCalledWith(1); expect(spy).toHaveBeenCalledWith(1);
}); });
...@@ -91,7 +91,7 @@ describe('Pagination component', () => { ...@@ -91,7 +91,7 @@ describe('Pagination component', () => {
change: spy, 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'); expect(button.textContent.trim()).toEqual('« First');
...@@ -115,7 +115,7 @@ describe('Pagination component', () => { ...@@ -115,7 +115,7 @@ describe('Pagination component', () => {
change: spy, 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 »'); expect(button.textContent.trim()).toEqual('Last »');
...@@ -141,7 +141,7 @@ describe('Pagination component', () => { ...@@ -141,7 +141,7 @@ describe('Pagination component', () => {
expect(component.$el.querySelector('.js-next-button').textContent.trim()).toEqual('Next'); 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(); expect(spy).not.toHaveBeenCalled();
}); });
...@@ -159,7 +159,7 @@ describe('Pagination component', () => { ...@@ -159,7 +159,7 @@ describe('Pagination component', () => {
change: spy, change: spy,
}); });
component.$el.querySelector('.js-next-button a').click(); component.$el.querySelector('.js-next-button .page-link').click();
expect(spy).toHaveBeenCalledWith(4); expect(spy).toHaveBeenCalledWith(4);
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment