Merge branch 'dev' into codeflash/optimize-flatten_grouping-max6hy2z

Author: T4rk1n

CHANGELOG.md

@@ -110,6 +110,10 @@ This project adheres to [Semantic Versioning](https://semver.org/).
   - `defaultProps` on functional components now emits a deprecation warning.
   - Deprecation notice on strings refs.
 
+## Added
+
+- [#3068](https://github.com/plotly/dash/pull/3068) Add titles to labels in Checklist and RadioItems components
+
 ## Fixed
 
 - [#3080](https://github.com/plotly/dash/pull/3080) Fix docstring generation for components using single-line or nonstandard-indent leading comments

components/dash-core-components/src/components/Checklist.react.js

@@ -37,6 +37,7 @@ export default class Checklist extends Component {
                                 ...labelStyle,
                             }}
                             className={labelClassName}
+                            title={option.title}
                         >
                             <input
                                 checked={includes(option.value, value)}

components/dash-core-components/src/components/RadioItems.react.js

@@ -41,6 +41,7 @@ export default class RadioItems extends Component {
                         }}
                         className={labelClassName}
                         key={option.value}
+                        title={option.title}
                     >
                         <input
                             checked={option.value === value}

components/dash-core-components/src/fragments/Graph.react.js

@@ -458,6 +458,27 @@ class PlotlyGraph extends Component {
         });
     }
 
+    getStyle() {
+        const {responsive} = this.props;
+        let {style} = this.props;
+
+        // When there is no forced responsive style, return the original style property
+        if (!responsive) {
+            return style;
+        }
+
+        // Otherwise, if the height is not set, we make the graph size equal to the parent one
+        if (!style) {
+            style = {};
+        }
+
+        if (!style.height) {
+            return Object.assign({height: '100%'}, style);
+        }
+
+        return style;
+    }
+
     componentDidMount() {
         const p = this.plot(this.props);
         this._queue = this.amendTraces(p, {}, this.props);
@@ -516,7 +537,8 @@ class PlotlyGraph extends Component {
     }
 
     render() {
-        const {className, id, style} = this.props;
+        const {className, id} = this.props;
+        const style = this.getStyle();
 
         return (
             <LoadingElement

components/dash-core-components/tests/integration/dropdown/test_option_title_prop.py

@@ -1,3 +1,5 @@
+import numpy as np
+import plotly.graph_objects as go
 import pytest
 import flaky
 
@@ -138,8 +140,38 @@ def resize(n_clicks, style):
     assert dash_dcc.get_logs() == []
 
 
+def test_grrs002_responsive_parent_height(dash_dcc):
+    app = Dash(__name__, eager_loading=True)
+
+    x, y = np.random.uniform(size=50), np.random.uniform(size=50)
+
+    fig = go.Figure(
+        data=[go.Scattergl(x=x, y=y, mode="markers")],
+        layout=dict(margin=dict(l=0, r=0, t=0, b=0), height=600, width=600),
+    )
+
+    app.layout = html.Div(
+        dcc.Graph(
+            id="graph",
+            figure=fig,
+            responsive=True,
+        ),
+        style={"borderStyle": "solid", "height": 300, "width": 100},
+    )
+
+    dash_dcc.start_server(app)
+
+    wait.until(
+        lambda: dash_dcc.wait_for_element("#graph svg.main-svg").size.get("height", -1)
+        == 300,
+        3,
+    )
+
+    assert dash_dcc.get_logs() == []
+
+
 @flaky.flaky(max_runs=3)
-def test_grrs002_graph(dash_dcc):
+def test_grrs003_graph(dash_dcc):
     app = Dash(__name__)
 
     app.layout = html.Div(

components/dash-core-components/tests/integration/graph/test_graph_responsive.py

@@ -0,0 +1,85 @@
+# -*- coding: UTF-8 -*-
+
+from dash.testing import wait
+from dash import Dash, Input, Output, dcc, html
+
+
+def test_ddot001_dropdown_radioitems_checklist_option_title(dash_dcc):
+    app = Dash(__name__)
+
+    options = [
+        {"label": "New York City", "value": "NYC"},
+        {"label": "Montréal", "value": "MTL"},
+        {"label": "San Francisco", "value": "SF"},
+    ]
+
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id="title_input",
+                type="text",
+                placeholder="Enter a title for New York City",
+            ),
+            dcc.Dropdown(id="dropdown_1", options=options, multi=True, value="NYC"),
+            dcc.Dropdown(id="dropdown_2", options=options, multi=False, value="NYC"),
+            dcc.Checklist(
+                id="checklist_1",
+                options=options,
+                value=["NYC"],
+                labelClassName="Select-value-label",
+            ),
+            dcc.RadioItems(
+                id="radioitems_1",
+                options=options,
+                value="NYC",
+                labelClassName="Select-value-label",
+            ),
+        ]
+    )
+
+    ids = ["dropdown_1", "dropdown_2", "checklist_1", "radioitems_1"]
+
+    for id in ids:
+
+        @app.callback(Output(id, "options"), [Input("title_input", "value")])
+        def add_title_to_option(title):
+            return [
+                {"label": "New York City", "title": title, "value": "NYC"},
+                {"label": "Montréal", "value": "MTL"},
+                {"label": "San Francisco", "value": "SF"},
+            ]
+
+    dash_dcc.start_server(app)
+
+    elements = [
+        dash_dcc.wait_for_element("#dropdown_1 .Select-value"),
+        dash_dcc.wait_for_element("#dropdown_2 .Select-value"),
+        dash_dcc.wait_for_element("#checklist_1 .Select-value-label"),
+        dash_dcc.wait_for_element("#radioitems_1 .Select-value-label"),
+    ]
+
+    component_title_input = dash_dcc.wait_for_element("#title_input")
+
+    # Empty string title ('') (default for no title)
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "", 3)
+
+    component_title_input.send_keys("The Big Apple")
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "The Big Apple", 3)
+
+    dash_dcc.clear_input(component_title_input)
+
+    component_title_input.send_keys("Gotham City?")
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "Gotham City?", 3)
+
+    dash_dcc.clear_input(component_title_input)
+
+    for element in elements:
+        wait.until(lambda: element.get_attribute("title") == "", 3)
+
+    assert dash_dcc.get_logs() == []

components/dash-core-components/tests/integration/test_title_props.py

@@ -2342,17 +2342,21 @@ def update(pathname_, search_, **states):
 
             # Set validation_layout
             if not self.config.suppress_callback_exceptions:
-                self.validation_layout = html.Div(
-                    [
-                        page["layout"]() if callable(page["layout"]) else page["layout"]
-                        for page in _pages.PAGE_REGISTRY.values()
-                    ]
-                    + [
+                layout = self.layout
+                if not isinstance(layout, list):
+                    layout = [
                         # pylint: disable=not-callable
                         self.layout()
                         if callable(self.layout)
                         else self.layout
                     ]
+
+                self.validation_layout = html.Div(
+                    [
+                        page["layout"]() if callable(page["layout"]) else page["layout"]
+                        for page in _pages.PAGE_REGISTRY.values()
+                    ]
+                    + layout
                 )
                 if _ID_CONTENT not in self.validation_layout:
                     raise Exception("`dash.page_container` not found in the layout")