Merge pull request #2990 from mjmlio/bugfix/MJML-36-mj-column_border_radius

fix(mjml-column): border-radius not working #2989

Author: totocap

packages/mjml-column/src/index.js

@@ -68,6 +68,9 @@ export default class MjColumn extends BodyComponent {
   }
 
   getStyles() {
+    const hasBorderRadius = this.hasBorderRadius()
+    const hasInnerBorderRadius = this.hasInnerBorderRadius()
+
     const tableStyle = {
       'background-color': this.getAttribute('background-color'),
       border: this.getAttribute('border'),
@@ -77,6 +80,7 @@ export default class MjColumn extends BodyComponent {
       'border-right': this.getAttribute('border-right'),
       'border-top': this.getAttribute('border-top'),
       'vertical-align': this.getAttribute('vertical-align'),
+      ...(hasBorderRadius && { 'border-collapse': 'separate' }),
     }
 
     return {
@@ -100,6 +104,7 @@ export default class MjColumn extends BodyComponent {
               'border-top': this.getAttribute('inner-border-top'),
             }
           : tableStyle),
+        ...(hasInnerBorderRadius && { 'border-collapse': 'separate' }),
       },
       tdOutlook: {
         'vertical-align': this.getAttribute('vertical-align'),
@@ -202,6 +207,16 @@ export default class MjColumn extends BodyComponent {
     return className
   }
 
+  hasBorderRadius() {
+    const borderRadius = this.getAttribute('border-radius')
+    return borderRadius !== '' && typeof borderRadius !== 'undefined'
+  }
+
+  hasInnerBorderRadius() {
+    const innerBorderRadius = this.getAttribute('inner-border-radius')
+    return innerBorderRadius !== '' && typeof innerBorderRadius !== 'undefined'
+  }
+
   hasGutter() {
     return [
       'padding',
@@ -213,6 +228,8 @@ export default class MjColumn extends BodyComponent {
   }
 
   renderGutter() {
+    const hasBorderRadius = this.hasBorderRadius()
+
     return `
       <table
         ${this.htmlAttributes({
@@ -221,6 +238,9 @@ export default class MjColumn extends BodyComponent {
           cellspacing: '0',
           role: 'presentation',
           width: '100%',
+          ...(hasBorderRadius && {
+            style: { 'border-collapse': 'separate' },
+          }),
         })}
       >
         <tbody>

packages/mjml/test/column-border-radius.test.js

@@ -0,0 +1,55 @@
+const chai = require('chai')
+const { load } = require('cheerio')
+const mjml = require('../lib')
+
+describe('mj-column border-radius', function () {
+  it('should render correct border-radius / inner-border-radius (and border-collapse) in CSS style values on mj-column', function () {
+    const input = `
+    <mjml>
+      <mj-body>
+        <mj-section>
+          <mj-column border-radius="50px" inner-border-radius="40px" padding="50px" border="5px solid #000" inner-border="5px solid #666">
+            <mj-text>Hello World</mj-text>
+          </mj-column>
+        </mj-section>
+      </mj-body>
+    </mjml>
+    `
+
+    const { html } = mjml(input)
+
+    const $ = load(html)
+
+    // border radius values should be correct
+    chai
+      .expect(
+        $(
+          '.mj-column-per-100 > table > tbody > tr > td, .mj-column-per-100 > table > tbody > tr > td > table',
+        )
+          .map(function getAttr() {
+            const start = $(this).attr('style').indexOf('border-radius:') + 14
+            const end = $(this).attr('style').indexOf(';', start)
+            return $(this).attr('style').substring(start, end)
+          })
+          .get(),
+        'Border-radius / inner-border-radius in CSS style values on mj-column',
+      )
+      .to.eql(['50px', '40px'])
+
+    // border collapse values should be correct
+    chai
+      .expect(
+        $(
+          '.mj-column-per-100 > table > tbody > tr > td, .mj-column-per-100 > table > tbody > tr > td > table',
+        )
+          .map(function getAttr() {
+            const start = $(this).attr('style').indexOf('border-collapse:') + 16
+            const end = $(this).attr('style').indexOf(';', start)
+            return $(this).attr('style').substring(start, end)
+          })
+          .get(),
+        'Border-collapse in CSS style values on mj-column',
+      )
+      .to.eql(['separate', 'separate'])
+  })
+})