fix(modalbox): add the small modifier to modalbox (#1372)

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

packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts

@@ -6,6 +6,7 @@ export interface ModalProps extends HTMLProps<HTMLDivElement> {
   className?: string;
   hideTitle?: boolean;
   isLarge?: boolean;
+  isSmall?: boolean;
   isOpen?: boolean;
   onClose?: Function;
   title: string;

packages/patternfly-4/react-core/src/components/Modal/Modal.docs.js

@@ -1,11 +1,18 @@
 import { Modal } from '@patternfly/react-core';
 import Simple from './examples/SimpleModal';
+import Width from './examples/WidthModal';
 import Large from './examples/LargeModal';
+import Small from './examples/SmallModal';
 
 export default {
   title: 'Modal',
   components: {
     Modal
   },
-  examples: [{ component: Simple, title: 'Simple Modal' }, { component: Large, title: 'Large Modal' }]
+  examples: [
+    { component: Simple, title: 'Simple Modal' },
+    { component: Small, title: 'Small Modal' },
+    { component: Large, title: 'Large Modal' },
+    { component: Width, title: 'Width Modal' }
+  ]
 };

packages/patternfly-4/react-core/src/components/Modal/Modal.js

@@ -23,19 +23,25 @@ const propTypes = {
   actions: PropTypes.any,
   /** A callback for when the close button is clicked */
   onClose: PropTypes.func,
+  /** Default width of the Modal. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Creates a large version of the Modal */
   isLarge: PropTypes.bool,
+  /** Creates a small version of the Modal */
+  isSmall: PropTypes.bool,
   /** Additional props are passed and spread in the Modal body container <div> */
   '': PropTypes.any
 };
 
 const defaultProps = {
+  width: null,
   className: '',
   isOpen: false,
   hideTitle: false,
   actions: [],
   onClose: () => undefined,
-  isLarge: false
+  isLarge: false,
+  isSmall: false
 };
 
 let currentId = 0;

packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts

@@ -5,6 +5,7 @@ export interface ModalBoxProps extends HTMLProps<HTMLDivElement> {
   className?: string;
   id: string;
   isLarge?: boolean;
+  isSmall?: boolean;
   title: string;
 }
 

packages/patternfly-4/react-core/src/components/Modal/ModalBox.js

@@ -10,6 +10,8 @@ const propTypes = {
   className: PropTypes.string,
   /** Creates a large version of the ModalBox */
   isLarge: PropTypes.bool,
+  /** Creates a small version of the ModalBox. */
+  isSmall: PropTypes.bool,
   /* Header title used for Modal Box Header */
   title: PropTypes.string.isRequired,
   /** id to use for Modal Box description */
@@ -20,17 +22,18 @@ const propTypes = {
 
 const defaultProps = {
   className: '',
-  isLarge: false
+  isLarge: false,
+  isSmall: false
 };
 
-const ModalBox = ({ children, className, isLarge, title, id, ...props }) => (
+const ModalBox = ({ children, className, isLarge, isSmall, title, id, ...props }) => (
   <div
     {...props}
     role="dialog"
     aria-label={title}
     aria-describedby={id}
     aria-modal="true"
-    className={css(styles.modalBox, className, isLarge && styles.modifiers.lg)}
+    className={css(styles.modalBox, className, isLarge && styles.modifiers.lg, isSmall && styles.modifiers.sm )}
   >
     {children}
   </div>

packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts

@@ -5,6 +5,7 @@ export interface ModalContentProps extends HTMLProps<HTMLDivElement> {
   className?: string;
   id: string;
   isLarge?: boolean;
+  isSmall?: boolean;
   isOpen?: boolean;
   hideTitle?: boolean;
   actions?: any,

packages/patternfly-4/react-core/src/components/Modal/ModalContent.js

@@ -8,6 +8,8 @@ import ModalBox from './ModalBox';
 import ModalBoxFooter from './ModalBoxFooter';
 import Backdrop from '../Backdrop/Backdrop';
 import Bullseye from '../../layouts/Bullseye/Bullseye';
+import bullseyeStyle from '@patternfly/patternfly/layouts/Bullseye/bullseye.css';
+import { css } from '@patternfly/react-styles';
 
 const propTypes = {
   /** content rendered inside the Modal. */
@@ -24,24 +26,43 @@ const propTypes = {
   actions: PropTypes.any,
   /** A callback for when the close button is clicked */
   onClose: PropTypes.func,
+  /** Default width of the Modal. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /** Creates a large version of the Modal */
   isLarge: PropTypes.bool,
+  /** Creates a small version of the Modal */
+  isSmall: PropTypes.bool,
   /** id to use for Modal Box description */
   id: PropTypes.string.isRequired,
   /** Additional props are spread to the ModalBoxBody component */
   '': PropTypes.any
 };
 
 const defaultProps = {
+  width: null,
   className: '',
   isOpen: false,
   hideTitle: false,
   actions: [],
   onClose: () => undefined,
-  isLarge: false
+  isLarge: false,
+  isSmall: false
 };
 
-const ModalContent = ({ children, className, isOpen, title, hideTitle, actions, onClose, isLarge, id, ...props }) => {
+const ModalContent = ({
+  children,
+  className,
+  isOpen,
+  title,
+  hideTitle,
+  actions,
+  onClose,
+  isLarge,
+  isSmall,
+  width,
+  id,
+  ...props
+}) => {
   const modalBoxHeader = title && <ModalBoxHeader> {title} </ModalBoxHeader>;
   const modalBoxFooter = actions.length > 0 && <ModalBoxFooter> {actions} </ModalBoxFooter>;
   if (!isOpen) {
@@ -50,8 +71,8 @@ const ModalContent = ({ children, className, isOpen, title, hideTitle, actions,
   return (
     <Backdrop>
       <Bullseye>
-        <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
-          <ModalBox className={className} isLarge={isLarge} title={title} id={id}>
+        <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }} className={css(bullseyeStyle.bullseye)}>
+          <ModalBox style={{ width }} className={className} isLarge={isLarge} isSmall={isSmall} title={title} id={id}>
             <ModalBoxHCloseButton onClose={onClose} />
             {modalBoxHeader}
             <ModalBoxBody {...props} id={id}>