Merge branch 'main' into fix/sd-heading-level

Author: Lukas742

.storybook/components/ArgTypesWithNote.tsx

@@ -1,3 +1,4 @@
+import { DomRefTable } from '@sb/components/DomRefTable.js';
 import { ArgTypes } from '@storybook/blocks';
 import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
 import { MessageStrip } from '@ui5/webcomponents-react';
@@ -12,20 +13,30 @@ interface ArgTypesWithNotePropTypes {
    * Defaults to: "This component supports all HTML attributes."
    */
   noteText?: ReactNode | ReactNode[];
+  /**
+   * If `true` all headings are rendered as `Heading`s instead of `Subheading`s.
+   */
+  isHeading?: boolean;
 }
 
 export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTypesWithNotePropTypes) {
-  const { hideHTMLPropsNote, noteText, ...rest } = props;
+  const { hideHTMLPropsNote, noteText, isHeading, ...rest } = props;
 
   if (hideHTMLPropsNote) {
-    return <ArgTypes {...rest} />;
+    return (
+      <>
+        <ArgTypes {...rest} />
+        <DomRefTable of={rest.of} isSubheading={!isHeading} />
+      </>
+    );
   }
   return (
     <div className={classes.tableContainer}>
       <MessageStrip design={MessageStripDesign.Information} hideCloseButton className={classes.strip}>
         {noteText ?? 'This component supports all HTML attributes.'}
       </MessageStrip>
       <ArgTypes {...rest} />
+      <DomRefTable of={rest.of} isSubheading={!isHeading} />
     </div>
   );
 }

.storybook/components/DomRefTable.tsx

@@ -1,8 +1,9 @@
-import { DocsContext, Heading } from '@storybook/blocks';
+import type { ArgTypes } from '@storybook/blocks';
+import { DocsContext, Heading, Subheading } from '@storybook/blocks';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
 import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
-import type { ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { Fragment, useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetCem } from '../utils';
@@ -47,14 +48,20 @@ function Name(props: CEM.ClassMember) {
   );
 }
 
-export function DomRefTable() {
+export function DomRefTable({
+  of,
+  isSubheading,
+}: {
+  of?: ComponentProps<typeof ArgTypes>['of'];
+  isSubheading?: boolean;
+}) {
   const docsContext = useContext(DocsContext);
   const storyTags: string[] = docsContext.attachedCSFFile?.meta?.tags;
   const cemModuleName = storyTags?.find((tag) => tag.startsWith('cem-module:'));
-  const componentName = docsContext.componentStories().at(0)?.component?.displayName;
+  const componentName = of?.displayName ?? docsContext.componentStories().at(0)?.component?.displayName;
   const popoverRef = useRef(null);
 
-  const knownAttributes = new Set(Object.keys(docsContext.primaryStory?.argTypes ?? {}));
+  const knownAttributes = new Set(Object.keys(of?.__docgenInfo?.props ?? docsContext.primaryStory?.argTypes ?? {}));
   const cem = useGetCem();
 
   const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
@@ -69,12 +76,13 @@ export function DomRefTable() {
       return !(knownAttributes.has(row.name) && !row.type?.text?.includes('HTMLElement'));
     }) ?? [];
   const cssParts: CEM.CssPart[] = componentMembers?.cssParts ?? [];
+  const HeadingComponent = isSubheading ? Subheading : Heading;
 
   return (
     <>
       {rows.length > 0 ? (
         <>
-          <Heading>DOM Properties & Methods</Heading>
+          <HeadingComponent>DOM Properties & Methods</HeadingComponent>
           <p>
             This component exposes public properties and methods. You can use them directly on the instance of the
             component, e.g. by using React Refs.
@@ -150,7 +158,7 @@ export function DomRefTable() {
 
       {cssParts.length > 0 ? (
         <>
-          <Heading>CSS Shadow Parts</Heading>
+          <HeadingComponent>CSS Shadow Parts</HeadingComponent>
           <p>
             <Link target={'_blank'} href={'https://developer.mozilla.org/en-US/docs/Web/CSS/::part'}>
               CSS Shadow Parts

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

@@ -5,13 +5,12 @@ 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 TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.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 {
@@ -114,6 +113,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.
    */
@@ -197,6 +197,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 }));
     }
@@ -322,20 +326,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}

packages/main/src/webComponents/TabContainer/TabContainer.mdx

@@ -20,15 +20,15 @@ import * as ComponentStories from './TabContainer.stories';
 
 <ControlsWithNote of={ComponentStories.Default} />
 
-# More Examples
+## More Examples
 
-## TabContainer with TabSeparator
+### TabContainer with TabSeparator
 
 The <code>TabSeparator</code> represents a vertical line to separate tabs inside a <code>TabContainer</code>
 
 <Canvas of={ComponentStories.WithTabSeparator} />
 
-## TabContainer with nested Tabs
+### TabContainer with nested Tabs
 
 <Canvas of={ComponentStories.WithNestedTabs} />