fix(MessageBox): allow custom action texts (#561)

Closes #551

Author: MarcusNotheis

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

@@ -9,11 +9,6 @@ const style = {
     textAlign: 'center',
     width: 'auto',
     alignItems: 'center',
-    '& $icon': {
-      '& >*': {
-        verticalAlign: 'middle'
-      }
-    },
     padding: '0.25rem 1rem',
     boxSizing: 'border-box',
     borderBottom: `1px solid var(--messageBoxBorderColor)`,
@@ -27,44 +22,32 @@ const style = {
     '&[data-type="Error"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapErrorBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapErrorBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNegativeElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNegativeElementColor
     },
     '&[data-type="Warning"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapWarningBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapWarningBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapCriticalElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapCriticalElementColor
     },
     '&[data-type="Success"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapSuccessBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapSuccessBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapPositiveElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapPositiveElementColor
     },
     '&[data-type="Confirm"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapNeutralBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapNeutralBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
     },
     '&[data-type="Information"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapNeutralBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapNeutralBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapNeutralElementColor
     },
     '&[data-type="Highlight"]': {
       '--sapPageFooter_BorderColor': ThemingParameters.sapInformationBorderColor,
       '--messageBoxBorderColor': ThemingParameters.sapInformationBorderColor,
-      '& $icon': {
-        '--sapContent_NonInteractiveIconColor': ThemingParameters.sapInformativeElementColor
-      }
+      '--sapContent_NonInteractiveIconColor': ThemingParameters.sapInformativeElementColor
     }
   },
   content: {
@@ -80,7 +63,8 @@ const style = {
       margin: '0 0.25rem'
     },
     '& > ui5-button': {
-      display: 'flex'
+      display: 'flex',
+      minWidth: '4rem'
     }
   }
 };

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

@@ -1,4 +1,5 @@
 import { createPassThroughPropsTest, getEventFromCallback } from '@shared/tests/utils';
+import { render, screen, fireEvent } from '@tests/index';
 import { mount } from 'enzyme';
 import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox';
 import { MessageBoxActions } from '@ui5/webcomponents-react/lib/MessageBoxActions';
@@ -144,5 +145,25 @@ describe('MessageBox', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  test('Custom Action Text', async () => {
+    const onClose = jest.fn();
+    render(
+      <MessageBox type={MessageBoxTypes.CONFIRM} actions={[MessageBoxActions.OK, 'My Custom Action']} onClose={onClose}>
+        My Message Box Content
+      </MessageBox>
+    );
+
+    const textOK = screen.getByText(MessageBoxActions.OK);
+    expect(textOK).toBeInTheDocument();
+    let customAction = screen.getByText('My Custom Action');
+    expect(customAction).toBeInTheDocument();
+
+    fireEvent.click(textOK);
+    fireEvent.click(customAction);
+
+    expect(onClose.mock.calls[0][0].detail.action).toEqual(MessageBoxActions.OK);
+    expect(onClose.mock.calls[1][0].detail.action).toEqual('My Custom Action');
+  });
+
   createPassThroughPropsTest(MessageBox);
 });

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

@@ -25,14 +25,12 @@ exports[`MessageBox Confirm - Cancel 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
     <ui5-button
       data-action="Cancel"
       design="Transparent"
-      style="min-width: 4rem;"
     >
       Cancel
     </ui5-button>
@@ -70,14 +68,12 @@ exports[`MessageBox Confirm - OK 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
     <ui5-button
       data-action="Cancel"
       design="Transparent"
-      style="min-width: 4rem;"
     >
       Cancel
     </ui5-button>
@@ -115,7 +111,6 @@ exports[`MessageBox Error 1`] = `
     <ui5-button
       data-action="Close"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       Close
     </ui5-button>
@@ -153,7 +148,6 @@ exports[`MessageBox Information 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
@@ -191,14 +185,12 @@ exports[`MessageBox No Title 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
     <ui5-button
       data-action="Cancel"
       design="Transparent"
-      style="min-width: 4rem;"
     >
       Cancel
     </ui5-button>
@@ -234,7 +226,6 @@ exports[`MessageBox Not open 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
@@ -272,14 +263,12 @@ exports[`MessageBox Show 1`] = `
     <ui5-button
       data-action="Yes"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       Yes
     </ui5-button>
     <ui5-button
       data-action="No"
       design="Transparent"
-      style="min-width: 4rem;"
     >
       No
     </ui5-button>
@@ -317,7 +306,6 @@ exports[`MessageBox Success 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
@@ -355,7 +343,6 @@ exports[`MessageBox Success w/ custom title 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>
@@ -393,7 +380,6 @@ exports[`MessageBox Warning 1`] = `
     <ui5-button
       data-action="OK"
       design="Emphasized"
-      style="min-width: 4rem;"
     >
       OK
     </ui5-button>

packages/main/src/components/MessageBox/demo.stories.tsx

@@ -2,6 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { MessageBox } from '@ui5/webcomponents-react/lib/MessageBox';
 import { MessageBoxTypes } from '@ui5/webcomponents-react/lib/MessageBoxTypes';
+import { MessageBoxActions } from '@ui5/webcomponents-react/lib/MessageBoxActions';
 import React from 'react';
 
 export const defaultStory = () => (
@@ -19,6 +20,18 @@ defaultStory.story = {
   name: 'Default'
 };
 
+export const withCustomActions = () => (
+  <MessageBox
+    type={select('type', Object.values(MessageBoxTypes), MessageBoxTypes.CONFIRM)}
+    open={boolean('open', true)}
+    onClose={action('onClose')}
+    title={text('title', 'A Custom Message Box Title')}
+    actions={[MessageBoxActions.OK, 'A custom action', MessageBoxActions.CANCEL]}
+  >
+    Message Box Content
+  </MessageBox>
+);
+
 export default {
   title: 'Components / MessageBox',
   component: MessageBox

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

@@ -54,7 +54,7 @@ export interface MessageBoxPropTypes extends CommonProps {
   open?: boolean;
   title?: string;
   children: string;
-  actions?: MessageBoxActions[];
+  actions?: (MessageBoxActions | string)[];
   icon?: ReactNode;
   type?: MessageBoxTypes;
   onClose: (event: CustomEvent<{ action: MessageBoxActions }>) => void;
@@ -192,15 +192,12 @@ const MessageBox: FC<MessageBoxPropTypes> = forwardRef((props: MessageBoxPropTyp
           {actionsToRender.map((action, index) => {
             return (
               <Button
-                style={{
-                  minWidth: '4rem'
-                }}
                 key={action}
                 design={index === 0 ? ButtonDesign.Emphasized : ButtonDesign.Transparent}
                 onClick={handleOnClose}
                 data-action={action}
               >
-                {actionTranslations[actionTextMap.get(action)]}
+                {actionTextMap.has(action) ? actionTranslations[actionTextMap.get(action)] : action}
               </Button>
             );
           })}