From 3620e0eebf9236fa545a106c105eab93c915fef5 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 10:34:51 -0400 Subject: [PATCH 1/6] make sure tooltips aren't visible when parent slider isn't --- src/fragments/Slider.react.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/fragments/Slider.react.js b/src/fragments/Slider.react.js index 92e0f5fc1..8387c67bc 100644 --- a/src/fragments/Slider.react.js +++ b/src/fragments/Slider.react.js @@ -97,7 +97,11 @@ export default class Slider extends Component { setProps({value}); } }} - tipProps={tipProps} + tipProps={{ + ...tipProps, + getTooltipContainer: node => node + }} + style={{position:'relative'}} value={value} marks={truncatedMarks} {...omit( From f3372f060c8d3286d2776b680542a695711f42ab Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 14:15:15 -0400 Subject: [PATCH 2/6] format --- src/fragments/Slider.react.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fragments/Slider.react.js b/src/fragments/Slider.react.js index 8387c67bc..fcd396364 100644 --- a/src/fragments/Slider.react.js +++ b/src/fragments/Slider.react.js @@ -99,9 +99,9 @@ export default class Slider extends Component { }} tipProps={{ ...tipProps, - getTooltipContainer: node => node + getTooltipContainer: node => node, }} - style={{position:'relative'}} + style={{position: 'relative'}} value={value} marks={truncatedMarks} {...omit( From d45a3189960968b0fbccbdb7fff588d44e09061c Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 15:42:04 -0400 Subject: [PATCH 3/6] add percy test --- tests/integration/sliders/test_sliders.py | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/tests/integration/sliders/test_sliders.py b/tests/integration/sliders/test_sliders.py index 17663dcdb..25d9f112c 100644 --- a/tests/integration/sliders/test_sliders.py +++ b/tests/integration/sliders/test_sliders.py @@ -95,3 +95,21 @@ def test_slsl004_out_of_range_marks_rangeslider(dash_dcc): dash_dcc.start_server(app) assert len(dash_dcc.find_elements("span.rc-slider-mark-text")) == 6 + +def test_slsl005_slider_tooltip(dash_dcc): + app = dash.Dash(__name__) + app.layout = html.Div([ + html.Div([ + html.Div(dcc.Slider( + min=0, + max=100, + value=65, + tooltip={'always_visible':True, 'placement':'top'} + ), + style=dict(height=100)) + ]*5, + style=dict(maxHeight=300, overflowX='scroll')) + ]) + + dash_dcc.start_server(app) + dash_dcc.percy_snapshot("slider-make sure tooltips are only visible if parent slider is visible") From 536a0dc714d6f6fc227f8dc9250498bf0a187dd7 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 15:53:42 -0400 Subject: [PATCH 4/6] update changelog, format test, add comment for future maintainability --- CHANGELOG.md | 2 ++ src/fragments/Slider.react.js | 4 +++ tests/integration/sliders/test_sliders.py | 36 +++++++++++++++-------- 3 files changed, 29 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 06410e2f9..9fde53670 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ This project adheres to [Semantic Versioning](http://semver.org/). - [#871](https://github.com/plotly/dash-core-components/pull/871) Add Julia syntax highlighting support for dcc.Markdown ## Updated +- [#878](https://github.com/plotly/dash-core-components/pull/878) + - used the `getTooltipContainter` prop of dcc.Slider to make sure tooltips are positioned correctly when the parent slider is not visible due to it being in a HTML element with an `overflow-x` style, fixing [#751](https://github.com/plotly/dash-core-components/issues/751) - [#875](https://github.com/plotly/dash-core-components/pull/875) - Upgraded Plotly.js to [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1) - Patch release [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1) diff --git a/src/fragments/Slider.react.js b/src/fragments/Slider.react.js index fcd396364..63eda8bdc 100644 --- a/src/fragments/Slider.react.js +++ b/src/fragments/Slider.react.js @@ -97,6 +97,10 @@ export default class Slider extends Component { setProps({value}); } }} + /* + if/when rc-slider or rc-tooltip are updated to latest versions, + we will need to revisit this code as the getTooltipContainer function will need to be a prop instead of a nested property + */ tipProps={{ ...tipProps, getTooltipContainer: node => node, diff --git a/tests/integration/sliders/test_sliders.py b/tests/integration/sliders/test_sliders.py index 25d9f112c..89f8e4005 100644 --- a/tests/integration/sliders/test_sliders.py +++ b/tests/integration/sliders/test_sliders.py @@ -96,20 +96,30 @@ def test_slsl004_out_of_range_marks_rangeslider(dash_dcc): assert len(dash_dcc.find_elements("span.rc-slider-mark-text")) == 6 + def test_slsl005_slider_tooltip(dash_dcc): app = dash.Dash(__name__) - app.layout = html.Div([ - html.Div([ - html.Div(dcc.Slider( - min=0, - max=100, - value=65, - tooltip={'always_visible':True, 'placement':'top'} - ), - style=dict(height=100)) - ]*5, - style=dict(maxHeight=300, overflowX='scroll')) - ]) + app.layout = html.Div( + [ + html.Div( + [ + html.Div( + dcc.Slider( + min=0, + max=100, + value=65, + tooltip={"always_visible": True, "placement": "top"}, + ), + style=dict(height=100), + ) + ] + * 5, + style=dict(maxHeight=300, overflowX="scroll"), + ) + ] + ) dash_dcc.start_server(app) - dash_dcc.percy_snapshot("slider-make sure tooltips are only visible if parent slider is visible") + dash_dcc.percy_snapshot( + "slider-make sure tooltips are only visible if parent slider is visible" + ) From d805fad7b408c29a7961abde3f31c9971fb49040 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 16:36:02 -0400 Subject: [PATCH 5/6] make sure snapshot is taken of loaded DOM --- tests/integration/sliders/test_sliders.py | 43 +++++++++++++++++++++-- 1 file changed, 40 insertions(+), 3 deletions(-) diff --git a/tests/integration/sliders/test_sliders.py b/tests/integration/sliders/test_sliders.py index 89f8e4005..a5483e093 100644 --- a/tests/integration/sliders/test_sliders.py +++ b/tests/integration/sliders/test_sliders.py @@ -111,15 +111,52 @@ def test_slsl005_slider_tooltip(dash_dcc): tooltip={"always_visible": True, "placement": "top"}, ), style=dict(height=100), - ) - ] - * 5, + ), + html.Div( + dcc.Slider( + min=0, + max=100, + value=65, + tooltip={"always_visible": True, "placement": "top"}, + ), + style=dict(height=100), + ), + html.Div( + dcc.Slider( + min=0, + max=100, + value=65, + tooltip={"always_visible": True, "placement": "top"}, + ), + style=dict(height=100), + ), + html.Div( + dcc.Slider( + min=0, + max=100, + value=65, + tooltip={"always_visible": True, "placement": "top"}, + ), + style=dict(height=100), + ), + html.Div( + dcc.Slider( + id="test-slider", + min=0, + max=100, + value=65, + tooltip={"always_visible": True, "placement": "top"}, + ), + style=dict(height=100), + ), + ], style=dict(maxHeight=300, overflowX="scroll"), ) ] ) dash_dcc.start_server(app) + dash_dcc.wait_for_element("#test-slider") dash_dcc.percy_snapshot( "slider-make sure tooltips are only visible if parent slider is visible" ) From 950e383d2a63217a109fe24fb00e0de3e6ccc822 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Tue, 27 Oct 2020 17:09:12 -0400 Subject: [PATCH 6/6] changelog wording --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fde53670..bf24ac965 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ## Updated - [#878](https://github.com/plotly/dash-core-components/pull/878) - - used the `getTooltipContainter` prop of dcc.Slider to make sure tooltips are positioned correctly when the parent slider is not visible due to it being in a HTML element with an `overflow-x` style, fixing [#751](https://github.com/plotly/dash-core-components/issues/751) + - Fixed [#751](https://github.com/plotly/dash-core-components/issues/751), a bug that causes `dcc.Slider` and `dcc.RangerSlider` tooltips to be visible even if the slider component isn't visible (e.g. overflow), - [#875](https://github.com/plotly/dash-core-components/pull/875) - Upgraded Plotly.js to [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1) - Patch release [1.57.1](https://github.com/plotly/plotly.js/releases/tag/v1.57.1)