fix(ModalContent): Hide footer when no actions (patternfly#1167)

Show the footer only if the actions array has content. Also made some adjustments to ModalContent.test.js since some snapshots were blank, one test had a typo, and some tests used a deprecated footer prop. Fixes patternfly#1107
redallen · Jan 11, 2019 · a58a262 · a58a262
1 parent 9381f04
commit a58a262
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 13 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js
@@ -43,7 +43,7 @@ const defaultProps = {
 
 const ModalContent = ({ children, className, isOpen, title, hideTitle, actions, onClose, isLarge, id, ...props }) => {
   const modalBoxHeader = title && <ModalBoxHeader> {title} </ModalBoxHeader>;
-  const modalBoxFooter = actions && <ModalBoxFooter> {actions} </ModalBoxFooter>;
+  const modalBoxFooter = actions.length > 0 && <ModalBoxFooter> {actions} </ModalBoxFooter>;
   if (!isOpen) {
     return null;
   }

diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.js
@@ -4,7 +4,7 @@ import ModalContent from './ModalContent';
 
 test('Modal Content Test only body', () => {
   const view = shallow(
-    <ModalContent title="Test Modal Content title" id="id">
+    <ModalContent title="Test Modal Content title" id="id" isOpen>
       This is a ModalBox header
     </ModalContent>
   );
@@ -22,7 +22,7 @@ test('Modal Content Test isOpen', () => {
 
 test('Modal Content Test with header', () => {
   const view = shallow(
-    <ModalContent title="Test Modal Content title" id="id" header="Testing">
+    <ModalContent title="Test Modal Content title" id="id" isOpen header="Testing">
       This is a ModalBox header
     </ModalContent>
   );
@@ -31,7 +31,16 @@ test('Modal Content Test with header', () => {
 
 test('Modal Content Test with footer', () => {
   const view = shallow(
-    <ModalContent title="Test Modal Content title" id="id" footer="Testing">
+    <ModalContent title="Test Modal Content title" id="id" isOpen actions={["Testing"]}>
+      This is a ModalBox header
+    </ModalContent>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+test('Modal Content test without footer', () => {
+  const view = shallow(
+    <ModalContent title="Test Modal Content title" id="id" isOpen>
       This is a ModalBox header
     </ModalContent>
   );
@@ -40,22 +49,23 @@ test('Modal Content Test with footer', () => {
 
 test('Modal Content Test with header and footer', () => {
   const view = shallow(
-    <ModalContent title="Test Modal Content title" header="Testing header" footer="Testing footer" id="id">
+    <ModalContent title="Test Modal Content title" header="Testing header" id="id" isOpen actions={["Testing footer"]}>
       This is a ModalBox header
     </ModalContent>
   );
   expect(view).toMatchSnapshot();
 });
 
-test('Modal Content Test with onlose', () => {
+test('Modal Content Test with onclose', () => {
   const view = shallow(
     <ModalContent
       title="Test Modal Content title"
       header="Testing header"
-      footer="Testing footer"
+      actions={["Testing footer"]}
       isLarge
       onclose={() => undefined}
       id="id"
+      isOpen
     >
       This is a ModalBox header
     </ModalContent>