fix(MessageBox): correctly align items in footer and fix header alignment in Safari (#643)

Author: Lukas742

packages/main/src/components/MessageBox/MessageBox.jss.ts

@@ -2,12 +2,14 @@ import { CssSizeVariables } from '@ui5/webcomponents-react-base/lib/CssSizeVaria
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 
 const style = {
+  messageBox: {
+    '--sapContent_Shadow0': 'none'
+  },
   header: {
     display: 'flex',
     height: CssSizeVariables.sapWcrBarHeight,
-    lineHeight: CssSizeVariables.sapWcrBarHeight,
     textAlign: 'center',
-    width: 'auto',
+    width: '100%',
     alignItems: 'center',
     padding: '0.25rem 1rem',
     boxSizing: 'border-box',
@@ -55,6 +57,7 @@ const style = {
   },
   footer: {
     height: CssSizeVariables.sapWcrBarHeight,
+    width: '100%',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',

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

@@ -3,6 +3,7 @@
 exports[`MessageBox Confirm - Cancel 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 104; display: block;"
   >
@@ -49,6 +50,7 @@ exports[`MessageBox Confirm - Cancel 1`] = `
 exports[`MessageBox Confirm - OK 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 102; display: block;"
   >
@@ -94,7 +96,9 @@ exports[`MessageBox Confirm - OK 1`] = `
 
 exports[`MessageBox Custom Action Text 1`] = `
 <DocumentFragment>
-  <ui5-dialog>
+  <ui5-dialog
+    class="MessageBox-messageBox"
+  >
     <footer
       class="MessageBox-footer"
       slot="footer"
@@ -138,6 +142,7 @@ exports[`MessageBox Custom Action Text 1`] = `
 exports[`MessageBox Error 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 110; display: block;"
   >
@@ -178,6 +183,7 @@ exports[`MessageBox Error 1`] = `
 exports[`MessageBox Information 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 112; display: block;"
   >
@@ -218,6 +224,7 @@ exports[`MessageBox Information 1`] = `
 exports[`MessageBox No Title 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 118; display: block;"
   >
@@ -263,7 +270,9 @@ exports[`MessageBox No Title 1`] = `
 
 exports[`MessageBox Not open 1`] = `
 <DocumentFragment>
-  <ui5-dialog>
+  <ui5-dialog
+    class="MessageBox-messageBox"
+  >
     <footer
       class="MessageBox-footer"
       slot="footer"
@@ -301,6 +310,7 @@ exports[`MessageBox Not open 1`] = `
 exports[`MessageBox Show 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 114; display: block;"
   >
@@ -347,6 +357,7 @@ exports[`MessageBox Show 1`] = `
 exports[`MessageBox Success 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 106; display: block;"
   >
@@ -387,6 +398,7 @@ exports[`MessageBox Success 1`] = `
 exports[`MessageBox Success w/ custom title 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 116; display: block;"
   >
@@ -427,6 +439,7 @@ exports[`MessageBox Success w/ custom title 1`] = `
 exports[`MessageBox Warning 1`] = `
 <DocumentFragment>
   <ui5-dialog
+    class="MessageBox-messageBox"
     opened=""
     style="z-index: 108; display: block;"
   >

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

@@ -6,24 +6,25 @@ import '@ui5/webcomponents-icons/dist/icons/message-warning';
 import '@ui5/webcomponents-icons/dist/icons/question-mark';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
 import { useConsolidatedRef, useI18nText, usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/hooks';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 
 import {
-  CONFIRMATION,
-  ERROR,
-  HIGHLIGHT,
-  INFORMATION,
   ABORT,
   CANCEL,
   CLOSE,
+  CONFIRMATION,
   DELETE,
+  ERROR,
+  HIGHLIGHT,
   IGNORE,
+  INFORMATION,
   NO,
   OK,
   RETRY,
-  YES,
   SUCCESS,
-  WARNING
+  WARNING,
+  YES
 } from '@ui5/webcomponents-react/dist/assets/i18n/i18n-defaults';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
@@ -175,13 +176,15 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
 
   const passThroughProps = usePassThroughHtmlProps(props, ['onClose']);
 
+  const messageBoxClassNames = StyleClassHelper.of(classes.messageBox).putIfPresent(className).className;
+
   return (
     <Dialog
       slot={slot}
       ref={dialogRef}
       style={style}
       tooltip={tooltip}
-      className={className}
+      className={messageBoxClassNames}
       header={
         <header className={classes.header} data-type={type}>
           {iconToRender}