fix: Add I18nProvider support for code editor theme filtering input (#3265)

Author: avinashbot

src/code-editor/__tests__/code-editor.test.tsx

@@ -661,6 +661,8 @@ describe('Code editor component', () => {
             'i18nStrings.preferencesModalTheme': 'Custom theme',
             'i18nStrings.preferencesModalLightThemes': 'Custom light themes',
             'i18nStrings.preferencesModalDarkThemes': 'Custom dark themes',
+            'i18nStrings.preferencesModalThemeFilteringAriaLabel': 'Custom theme filter',
+            'i18nStrings.preferencesModalThemeFilteringPlaceholder': 'Custom theme filter placeholder',
           },
         }}
       >
@@ -680,6 +682,9 @@ describe('Code editor component', () => {
     expect(modal.findContent()!.findCheckbox()!.findLabel().getElement()).toHaveTextContent('Custom wrap lines');
     expect(modal.findContent()!.findFormField()!.findLabel()!.getElement()).toHaveTextContent('Custom theme');
     modal.findContent()!.findSelect()!.openDropdown();
+    const filteringInput = modal.findContent()!.findSelect()!.findFilteringInput()!.findNativeInput().getElement();
+    expect(filteringInput).toHaveAccessibleName('Custom theme filter');
+    expect(filteringInput).toHaveAttribute('placeholder', 'Custom theme filter placeholder');
     expect(modal.findContent()!.findSelect()!.findDropdown().find('li:nth-child(1)')!.getElement()).toHaveTextContent(
       'Custom light themes'
     );

src/code-editor/index.tsx

@@ -291,9 +291,15 @@ const CodeEditor = forwardRef((props: CodeEditorProps, ref: React.Ref<CodeEditor
                 theme: i18n('i18nStrings.preferencesModalTheme', i18nStrings?.preferencesModalTheme),
                 lightThemes: i18n('i18nStrings.preferencesModalLightThemes', i18nStrings?.preferencesModalLightThemes),
                 darkThemes: i18n('i18nStrings.preferencesModalDarkThemes', i18nStrings?.preferencesModalDarkThemes),
-                themeFilteringAriaLabel: i18nStrings?.preferencesModalThemeFilteringAriaLabel,
+                themeFilteringAriaLabel: i18n(
+                  'i18nStrings.preferencesModalThemeFilteringAriaLabel',
+                  i18nStrings?.preferencesModalThemeFilteringAriaLabel
+                ),
+                themeFilteringPlaceholder: i18n(
+                  'i18nStrings.preferencesModalThemeFilteringPlaceholder',
+                  i18nStrings?.preferencesModalThemeFilteringPlaceholder
+                ),
                 themeFilteringClearAriaLabel: i18nStrings?.preferencesModalThemeFilteringClearAriaLabel,
-                themeFilteringPlaceholder: i18nStrings?.preferencesModalThemeFilteringPlaceholder,
               }}
             />
           )}

src/i18n/messages-types.ts

@@ -104,6 +104,8 @@ export interface I18nFormatArgTypes {
     "i18nStrings.preferencesModalConfirm": never;
     "i18nStrings.preferencesModalWrapLines": never;
     "i18nStrings.preferencesModalTheme": never;
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": never;
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": never;
     "i18nStrings.preferencesModalLightThemes": never;
     "i18nStrings.preferencesModalDarkThemes": never;
     "i18nStrings.cursorPositionAriaLabel": {

src/i18n/messages/all.ar.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "تأكيد",
     "i18nStrings.preferencesModalWrapLines": "ترحيل الكلمات من نهاية السطر",
     "i18nStrings.preferencesModalTheme": "الشكل",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "تصفية الموضوعات",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "تصفية الموضوعات",
     "i18nStrings.preferencesModalLightThemes": "الأشكال فاتحة اللون",
     "i18nStrings.preferencesModalDarkThemes": "الأشكال قاتمة اللون",
     "i18nStrings.cursorPositionAriaLabel": "المؤشر على السطر رقم {row}"

src/i18n/messages/all.de.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Bestätigen",
     "i18nStrings.preferencesModalWrapLines": "Zeilenumbruch",
     "i18nStrings.preferencesModalTheme": "Themen",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Themen filtern",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Themen filtern",
     "i18nStrings.preferencesModalLightThemes": "Hellere Themen",
     "i18nStrings.preferencesModalDarkThemes": "Dunkles Design",
     "i18nStrings.cursorPositionAriaLabel": "Cursor in Zeile {row}"

src/i18n/messages/all.en-GB.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Confirm",
     "i18nStrings.preferencesModalWrapLines": "Wrap lines",
     "i18nStrings.preferencesModalTheme": "Theme",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Filter themes",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Filter themes",
     "i18nStrings.preferencesModalLightThemes": "Light themes",
     "i18nStrings.preferencesModalDarkThemes": "Dark themes",
     "i18nStrings.cursorPositionAriaLabel": "Cursor on row {row}"

src/i18n/messages/all.en.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Confirm",
     "i18nStrings.preferencesModalWrapLines": "Wrap lines",
     "i18nStrings.preferencesModalTheme": "Theme",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Filter themes",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Filter themes",
     "i18nStrings.preferencesModalLightThemes": "Light themes",
     "i18nStrings.preferencesModalDarkThemes": "Dark themes",
     "i18nStrings.cursorPositionAriaLabel": "Cursor on row {row}"

src/i18n/messages/all.es.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Confirmar",
     "i18nStrings.preferencesModalWrapLines": "Ajustar líneas",
     "i18nStrings.preferencesModalTheme": "Tema",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Filtrar temas",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Filtrar temas",
     "i18nStrings.preferencesModalLightThemes": "Temas claros",
     "i18nStrings.preferencesModalDarkThemes": "Temas oscuros",
     "i18nStrings.cursorPositionAriaLabel": "Cursor en fila {row}"

src/i18n/messages/all.fr.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Confirmer",
     "i18nStrings.preferencesModalWrapLines": "Retour à la ligne",
     "i18nStrings.preferencesModalTheme": "Thème",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Filtrer les thèmes",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Filtrer les thèmes",
     "i18nStrings.preferencesModalLightThemes": "Thèmes clairs",
     "i18nStrings.preferencesModalDarkThemes": "Thèmes sombres",
     "i18nStrings.cursorPositionAriaLabel": "Curseur sur la ligne {row}"

src/i18n/messages/all.id.json

@@ -84,6 +84,8 @@
     "i18nStrings.preferencesModalConfirm": "Konfirmasikan",
     "i18nStrings.preferencesModalWrapLines": "Bungkus baris",
     "i18nStrings.preferencesModalTheme": "Tema",
+    "i18nStrings.preferencesModalThemeFilteringAriaLabel": "Filter tema",
+    "i18nStrings.preferencesModalThemeFilteringPlaceholder": "Filter tema",
     "i18nStrings.preferencesModalLightThemes": "Tema terang",
     "i18nStrings.preferencesModalDarkThemes": "Tema gelap",
     "i18nStrings.cursorPositionAriaLabel": "Kursor pada baris {row}"