Skip to content
Permalink
Browse files
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>
  • Loading branch information
Hiws and jacobmllr95 committed Sep 3, 2020
1 parent 6a892f0 commit 3756b2c0e07fc85f73769ea312ede8917d1e1de5
Show file tree
Hide file tree
Showing 8 changed files with 5,722 additions and 9 deletions.
@@ -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]
)
}
})
@@ -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 }
}
)
)
}
})
@@ -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!

@@ -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!

@@ -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()
})
})
@@ -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()
})
})

0 comments on commit 3756b2c

Please sign in to comment.