fix(SelectDialog): apply latest Design and A11y specs (#7586)

Fixes #7577

Author: Lukas742

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

@@ -208,9 +208,10 @@ describe('SelectDialog', () => {
     cy.get('@search').should('have.callCount', 2);
     cy.get('@input').should('have.callCount', 4);
     cy.get('@reset').should('have.callCount', 0);
-    cy.get('[accessible-name="Reset"][ui5-icon]').click();
+    cy.get('[part="clear-icon"][ui5-icon]').click();
     cy.get('@search').should('have.callCount', 2);
-    cy.get('@input').should('have.callCount', 4);
+    // clearing the input via clear button fires input event as well
+    cy.get('@input').should('have.callCount', 5);
     cy.get('@reset').should('have.callCount', 1);
     cy.get('[accessible-name="Reset"][ui5-icon]').should('not.exist');
   });

packages/main/src/components/SelectDialog/SelectDialog.module.css

@@ -65,7 +65,18 @@
 
 .inputIcon {
   cursor: pointer;
-  color: var(--sapContent_IconColor);
+  color: var(--sapField_TextColor);
+
+  &:hover {
+    box-shadow: var(--sapField_Hover_Shadow);
+    background-color: var(--_ui5_input_icon_hover_bg);
+  }
+
+  &:active {
+    box-shadow: var(--sapField_Hover_Shadow);
+    color: var(--sapButton_Active_TextColor);
+    background-color: var(--sapButton_Active_Background);
+  }
 }
 
 .infoBar {

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

@@ -4,13 +4,12 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
 import ListSelectionMode from '@ui5/webcomponents/dist/types/ListSelectionMode.js';
-import iconDecline from '@ui5/webcomponents-icons/dist/decline.js';
 import iconSearch from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
-import { CANCEL, CLEAR, RESET, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js';
+import { CANCEL, CLEAR, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js';
 import { Button, Dialog, FlexBox, FlexBoxAlignItems, Icon, Input, List, Text, Title } from '../../index.js';
 import type { Ui5CustomEvent } from '../../types/index.js';
 import type {
@@ -113,6 +112,7 @@ export interface SelectDialogPropTypes
   onSearch?:
     | ((event: Ui5CustomEvent<InputDomRef, { value: string }>) => void)
     | ((event: Ui5CustomEvent<IconDomRef, { value: string }>) => void);
+  // todo: remove `nativeDetail` in next major version
   /**
    * This event will be fired when the reset button has been clicked in the search field or when the dialog is closed.
    */
@@ -196,6 +196,10 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
   };
 
   const handleSearchInput = (e) => {
+    if (!e.target.value && e.detail.inputType === '') {
+      handleResetSearch(e);
+    }
+
     if (typeof onSearchInput === 'function') {
       onSearchInput(enrichEventWithDetails(e, { value: e.target.value }));
     }
@@ -318,20 +322,12 @@ const SelectDialog = forwardRef<DialogDomRef, SelectDialogPropTypes>((props, ref
           onInput={handleSearchInput}
           onKeyUp={handleSearchSubmit}
           type={InputType.Search}
+          showClearIcon
           icon={
             <>
-              {searchValue && (
-                <Icon
-                  accessibleName={i18nBundle.getText(RESET)}
-                  title={i18nBundle.getText(RESET)}
-                  name={iconDecline}
-                  mode={IconMode.Interactive}
-                  onClick={handleResetSearch}
-                  className={classNames.inputIcon}
-                />
-              )}
+              {/*Decorative type while still being interactive is by design (see SapUI5 implementation)*/}
               <Icon
-                mode={IconMode.Interactive}
+                mode={IconMode.Decorative}
                 name={iconSearch}
                 className={classNames.inputIcon}
                 onClick={handleSearchSubmit}