fix(MessageItem): enable details view if Link overflows (#6859)

Also outline that `wrappingType="None"` is required if a `Link` is used
as `titleText`.

Fixes #6857

Author: Lukas742

packages/main/src/components/MessageView/MessageItem.tsx

@@ -22,7 +22,7 @@ export interface MessageItemPropTypes extends CommonProps {
   /**
    * Specifies the title of the message
    *
-   * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use text or `Link` in order to preserve the intended design.
+   * __Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use text or `Link` (with `wrappingType="None"`) in order to preserve the intended design.
    */
   titleText: ReactNode;
 
@@ -96,12 +96,20 @@ const MessageItem = forwardRef<ListItemCustomDomRef, MessageItemPropTypes>((prop
 
   const hasChildren = Children.count(children);
   useEffect(() => {
-    const titleTextObserver = new ResizeObserver(([titleTextSpan]) => {
-      if (titleTextSpan.target.scrollWidth > titleTextSpan.target.clientWidth) {
-        setIsTitleTextIsOverflowing(true);
-      } else {
-        setIsTitleTextIsOverflowing(false);
+    const titleTextObserver = new ResizeObserver(([titleTextSpanEntry]) => {
+      const child = titleTextSpanEntry.target.children[0];
+      const target = titleTextSpanEntry.target;
+      const isTargetOverflowing = target.scrollWidth > target.clientWidth;
+      let isChildOverflowing = false;
+
+      if (!isTargetOverflowing) {
+        const firstChild = child?.shadowRoot?.firstChild as HTMLAnchorElement | undefined;
+        if (firstChild) {
+          isChildOverflowing = firstChild.scrollWidth > firstChild.clientWidth;
+        }
       }
+
+      setIsTitleTextIsOverflowing(isTargetOverflowing || isChildOverflowing);
     });
     if (!hasChildren && titleTextRef.current) {
       titleTextObserver.observe(titleTextRef.current);

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

@@ -1,4 +1,6 @@
+import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
+import { Link } from '@ui5/webcomponents-react';
 import { useRef } from 'react';
 import { MessageItem } from './MessageItem';
 import { MessageView } from './index.js';
@@ -169,4 +171,46 @@ describe('MessageView', () => {
     cy.findByText('SubtitleText').should('not.exist');
     cy.findByText('1337').should('not.exist');
   });
+
+  it('MessageItem - titleText overflow', () => {
+    const selectSpy = cy.spy().as('select');
+    cy.mount(
+      <MessageView style={{ width: '500px' }} showDetailsPageHeader onItemSelect={selectSpy}>
+        <MessageItem
+          data-testid="item1"
+          titleText={
+            <Link wrappingType={WrappingType.None}>
+              Long Error Message Type without children/details including a Link as `titleText` which has
+              wrappingType="None" applied. - The details view is only available if the `titleText` is not fully visible.
+              It is NOT recommended to use long titles!
+            </Link>
+          }
+          type={ValueState.Negative}
+          counter={3}
+        />
+        <MessageItem
+          data-testid="item2"
+          titleText={
+            'Long Empty Message Type (no title, no subtitle, no children/details) - The details view is only available if the `titleText` is not fully visible. It is NOT recommended to use long titles!'
+          }
+          groupName={'Products'}
+        />
+        <MessageItem data-testid="item3" titleText="Error" type={ValueState.Negative} groupName="Group1" />
+      </MessageView>
+    );
+
+    cy.get('[name="slim-arrow-right"]').should('be.visible').and('have.length', 2);
+
+    cy.findByTestId('item1').click();
+    cy.get('@select').should('have.been.calledOnce');
+    cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click();
+
+    cy.findByTestId('item2').click();
+    cy.get('@select').should('have.been.calledTwice');
+    cy.get('[name="slim-arrow-left"]').should('be.visible').and('have.length', 1).click();
+
+    cy.findByTestId('item3').click();
+    cy.get('@select').should('have.been.calledTwice');
+    cy.get('[name="slim-arrow-left"]').should('not.exist');
+  });
 });

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

@@ -2,13 +2,15 @@ import { generateMessageItems } from '@sb/mockData/generateMessageItems.js';
 import type { Meta, StoryObj } from '@storybook/react';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
+import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import arrowLeftIcon from '@ui5/webcomponents-icons/dist/slim-arrow-left.js';
 import { useRef, useState } from 'react';
 import { FlexBoxAlignItems, FlexBoxJustifyContent } from '../../enums/index.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
+import { Link } from '../../webComponents/Link/index.js';
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
@@ -17,8 +19,6 @@ import { MessageItem } from './MessageItem.js';
 import type { MessageViewDomRef } from './index.js';
 import { MessageView } from './index.js';
 
-// TODO: check docs for outdated info
-
 const meta = {
   title: 'User Feedback / MessageView',
   component: MessageView,
@@ -75,7 +75,19 @@ const meta = {
       >
         Informative message
       </MessageItem>,
-      <MessageItem key={7} titleText={'Error Message Type'} type={ValueState.Negative} counter={3} />
+      <MessageItem key={7} titleText={'Error Message Type'} type={ValueState.Negative} counter={3} />,
+      <MessageItem
+        key={8}
+        titleText={
+          <Link wrappingType={WrappingType.None}>
+            Long Error Message Type without children/details including a Link as `titleText` which has
+            wrappingType="None" applied. - The details view is only available if the `titleText` is not fully visible.
+            It is NOT recommended to use long titles!
+          </Link>
+        }
+        type={ValueState.Negative}
+        counter={3}
+      />
     ]
   }
 } satisfies Meta<typeof MessageView>;

packages/main/src/webComponents/Link/Link.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import LinkDesign from '@ui5/webcomponents/dist/types/LinkDesign.js';
+import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import { Link } from './index.js';
 
 const meta = {
@@ -10,6 +11,7 @@ const meta = {
   },
   args: {
     design: LinkDesign.Default,
+    wrappingType: WrappingType.None,
     children: 'Link Text'
   },
   tags: ['package:@ui5/webcomponents']