support localizations in dropdown component

Author: KoolADE85

components/dash-core-components/src/components/Dropdown.tsx

@@ -1,9 +1,19 @@
-import React, {Component, lazy, Suspense} from 'react';
+import React, {lazy, Suspense} from 'react';
 import {DropdownProps, PersistedProps, PersistenceTypes} from '../types';
 import dropdown from '../utils/LazyLoader/dropdown';
 
 const RealDropdown = lazy(dropdown);
 
+const defaultLocalizations: DropdownProps['localizations'] = {
+    select_all: 'Select All',
+    deselect_all: 'Deselect All',
+    selected_count: '{num_selected} selected',
+    search: 'Search',
+    clear_search: 'Clear search',
+    clear_selection: 'Clear selection',
+    no_options_found: 'No options found',
+};
+
 /**
  * Dropdown is an interactive dropdown element for selecting one or more
  * items.
@@ -19,6 +29,7 @@ export default function Dropdown({
     disabled = false,
     multi = false,
     searchable = true,
+    localizations = defaultLocalizations,
     // eslint-disable-next-line no-magic-numbers
     optionHeight = 36,
     // eslint-disable-next-line no-magic-numbers
@@ -30,11 +41,17 @@ export default function Dropdown({
     persistence_type = PersistenceTypes.local,
     ...props
 }: DropdownProps) {
+    localizations = {
+        ...defaultLocalizations,
+        ...localizations,
+    };
+
     return (
         <Suspense fallback={null}>
             <RealDropdown
                 clearable={clearable}
                 disabled={disabled}
+                localizations={localizations}
                 multi={multi}
                 searchable={searchable}
                 optionHeight={optionHeight}

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -87,6 +87,7 @@ const Dropdown = (props: DropdownProps) => {
         closeOnSelect,
         clearable,
         disabled,
+        localizations,
         maxHeight,
         multi,
         options,
@@ -459,7 +460,10 @@ const Dropdown = (props: DropdownProps) => {
                         )}
                         {sanitizedValues.length > 1 && (
                             <span className="dash-dropdown-value-count">
-                                {sanitizedValues.length} selected
+                                {localizations?.selected_count?.replace(
+                                    '{num_selected}',
+                                    `${sanitizedValues.length}`
+                                )}
                             </span>
                         )}
                         {clearable && !disabled && !!sanitizedValues.length && (
@@ -469,8 +473,8 @@ const Dropdown = (props: DropdownProps) => {
                                     e.preventDefault();
                                     handleClear();
                                 }}
-                                title="Clear selection"
-                                aria-label="Clear selection"
+                                title={localizations?.clear_selection}
+                                aria-label={localizations?.clear_selection}
                             >
                                 <Cross1Icon />
                             </a>
@@ -497,7 +501,7 @@ const Dropdown = (props: DropdownProps) => {
                                 <input
                                     type="search"
                                     className="dash-dropdown-search"
-                                    placeholder="Search"
+                                    placeholder={localizations?.search}
                                     value={search_value || ''}
                                     autoComplete="off"
                                     onChange={e =>
@@ -510,7 +514,7 @@ const Dropdown = (props: DropdownProps) => {
                                         type="button"
                                         className="dash-dropdown-clear"
                                         onClick={handleClearSearch}
-                                        aria-label="Clear search"
+                                        aria-label={localizations?.clear_search}
                                     >
                                         <Cross1Icon />
                                     </button>
@@ -524,15 +528,15 @@ const Dropdown = (props: DropdownProps) => {
                                     className="dash-dropdown-action-button"
                                     onClick={handleSelectAll}
                                 >
-                                    Select All
+                                    {localizations?.select_all}
                                 </button>
                                 {canDeselectAll && (
                                     <button
                                         type="button"
                                         className="dash-dropdown-action-button"
                                         onClick={handleDeselectAll}
                                     >
-                                        Deselect All
+                                        {localizations?.deselect_all}
                                     </button>
                                 )}
                             </div>
@@ -562,7 +566,7 @@ const Dropdown = (props: DropdownProps) => {
                                 {search_value &&
                                     displayOptions.length === 0 && (
                                         <span className="dash-dropdown-option">
-                                            No options found
+                                            {localizations?.no_options_found}
                                         </span>
                                     )}
                             </div>

components/dash-core-components/src/types.ts

@@ -467,6 +467,19 @@ export interface DropdownProps {
      */
     id?: string;
 
+    /**
+     * Translations for customizing text contained within this component.
+     */
+    localizations?: {
+        select_all?: string;
+        deselect_all?: string;
+        selected_count?: string;
+        search?: string;
+        clear_search?: string;
+        clear_selection?: string;
+        no_options_found?: string;
+    };
+
     /**
      * Dash-assigned callback that gets fired when the input changes
      */

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

@@ -0,0 +1,113 @@
+from dash import Dash
+from dash.dcc import Dropdown
+from dash.html import Div
+
+
+def test_ddlo001_translations(dash_duo):
+    app = Dash(__name__)
+    app.layout = Div(
+        [
+            Dropdown(
+                id="dropdown",
+                options=[1, 2, 3],
+                multi=True,
+                localizations={
+                    "select_all": "Sélectionner tout",
+                    "deselect_all": "Désélectionner tout",
+                    "selected_count": "{num_selected} sélections",
+                    "search": "Rechercher",
+                    "clear_search": "Annuler",
+                    "clear_selection": "Effacer les sélections",
+                    "no_options_found": "Aucun d'options",
+                },
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.find_element("#dropdown").click()
+    dash_duo.wait_for_contains_text(
+        "#dropdown .dash-dropdown-action-button:first-child", "Sélectionner tout"
+    )
+    dash_duo.wait_for_contains_text(
+        "#dropdown .dash-dropdown-action-button:last-child", "Désélectionner tout"
+    )
+
+    search_input = dash_duo.find_element("#dropdown .dash-dropdown-search")
+    assert search_input.accessible_name == "Rechercher"
+
+    search_input.send_keys(1)
+    assert (
+        dash_duo.find_element("#dropdown .dash-dropdown-clear").accessible_name
+        == "Annuler"
+    )
+
+    dash_duo.find_element("#dropdown .dash-dropdown-action-button:first-child").click()
+
+    search_input.send_keys(9)
+    assert (
+        dash_duo.find_element("#dropdown .dash-dropdown-option").text
+        == "Aucun d'options"
+    )
+
+    assert (
+        dash_duo.find_element(
+            "#dropdown .dash-dropdown-trigger .dash-dropdown-clear"
+        ).accessible_name
+        == "Effacer les sélections"
+    )
+
+    assert dash_duo.get_logs() == []
+
+
+def test_ddlo002_partial_translations(dash_duo):
+    app = Dash(__name__)
+    app.layout = Div(
+        [
+            Dropdown(
+                id="dropdown",
+                options=[1, 2, 3],
+                multi=True,
+                localizations={
+                    "search": "Lookup",
+                },
+            ),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    dash_duo.find_element("#dropdown").click()
+    dash_duo.wait_for_contains_text(
+        "#dropdown .dash-dropdown-action-button:first-child", "Select All"
+    )
+    dash_duo.wait_for_contains_text(
+        "#dropdown .dash-dropdown-action-button:last-child", "Deselect All"
+    )
+
+    search_input = dash_duo.find_element("#dropdown .dash-dropdown-search")
+    assert search_input.accessible_name == "Lookup"
+
+    search_input.send_keys(1)
+    assert (
+        dash_duo.find_element("#dropdown .dash-dropdown-clear").accessible_name
+        == "Clear search"
+    )
+
+    dash_duo.find_element("#dropdown .dash-dropdown-action-button:first-child").click()
+
+    search_input.send_keys(9)
+    assert (
+        dash_duo.find_element("#dropdown .dash-dropdown-option").text
+        == "No options found"
+    )
+
+    assert (
+        dash_duo.find_element(
+            "#dropdown .dash-dropdown-trigger .dash-dropdown-clear"
+        ).accessible_name
+        == "Clear selection"
+    )
+
+    assert dash_duo.get_logs() == []