From 7d2803099f18cc8c9f8838ddaf2e6901834a2215 Mon Sep 17 00:00:00 2001 From: nickmelnikov82 Date: Thu, 20 Oct 2022 14:47:55 +0300 Subject: [PATCH 1/3] Use dropdown styles from node_modules, instead of from stored css file --- .../css/react-virtualized-select@3.1.0.css | 22 ---------- .../src/fragments/Dropdown.react.js | 2 +- .../tests/integration/dropdown/test_styles.py | 44 +++++++++++++++++++ 3 files changed, 45 insertions(+), 23 deletions(-) delete mode 100644 components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css create mode 100644 components/dash-core-components/tests/integration/dropdown/test_styles.py diff --git a/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css b/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css deleted file mode 100644 index ba437b9427..0000000000 --- a/components/dash-core-components/src/components/css/react-virtualized-select@3.1.0.css +++ /dev/null @@ -1,22 +0,0 @@ -.VirtualSelectGrid { - z-index: 1; -} - -.VirtualizedSelectOption { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0 .5rem; -} -.VirtualizedSelectFocusedOption { - background-color: rgba(0, 126, 255, 0.1); -} -.VirtualizedSelectDisabledOption { - opacity: 0.5; -} -.VirtualizedSelectSelectedOption { - font-weight: bold; -} diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js index c7ca287d59..27dae3ce21 100644 --- a/components/dash-core-components/src/fragments/Dropdown.react.js +++ b/components/dash-core-components/src/fragments/Dropdown.react.js @@ -2,7 +2,7 @@ import {isNil, pluck, without, pick} from 'ramda'; import React, {useState, useCallback, useEffect, useMemo} from 'react'; import ReactDropdown from 'react-virtualized-select'; import createFilterOptions from 'react-select-fast-filter-options'; -import '../components/css/react-virtualized-select@3.1.0.css'; +import '../../../dash-core-components/node_modules/react-virtualized-select/styles.css'; import '../components/css/react-virtualized@9.9.0.css'; import '../components/css/Dropdown.css'; diff --git a/components/dash-core-components/tests/integration/dropdown/test_styles.py b/components/dash-core-components/tests/integration/dropdown/test_styles.py new file mode 100644 index 0000000000..6850909287 --- /dev/null +++ b/components/dash-core-components/tests/integration/dropdown/test_styles.py @@ -0,0 +1,44 @@ +from dash import Dash +from dash.dcc import Dropdown +from dash.html import Div +from dash.dash_table import DataTable + + +def test_ddst001_cursor_should_be_pointer(dash_duo): + app = Dash(__name__) + app.layout = Div( + [ + Dropdown( + id="dropdown", + options=[ + {"label": "New York City", "value": "NYC"}, + {"label": "Montreal", "value": "MTL"}, + {"label": "San Francisco", "value": "SF"}, + ], + value="NYC", + ), + DataTable( + id="table", + columns=[ + {"name": x, "id": x, "selectable": True} for x in ["a", "b", "c"] + ], + editable=True, + row_deletable=True, + fixed_rows=dict(headers=True), + fixed_columns=dict(headers=True), + data=[ + {"a": "a" + str(x), "b": "b" + str(x), "c": "c" + str(x)} + for x in range(0, 20) + ], + ), + ] + ) + + dash_duo.start_server(app) + + dash_duo.find_element("#dropdown").click() + dash_duo.wait_for_element("#dropdown .Select-menu-outer") + + items = dash_duo.find_elements("#dropdown .Select-menu-outer .VirtualizedSelectOption") + + assert items[0].value_of_css_property('cursor') == "pointer" From 8aab93f2ff782f17d63dbb1ee705b6a0dc1d39f8 Mon Sep 17 00:00:00 2001 From: Philippe Duval Date: Wed, 2 Nov 2022 14:02:09 -0400 Subject: [PATCH 2/3] Update components/dash-core-components/src/fragments/Dropdown.react.js Co-authored-by: Alex Johnson --- components/dash-core-components/src/fragments/Dropdown.react.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js index 7ede4b7ce9..ffdc1331b5 100644 --- a/components/dash-core-components/src/fragments/Dropdown.react.js +++ b/components/dash-core-components/src/fragments/Dropdown.react.js @@ -2,7 +2,7 @@ import {isNil, pluck, without, pick} from 'ramda'; import React, {useState, useCallback, useEffect, useMemo} from 'react'; import ReactDropdown from 'react-virtualized-select'; import createFilterOptions from 'react-select-fast-filter-options'; -import '../../../dash-core-components/node_modules/react-virtualized-select/styles.css'; +import 'react-virtualized-select/styles.css'; import '../components/css/react-virtualized@9.9.0.css'; import '../components/css/Dropdown.css'; From 787b97407d7dfe350d76a25ab764210f399cf82b Mon Sep 17 00:00:00 2001 From: philippe Date: Wed, 2 Nov 2022 14:16:46 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64ab900794..ef21e5d645 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/). - [#2265](https://github.com/plotly/dash/pull/2265) Removed deprecated `before_first_request` as reported in [#2177](https://github.com/plotly/dash/issues/2177). - [#2257](https://github.com/plotly/dash/pull/2257) Fix tuple types in the TypeScript component generator. - [#2293](https://github.com/plotly/dash/pull/2293) Fix Dropdown useMemo not detecting equal objects +- [#2277](https://github.com/plotly/dash/pull/2277) Use dropdown styles from node_modules, instead of from stored css file ### Changed