fix(b-media): fix vertical align class when top or bottom selected (f…

…ixes #4052) (#4055) * fix(b-media): fix vertical align class when top or bottom selected (fixes #4052) * Update media-aside.js * Update media.spec.js * Update media-aside.spec.js
bootstrap-vue · Sep 9, 2019 · 9ccfe4c · 9ccfe4c
1 parent c97e06f
commit 9ccfe4c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/components/media/media-aside.js b/src/components/media/media-aside.js
@@ -18,12 +18,18 @@ export const BMediaAside = /*#__PURE__*/ Vue.extend({
   functional: true,
   props,
   render(h, { props, data, children }) {
+    const align =
+      props.verticalAlign === 'top'
+        ? 'start'
+        : props.verticalAlign === 'bottom'
+          ? 'end'
+          : props.verticalAlign
     return h(
       props.tag,
       mergeData(data, {
         staticClass: 'd-flex',
         class: {
-          [`align-self-${props.verticalAlign}`]: props.verticalAlign
+          [`align-self-${align}`]: align
         }
       }),
       children

diff --git a/src/components/media/media-aside.spec.js b/src/components/media/media-aside.spec.js
@@ -7,7 +7,7 @@ describe('media-aside', () => {
 
     expect(wrapper.is('div')).toBe(true)
     expect(wrapper.classes()).toContain('d-flex')
-    expect(wrapper.classes()).toContain('align-self-top')
+    expect(wrapper.classes()).toContain('align-self-start')
     expect(wrapper.text()).toEqual('')
   })
 
@@ -20,7 +20,7 @@ describe('media-aside', () => {
 
     expect(wrapper.is('span')).toBe(true)
     expect(wrapper.classes()).toContain('d-flex')
-    expect(wrapper.classes()).toContain('align-self-top')
+    expect(wrapper.classes()).toContain('align-self-start')
     expect(wrapper.classes().length).toBe(2)
     expect(wrapper.text()).toEqual('')
   })
@@ -34,7 +34,7 @@ describe('media-aside', () => {
 
     expect(wrapper.is('div')).toBe(true)
     expect(wrapper.classes()).toContain('d-flex')
-    expect(wrapper.classes()).toContain('align-self-bottom')
+    expect(wrapper.classes()).toContain('align-self-end')
     expect(wrapper.classes().length).toBe(2)
   })
 
@@ -47,7 +47,7 @@ describe('media-aside', () => {
 
     expect(wrapper.is('div')).toBe(true)
     expect(wrapper.classes()).toContain('d-flex')
-    expect(wrapper.classes()).toContain('align-self-top')
+    expect(wrapper.classes()).toContain('align-self-start')
     expect(wrapper.classes().length).toBe(2)
     expect(wrapper.findAll('b').length).toBe(1)
     expect(wrapper.find('b').text()).toBe('foobar')

diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js
@@ -139,7 +139,7 @@ describe('media', () => {
     // Should have only two child elements
     expect(wrapper.findAll('.media > *').length).toBe(2)
     // Should have media aside with self align bottom
-    expect(wrapper.find('.d-flex').classes()).toContain('align-self-bottom')
+    expect(wrapper.find('.d-flex').classes()).toContain('align-self-end')
     // Should have content in aside
     expect(wrapper.find('.d-flex').text()).toEqual('foobar')
   })