fix(b-table): allow responsive and stacked props together (#6266)

Author: jacobmllr95

src/components/table/README.md

@@ -349,8 +349,8 @@ details.
 | `no-footer-sorting`  | Boolean           | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details.                                                                                                                                              |
 | `no-border-collapse` | Boolean           | Disables the default of collapsing of the table borders. Mainly for use with [sticky headers](#sticky-headers) and/or [sticky columns](#sticky-columns). Will cause the appearance of double borders in some situations.                                                                                                                       |
 
-**Note:** table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
-headers, sticky columns, and the table sorting feature, all require BootstrapVue's custom CSS.
+**Note:** The table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky
+headers, sticky columns and the table sorting feature, all require BootstrapVue's custom CSS.
 
 **Example: Basic table styles**
 
@@ -609,8 +609,8 @@ breakpoint values `'sm'`, `'md'`, `'lg'`, or `'xl'`.
 Column header labels will be rendered to the left of each field value using a CSS `::before` pseudo
 element, with a width of 40%.
 
-The prop `stacked` takes precedence over the `responsive` prop, [`sticky-header`](#sticky-headers)
-props, and the [`stickyColumn`](#sticky-columns) field definition property.
+The `stacked` prop takes precedence over the [`sticky-header`](#sticky-headers) prop and the
+[`stickyColumn`](#sticky-columns) field definition property.
 
 **Example: Always stacked table**
 
@@ -1402,8 +1402,8 @@ set.
   wrapped inside a horizontally scrollable `<div>`.
 - When you have multiple columns that are set as `stickyColumn`, the columns will stack over each
   other visually, and the left-most sticky columns may "peek" out from under the next sticky column.
-  To get around this behaviour, make sure your latter stickyColumns are the same width or wider than
-  previous sticky columns.
+  To get around this behaviour, make sure your latter sticky columns are the same width or wider
+  than previous sticky columns.
 - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any
   borders on the sticky columns from "sticking" to the column, and hence those borders will scroll
   when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table

src/components/table/helpers/mixin-table-renderer.js

@@ -51,9 +51,8 @@ export const tableRendererMixin = Vue.extend({
   computed: {
     // Layout related computed props
     isResponsive() {
-      let { responsive } = this
-      responsive = responsive === '' ? true : responsive
-      return this.isStacked ? false : responsive
+      const { responsive } = this
+      return responsive === '' ? true : responsive
     },
     isStickyHeader() {
       let { stickyHeader } = this

src/components/table/table-lite.spec.js

@@ -225,9 +225,12 @@ describe('table-lite', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
@@ -245,14 +248,17 @@ describe('table-lite', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive-md')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
 
-  it('stacked has precedence over responsive', async () => {
+  it('stacked and responsive work together', async () => {
     const wrapper = mount(BTableLite, {
       propsData: {
         items: items1,
@@ -263,12 +269,16 @@ describe('table-lite', () => {
     })
 
     expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).not.toContain('table-responsive')
-    expect(wrapper.classes()).toContain('b-table-stacked')
-    expect(wrapper.classes()).toContain('table')
-    expect(wrapper.classes()).toContain('b-table')
-    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes()).toContain('b-table-stacked')
+    expect($table.classes().length).toBe(3)
 
     wrapper.destroy()
   })
@@ -281,6 +291,7 @@ describe('table-lite', () => {
         stacked: true
       }
     })
+
     expect(wrapper).toBeDefined()
     expect(wrapper.findAll('tbody > tr').length).toBe(2)
     const $trs = wrapper.findAll('tbody > tr').wrappers

src/components/table/table.spec.js

@@ -286,9 +286,12 @@ describe('table', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
@@ -306,14 +309,17 @@ describe('table', () => {
     expect(wrapper.element.tagName).toBe('DIV')
     expect(wrapper.classes()).toContain('table-responsive-md')
     expect(wrapper.classes().length).toBe(1)
-    expect(wrapper.find('table').classes()).toContain('table')
-    expect(wrapper.find('table').classes()).toContain('b-table')
-    expect(wrapper.find('table').classes().length).toBe(2)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
 
     wrapper.destroy()
   })
 
-  it('stacked has precedence over responsive', async () => {
+  it('stacked and responsive work together', async () => {
     const wrapper = mount(BTable, {
       propsData: {
         items: items1,
@@ -324,12 +330,16 @@ describe('table', () => {
     })
 
     expect(wrapper).toBeDefined()
-    expect(wrapper.element.tagName).toBe('TABLE')
-    expect(wrapper.classes()).not.toContain('table-responsive')
-    expect(wrapper.classes()).toContain('b-table-stacked')
-    expect(wrapper.classes()).toContain('table')
-    expect(wrapper.classes()).toContain('b-table')
-    expect(wrapper.classes().length).toBe(3)
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes()).toContain('b-table-stacked')
+    expect($table.classes().length).toBe(3)
 
     wrapper.destroy()
   })
@@ -342,6 +352,7 @@ describe('table', () => {
         stacked: true
       }
     })
+
     expect(wrapper).toBeDefined()
     expect(wrapper.findAll('tbody > tr').length).toBe(2)
     const $trs = wrapper.findAll('tbody > tr').wrappers