refactor: CListGroup and CListGroupItem changes

- add horizontal prop to CListGroup,
- add default role 'list-items' to CListGroup,
- change default tags to ul for CListGroup, and li for CListGroupItem

Author: woothu

src/components/ListGroup/CListGroup.vue

@@ -7,14 +7,23 @@ export default {
   props: {
     tag: {
       type: String,
-      default: 'div'
+      default: 'ul'
     },
     flush: Boolean,
+    horizontal: [Boolean, String]
   },
   render (h, { props, data, children }) {
+    const hor = props.horizontal
+    const horizontalClassSuffix = typeof hor === 'string' ? `-${hor}` : ''
     const componentData = {
       staticClass: 'list-group',
-      class: { 'list-group-flush': props.flush }
+      class: { 
+        'list-group-flush': !hor && props.flush,
+        [`list-group-horizontal${horizontalClassSuffix}`]: hor,
+      },
+      attrs: {
+        role: data.attrs ? data.attrs.role || 'list-items' : 'list-items'
+      }
     }
     return h(props.tag, mergeData(data, componentData), children)
   }

src/components/ListGroup/CListGroupItem.vue

@@ -7,7 +7,7 @@ const props = Object.assign(
   {
     tag: {
       type: String,
-      default: 'div'
+      default: 'li'
     },
     action: Boolean,
     variant: String

src/components/ListGroup/tests/CListGroup.spec.js

@@ -2,7 +2,12 @@ import { mount } from '@vue/test-utils'
 import Component from '../CListGroup'
 
 const ComponentName = 'CListGroup'
-const defaultWrapper = mount(Component)
+const wrapper = mount(Component, {
+  propsData: {
+    horizontal: 'sm'
+  }
+})
+
 const customWrapper = mount(Component, {
   propsData: {
     flush: true
@@ -17,9 +22,9 @@ describe(ComponentName, () => {
     expect(Component.name).toMatch(ComponentName)
   })
   it('renders correctly', () => {
-    expect(defaultWrapper.element).toMatchSnapshot()
+    expect(wrapper.element).toMatchSnapshot()
   })
-  it('renders correctly', () => {
+  it('renders correctly with flush option', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
 })

src/components/ListGroup/tests/__snapshots__/CListGroup.spec.js.snap

@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CListGroup renders correctly 1`] = `
-<div
-  class="list-group"
+<ul
+  class="list-group list-group-horizontal-sm"
+  role="list-items"
 />
 `;
 
-exports[`CListGroup renders correctly 2`] = `
-<div
+exports[`CListGroup renders correctly with flush option 1`] = `
+<ul
   class="list-group list-group-flush"
+  role="list-items"
 >
   <template>
     CListGroup content
   </template>
-</div>
+</ul>
 `;

src/components/ListGroup/tests/__snapshots__/CListGroupItem.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CListGroupItem renders correctly 1`] = `
-<div
+<li
   class="list-group-item"
 />
 `;

src/components/index.d.ts

@@ -350,6 +350,7 @@ export declare class CLink extends Vue {
 export declare class CListGroup extends Vue {
   tag: string
   flush: boolean
+  horizontal: [string, boolean]
 }
 
 export declare class CListGroupitem extends CLink {