created input-group-append and input-group-prepend components with the goal of retaining the input-group-addon component. Ideally the input-group-addon component would become deprecated (including using the slot values left/right on input-group).

Author: Todd Baur

src/components/input-group/README.md

@@ -3,8 +3,10 @@
 
 ```html
 <div>
-  <b-input-group left="$" right=".00">
+  <b-input-group>
+    <b-input-group-prepend>$</b-input-group-prepend>
     <b-form-input></b-form-input>
+    <b-input-group-append>.00</b-input-group-append>
   </b-input-group>
 
   <br>

src/components/input-group/fixtures/input-group.html

@@ -1,6 +1,8 @@
 <div id="app">
-    <b-input-group ref="basic" left="$" right=".00">
+    <b-input-group ref="basic">
+        <input-group-prepend>$</input-group-prepend>
         <b-input></b-input>
+        <input-group-append>$</input-group-append>
     </b-input-group>
 
     <b-input-group ref="components">

src/components/input-group/index.js

@@ -1,5 +1,8 @@
 import bInputGroup from './input-group'
 import bInputGroupAddon from './input-group-addon'
+import bInputGroupPrepend from './input-group-prepend'
+import bInputGroupAppend from './input-group-append'
+import bInputGroupText from './input-group-text'
 import bInputGroupButton from './input-group-button'
 import { registerComponents, vueUse } from '../../utils'
 
@@ -8,7 +11,10 @@ import { registerComponents, vueUse } from '../../utils'
 const components = {
   bInputGroup,
   bInputGroupAddon,
+  bInputGroupPrepend,
+  bInputGroupAppend,
   bInputGroupButton,
+  bInputGroupText,
   bInputGroupBtn: bInputGroupButton
 }
 

src/components/input-group/input-group-addon.js

@@ -1,5 +1,5 @@
 import { mergeData } from '../../utils'
-
+import InputGroupText from './input-group-text'
 export const props = {
   id: {
     type: String,
@@ -21,7 +21,7 @@ export default {
         staticClass: `input-group-${data.slot === 'left' ? 'prepend' : 'append'}`,
         attrs: { id: props.id }
       }),
-      children
+      [h(InputGroupText, { }, children)]
     )
   }
 }

src/components/input-group/input-group-append.js

@@ -0,0 +1,30 @@
+import { mergeData } from '../../utils'
+import InputGroupText from './input-group-text'
+
+export const props = {
+  id: {
+    type: String,
+    default: null
+  },
+  tag: {
+    type: String,
+    default: 'div'
+  }
+}
+
+export default {
+  props,
+  functional: true,
+  render (h, {props, data, children}) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'input-group-append',
+        attrs: {
+          id: props.id
+        }
+      }),
+      [h(InputGroupText, { }, children )]
+    )
+  }
+}

src/components/input-group/input-group-prepend.js

@@ -0,0 +1,30 @@
+import InputGroupText from './input-group-text'
+import { mergeData } from '../../utils'
+
+export const props = {
+  id: {
+    type: String,
+    default: null
+  },
+  tag: {
+    type: String,
+    default: 'div'
+  }
+}
+
+export default {
+  props,
+  functional: true,
+  render (h, {props, data, children}) {
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'input-group-prepend',
+        attrs: {
+          id: props.id
+        }
+      }),
+      [h(InputGroupText, { domProps: { innerHTML: '' } }, children)]
+    )
+  }
+}

src/components/input-group/input-group-text.js

@@ -0,0 +1,16 @@
+import { mergeData } from '../../utils'
+
+export const props = {
+  tag: {
+    type: String,
+    default: 'div'
+  }
+}
+
+export default {
+  props,
+  functional: true,
+  render (h, { props, data }) {
+    return h(props.tag, mergeData(data, { staticClass: 'input-group-text' }))
+  }
+}

src/components/input-group/input-group.spec.js

@@ -24,12 +24,12 @@ describe('input-group', async () => {
     })
   })
 
-  it('basic should have `.input-group-append` as first child', async () => {
+  it('basic should have `div.input-group-prepend` as first child', async () => {
     const { app: { $refs } } = window
 
     const left = $refs.basic.children[0]
     expect(left).toBeDefined()
-    expect(left).toHaveClass('input-group-append')
+    expect(left).toHaveClass('input-group-prepend')
   })
 
   it('basic should have content in left `.input-group-prepend`', async () => {