Create Checklist and RadioItems labels with titles

Author: giladmaya

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

@@ -43,6 +43,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

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

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

@@ -0,0 +1,92 @@
+# -*- coding: UTF-8 -*-
+
+import pytest
+from dash.testing import wait
+from dash import Dash, Input, Output, dcc, html
+
+
+@pytest.mark.DCC793
+@pytest.mark.parametrize(
+    "component_type,component_kwargs,selector_class_name",
+    [
+        (dcc.Dropdown, {"multi": True, "value": "NYC"}, "Select-value"),
+        (dcc.Dropdown, {"multi": False, "value": "NYC"}, "Select-value"),
+        (
+            dcc.Checklist,
+            {"value": ["NYC"], "labelClassName": "Select-value-label"},
+            "Select-value-label",
+        ),
+        (
+            dcc.RadioItems,
+            {"value": "NYC", "labelClassName": "Select-value-label"},
+            "Select-value-label",
+        ),
+    ],
+)
+def test_ddot001_dropdown_radioitems_checklist_option_title(
+    dash_dcc, component_type, component_kwargs, selector_class_name
+):
+    app = Dash(__name__)
+
+    id_prefix = component_type.__name__.lower()
+
+    app.layout = html.Div(
+        [
+            dcc.Input(
+                id=f"{id_prefix}_title_input",
+                type="text",
+                placeholder="Enter a title for New York City",
+            ),
+            component_type(
+                id=id_prefix,
+                options=[
+                    {"label": "New York City", "value": "NYC"},
+                    {"label": "Montréal", "value": "MTL"},
+                    {"label": "San Francisco", "value": "SF"},
+                ],
+                **component_kwargs,
+            ),
+        ]
+    )
+
+    @app.callback(
+        Output(id_prefix, "options"), [Input(f"{id_prefix}_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)
+
+    component_option_element = dash_dcc.wait_for_element(
+        f"#{id_prefix} .{selector_class_name}"
+    )
+
+    component_title_input = dash_dcc.wait_for_element(f"#{id_prefix}_title_input")
+
+    # Empty string title ('') (default for no title)
+
+    wait.until(lambda: component_option_element.get_attribute("title") == "", 3)
+
+    component_title_input.send_keys("The Big Apple")
+
+    wait.until(
+        lambda: component_option_element.get_attribute("title") == "The Big Apple", 3
+    )
+
+    dash_dcc.clear_input(component_title_input)
+
+    component_title_input.send_keys("Gotham City?")
+
+    wait.until(
+        lambda: component_option_element.get_attribute("title") == "Gotham City?", 3
+    )
+
+    dash_dcc.clear_input(component_title_input)
+
+    wait.until(lambda: component_option_element.get_attribute("title") == "", 3)
+
+    assert dash_dcc.get_logs() == []