Skip to content

Commit

Permalink
feat(b-pagination, b-pagination-nav): add pills style option (#4236)
Browse files Browse the repository at this point in the history
  • Loading branch information
tmorehouse authored Oct 14, 2019
1 parent d493298 commit 605d4c4
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/_utilities.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// --- BootstrapVue Utility Classes ---
// --- BootstrapVue utility / helper classes ---

$bv-utility-classes-defined: false !default;

Expand Down
29 changes: 29 additions & 0 deletions src/components/pagination-nav/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,35 @@ smaller buttons or `'lg'` for larger buttons.
<!-- b-pagination-nav-size.vue -->
```

### Pill style

Easily switch to pill style buttons by setting hte `pills` prop

```html
<template>
<div class="overflow-auto">
<div>
<h6>Small Pills</h6>
<b-pagination-nav pills size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
</div>

<div class="mt-3">
<h6>Default Pills</h6>
<b-pagination-nav pills number-of-pages="10" base-url="#"></b-pagination-nav>
</div>

<div class="mt-3">
<h6>Large Pills</h6>
<b-pagination-nav pills size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
</div>
</div>
</template>

<!-- b-pagination-nav-pills.vue -->
```

**Note:** Pill styling requires BootstrapVue's custom CSS/SCSS.

### Alignment

By default the pagination component is left aligned. Change the alignment to `center`, `right`
Expand Down
4 changes: 2 additions & 2 deletions src/components/pagination-nav/_pagination-nav.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// <pagination> and <pagination-nav> require the helper utility classes
@import "../../utilities";
// <pagination-nav> shares <pagination> SCSS
@import "../pagination/index";
5 changes: 5 additions & 0 deletions src/components/pagination-nav/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,11 @@
"prop": "align",
"description": "Alignment of the page buttons: 'start' (or 'left'), 'center', 'end' (or 'right'), or 'fill'"
},
{
"prop": "pills",
"version": "2.1.0",
"description": "Applies pill styling to the pagination buttons"
},
{
"prop": "hideGotoEndButtons",
"description": "Hides the goto first and goto last page buttons"
Expand Down
40 changes: 40 additions & 0 deletions src/components/pagination/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,46 @@ smaller buttons or `'lg'` for larger buttons.
<!-- b-pagination-size.vue -->
```

### Pill style

Easily switch to pill style buttons by setting hte `pills` prop

```html
<template>
<div class="overflow-auto">
<div>
<h6>Small Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
</div>

<div class="mt-3">
<h6>Default Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
</div>

<div class="mt-3">
<h6>Large Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
</div>
</div>
</template>

<script>
export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}
</script>

<!-- b-pagination-pills.vue -->
```

**Note:** Pill styling requires BootstrapVue's custom CSS/SCSS.

### Alignment

By default the pagination component is left aligned. Change the alignment to `center`, `right`
Expand Down
24 changes: 24 additions & 0 deletions src/components/pagination/_pagination.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,26 @@
// <pagination> and <pagination-nav> require the helper utility classes
@import "../../utilities";

$bv-pagination-classes-defined: false !default;

// Make sure to include these style definitions only once
@if $bv-pagination-classes-defined == false {
$bv-pagination-classes-defined: true;

// Pagination pill style
.b-pagination-pills {
.page-item {
.page-link {
border-radius: 50rem !important;
margin-left: 0.25rem;
line-height: 1;
}

&:first-child {
.page-link {
margin-left: 0;
}
}
}
}
}
5 changes: 5 additions & 0 deletions src/components/pagination/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@
"prop": "align",
"description": "Alignment of the page buttons: 'start' (or 'left'), 'center', 'end' (or 'right'), or 'fill'"
},
{
"prop": "pills",
"version": "2.1.0",
"description": "Applies pill styling to the pagination buttons"
},
{
"prop": "hideGotoEndButtons",
"description": "Hides the goto first and goto last page buttons"
Expand Down
32 changes: 32 additions & 0 deletions src/components/pagination/pagination.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand Down Expand Up @@ -164,6 +165,30 @@ describe('pagination', () => {
wrapper.destroy()
})

it('has class "b-pagination-pills" when prop pills is set', async () => {
const wrapper = mount(BPagination, {
propsData: {
pills: true,
totalRows: 1,
perPage: 1
}
})
expect(wrapper.is('ul')).toBe(true)
// Classes
expect(wrapper.classes()).toContain('pagination')
expect(wrapper.classes()).toContain('b-pagination')
expect(wrapper.classes()).toContain('b-pagination-pills')
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
expect(wrapper.attributes('aria-label')).toBe('Pagination')

wrapper.destroy()
})

it('has class "pagination-sm" when prop size="sm"', async () => {
const wrapper = mount(BPagination, {
propsData: {
Expand All @@ -180,6 +205,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand All @@ -204,6 +230,7 @@ describe('pagination', () => {
expect(wrapper.classes()).toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand All @@ -229,6 +256,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand All @@ -253,6 +281,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand All @@ -277,6 +306,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand All @@ -301,6 +331,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')
// Attributes
expect(wrapper.attributes('role')).toBe('menubar')
expect(wrapper.attributes('aria-disabled')).toBe('false')
Expand Down Expand Up @@ -329,6 +360,7 @@ describe('pagination', () => {
expect(wrapper.classes()).not.toContain('pagination-lg')
expect(wrapper.classes()).not.toContain('justify-content-center')
expect(wrapper.classes()).not.toContain('justify-content-end')
expect(wrapper.classes()).not.toContain('b-pagination-pills')

expect(wrapper.findAll('li.flex-fill').length).toBe(8)

Expand Down
9 changes: 8 additions & 1 deletion src/mixins/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,10 @@ export const props = {
type: String,
default: 'left'
},
pills: {
type: Boolean,
default: false
},
hideGotoEndButtons: {
type: Boolean,
default: false
Expand Down Expand Up @@ -166,6 +170,9 @@ export default {
}
return ''
},
styleClass() {
return this.pills ? 'b-pagination-pills' : ''
},
computedCurrentPage() {
return sanitizeCurrentPage(this.currentPage, this.localNumberOfPages)
},
Expand Down Expand Up @@ -532,7 +539,7 @@ export default {
{
ref: 'ul',
staticClass: 'pagination',
class: ['b-pagination', this.btnSize, this.alignment],
class: ['b-pagination', this.btnSize, this.alignment, this.styleClass],
attrs: {
role: 'menubar',
'aria-disabled': disabled ? 'true' : 'false',
Expand Down

0 comments on commit 605d4c4

Please sign in to comment.