From ca131f390135e209a34f1afca1a55e272bdd5c80 Mon Sep 17 00:00:00 2001 From: boaz0 Date: Mon, 25 Feb 2019 17:41:28 +0200 Subject: [PATCH] fix(modalbox): add the small modifier to modalbox (#1372) Signed-off-by: Boaz Shuster --- .../src/components/Modal/Modal.d.ts | 1 + .../src/components/Modal/Modal.docs.js | 9 +- .../react-core/src/components/Modal/Modal.js | 8 +- .../src/components/Modal/ModalBox.d.ts | 1 + .../src/components/Modal/ModalBox.js | 9 +- .../src/components/Modal/ModalContent.d.ts | 1 + .../src/components/Modal/ModalContent.js | 29 ++++- .../__snapshots__/ModalContent.test.js.snap | 112 ++++++++++++++++++ .../components/Modal/examples/SmallModal.js | 48 ++++++++ .../components/Modal/examples/WidthModal.js | 48 ++++++++ 10 files changed, 257 insertions(+), 9 deletions(-) create mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/SmallModal.js create mode 100644 packages/patternfly-4/react-core/src/components/Modal/examples/WidthModal.js diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts b/packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts index 95bae8e23a1..2589165f00b 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts @@ -6,6 +6,7 @@ export interface ModalProps extends HTMLProps { className?: string; hideTitle?: boolean; isLarge?: boolean; + isSmall?: boolean; isOpen?: boolean; onClose?: Function; title: string; diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.docs.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.docs.js index a5fd42b5ff0..21ef6c5d94f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.docs.js +++ b/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' } + ] }; diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.js index b01d9af1105..3106cef9f9b 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.js +++ b/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
*/ '': PropTypes.any }; const defaultProps = { + width: null, className: '', isOpen: false, hideTitle: false, actions: [], onClose: () => undefined, - isLarge: false + isLarge: false, + isSmall: false }; let currentId = 0; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts index 9c82d42f7dd..99a3cd10ae3 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts @@ -5,6 +5,7 @@ export interface ModalBoxProps extends HTMLProps { className?: string; id: string; isLarge?: boolean; + isSmall?: boolean; title: string; } diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.js index 1fedabbf12c..53eb3178759 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.js +++ b/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 }) => (
{children}
diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts index 1ea72185699..e9729ce6e49 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts @@ -5,6 +5,7 @@ export interface ModalContentProps extends HTMLProps { className?: string; id: string; isLarge?: boolean; + isSmall?: boolean; isOpen?: boolean; hideTitle?: boolean; actions?: any, diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js index 6065a122ffa..df07c4e9898 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js +++ b/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,8 +26,12 @@ 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 */ @@ -33,15 +39,30 @@ const propTypes = { }; 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 && {title} ; const modalBoxFooter = actions.length > 0 && {actions} ; if (!isOpen) { @@ -50,8 +71,8 @@ const ModalContent = ({ children, className, isOpen, title, hideTitle, actions, return ( - - + + {modalBoxHeader} diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap index bfe4832b753..2f5fa95d8c1 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap +++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap @@ -1,6 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Modal Content Test isOpen 1`] = ` +.pf-l-bullseye { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + padding: 0px; + margin: 0px; +} + @@ -11,6 +20,7 @@ exports[`Modal Content Test isOpen 1`] = ` @@ -59,6 +84,7 @@ exports[`Modal Content Test only body 1`] = ` @@ -107,6 +148,7 @@ exports[`Modal Content Test with footer 1`] = ` @@ -162,6 +219,7 @@ exports[`Modal Content Test with header 1`] = ` @@ -211,6 +284,7 @@ exports[`Modal Content Test with header and footer 1`] = ` @@ -267,6 +356,7 @@ exports[`Modal Content Test with onclose 1`] = ` @@ -324,6 +429,7 @@ exports[`Modal Content test without footer 1`] = ` { + this.setState(({ isModalOpen }) => ({ + isModalOpen: !isModalOpen + })); + }; + + render() { + const { isModalOpen } = this.state; + + return ( + + + + Cancel + , + + ]} + > + 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. + + + ); + } +} + +export default SmallModal; diff --git a/packages/patternfly-4/react-core/src/components/Modal/examples/WidthModal.js b/packages/patternfly-4/react-core/src/components/Modal/examples/WidthModal.js new file mode 100644 index 00000000000..8817be93a8b --- /dev/null +++ b/packages/patternfly-4/react-core/src/components/Modal/examples/WidthModal.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Modal, Button } from '@patternfly/react-core'; + +class WidthModal extends React.Component { + state = { + isModalOpen: false + }; + + handleModalToggle = () => { + this.setState(({ isModalOpen }) => ({ + isModalOpen: !isModalOpen + })); + }; + + render() { + const { isModalOpen } = this.state; + + return ( + + + + Cancel + , + + ]} + > + 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. + + + ); + } +} + +export default WidthModal;