From fecc9b6afc7bed5464303cd9ee7cd53dacb6664e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 13 Mar 2020 21:04:23 -0300 Subject: [PATCH 1/5] chore(icons): additional adjustment for stacked animations --- src/icons/helpers/icon-base.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/icons/helpers/icon-base.js b/src/icons/helpers/icon-base.js index 79d380dbb3a..b826313bdfd 100644 --- a/src/icons/helpers/icon-base.js +++ b/src/icons/helpers/icon-base.js @@ -116,6 +116,12 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({ ) } + if (isStacked) { + // Wrap in an additional `` for proper + // animation handling if stacked + const $inner = h('g', {}, [$inner]) + } + return h( 'svg', mergeData( From 3830463c19d9254aaa15f8f931e5a5b5057f3d44 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 13 Mar 2020 21:06:54 -0300 Subject: [PATCH 2/5] Update icon-base.js --- src/icons/helpers/icon-base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/helpers/icon-base.js b/src/icons/helpers/icon-base.js index b826313bdfd..bf0e02a71d0 100644 --- a/src/icons/helpers/icon-base.js +++ b/src/icons/helpers/icon-base.js @@ -119,7 +119,7 @@ export const BVIconBase = /*#__PURE__*/ Vue.extend({ if (isStacked) { // Wrap in an additional `` for proper // animation handling if stacked - const $inner = h('g', {}, [$inner]) + $inner = h('g', {}, [$inner]) } return h( From 8028a0f3089242e51788bd657b8597746c4ed45f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 13 Mar 2020 21:11:35 -0300 Subject: [PATCH 3/5] Update icons.spec.js --- src/icons/icons.spec.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 2b4c953aea8..8ac60aa441e 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -52,6 +52,38 @@ describe('icons', () => { expect(wrapper.find('svg > g > path').exists()).toBe(true) }) + it('b-icon has expected structure when `stacked` prop is true', async () => { + const wrapper = mount(BIcon, { + localVue: localVue, + parentComponent: parentComponent, + propsData: { + icon: 'alert-circle-fill', + stacked: true + } + }) + + expect(wrapper.exists()).toBe(true) + expect(wrapper.is('svg')).toBe(true) + expect(wrapper.classes()).toContain('b-icon') + expect(wrapper.classes()).toContain('bi') + expect(wrapper.classes()).toContain('bi-alert-circle-fill') + expect(wrapper.classes().length).toBe(3) + expect(wrapper.attributes('role')).toBe('img') + expect(wrapper.attributes('alt')).toBe('icon') + expect(wrapper.attributes('focusable')).toBe('false') + expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg') + expect(wrapper.attributes('width')).toBe('1em') + expect(wrapper.attributes('height')).toBe('1em') + expect(wrapper.attributes('viewBox')).toBe('0 0 20 20') + expect(wrapper.attributes('fill')).toBe('currentColor') + expect(wrapper.attributes('style')).not.toBeDefined() + expect(wrapper.element.style.fontSize).toEqual('') + expect(wrapper.find('svg > g').exists()).toBe(true) + expect(wrapper.find('svg > g').attributes('transform')).not.toBeDefined() + expect(wrapper.find('svg > g > path').exists()).toBe(false) + expect(wrapper.find('svg > g > g > path').exists()).toBe(true) + }) + it('b-icon with empty icon name renders BIconBlank', async () => { // This test assumes Vue doesn't puke on unknown component names // As we don't specify a parent instance (which has all the registered From 317d3dd2dad942c11437fcf644768d96e83088f7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 13 Mar 2020 21:16:10 -0300 Subject: [PATCH 4/5] Update icons.spec.js --- src/icons/icons.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index 8ac60aa441e..e4c13257b54 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -68,12 +68,12 @@ describe('icons', () => { expect(wrapper.classes()).toContain('bi') expect(wrapper.classes()).toContain('bi-alert-circle-fill') expect(wrapper.classes().length).toBe(3) - expect(wrapper.attributes('role')).toBe('img') - expect(wrapper.attributes('alt')).toBe('icon') + expect(wrapper.attributes('role')).not.toBe('img') + expect(wrapper.attributes('alt')).not.toBe('icon') expect(wrapper.attributes('focusable')).toBe('false') expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg') - expect(wrapper.attributes('width')).toBe('1em') - expect(wrapper.attributes('height')).toBe('1em') + expect(wrapper.attributes('width')).not.toBe('1em') + expect(wrapper.attributes('height')).not.toBe('1em') expect(wrapper.attributes('viewBox')).toBe('0 0 20 20') expect(wrapper.attributes('fill')).toBe('currentColor') expect(wrapper.attributes('style')).not.toBeDefined() From 85111f9a9c3a5f5f4248cbb408d4bf9e07913321 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 13 Mar 2020 21:21:34 -0300 Subject: [PATCH 5/5] Update icons.spec.js --- src/icons/icons.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icons/icons.spec.js b/src/icons/icons.spec.js index e4c13257b54..2e5f28c9aaf 100644 --- a/src/icons/icons.spec.js +++ b/src/icons/icons.spec.js @@ -71,7 +71,7 @@ describe('icons', () => { expect(wrapper.attributes('role')).not.toBe('img') expect(wrapper.attributes('alt')).not.toBe('icon') expect(wrapper.attributes('focusable')).toBe('false') - expect(wrapper.attributes('xmlns')).toBe('http://www.w3.org/2000/svg') + expect(wrapper.attributes('xmlns')).not.toBe('http://www.w3.org/2000/svg') expect(wrapper.attributes('width')).not.toBe('1em') expect(wrapper.attributes('height')).not.toBe('1em') expect(wrapper.attributes('viewBox')).toBe('0 0 20 20')