rename localizations to labels

Author: KoolADE85

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

@@ -4,7 +4,7 @@ import dropdown from '../utils/LazyLoader/dropdown';
 
 const RealDropdown = lazy(dropdown);
 
-const defaultLocalizations: DropdownProps['localizations'] = {
+const defaultLabels: DropdownProps['labels'] = {
     select_all: 'Select All',
     deselect_all: 'Deselect All',
     selected_count: '{num_selected} selected',
@@ -29,7 +29,7 @@ export default function Dropdown({
     disabled = false,
     multi = false,
     searchable = true,
-    localizations = defaultLocalizations,
+    labels = defaultLabels,
     optionHeight = 'auto',
     // eslint-disable-next-line no-magic-numbers
     maxHeight = 200,
@@ -40,17 +40,17 @@ export default function Dropdown({
     persistence_type = PersistenceTypes.local,
     ...props
 }: DropdownProps) {
-    localizations = {
-        ...defaultLocalizations,
-        ...localizations,
+    labels = {
+        ...defaultLabels,
+        ...labels,
     };
 
     return (
         <Suspense fallback={null}>
             <RealDropdown
                 clearable={clearable}
                 disabled={disabled}
-                localizations={localizations}
+                labels={labels}
                 multi={multi}
                 searchable={searchable}
                 optionHeight={optionHeight}

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

@@ -28,7 +28,7 @@ const Dropdown = (props: DropdownProps) => {
         closeOnSelect,
         clearable,
         disabled,
-        localizations,
+        labels,
         maxHeight,
         multi,
         options,
@@ -389,7 +389,7 @@ const Dropdown = (props: DropdownProps) => {
                                 id={accessibleId + '-value-count'}
                                 className="dash-dropdown-value-count"
                             >
-                                {localizations?.selected_count?.replace(
+                                {labels?.selected_count?.replace(
                                     '{num_selected}',
                                     `${sanitizedValues.length}`
                                 )}
@@ -402,8 +402,8 @@ const Dropdown = (props: DropdownProps) => {
                                     e.preventDefault();
                                     handleClear();
                                 }}
-                                title={localizations?.clear_selection}
-                                aria-label={localizations?.clear_selection}
+                                title={labels?.clear_selection}
+                                aria-label={labels?.clear_selection}
                             >
                                 <Cross1Icon />
                             </a>
@@ -431,7 +431,7 @@ const Dropdown = (props: DropdownProps) => {
                             <input
                                 type="search"
                                 className="dash-dropdown-search"
-                                placeholder={localizations?.search}
+                                placeholder={labels?.search}
                                 value={search_value || ''}
                                 autoComplete="off"
                                 onChange={e => onInputChange(e.target.value)}
@@ -442,7 +442,7 @@ const Dropdown = (props: DropdownProps) => {
                                     type="button"
                                     className="dash-dropdown-clear"
                                     onClick={handleClearSearch}
-                                    aria-label={localizations?.clear_search}
+                                    aria-label={labels?.clear_search}
                                 >
                                     <Cross1Icon />
                                 </button>
@@ -456,15 +456,15 @@ const Dropdown = (props: DropdownProps) => {
                                 className="dash-dropdown-action-button"
                                 onClick={handleSelectAll}
                             >
-                                {localizations?.select_all}
+                                {labels?.select_all}
                             </button>
                             {canDeselectAll && (
                                 <button
                                     type="button"
                                     className="dash-dropdown-action-button"
                                     onClick={handleDeselectAll}
                                 >
-                                    {localizations?.deselect_all}
+                                    {labels?.deselect_all}
                                 </button>
                             )}
                         </div>
@@ -488,7 +488,7 @@ const Dropdown = (props: DropdownProps) => {
                     {isOpen && search_value && !displayOptions.length && (
                         <div className="dash-dropdown-options">
                             <span className="dash-dropdown-option">
-                                {localizations?.no_options_found}
+                                {labels?.no_options_found}
                             </span>
                         </div>
                     )}

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

@@ -418,7 +418,7 @@ export interface DropdownProps extends BaseComponentProps<DropdownProps> {
     /**
      * Translations for customizing text contained within this component.
      */
-    localizations?: {
+    labels?: {
         select_all?: string;
         deselect_all?: string;
         selected_count?: string;