feat(SelectDialog): add searchPlaceholder prop (#8644)

Closes #8637

Author: Lukas742

cypress.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       bundler: 'vite',
     },
     experimentalRunAllSpecs: true,
-    excludeSpecPattern: ['**/e2e/**', ...(process.env.CI ? ['**/SelectDialog/**'] : [])],
+    excludeSpecPattern: ['**/e2e/**'],
   },
   includeShadowDom: true,
   viewportWidth: 1920,

packages/main/src/components/SelectDialog/SelectDialog.cy.tsx

@@ -16,7 +16,11 @@ import { SelectDialog } from './index.js';
 const meta = {
   title: 'Modals & Popovers / SelectDialog',
   component: SelectDialog,
-  argTypes: { children: { control: { disable: true } } },
+  argTypes: {
+    children: { control: { disable: true } },
+    onSearch: { control: { disable: true } },
+    onCancel: { control: { disable: true } },
+  },
   args: { headerText: 'Select Product', open: isChromatic },
   parameters: {
     chromatic: { delay: 1000 },

packages/main/src/components/SelectDialog/SelectDialog.stories.tsx

@@ -118,6 +118,13 @@ export interface SelectDialogPropTypes
    * @since 1.25.0
    */
   confirmButtonProps?: Omit<ButtonPropTypes, 'onClick' | 'design'>;
+  /**
+   *
+   * Allows overriding the SearchField's default placeholder text. If not set, the word "Search" in the current local language or English will be used as a placeholder.
+   *
+   * __Note:__ The placeholder is used as accessible-name of the input for screen reader support.
+   */
+  searchPlaceholder?: string;
   /**
    * This event will be fired when the value of the search field is changed by a user - e.g. at each key press
    */
@@ -169,6 +176,7 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
     selectionMode = ListSelectionMode.Single,
     numberOfSelectedItems,
     rememberSelections,
+    searchPlaceholder,
     showClearButton,
     onClose,
     onClear,
@@ -341,9 +349,9 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
         )}
         <Input
           className={classNames.input}
-          accessibleName={i18nBundle.getText(SEARCH)}
+          accessibleName={searchPlaceholder ?? i18nBundle.getText(SEARCH)}
           value={searchValue}
-          placeholder={i18nBundle.getText(SEARCH)}
+          placeholder={searchPlaceholder ?? i18nBundle.getText(SEARCH)}
           onInput={handleSearchInput}
           onKeyUp={handleSearchSubmit}
           type={InputType.Search}

packages/main/src/components/SelectDialog/index.tsx

@@ -129,6 +129,8 @@ test.describe('SelectDialog', () => {
     await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
 
     const input = page.locator('[ui5-input]');
+    await expect(input).toHaveAttribute('placeholder', 'Search');
+    await expect(input).toHaveAttribute('accessible-name', 'Search');
     await ui5wc.typeIntoInput(input, 'Test');
     await expect(page.getByTestId('input-val')).toHaveText('input: Test');
     await expect(page.getByTestId('search-count')).toHaveText('0');
@@ -152,6 +154,12 @@ test.describe('SelectDialog', () => {
     await expect(page.getByTestId('input-count')).toHaveText('2');
     await expect(page.getByTestId('reset-count')).toHaveText('1');
     await expect(page.locator('[accessible-name="Reset"][ui5-icon]')).not.toBeVisible();
+
+    await ui5wc.closePopupWithEsc();
+    await page.getByTestId('set-placeholder').click();
+    await page.getByTestId('open-btn').click();
+    await expect(input).toHaveAttribute('placeholder', 'Hello');
+    await expect(input).toHaveAttribute('accessible-name', 'Hello');
   });
 
   test('confirmButtonText', async ({ mount, page }) => {