feat(MessageBox): expose all Dialog props, except footer, headerText and onAfterClose (#2141)

Author: Lukas742

packages/main/src/components/MessageBox/MessageBox.test.tsx

@@ -188,6 +188,13 @@ describe('MessageBox', () => {
 
     expect(dialogInitialFocus).toEqual(cancelBtnId);
   });
-
-  createPassThroughPropsTest(MessageBox);
+  test('display custom header', () => {
+    const { getByText, queryByText } = render(
+      <MessageBox open header={<div>Custom Header</div>}>
+        Content
+      </MessageBox>
+    );
+    expect(queryByText('Confirmation')).toBeNull();
+    expect(getByText('Custom Header')).toHaveTextContent('Custom Header');
+  });
 });

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

@@ -4,12 +4,7 @@ import '@ui5/webcomponents-icons/dist/message-information.js';
 import '@ui5/webcomponents-icons/dist/message-success.js';
 import '@ui5/webcomponents-icons/dist/message-warning.js';
 import '@ui5/webcomponents-icons/dist/question-mark.js';
-import {
-  useConsolidatedRef,
-  useI18nBundle,
-  useIsomorphicLayoutEffect,
-  usePassThroughHtmlProps
-} from '@ui5/webcomponents-react-base/dist/hooks';
+import { useConsolidatedRef, useI18nBundle, useIsomorphicLayoutEffect } from '@ui5/webcomponents-react-base/dist/hooks';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/dist/StyleClassHelper';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/dist/Utils';
 import {
@@ -31,14 +26,13 @@ import {
 } from '@ui5/webcomponents-react/dist/assets/i18n/i18n-defaults';
 import { Button } from '@ui5/webcomponents-react/dist/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/dist/ButtonDesign';
-import { Dialog } from '@ui5/webcomponents-react/dist/Dialog';
+import { Dialog, DialogPropTypes } from '@ui5/webcomponents-react/dist/Dialog';
 import { Icon } from '@ui5/webcomponents-react/dist/Icon';
 import { MessageBoxActions } from '@ui5/webcomponents-react/dist/MessageBoxActions';
 import { MessageBoxTypes } from '@ui5/webcomponents-react/dist/MessageBoxTypes';
 import { Text } from '@ui5/webcomponents-react/dist/Text';
 import { Title } from '@ui5/webcomponents-react/dist/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/dist/TitleLevel';
-import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
 import { Ui5CustomEvent } from '@ui5/webcomponents-react/interfaces/Ui5CustomEvent';
 import { Ui5DialogDomRef } from '@ui5/webcomponents-react/interfaces/Ui5DialogDomRef';
 import React, {
@@ -71,7 +65,7 @@ const deprecatedActions = new Set<MessageBoxAction>([
   MessageBoxActions.YES
 ]);
 
-export interface MessageBoxPropTypes extends CommonProps {
+export interface MessageBoxPropTypes extends Omit<DialogPropTypes, 'children' | 'footer' | 'headerText' | 'onAfterClose'> {
   /**
    * Flag whether the Message Box should be opened or closed
    */
@@ -155,7 +149,8 @@ const MessageBox = forwardRef((props: MessageBoxPropTypes, ref: Ref<Ui5DialogDom
     actions,
     emphasizedAction,
     onClose,
-    initialFocus
+    initialFocus,
+    ...rest
   } = props;
   const dialogRef = useConsolidatedRef<Ui5DialogDomRef>(ref);
 
@@ -269,8 +264,6 @@ const MessageBox = forwardRef((props: MessageBoxPropTypes, ref: Ref<Ui5DialogDom
     }
   }, [dialogRef.current, open]);
 
-  const passThroughProps = usePassThroughHtmlProps(props, ['onClose']);
-
   const messageBoxClassNames = StyleClassHelper.of(classes.messageBox).putIfPresent(className).className;
   const internalActions = getActions();
 
@@ -343,6 +336,8 @@ const MessageBox = forwardRef((props: MessageBoxPropTypes, ref: Ref<Ui5DialogDom
       }
     }
   }, [emphasizedAction]);
+  // @ts-ignore
+  const { footer, headerText, title, onAfterClose, ...restWithoutOmitted } = rest;
   // todo: remove lowercase conversions
   return (
     <Dialog
@@ -352,13 +347,15 @@ const MessageBox = forwardRef((props: MessageBoxPropTypes, ref: Ref<Ui5DialogDom
       title={tooltip ?? props.title}
       className={messageBoxClassNames}
       onAfterClose={open ? handleOnClose : stopPropagation}
+      {...restWithoutOmitted}
       initialFocus={getInitialFocus()}
-      {...passThroughProps}
     >
-      <header slot="header" className={classes.header} data-type={type}>
-        {iconToRender}
-        <Title level={TitleLevel.H2}>{titleToRender()}</Title>
-      </header>
+      {!props.header && (
+        <header slot="header" className={classes.header} data-type={type}>
+          {iconToRender}
+          <Title level={TitleLevel.H2}>{titleToRender()}</Title>
+        </header>
+      )}
       <Text className={classes.content}>{children}</Text>
       <footer slot="footer" className={classes.footer}>
         {internalActions.map((action, index) => {