fix(b-input-group): fix kebab-case prop names for prepend-html and append-html (fixes #3565) (#3567)

Author: tmorehouse

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

@@ -16,13 +16,13 @@ export const props = {
   prepend: {
     type: String
   },
-  prependHTML: {
+  prependHtml: {
     type: String
   },
   append: {
     type: String
   },
-  appendHTML: {
+  appendHtml: {
     type: String
   },
   tag: {
@@ -43,12 +43,12 @@ export const BInputGroup = /*#__PURE__*/ Vue.extend({
     const childNodes = []
 
     // Prepend prop/slot
-    if (props.prepend || props.prependHTML || hasNormalizedSlot('prepend', $scopedSlots, $slots)) {
+    if (props.prepend || props.prependHtml || hasNormalizedSlot('prepend', $scopedSlots, $slots)) {
       childNodes.push(
         h(BInputGroupPrepend, [
           // Prop
-          props.prepend || props.prependHTML
-            ? h(BInputGroupText, { domProps: htmlOrText(props.prependHTML, props.prepend) })
+          props.prepend || props.prependHtml
+            ? h(BInputGroupText, { domProps: htmlOrText(props.prependHtml, props.prepend) })
             : h(false),
           // Slot
           normalizeSlot('prepend', {}, $scopedSlots, $slots) || h(false)
@@ -66,12 +66,12 @@ export const BInputGroup = /*#__PURE__*/ Vue.extend({
     }
 
     // Append prop
-    if (props.append || props.appendHTML || hasNormalizedSlot('append', $scopedSlots, $slots)) {
+    if (props.append || props.appendHtml || hasNormalizedSlot('append', $scopedSlots, $slots)) {
       childNodes.push(
         h(BInputGroupAppend, [
           // prop
-          props.append || props.appendHTML
-            ? h(BInputGroupText, { domProps: htmlOrText(props.appendHTML, props.append) })
+          props.append || props.appendHtml
+            ? h(BInputGroupText, { domProps: htmlOrText(props.appendHtml, props.append) })
             : h(false),
           // Slot
           normalizeSlot('append', {}, $scopedSlots, $slots) || h(false)

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

@@ -83,6 +83,33 @@ describe('input-group', () => {
     )
   })
 
+  it('renders input-group-prepend & input-group-append when prepend-html & append-html props set', async () => {
+    const wrapper = mount(BInputGroup, {
+      propsData: {
+        prependHtml: '<i>foo</i>',
+        appendHtml: '<b>bar</b>'
+      },
+      slots: {
+        default: 'baz'
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('input-group')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('foobazbar')
+    expect(wrapper.findAll('.input-group > *').length).toBe(2)
+    expect(wrapper.findAll('.input-group-prepend').length).toBe(1)
+    expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(1)
+    expect(wrapper.find('.input-group-prepend').text()).toBe('foo')
+    expect(wrapper.findAll('.input-group-append').length).toBe(1)
+    expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1)
+    expect(wrapper.find('.input-group-append').text()).toBe('bar')
+    expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe(
+      true
+    )
+  })
+
   it('renders input-group-prepend & input-group-append when prepend & append slots present', async () => {
     const wrapper = mount(BInputGroup, {
       slots: {