feat(b-icon): add proper title support (closes #5711) (#5724)

* update icon-base.js

* update package.json

* Add tests

* Improved default title handling

* Update icon-base.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>

Author: Hiws

src/icons/helpers/icon-base.js

@@ -7,6 +7,10 @@ import { toFloat } from '../../utils/number'
 
 // Common icon props (should be cloned/spread before using)
 export const commonIconProps = {
+  title: {
+    type: String
+    // default: null
+  },
   variant: {
     type: String,
     default: null
@@ -132,6 +136,8 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({
       $inner = h('g', {}, [$inner])
     }
 
+    const $title = props.title ? h('title', props.title) : null
+
     return h(
       'svg',
       mergeData(
@@ -156,7 +162,7 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({
           }
         }
       ),
-      [$inner]
+      [$title, $inner]
     )
   }
 })

src/icons/helpers/make-icon.js

@@ -16,6 +16,7 @@ export const makeIcon = (name, content) => {
   const kebabName = kebabCase(name)
   const iconName = `BIcon${pascalCase(name)}`
   const iconNameClass = `bi-${kebabName}`
+  const iconTitle = kebabName.replace(/-/g, ' ')
   const svgContent = trim(content || '')
   // Return the icon component definition
   return /*#__PURE__*/ Vue.extend({
@@ -31,11 +32,20 @@ export const makeIcon = (name, content) => {
     render(h, { data, props }) {
       return h(
         BVIconBase,
-        mergeData(data, {
-          staticClass: iconNameClass,
-          props: { ...props, content: svgContent },
-          attrs: { 'aria-label': kebabName.replace(/-/g, ' ') }
-        })
+        mergeData(
+          // Defaults
+          {
+            props: { title: iconTitle },
+            attrs: { 'aria-label': iconTitle }
+          },
+          // User data
+          data,
+          // Required data
+          {
+            staticClass: iconNameClass,
+            props: { ...props, content: svgContent }
+          }
+        )
       )
     }
   })

src/icons/icons.d.ts

@@ -1,7 +1,7 @@
 // --- BEGIN AUTO-GENERATED FILE ---
 //
 // @IconsVersion: 1.0.0
-// @Generated: 2020-09-01T12:06:08.751Z
+// @Generated: 2020-09-03T14:07:12.302Z
 //
 // This file is generated on each build. Do not edit this file!
 

src/icons/icons.js

@@ -1,7 +1,7 @@
 // --- BEGIN AUTO-GENERATED FILE ---
 //
 // @IconsVersion: 1.0.0
-// @Generated: 2020-09-01T12:06:08.751Z
+// @Generated: 2020-09-03T14:07:12.302Z
 //
 // This file is generated on each build. Do not edit this file!
 

src/icons/icons.spec.js

@@ -502,4 +502,46 @@ describe('icons', () => {
 
     wrapper.destroy()
   })
+
+  it('b-icon title prop works', async () => {
+    const wrapper = mount(BIcon, {
+      localVue,
+      propsData: {
+        icon: 'circle-fill',
+        title: 'Circle'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.classes()).toContain('b-icon')
+    expect(wrapper.classes()).toContain('bi')
+    expect(wrapper.classes()).toContain('bi-circle-fill')
+
+    const $title = wrapper.find('title')
+    expect($title.exists()).toBe(true)
+    expect($title.text()).toBe('Circle')
+
+    wrapper.destroy()
+  })
+
+  it('b-icon <title> should not render when title is undefined', async () => {
+    const wrapper = mount(BIcon, {
+      localVue,
+      propsData: {
+        icon: 'circle-fill'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.classes()).toContain('b-icon')
+    expect(wrapper.classes()).toContain('bi')
+    expect(wrapper.classes()).toContain('bi-circle-fill')
+
+    const $title = wrapper.find('title')
+    expect($title.exists()).toBe(false)
+
+    wrapper.destroy()
+  })
 })

src/icons/iconstack.spec.js

@@ -118,4 +118,44 @@ describe('icons > b-iconstack', () => {
 
     wrapper.destroy()
   })
+
+  it('b-iconstack title prop works', async () => {
+    const wrapper = mount(BIconstack, {
+      propsData: {
+        icon: 'circle-fill',
+        title: 'Circle'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.classes()).toContain('b-icon')
+    expect(wrapper.classes()).toContain('b-iconstack')
+    expect(wrapper.classes()).toContain('bi')
+
+    const $title = wrapper.find('title')
+    expect($title.exists()).toBe(true)
+    expect($title.text()).toBe('Circle')
+
+    wrapper.destroy()
+  })
+
+  it('b-iconstack <title> should not render when title is undefined', async () => {
+    const wrapper = mount(BIconstack, {
+      propsData: {
+        icon: 'circle-fill'
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.element.tagName).toBe('svg')
+    expect(wrapper.classes()).toContain('b-icon')
+    expect(wrapper.classes()).toContain('b-iconstack')
+    expect(wrapper.classes()).toContain('bi')
+
+    const $title = wrapper.find('title')
+    expect($title.exists()).toBe(false)
+
+    wrapper.destroy()
+  })
 })