diff --git a/CHANGELOG.md b/CHANGELOG.md index efb7afb14..66a40111a 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/dash-table/components/EdgeFactory.tsx b/src/dash-table/components/EdgeFactory.tsx index f333ab382..3918e129f 100644 --- a/src/dash-table/components/EdgeFactory.tsx +++ b/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) ); } diff --git a/tests/visual/percy-storybook/Border.style.percy.tsx b/tests/visual/percy-storybook/Border.style.percy.tsx index 43ad5c224..50e3c3e6a 100644 --- a/tests/visual/percy-storybook/Border.style.percy.tsx +++ b/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 + } + } } ];