feat(modal): add medium variant (#4678)

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>

Author: boaz0

packages/react-core/src/components/Modal/Modal.tsx

@@ -40,7 +40,7 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Description of the modal */
   description?: React.ReactNode;
   /** Variant of the modal */
-  variant?: 'small' | 'large' | 'default';
+  variant?: 'small' | 'medium' | 'large' | 'default';
   /** Flag indicating if modal content should be placed in a modal box body wrapper */
   hasNoBodyWrapper?: boolean;
   /** An ID to use for the ModalBox container */
@@ -51,6 +51,7 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
 
 export enum ModalVariant {
   small = 'small',
+  medium = 'medium',
   large = 'large',
   default = 'default'
 }

packages/react-core/src/components/Modal/ModalBox.tsx

@@ -8,7 +8,7 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the ModalBox */
   className?: string;
   /** Variant of the modal */
-  variant?: 'small' | 'large' | 'default';
+  variant?: 'small' | 'medium' | 'large' | 'default';
   /** Id to use for Modal Box label */
   'aria-labelledby'?: string;
   /** Accessible descriptor of modal */
@@ -37,7 +37,8 @@ export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({
       styles.modalBox,
       className,
       variant === 'large' && styles.modifiers.lg,
-      variant === 'small' && styles.modifiers.sm
+      variant === 'small' && styles.modifiers.sm,
+      variant === 'medium' && styles.modifiers.md
     )}
   >
     {children}

packages/react-core/src/components/Modal/ModalContent.tsx

@@ -20,7 +20,7 @@ export interface ModalContentProps extends OUIAProps {
   /** Additional classes added to the button */
   className?: string;
   /** Variant of the modal */
-  variant?: 'small' | 'large' | 'default';
+  variant?: 'small' | 'medium' | 'large' | 'default';
   /** Flag to show the modal */
   isOpen?: boolean;
   /** Complex header (more than just text), supersedes title for header content */

packages/react-core/src/components/Modal/examples/Modal.md

@@ -167,6 +167,58 @@ class SmallModal extends React.Component {
 }
 ```
 
+### Medium
+```js
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+class MediumModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false
+    };
+    this.handleModalToggle = () => {
+      this.setState(({ isModalOpen }) => ({
+        isModalOpen: !isModalOpen
+      }));
+    };
+  }
+
+  render() {
+    const { isModalOpen } = this.state;
+
+    return (
+      <React.Fragment>
+        <Button variant="primary" onClick={this.handleModalToggle}>
+          Show Medium Modal
+        </Button>
+        <Modal
+          variant={ModalVariant.medium}
+          title="Medium modal header"
+          isOpen={isModalOpen}
+          onClose={this.handleModalToggle}
+          actions={[
+            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
+              Confirm
+            </Button>,
+            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
+              Cancel
+            </Button>
+          ]}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+```
+
 ### Large
 ```js
 import React from 'react';

packages/react-integration/cypress/integration/modal.spec.ts

@@ -62,6 +62,25 @@ describe('Modal Test', () => {
     });
   });
 
+  it('Verify Medium Modal', () => {
+    cy.get('#showMediumModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
+      cy.wrap(modalButton).click();
+      cy.get('.pf-c-modal-box.pf-m-md')
+        .then(() => {
+          cy.get('.pf-c-modal-box .pf-c-button[aria-label="Close"]').then(closeButton => {
+            cy.wrap(closeButton).click();
+            cy.get('.pf-c-modal-box').should('not.exist');
+          });
+        })
+        .then(() => {
+          cy.wrap(modalButton).click();
+          cy.get('.pf-c-modal-box').should('exist');
+          cy.get('body').trigger('keydown', { keyCode: 27, which: 27 });
+          cy.get('.pf-c-modal-box').should('not.exist');
+        });
+    });
+  });
+
   it('Verify Large Modal', () => {
     cy.get('#showLargeModalButton').then((modalButton: JQuery<HTMLButtonElement>) => {
       cy.wrap(modalButton).click();

packages/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx

@@ -6,6 +6,7 @@ interface ModalDemoState {
   isModalOpen: boolean;
   isModalDescriptionOpen: boolean;
   isSmallModalOpen: boolean;
+  isMediumModalOpen: boolean;
   isLargeModalOpen: boolean;
   isHalfWidthModalOpen: boolean;
   isCustomHeaderFooterModalOpen: boolean;
@@ -20,6 +21,7 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     isModalOpen: false,
     isModalDescriptionOpen: false,
     isSmallModalOpen: false,
+    isMediumModalOpen: false,
     isLargeModalOpen: false,
     isHalfWidthModalOpen: false,
     isCustomHeaderFooterModalOpen: false,
@@ -46,6 +48,12 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     }));
   };
 
+  handleMediumModalToggle = () => {
+    this.setState(({ isMediumModalOpen }) => ({
+      isMediumModalOpen: !isMediumModalOpen
+    }));
+  };
+
   handleLargeModalToggle = () => {
     this.setState(({ isLargeModalOpen }) => ({
       isLargeModalOpen: !isLargeModalOpen
@@ -162,6 +170,33 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
     );
   }
 
+  renderMediumModal() {
+    const { isMediumModalOpen } = this.state;
+
+    return (
+      <Modal
+        variant={'medium'}
+        title="Modal Header"
+        isOpen={isMediumModalOpen}
+        onClose={this.handleMediumModalToggle}
+        actions={[
+          <Button key="cancel" variant="secondary" onClick={this.handleMediumModalToggle}>
+            Cancel
+          </Button>,
+          <Button key="confirm" variant="primary" onClick={this.handleMediumModalToggle}>
+            Confirm
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    );
+  }
+
   renderLargeModal() {
     const { isLargeModalOpen } = this.state;
 
@@ -330,6 +365,14 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
           <Button style={buttonStyle} variant="primary" onClick={this.handleSmallModalToggle} id="showSmallModalButton">
             Show Small Modal
           </Button>
+          <Button
+            style={buttonStyle}
+            variant="primary"
+            onClick={this.handleMediumModalToggle}
+            id="showMediumModalButton"
+          >
+            Show Medium Modal
+          </Button>
           <Button style={buttonStyle} variant="primary" onClick={this.handleLargeModalToggle} id="showLargeModalButton">
             Show Large Modal
           </Button>
@@ -377,6 +420,7 @@ export class ModalDemo extends React.Component<React.HTMLProps<HTMLDivElement>,
         </div>
         {this.renderModal()}
         {this.renderSmallModal()}
+        {this.renderMediumModal()}
         {this.renderLargeModal()}
         {this.renderHalfWidthModal()}
         {this.renderCustomHeaderFooterModal()}