bootstrap-vue · tmorehouse · Oct 14, 2019 · Oct 10, 2019 · Oct 10, 2019 · Oct 10, 2019
diff --git a/src/_utilities.scss b/src/_utilities.scss
@@ -1,4 +1,4 @@
-// --- BootstrapVue Utility Classes ---
+// --- BootstrapVue utility / helper classes ---
 
 $bv-utility-classes-defined: false !default;
 

diff --git a/src/components/pagination-nav/README.md b/src/components/pagination-nav/README.md
@@ -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`

diff --git a/src/components/pagination-nav/_pagination-nav.scss b/src/components/pagination-nav/_pagination-nav.scss
@@ -1,2 +1,2 @@
-// <pagination> and <pagination-nav> require the helper utility classes
-@import "../../utilities";
+// <pagination-nav> shares <pagination> SCSS
+@import "../pagination/index";
diff --git a/src/components/pagination-nav/package.json b/src/components/pagination-nav/package.json
@@ -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"

diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
@@ -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`

diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
@@ -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;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/pagination/package.json b/src/components/pagination/package.json
@@ -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"

diff --git a/src/components/pagination/pagination.spec.js b/src/components/pagination/pagination.spec.js
@@ -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')
@@ -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: {
@@ -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')
@@ -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')
@@ -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')
@@ -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')
@@ -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')
@@ -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')
@@ -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)
 

diff --git a/src/mixins/pagination.js b/src/mixins/pagination.js
@@ -78,6 +78,10 @@ export const props = {
     type: String,
     default: 'left'
   },
+  pills: {
+    type: Boolean,
+    default: false
+  },
   hideGotoEndButtons: {
     type: Boolean,
     default: false
@@ -166,6 +170,9 @@ export default {
       }
       return ''
     },
+    styleClass() {
+      return this.pills ? 'b-pagination-pills' : ''
+    },
     computedCurrentPage() {
       return sanitizeCurrentPage(this.currentPage, this.localNumberOfPages)
     },
@@ -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',