chore(icons): additional adjustment for stacked animations (#4948)

tmorehouse · web-flow · commit 927c234a6b5d · 2020-03-13T21:57:35.000-03:00
diff --git 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 `<g>` for proper
+      // animation handling if stacked
+      $inner = h('g', {}, [$inner])
+    }
+
     return h(
       'svg',
       mergeData(
diff --git 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')).not.toBe('img')
+    expect(wrapper.attributes('alt')).not.toBe('icon')
+    expect(wrapper.attributes('focusable')).toBe('false')
+    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')
+    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

Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,12 @@ export const BVIconBase = /#__PURE__/ Vue.extend({`
`116`	`116`	`)`
`117`	`117`	`}`
`118`	`118`
	`119`	`+ if (isStacked) {`
	`120`	+ // Wrap in an additional `<g>` for proper
	`121`	`+ // animation handling if stacked`
	`122`	`+ $inner = h('g', {}, [$inner])`
	`123`	`+ }`
	`124`	`+`
`119`	`125`	`return h(`
`120`	`126`	`'svg',`
`121`	`127`	`mergeData(`