fix(list-group): disabled button items (#1444)

* Update README.md

* ensuire buttons are disabled if disabled set to true

* Update README.md

* add boolean prop `button` to force render of a button element

When `button` is true, no linkProps are applied, and the `tag` prop is ignored

* Update README.md

* Update README.md

* Update README.md

src/components/list-group/README.md

@@ -1,27 +1,243 @@
 # List group
 
 > List groups are a flexible and powerful component for displaying a series of content.
-List group items can be modified and extended to support just about any content within.
-They can also be used as navigation with the right modifier class.
+List group items can be modified to support just about any content within.
+They can also be used as navigation via various props.
 
 ```html
 <b-list-group>
-  <b-list-group-item active>
-    Awesome list
-  </b-list-group-item>
-  <b-list-group-item href="#">
-    Action links are easy
-  </b-list-group-item>
-  <b-list-group-item>
-    This is a text only item
-  </b-list-group-item>
+  <b-list-group-item>Cras justo odio</b-list-group-item>
+  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
+  <b-list-group-item>Morbi leo risus</b-list-group-item>
+  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
+  <b-list-group-item>Vestibulum at eros</b-list-group-item>
 </b-list-group>
 
 <!-- list-group.vue -->
 ```
 
+
+## Active items
+Set the `active` prop on a `<b-list-group-item>` to indicate the current active selection.
+
+```html
+<b-list-group>
+  <b-list-group-item>Cras justo odio</b-list-group-item>
+  <b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
+  <b-list-group-item>Morbi leo risus</b-list-group-item>
+  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
+  <b-list-group-item>Vestibulum at eros</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-active.vue -->
+```
+
+
+## Disabled items
+Set the `disabled` prop on a `<b-list-group-item>` to make it appear disabled (also works
+with actionalable items. see below).
+
+```html
+<b-list-group>
+  <b-list-group-item disabled>Cras justo odio</b-list-group-item>
+  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
+  <b-list-group-item>Morbi leo risus</b-list-group-item>
+  <b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
+  <b-list-group-item>Vestibulum at eros</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-disabled.vue -->
+```
+
+
 ## Actionable list group items
 Turn a `<b-list-group-item>` into an actionable link by specifying either an
-`href` prop or router link `to` prop.
+`href` prop or [router-link](/dics/reference/router-links) `to` prop.
+
+```html
+<b-list-group>
+  <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
+  <b-list-group-item href="#" active>Link with active state</b-list-group-item>
+  <b-list-group-item href="#">Action links are easy</b-list-group-item>
+  <b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-link.vue -->
+```
+
+Or if you prefer `<buttons>` over links, set the `button` prop to `true`.
+
+```html
+<b-list-group>
+  <b-list-group-item button>Button item</b-list-group-item>
+  <b-list-group-item button>I am a button</b-list-group-item>
+  <b-list-group-item button disabled>Disabled button</b-list-group-item>
+  <b-list-group-item button>This is a button too</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-button.vue -->
+```
+
+**Notes:**
+- When the prop `button` is `true`, all [link replated props](/docs/components/link)
+(other than `active`) and the `tag` prop will have no effect.
+- When rendered as a `<button>`, and the `active` prop is set to `true`, the button will lack
+any hover or focus styling due to an issue with Bootstrap V4.beta.2 CSS)
+- When `href` or `to` are set, the `tag` prop has no effect.
+
+## Contextual variants
+Use contextual variants to style list items with a stateful background and color, via
+the `variant` prop.
+
+```html
+<b-list-group>
+  <b-list-group-item>This is a default list group item</b-list-group-item>
+  <b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
+  <b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
+  <b-list-group-item variant="success">This is a success list group item</b-list-group-item>
+  <b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
+  <b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
+  <b-list-group-item variant="info">This is a info list group item</b-list-group-item>
+  <b-list-group-item variant="light">This is a light list group item</b-list-group-item>
+  <b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-variant.vue -->
+```
+
+Contextual variants also work with action items. Note the addition of the hover styling
+here not present in the previous example. Also supported is the `active` state; set it to
+indicate an active selection on a contextual list group item.
+
+```html
+<b-list-group>
+  <b-list-group-item href="#">This is a default list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
+  <b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
+</b-list-group>
+
+<!-- list-group-variant-action.vue -->
+```
+
+### Conveying meaning to assistive technologies
+Using color to add meaning only provides a visual indication, which will not be conveyed to users
+of assistive technologies – such as screen readers. Ensure that information denoted by the color
+is either obvious from the content itself (e.g. the visible text), or is included through alternative
+means, such as additional text hidden using the `.sr-only` class.
+
+
+## With badges
+Add [badges](/docs/components/badge) to any list group item to show unread counts, activity, and
+more with the help of some [utility classes](http://getbootstrap.com/docs/4.0/utilities/flex/).
+
+```html
+<b-list-group>
+  <b-list-group-item class="d-flex justify-content-between align-items-center">
+    Cras justo odio
+    <b-badge variant="primary" pill>14</b-badge>
+  </b-list-group-item>
+  <b-list-group-item class="d-flex justify-content-between align-items-center">
+    Dapibus ac facilisis in
+    <b-badge variant="primary" pill>2</b-badge>
+  </b-list-group-item>
+  <b-list-group-item class="d-flex justify-content-between align-items-center">
+    Morbi leo risus
+    <b-badge variant="primary" pill>1</b-badge>
+  </b-list-group-item>
+</b-list-group>
+
+<!-- list-group-badges.vue -->
+```
+
+
+## List groups inside cards
+Incorporate list groups into [cards](/docs/components/cards). Use the `<b-list-group>`
+prop `flush` prop when using cards with `no-body` to make the sides of the list group
+flush with the card.
+
+```html
+<b-card-group deck>
+  <b-card header="<b>Card with list group</b>">
+    <b-list-group>
+      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
+      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
+      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
+    </b-list-group>
+    <p class="card-text mt-2">
+      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.
+    </p>
+  </b-card>
+  <b-card no-body header="<b>Card with flush list group</b>">
+    <b-list-group flush>
+      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
+      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
+      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
+    </b-list-group>
+    <b-card-body>
+      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.
+    </b-card-body>
+  </b-card>
+</b-card group>
+
+
+<!-- list-group-card.vue -->
+```
+
+
+## Custom content
+Add nearly any HTML or component within, even for linked list groups like the one below, with
+the help of [flexbox utility classes](http://getbootstrap.com/docs/4.0/utilities/flex/).
+
+```html
+<b-list-group>
+  <b-list-group-item href="#" active class="flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small>3 days ago</small>
+    </div>
+    <p class="mb-1">
+      Donec id elit non mi porta gravida at eget metus. Maecenas
+      sed diam eget risus varius blandit.
+    </p>
+    <small>Donec id elit non mi porta.</small>
+  </b-list-group-item>
+  <b-list-group-item href="#" class="flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">List group item heading</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">
+      Donec id elit non mi porta gravida at eget metus. Maecenas
+      sed diam eget risus varius blandit.
+    </p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
+  </b-list-group-item>
+  <b-list-group-item href="#" disabled class="flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <h5 class="mb-1">Disabled List group item</h5>
+      <small class="text-muted">3 days ago</small>
+    </div>
+    <p class="mb-1">
+      Donec id elit non mi porta gravida at eget metus. Maecenas
+      sed diam eget risus varius blandit.
+    </p>
+    <small class="text-muted">Donec id elit non mi porta.</small>
+  </b-list-group-item>
+</b-list-group>
+
+<!-- list-group-content.vue -->
+```
 
 ## Component Reference

src/components/list-group/list-group-item.js

@@ -8,7 +8,7 @@ let linkProps = linkPropsFactory()
 delete linkProps.href.default
 delete linkProps.to.default
 
-export const props = assign(linkProps, {
+export const props = assign({
   tag: {
     type: String,
     default: 'div'
@@ -17,30 +17,34 @@ export const props = assign(linkProps, {
     type: Boolean,
     default: null
   },
+  button: {
+    type: Boolean,
+    default: null
+  },
   variant: {
     type: String,
     default: null
   }
-})
+}, linkProps)
 
 export default {
   functional: true,
   props,
   render (h, { props, data, children }) {
-    const tag = !props.href && !props.to ? props.tag : Link
-
+    const tag = props.button ? 'button' : ((!props.href && !props.to) ? props.tag : Link)
+    const isAction = Boolean(
+      props.href || props.to || props.action || props.button || arrayIncludes(actionTags, props.tag)
+    )
     const componentData = {
       staticClass: 'list-group-item',
       class: {
-        'list-group-flush': props.flush,
         [`list-group-item-${props.variant}`]: Boolean(props.variant),
+        'list-group-item-action': isAction,
         active: props.active,
-        disabled: props.disabled,
-        'list-group-item-action': Boolean(
-          props.href || props.to || props.action || arrayIncludes(actionTags, props.tag)
-        )
+        disabled: props.disabled
       },
-      props: pluckProps(linkProps, props)
+      attrs: (tag === 'button' && props.disabled) ? { disabled: true } : {},
+      props: props.button ? {} : pluckProps(linkProps, props)
     }
 
     return h(tag, mergeData(data, componentData), children)