Issue 434 - Fix css overwritten table border bugs

CHANGELOG.md

@@ -2,6 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+[#434](https://github.com/plotly/dash-table/issues/434)
+- Fix CSS borders propeties overwrite style_* borders properties. 
+
 ## [3.7.0] - 2019-05-15
 ### Added
 [#397](https://github.com/plotly/dash-table/pull/397), [#410](https://github.com/plotly/dash-table/pull/410)

src/dash-table/components/EdgeFactory.tsx

@@ -59,7 +59,7 @@ export default class EdgeFactory {
             )) {
                 hTarget.setEdge(iTarget, j, hPrevious.getEdge(iPrevious, j), Infinity, true);
             }
-            hPrevious.setEdge(iPrevious, j, undefined, -Infinity, true);
+            hPrevious.setEdge(iPrevious, j, 'none', -Infinity, true);
         }, R.range(0, hPrevious.columns));
     }
 
@@ -82,7 +82,7 @@ export default class EdgeFactory {
             )) {
                 hTarget.setEdge(i, jTarget, hPrevious.getEdge(i, jPrevious), Infinity, true);
             }
-            hPrevious.setEdge(i, jPrevious, undefined, -Infinity, true);
+            hPrevious.setEdge(i, jPrevious, 'none', -Infinity, true);
         }, R.range(0, hPrevious.rows));
     }
 
@@ -102,7 +102,7 @@ export default class EdgeFactory {
                 hTarget.getWeight(iTarget, j),
                 hNext.getWeight(iNext, j),
                 cutoffWeight
-            ) && hTarget.setEdge(iTarget, j, undefined, -Infinity, true),
+            ) && hTarget.setEdge(iTarget, j, 'none', -Infinity, true),
             R.range(0, hTarget.columns)
         );
     }
@@ -123,7 +123,7 @@ export default class EdgeFactory {
                 vTarget.getWeight(i, jTarget),
                 vNext.getWeight(i, jNext),
                 cutoffWeight
-            ) && vTarget.setEdge(i, jTarget, undefined, -Infinity, true),
+            ) && vTarget.setEdge(i, jTarget, 'none', -Infinity, true),
             R.range(0, vTarget.rows)
         );
     }

tests/visual/percy-storybook/Border.style.percy.tsx

@@ -176,6 +176,30 @@ const scenarios: ITest[] = [
             },
             style_as_list_view: true
         }
+    }, {
+        name: 'hoizontal border between header and first row should be blue',
+        props: {
+            css: [{selector: 'th', rule: 'border: 1px solid pink'}],
+            style_data: {border: '1px solid blue'}
+        }
+    }, {
+        name: 'horizontal border between header and filter should be purple',
+        props: {
+            filtering: true,
+            css: [{selector: 'th', rule: 'border: 1px solid pink'}],
+            style_filter: {border: '1px solid purple'}
+        }
+    }, {
+        name: 'horizontal border between active cell (0, 0) and header should be pink',
+        props: {
+            css: [{selector: 'th', rule: 'border: 1px solid red'}],
+            active_cell: {
+                column: 0,
+                column_id: 'a',
+                row: 0,
+                row_id: null
+            }
+        }
     }
 ];
 
@@ -290,6 +314,35 @@ const ops_scenarios: ITest[] = [
                 border: '1px solid red'
             }]
         }
+    }, {
+        name: 'vertical border between column A and column B should be blue',
+        props: {
+            css: [{ selector: 'td[data-dash-column="a"]', rule: 'border: 1px solid green'}],
+            style_data_conditional: [{
+                if: { column_id: 'b' },
+                border: '1px solid blue'
+            }]
+        }
+    }, {
+        name: 'horizontal border between header and column A should be dash green ',
+        props: {
+            css: [{ selector: 'th', rule: 'border: 1px solid red'}],
+            style_data_conditional: [{
+                if: { column_id: 'a' },
+                border: '1px dashed blue'
+            }]
+        }
+    }, {
+        name: 'vertical border between active cell (0, 0) and cell on column B should be pink',
+        props: {
+            css: [{ selector: 'td[data-dash-column="b"]', rule: 'border: 1px solid blue'}],
+            active_cell: {
+                column: 0,
+                column_id: 'a',
+                row: 0,
+                row_id: null
+            }
+        }
     }
 ];