From a441fa38c1e846f60bf0cfb85f046f3c99b2641c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 09:15:09 -0400 Subject: [PATCH 01/11] feat(list-group): support horizontal layout Bootstrap V4.3 adds in support for horizontal list-group layout. This PR adds in a new prop `horizontal` on `b-list-group` to enable this feature. Not supported when `flush` is also enabled. --- src/components/list-group/list-group.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 07ef791a8b9..8d67ea67f76 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -8,6 +8,10 @@ export const props = { flush: { type: Boolean, default: false + }, + horizontal: { + type: Boolean, + default: false } } @@ -20,7 +24,8 @@ export default { const componentData = { staticClass: 'list-group', class: { - 'list-group-flush': props.flush + 'list-group-flush': props.flush, + 'list-group-horizontal': props.horizontal && !props.flush, } } return h(props.tag, mergeData(data, componentData), children) From 1632042e167b8b4a5a6b1342ed8d1f8257cc3c79 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 09:17:24 -0400 Subject: [PATCH 02/11] lint --- src/components/list-group/list-group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 8d67ea67f76..042e46623dd 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -25,7 +25,7 @@ export default { staticClass: 'list-group', class: { 'list-group-flush': props.flush, - 'list-group-horizontal': props.horizontal && !props.flush, + 'list-group-horizontal': props.horizontal && !props.flush } } return h(props.tag, mergeData(data, componentData), children) From a86e3dbb3541227130ec5d2c24f6280535bacbff Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 09:23:40 -0400 Subject: [PATCH 03/11] Update list-group.js --- src/components/list-group/list-group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 042e46623dd..f380da13d51 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -10,7 +10,7 @@ export const props = { default: false }, horizontal: { - type: Boolean, + type: [Boolean, String], default: false } } From ebfde227eab8a4824e5b1fa1857c39a98106639f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 09:32:08 -0400 Subject: [PATCH 04/11] Update list-group.js --- src/components/list-group/list-group.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index f380da13d51..bc25676393e 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -21,11 +21,14 @@ export default { functional: true, props, render(h, { props, data, children }) { + let horizontal = props.horizontal === '' ? true : props.horizontal + horizontal = props.flush ? false : horizontal const componentData = { staticClass: 'list-group', class: { 'list-group-flush': props.flush, - 'list-group-horizontal': props.horizontal && !props.flush + 'list-group-horizontal': horizontal === true, + `list-group-horizontal-${horizontal}`: typeof horizontal === 'string' } } return h(props.tag, mergeData(data, componentData), children) From 45f0bc7ac6519e4854385dba7b4c969211732f0f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 09:34:31 -0400 Subject: [PATCH 05/11] Update list-group.js --- src/components/list-group/list-group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index bc25676393e..895db82a9bb 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -28,7 +28,7 @@ export default { class: { 'list-group-flush': props.flush, 'list-group-horizontal': horizontal === true, - `list-group-horizontal-${horizontal}`: typeof horizontal === 'string' + [`list-group-horizontal-${horizontal}`]: typeof horizontal === 'string' } } return h(props.tag, mergeData(data, componentData), children) From 14c5e0f89c6855c0cb509ce319053dadc6a99e9b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 10:20:37 -0400 Subject: [PATCH 06/11] lint --- src/components/list-group/list-group.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.js b/src/components/list-group/list-group.js index 895db82a9bb..9f24cc5634b 100644 --- a/src/components/list-group/list-group.js +++ b/src/components/list-group/list-group.js @@ -28,7 +28,7 @@ export default { class: { 'list-group-flush': props.flush, 'list-group-horizontal': horizontal === true, - [`list-group-horizontal-${horizontal}`]: typeof horizontal === 'string' + [`list-group-horizontal-${horizontal}`]: typeof horizontal === 'string' } } return h(props.tag, mergeData(data, componentData), children) From 522e943d51ba67ca19677090f9be06adaca1564f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 10:35:08 -0400 Subject: [PATCH 07/11] Update list-group.spec.js --- src/components/list-group/list-group.spec.js | 101 ++++++++++++++++++- 1 file changed, 98 insertions(+), 3 deletions(-) diff --git a/src/components/list-group/list-group.spec.js b/src/components/list-group/list-group.spec.js index f5c66abc76a..26077db9b50 100644 --- a/src/components/list-group/list-group.spec.js +++ b/src/components/list-group/list-group.spec.js @@ -1,6 +1,101 @@ -import { loadFixture, testVM } from '../../../tests/utils' +import ListGroup from './list-group' +import { mount } from '@vue/test-utils' describe('list-group', async () => { - beforeEach(loadFixture(__dirname, 'list-group')) - testVM() + it('default should have tag div', async () => { + const wrapper = mount(ListGroup) + expect(wrapper.is('div')).toBe(true) + }) + + it('default should contain only single class of list-group', async () => { + const wrapper = mount(ListGroup) + expect(wrapper.classes().length).toBe(1) + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).not.toContain('list-group-flush') + expect(wrapper.classes()).not.toContain('list-group-horizontal') + }) + + it('should have tag ul then prop tag=ul', async () => { + const wrapper = mount(ListGroup) + expect(wrapper.is('ul')).toBe(true) + }) + + it('should have class list-group-flush when prop flush=true', async () => { + const wrapper = mount(ListGroup, { + context: { + props: { flush: true } + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('list-group-flush') + expect(wrapper.classes()).not.toContain('list-group-horizontal') + }) + + it('should have class list-group-horizontal when prop horizontal=true', async () => { + const wrapper = mount(ListGroup, { + context: { + props: { horizontal: true } + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).not.toContain('list-group-flush') + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('list-group-horizontal') + }) + + it('should have class list-group-horizontal-md when prop horizontal=md', async () => { + const wrapper = mount(ListGroup, { + context: { + props: { horizontal: 'md' } + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).not.toContain('list-group-flush') + expect(wrapper.classes()).not.toContain('list-group-horizontal') + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('list-group-horizontal-md') + }) + + it('should not have class list-group-horizontal when prop horizontal=true and flush=true', async () => { + const wrapper = mount(ListGroup, { + context: { + props: { + horizontal: true, + flush: true + } + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).not.toContain('list-group-horizontal') + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('list-group-flush') + }) + + it('should not have class list-group-horizontal-lg when prop horizontal=lg and flush=true', async () => { + const wrapper = mount(ListGroup, { + context: { + props: { + horizontal: 'lg', + flush: true + } + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).not.toContain('list-group-horizontal-lg') + expect(wrapper.classes()).not.toContain('list-group-horizontal') + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('list-group-flush') + }) + + it('should accept custom classes', async () => { + const wrapper = mount(ListGroup, { + context: { + class: 'foobar' + } + }) + expect(wrapper.classes().length).toBe(2) + expect(wrapper.classes()).toContain('list-group') + expect(wrapper.classes()).toContain('foobar') + }) }) From 870f3b1acba642d5784f63fe80cf1f938bc5ac89 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 10:35:40 -0400 Subject: [PATCH 08/11] Delete list-group.html --- .../list-group/fixtures/list-group.html | 39 ------------------- 1 file changed, 39 deletions(-) delete mode 100644 src/components/list-group/fixtures/list-group.html diff --git a/src/components/list-group/fixtures/list-group.html b/src/components/list-group/fixtures/list-group.html deleted file mode 100644 index fd88400f17c..00000000000 --- a/src/components/list-group/fixtures/list-group.html +++ /dev/null @@ -1,39 +0,0 @@ -
- - Awesome list - - Action links are easy - - - This is a text only item - - - -

- - - Awesome list - - Action links are easy - - - This is a text only item with variant info - - - -

- - - - Cras justo odio - Dapibus ac facilisis in - Vestibulum at eros - - - Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex - nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua - consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris - ad sit ipsum anim Lorem. - - -
From 9ce8363a022ac71f38fc3c39ad7e492ff8da5874 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 10:35:51 -0400 Subject: [PATCH 09/11] Delete list-group.js --- src/components/list-group/fixtures/list-group.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/list-group/fixtures/list-group.js diff --git a/src/components/list-group/fixtures/list-group.js b/src/components/list-group/fixtures/list-group.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/list-group/fixtures/list-group.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -}) From cdea2cd8014258e8a8379a7c513ffef16c2e17b1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 10:39:06 -0400 Subject: [PATCH 10/11] Update list-group.spec.js --- src/components/list-group/list-group.spec.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/list-group/list-group.spec.js b/src/components/list-group/list-group.spec.js index 26077db9b50..40c220c8bd0 100644 --- a/src/components/list-group/list-group.spec.js +++ b/src/components/list-group/list-group.spec.js @@ -16,7 +16,11 @@ describe('list-group', async () => { }) it('should have tag ul then prop tag=ul', async () => { - const wrapper = mount(ListGroup) + const wrapper = mount(ListGroup, { + context: { + props: { tag: 'ul' } + } + }) expect(wrapper.is('ul')).toBe(true) }) From 550f2efb600a4788f53a6a915c5168817702254b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 12 Feb 2019 17:45:01 -0400 Subject: [PATCH 11/11] Update README.md --- src/components/list-group/README.md | 38 +++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/src/components/list-group/README.md b/src/components/list-group/README.md index fc324502958..7324a0ed8fe 100644 --- a/src/components/list-group/README.md +++ b/src/components/list-group/README.md @@ -197,6 +197,44 @@ prop when using cards with `no-body` to make the sides of the list group flush w ``` +## Horizontal list groups + +Set the prop `horizontal` to `true` to change the layout of list group items from vertical to +horizontal across all breakpoints. Alternatively, set `horizontal` to a responsive breakpoint +(`sm`, `md`, `lg` or `xl`) to make a list group horizontal starting at that breakpoint’s min-width. +Currently horizontal list groups cannot be combined with `flush` list groups. + +**ProTip:** Want equal-width list group items when horizontal? Add the class `flex-fill` to each +list group item. + +**Always horizontal:** + +```html +
+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + +
+ + +``` + +**Horizontal at breakpoint md and above:** + +```html +
+ + Cras justo odio + Dapibus ac facilisis in + Morbi leo risus + +
+ + +``` + ## Custom content Add nearly any HTML or component within, even for linked list groups like the one below, with the