From bfba556b5c841f2d38dda454e4184edbd4dcaf5a Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Thu, 16 May 2019 13:55:03 -0400 Subject: [PATCH 1/4] feat(Modal): Convert Modal component to typescript --- .../src/components/Modal/Modal.d.ts | 18 ------------------ .../Modal/{Modal.test.js => Modal.test.tsx} | 0 .../components/Modal/{Modal.js => Modal.tsx} | 0 .../src/components/Modal/ModalBox.d.ts | 14 -------------- .../{ModalBox.test.js => ModalBox.test.tsx} | 0 .../Modal/{ModalBox.js => ModalBox.tsx} | 0 .../src/components/Modal/ModalBoxBody.d.ts | 11 ----------- ...lBoxBody.test.js => ModalBoxBody.test.tsx} | 0 .../{ModalBoxBody.js => ModalBoxBody.tsx} | 0 .../components/Modal/ModalBoxCloseButton.d.ts | 10 ---------- ...n.test.js => ModalBoxCloseButton.test.tsx} | 0 ...CloseButton.js => ModalBoxCloseButton.tsx} | 0 .../src/components/Modal/ModalBoxFooter.d.ts | 10 ---------- ...Footer.test.js => ModalBoxFooter.test.tsx} | 0 .../{ModalBoxFooter.js => ModalBoxFooter.tsx} | 0 .../src/components/Modal/ModalBoxHeader.d.ts | 11 ----------- ...Header.test.js => ModalBoxHeader.test.tsx} | 0 .../{ModalBoxHeader.js => ModalBoxHeader.tsx} | 0 .../src/components/Modal/ModalContent.d.ts | 19 ------------------- ...lContent.test.js => ModalContent.test.tsx} | 0 .../{ModalContent.js => ModalContent.tsx} | 0 ...ox.test.js.snap => ModalBox.test.tsx.snap} | 0 ...est.js.snap => ModalBoxBody.test.tsx.snap} | 0 ...snap => ModalBoxCloseButton.test.tsx.snap} | 0 ...t.js.snap => ModalBoxFooter.test.tsx.snap} | 0 ...t.js.snap => ModalBoxHeader.test.tsx.snap} | 0 ...est.js.snap => ModalContent.test.tsx.snap} | 0 .../src/components/Modal/index.d.ts | 7 ------- .../components/Modal/{index.js => index.ts} | 0 .../react-core/src/declarations.d.ts | 16 +++++++++++++++- 30 files changed, 15 insertions(+), 101 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{Modal.test.js => Modal.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{Modal.js => Modal.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalBox.test.js => ModalBox.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalBox.js => ModalBox.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxBody.test.js => ModalBoxBody.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxBody.js => ModalBoxBody.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxCloseButton.test.js => ModalBoxCloseButton.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxCloseButton.js => ModalBoxCloseButton.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxFooter.test.js => ModalBoxFooter.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxFooter.js => ModalBoxFooter.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxHeader.test.js => ModalBoxHeader.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalBoxHeader.js => ModalBoxHeader.tsx} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{ModalContent.test.js => ModalContent.test.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/{ModalContent.js => ModalContent.tsx} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalBox.test.js.snap => ModalBox.test.tsx.snap} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalBoxBody.test.js.snap => ModalBoxBody.test.tsx.snap} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalBoxCloseButton.test.js.snap => ModalBoxCloseButton.test.tsx.snap} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalBoxFooter.test.js.snap => ModalBoxFooter.test.tsx.snap} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalBoxHeader.test.js.snap => ModalBoxHeader.test.tsx.snap} (100%) rename packages/patternfly-4/react-core/src/components/Modal/__snapshots__/{ModalContent.test.js.snap => ModalContent.test.tsx.snap} (100%) delete mode 100644 packages/patternfly-4/react-core/src/components/Modal/index.d.ts rename packages/patternfly-4/react-core/src/components/Modal/{index.js => index.ts} (100%) 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 deleted file mode 100644 index df67285dc8d..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalProps extends HTMLProps { - actions?: any, - children: ReactNode; - className?: string; - hideTitle?: boolean; - ariaDescribedById?: string; - isLarge?: boolean; - isSmall?: boolean; - isOpen?: boolean; - onClose?: Function; - title: string; -} - -declare const Modal: FunctionComponent; - -export default Modal; diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/Modal.test.js rename to packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/Modal.js rename to packages/patternfly-4/react-core/src/components/Modal/Modal.tsx 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 deleted file mode 100644 index e530226ecfa..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalBoxProps extends HTMLProps { - children: ReactNode; - className?: string; - isLarge?: boolean; - isSmall?:boolean; - title: string; - id: string; -} - -declare const ModalBox: FunctionComponent; - -export default ModalBox; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBox.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.d.ts deleted file mode 100644 index d20298d5d10..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalBoxBodyProps extends HTMLProps { - children?: ReactNode; - className?: string; - id?: string; -} - -declare const ModalBoxBody: FunctionComponent; - -export default ModalBoxBody; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.d.ts deleted file mode 100644 index 8fd5bfbef67..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { FunctionComponent, HTMLProps } from 'react'; - -export interface ModalBoxCloseButtonProps extends HTMLProps { - className?: string; - onClose?: Function; -} - -declare const ModalBoxCloseButton: FunctionComponent; - -export default ModalBoxCloseButton; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.d.ts deleted file mode 100644 index ec57955891f..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalBoxFooterProps extends HTMLProps { - children?: ReactNode; - className?: string; -} - -declare const ModalBoxFooter: FunctionComponent; - -export default ModalBoxFooter; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.d.ts b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.d.ts deleted file mode 100644 index 705ba39c693..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalBoxHeaderProps extends HTMLProps { - children?: ReactNode; - className?: string; - hideTitle: boolean; -} - -declare const ModalBoxHeader: FunctionComponent; - -export default ModalBoxHeader; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.js b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx 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 deleted file mode 100644 index 8af7a769307..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.d.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { FunctionComponent, HTMLProps, ReactNode } from 'react'; - -export interface ModalContentProps extends HTMLProps { - children: ReactNode; - className?: string; - isLarge?: boolean; - isSmall?: boolean; - isOpen?: boolean; - title: string; - hideTitle?: boolean; - actions?: any, - onClose?: Function; - ariaDescribedById?: string; - id: string; -} - -declare const ModalContent: FunctionComponent; - -export default ModalContent; 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.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.js b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/ModalContent.js rename to packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBox.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBox.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBox.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBox.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxFooter.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxFooter.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxFooter.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxFooter.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxHeader.test.js.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxHeader.test.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxHeader.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxHeader.test.tsx.snap 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.tsx.snap similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.js.snap rename to packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalContent.test.tsx.snap diff --git a/packages/patternfly-4/react-core/src/components/Modal/index.d.ts b/packages/patternfly-4/react-core/src/components/Modal/index.d.ts deleted file mode 100644 index d5625346030..00000000000 --- a/packages/patternfly-4/react-core/src/components/Modal/index.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { default as Modal, ModalProps } from './Modal'; -export { default as ModalBox, ModalBoxProps } from './ModalBox'; -export { default as ModalBoxBody, ModalBoxBodyProps } from './ModalBoxBody'; -export { default as ModalBoxCloseButton, ModalBoxCloseButtonProps } from './ModalBoxCloseButton'; -export { default as ModalBoxFooter, ModalBoxFooterProps } from './ModalBoxFooter'; -export { default as ModalBoxHeader, ModalBoxHeaderProps } from './ModalBoxHeader'; -export { default as ModalContent, ModalContentProps } from './ModalContent'; diff --git a/packages/patternfly-4/react-core/src/components/Modal/index.js b/packages/patternfly-4/react-core/src/components/Modal/index.ts similarity index 100% rename from packages/patternfly-4/react-core/src/components/Modal/index.js rename to packages/patternfly-4/react-core/src/components/Modal/index.ts diff --git a/packages/patternfly-4/react-core/src/declarations.d.ts b/packages/patternfly-4/react-core/src/declarations.d.ts index d5d26c2a9e8..dcb97dc32cf 100644 --- a/packages/patternfly-4/react-core/src/declarations.d.ts +++ b/packages/patternfly-4/react-core/src/declarations.d.ts @@ -3,4 +3,18 @@ declare module '@patternfly/patternfly/*.css' { const styles: any; export default styles; -} \ No newline at end of file +} + +// We use a JS babel plugin to resolve these imports that `tsc` doesn't +// know about, so pretend that everything will work +declare module '@patternfly/patternfly/layouts/*.css' { + const styles: any; + export default styles; +} + +// We use a JS babel plugin to resolve these imports that `tsc` doesn't +// know about, so pretend that everything will work +declare module '@patternfly/patternfly/utilities/*.css' { + const styles: any; + export default styles; +} From 8d173875c60f16bbc99bab0e52f62cca620267e9 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Thu, 16 May 2019 13:58:35 -0400 Subject: [PATCH 2/4] Convert to Typescript add Demo and Test --- .../src/components/Modal/Modal.test.tsx | 10 +- .../react-core/src/components/Modal/Modal.tsx | 104 ++++---- .../src/components/Modal/ModalBox.test.tsx | 10 +- .../src/components/Modal/ModalBox.tsx | 41 ++- .../components/Modal/ModalBoxBody.test.tsx | 4 +- .../src/components/Modal/ModalBoxBody.tsx | 31 +-- .../Modal/ModalBoxCloseButton.test.tsx | 10 +- .../components/Modal/ModalBoxCloseButton.tsx | 29 +-- .../components/Modal/ModalBoxFooter.test.tsx | 4 +- .../src/components/Modal/ModalBoxFooter.tsx | 29 +-- .../components/Modal/ModalBoxHeader.test.tsx | 15 +- .../src/components/Modal/ModalBoxHeader.tsx | 50 ++-- .../components/Modal/ModalContent.test.tsx | 23 +- .../src/components/Modal/ModalContent.tsx | 97 ++++--- .../__snapshots__/ModalBox.test.tsx.snap | 17 +- .../__snapshots__/ModalBoxBody.test.tsx.snap | 2 +- .../ModalBoxCloseButton.test.tsx.snap | 4 +- .../ModalBoxFooter.test.tsx.snap | 2 +- .../ModalBoxHeader.test.tsx.snap | 24 ++ .../__snapshots__/ModalContent.test.tsx.snap | 240 ++++-------------- .../react-core/src/components/Modal/index.ts | 14 +- .../cypress/integration/modal.spec.ts | 98 +++++++ .../demo-app-ts/src/Demos.ts | 13 +- .../components/demos/ModalDemo/ModalDemo.tsx | 221 ++++++++++++++++ .../demo-app-ts/src/components/demos/index.ts | 1 + 25 files changed, 630 insertions(+), 463 deletions(-) create mode 100644 packages/patternfly-4/react-integration/cypress/integration/modal.spec.ts create mode 100644 packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ModalDemo/ModalDemo.tsx diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx index aee8c6ea051..10d6b15f8a6 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx @@ -1,5 +1,5 @@ import Modal from './Modal'; -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; import { KEY_CODES } from '../../helpers/constants'; import { css } from '../../../../react-styles/dist/js'; @@ -24,7 +24,8 @@ test('Modal creates a container element once for div', () => { test('modal closes with escape', () => { shallow(); - const [event, handler] = document.addEventListener.mock.calls[0]; + const mock: any = (document.addEventListener as any).mock; + const [event, handler] = mock.calls[0]; expect(event).toBe('keydown'); handler({ keyCode: KEY_CODES.ESCAPE_KEY }); expect(props.onClose).toBeCalled(); @@ -32,7 +33,8 @@ test('modal closes with escape', () => { test('modal does not call onClose for esc key if it is not open', () => { shallow(); - const [event, handler] = document.addEventListener.mock.calls[0]; + const mock: any = (document.addEventListener as any).mock; + const [event, handler] = mock.calls[0]; expect(event).toBe('keydown'); handler({ keyCode: KEY_CODES.ESCAPE_KEY }); expect(props.onClose).not.toBeCalled(); @@ -41,7 +43,7 @@ test('modal does not call onClose for esc key if it is not open', () => { test('Each modal is given a new id', () => { const first = shallow(); const second = shallow(); - expect(first.instance().id).not.toBe(second.instance().id); + expect((first.instance() as any).id).not.toBe((second.instance() as any).id); }); test('modal removes body backdropOpen class when removed', () => { diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx index 1e334c0e48e..8faef3b290b 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx @@ -1,76 +1,80 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import ModalContent from './ModalContent'; +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { canUseDOM } from 'exenv'; -import { KEY_CODES } from '../../helpers/constants'; + import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css'; -const propTypes = { +import { KEY_CODES } from '../../helpers/constants'; +import ModalContent from './ModalContent'; + +export interface ModalProps extends React.HTMLProps { /** content rendered inside the Modal. */ - children: PropTypes.node.isRequired, + children: React.ReactNode; /** additional classes added to the Modal */ - className: PropTypes.string, + className?: string; /** Flag to show the modal */ - isOpen: PropTypes.bool, + isOpen?: boolean; /** Content of the Modal Header */ - title: PropTypes.string.isRequired, - /** Flag to show the title */ - hideTitle: PropTypes.bool, + title: string; + /** Flag to hide the title */ + hideTitle?: boolean; /** id to use for Modal Box description */ - ariaDescribedById: PropTypes.string, + ariaDescribedById?: string; /** Action buttons to put in the Modal Footer */ - actions: PropTypes.any, + actions?: any, /** A callback for when the close button is clicked */ - onClose: PropTypes.func, + onClose?: () => void; /** Default width of the Modal. */ - width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + width?: number | string; /** Creates a large version of the Modal */ - isLarge: PropTypes.bool, + isLarge?: boolean; /** 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, - ariaDescribedById: '', - actions: [], - onClose: () => undefined, - isLarge: false, - isSmall: false -}; - -let currentId = 0; - -class Modal extends React.Component { - static propTypes = propTypes; - static defaultProps = defaultProps; - - id = `pf-modal-${currentId++}`; - - handleEscKeyClick = event => { + isSmall?: boolean; +} + +export class Modal extends React.Component { + static currentId = 0; + id = ''; + container?: HTMLDivElement = undefined; + + static defaultProps = { + width: undefined as any, + className: '', + isOpen: false, + hideTitle: false, + ariaDescribedById: '', + actions: [] as any[], + isLarge: false, + isSmall: false + }; + + constructor(props: ModalProps) { + super(props); + const newId = Modal.currentId++; + this.id = `pf-modal-${newId}`; + } + + + handleEscKeyClick = (event: KeyboardEvent): void => { if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) { - this.props.onClose(); + this.props.onClose!(); } }; - toggleSiblingsFromScreenReaders = hide => { + toggleSiblingsFromScreenReaders = (hide: boolean) => { const bodyChildren = document.body.children; - for (const child of bodyChildren) { + for (const child of Array.from(bodyChildren)) { if (child !== this.container) { - hide ? child.setAttribute('aria-hidden', hide) : child.removeAttribute('aria-hidden'); + hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden'); } } }; componentDidMount() { - document.body.appendChild(this.container); + if (this.container) { + document.body.appendChild(this.container); + } document.addEventListener('keydown', this.handleEscKeyClick, false); if (this.props.isOpen) { document.body.classList.add(css(styles.backdropOpen)); @@ -90,7 +94,9 @@ class Modal extends React.Component { } componentWillUnmount() { - document.body.removeChild(this.container); + if (this.container) { + document.body.removeChild(this.container); + } document.removeEventListener('keydown', this.handleEscKeyClick, false); document.body.classList.remove(css(styles.backdropOpen)); } diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx index ba28d670681..93b43508b44 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx @@ -1,10 +1,10 @@ import ModalBox from './ModalBox'; -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; test('ModalBox Test', () => { const view = shallow( - + This is a ModalBox ); @@ -13,16 +13,16 @@ test('ModalBox Test', () => { test('ModalBox Test isLarge', () => { const view = shallow( - + This is a ModalBox ); expect(view).toMatchSnapshot(); }); -test('ModalBox Test isOpen', () => { +test('ModalBox Test isSmall', () => { const view = shallow( - + This is a ModalBox ); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx index f4f325bf9bf..e895e1fa671 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx @@ -1,32 +1,31 @@ -import React from 'react'; +import * as React from 'react'; import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; -const propTypes = { +export interface ModalBoxProps extends React.HTMLProps { /** content rendered inside the ModalBox. */ - children: PropTypes.node.isRequired, + children: React.ReactNode; /** additional classes added to the ModalBox */ - className: PropTypes.string, + className?: string; /** Creates a large version of the ModalBox */ - isLarge: PropTypes.bool, + isLarge?: boolean; /** Creates a small version of the ModalBox. */ - isSmall: PropTypes.bool, - /** string to use for Modal Box label */ - title: PropTypes.string.isRequired, + isSmall?: boolean; + /** string to use for Modal Box aria-label */ + title: string; /** id to use for Modal Box description */ - id: PropTypes.string.isRequired, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; + id: string; +} -const defaultProps = { - className: '', - isLarge: false, - isSmall: false -}; - -const ModalBox = ({ children, className, isLarge, isSmall, title, id, ...props }) => ( +export const ModalBox: React.FunctionComponent = ({ + children, + className = '', + isLarge = false, + isSmall = false, + title, + id, + ...props +}) => (
); -ModalBox.propTypes = propTypes; -ModalBox.defaultProps = defaultProps; export default ModalBox; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx index 957af49b8aa..9efeb382a5f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx @@ -1,8 +1,8 @@ import ModalBoxBody from './ModalBoxBody'; -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; test('ModalBoxBody Test', () => { - const view = shallow(This is a ModalBox header); + const view = shallow(This is a ModalBox header); expect(view).toMatchSnapshot(); }); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx index d12b7fac3c2..de536c3675b 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx @@ -1,31 +1,22 @@ -import React from 'react'; +import * as React from 'react'; import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; -const propTypes = { +export interface ModalBoxBodyProps extends React.HTMLProps { /** content rendered inside the ModalBoxBody */ - children: PropTypes.node, + children?: React.ReactNode; /** additional classes added to the ModalBoxBody */ - className: PropTypes.string, - /** id of the ModalBoxBody */ - id: PropTypes.string.isRequired, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; + className?: string; +} -const defaultProps = { - children: null, - className: '' -}; - -const ModalBoxBody = ({ children, className, id, ...props }) => ( -
+export const ModalBoxBody: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}) => ( +
{children}
); -ModalBoxBody.propTypes = propTypes; -ModalBoxBody.defaultProps = defaultProps; - export default ModalBoxBody; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx index cc3908e8f2a..f33ab8b2372 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx @@ -1,8 +1,14 @@ -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; import ModalBoxCloseButton from './ModalBoxCloseButton'; test('ModalBoxCloseButton Test', () => { - const view = shallow(); + const mockfn = jest.fn(); + const view = shallow(); expect(view).toMatchSnapshot(); + view + .find('.test-box-close-button-class') + .at(0) + .simulate('click'); + expect(mockfn.mock.calls).toHaveLength(1); }); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx index 74189d052ab..2c815db7424 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx @@ -1,31 +1,24 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import * as React from 'react'; import { Button } from '../Button'; import { TimesIcon } from '@patternfly/react-icons'; -const propTypes = { +export interface ModalBoxCloseButtonProps { /** additional classes added to the close button */ - className: PropTypes.string, + className?: string; /** A callback for when the close button is clicked */ - onClose: PropTypes.func, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; + onClose?(): void; +} -const defaultProps = { - className: '', - onClose: () => undefined -}; - -const ModalBoxCloseButton = ({ className, onClose, ...props }) => ( +export const ModalBoxCloseButton: React.FunctionComponent = ({ + className = '', + onClose = () => undefined, + ...props +}) => ( - ); -ModalBoxCloseButton.propTypes = propTypes; -ModalBoxCloseButton.defaultProps = defaultProps; - export default ModalBoxCloseButton; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx index 06b54a383a0..dff8854b361 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; import ModalBoxFooter from './ModalBoxFooter'; test('ModalBoxFooter Test', () => { - const view = shallow(This is a ModalBox Footer); + const view = shallow(This is a ModalBox Footer); expect(view).toMatchSnapshot(); }); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx index 28523773b76..6d6b224093c 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx @@ -1,29 +1,22 @@ -import React from 'react'; +import * as React from 'react'; import { css } from '@patternfly/react-styles'; -import PropTypes from 'prop-types'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; -// const styles = {}; -const propTypes = { + +export interface ModalBoxFooterProps { /** content rendered inside the Footer */ - children: PropTypes.node, + children?: React.ReactNode; /** additional classes added to the Footer */ - className: PropTypes.string, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; - -const defaultProps = { - children: null, - className: '' -}; + className?: string; +} -const ModalBoxFooter = ({ children, className, ...props }) => ( +export const ModalBoxFooter: React.FunctionComponent = ({ + children = null, + className = '', + ...props +}) => (
{children}
); -ModalBoxFooter.propTypes = propTypes; -ModalBoxFooter.defaultProps = defaultProps; - export default ModalBoxFooter; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx index de34a583334..28835b57e6f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx @@ -1,8 +1,19 @@ -import ModalBoxHeader from './ModalBoxHeader'; -import React from 'react'; +import * as React from 'react'; import { shallow } from 'enzyme'; +import ModalBoxHeader from './ModalBoxHeader'; +import {TitleLevel} from '../Title'; test('ModalBoxHeader Test', () => { const view = shallow(This is a ModalBox header); expect(view).toMatchSnapshot(); }); + +test('ModalBoxHeader Test with H3', () => { + const view = shallow(This is a ModalBox header); + expect(view).toMatchSnapshot(); +}); + +test('ModalBoxHeader Test hideTitle', () => { + const view = shallow(This is a ModalBox header); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx index f19910f07a5..1f721eb8b9c 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx @@ -1,36 +1,36 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Title } from '../Title'; +import * as React from 'react'; import accessibleStyles from '@patternfly/patternfly/utilities/Accessibility/accessibility.css'; import { css } from '@patternfly/react-styles'; -const propTypes = { +import { Title, TitleLevel } from '../Title'; + +export interface ModalBoxHeaderProps { /** content rendered inside the Header */ - children: PropTypes.node, + children?:React.ReactNode; /** additional classes added to the button */ - className: PropTypes.string, - /** Flag to show the title */ - hideTitle: PropTypes.bool.isRequired, - /** Additional props are spread to the container
*/ - '': PropTypes.any -}; + className?: string; + /** Flag to hide the title */ + hideTitle?: boolean; + /** the heading level to use */ + headingLevel?: TitleLevel; +} -const defaultProps = { - children: null, - className: '' -}; - -const ModalBoxHeader = ({ hideTitle, children, className, ...props }) => { +export const ModalBoxHeader: React.FunctionComponent = ({ + children = null, + className = '', + hideTitle = false, + headingLevel = TitleLevel.h1, + ...props +}) => { const hidden = hideTitle ? css(accessibleStyles.screenReader) : ''; - return - - {children} - - ; + return ( + + + {children} + + + ); }; -ModalBoxHeader.propTypes = propTypes; -ModalBoxHeader.defaultProps = defaultProps; - export default ModalBoxHeader; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx index cc875ba96c3..e6e67505353 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import* as React from 'react'; import { shallow } from 'enzyme'; import ModalContent from './ModalContent'; @@ -20,15 +20,6 @@ test('Modal Content Test isOpen', () => { expect(view).toMatchSnapshot(); }); -test('Modal Content Test with header', () => { - const view = shallow( - - This is a ModalBox header - - ); - expect(view).toMatchSnapshot(); -}); - test('Modal Content Test with footer', () => { const view = shallow( @@ -47,23 +38,13 @@ test('Modal Content test without footer', () => { expect(view).toMatchSnapshot(); }); -test('Modal Content Test with header and footer', () => { - const view = shallow( - - This is a ModalBox header - - ); - expect(view).toMatchSnapshot(); -}); - test('Modal Content Test with onclose', () => { const view = shallow( undefined} + onClose={() => undefined} id="id" isOpen > diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx index cc0db775152..d323b6cb489 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx @@ -1,69 +1,60 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import FocusTrap from 'focus-trap-react'; +import * as React from 'react'; + +// Can't use ES6 imports :( +// The types for it are also wrong, we should probably ditch this dependency. +// tslint:disable-next-line +const FocusTrap: any = require('focus-trap-react'); + +import styles from '@patternfly/patternfly/layouts/Bullseye/bullseye.css'; +import { css } from '@patternfly/react-styles'; + +import Backdrop from '../Backdrop/Backdrop'; import ModalBoxBody from './ModalBoxBody'; import ModalBoxHeader from './ModalBoxHeader'; import ModalBoxHCloseButton from './ModalBoxCloseButton'; import ModalBox from './ModalBox'; import ModalBoxFooter from './ModalBoxFooter'; -import Backdrop from '../Backdrop/Backdrop'; -import bullseyeStyle from '@patternfly/patternfly/layouts/Bullseye/bullseye.css'; -import { css } from '@patternfly/react-styles'; -const propTypes = { +export interface ModalContentProps { /** content rendered inside the Modal. */ - children: PropTypes.node.isRequired, + children: React.ReactNode; /** additional classes added to the button */ - className: PropTypes.string, + className?: string; + /** Creates a large version of the Modal */ + isLarge?: boolean; + /** Creates a small version of the Modal */ + isSmall?: boolean; /** Flag to show the modal */ - isOpen: PropTypes.bool, + isOpen?: boolean; /** Content of the Modal Header */ - title: PropTypes.string.isRequired, + title: string; /** Flag to show the title */ - hideTitle: PropTypes.bool, + hideTitle?: boolean; + /** Default width of the content. */ + width?: number | string; /** Content of the Modal Footer */ - actions: PropTypes.any, + actions?: 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, + onClose?(): void; /** id to use for Modal Box description */ - ariaDescribedById: PropTypes.string, + ariaDescribedById?: string; /** id of the ModalBoxBody */ - 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, - isSmall: false, - ariaDescribedById: '' -}; + id: string; +} -const ModalContent = ({ +export const ModalContent: React.FunctionComponent = ({ children, - className, - isOpen, + className = '', + isOpen = false, title, - hideTitle, - actions, - onClose, - isLarge, - isSmall, - width, - ariaDescribedById, - id, + hideTitle = false, + actions = [], + onClose = () => undefined, + isLarge = false, + isSmall = false, + width = -1, + ariaDescribedById = '', + id = '', ...props }) => { const modalBoxHeader = {title} ; @@ -71,11 +62,14 @@ const ModalContent = ({ if (!isOpen) { return null; } + + const boxStyle = width === -1 ? {} : { width }; + return ( - + This is a ModalBox
@@ -14,24 +14,23 @@ exports[`ModalBox Test 1`] = ` exports[`ModalBox Test isLarge 1`] = `
This is a ModalBox
`; -exports[`ModalBox Test isOpen 1`] = ` +exports[`ModalBox Test isSmall 1`] = `
This is a ModalBox
diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap index 3649bb4c14c..7281fa890ad 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxBody.test.tsx.snap @@ -2,7 +2,7 @@ exports[`ModalBoxBody Test 1`] = `
This is a ModalBox header diff --git a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap index 8b0d28b35a9..66ee86ad65a 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap +++ b/packages/patternfly-4/react-core/src/components/Modal/__snapshots__/ModalBoxCloseButton.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ModalBoxCloseButton Test 1`] = ` , + + ]} + > + 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. + + ); + } + + renderSmallModal() { + const {isSmallModalOpen} = 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. + + ); + } + + renderLargeModal() { + const {isLargeModalOpen} = 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. + + ); + } + + renderHalfWidthModal() { + const {isHalfWidthModalOpen} = 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. + + ); + } + + renderNoHeaderModal() { + const {isNoHeaderModalOpen} = this.state; + + return ( + + Close + + ]} + > + + When static text describing the modal is available, it can be wrapped with an ID referring to the modal's + aria-describedby value. + {' '} + 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. + + ); + } + + render() { + + const buttonStyle = { + marginRight: 20, + marginBottom: 20 + }; + + return ( + +
+ + + + + +
+ {this.renderModal()} + {this.renderSmallModal()} + {this.renderLargeModal()} + {this.renderHalfWidthModal()} + {this.renderNoHeaderModal()} + + ); + } +} diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts index 1686c765b48..cc6b29494d2 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts @@ -3,6 +3,7 @@ export * from './AvatarDemo/AvatarDemo'; export * from './BrandDemo/BrandDemo'; export * from './LabelDemo/LabelDemo'; export * from './LoginPageDemo/LoginPageDemo'; +export * from './ModalDemo/ModalDemo'; export * from './NavDemo/NavDemo'; export * from './PopoverDemo/PopoverDemo' export * from './TabsDemo/TabsDemo'; From e2c12712f47846e9038f428342349fde26bf72b7 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Wed, 15 May 2019 13:52:25 -0400 Subject: [PATCH 3/4] Updates per review comments --- .../react-core/src/components/Modal/Modal.md | 1 + .../src/components/Modal/Modal.test.tsx | 3 +- .../react-core/src/components/Modal/Modal.tsx | 37 +++++++++++-------- .../src/components/Modal/ModalBox.test.tsx | 3 +- .../src/components/Modal/ModalBox.tsx | 4 +- .../components/Modal/ModalBoxBody.test.tsx | 3 +- .../src/components/Modal/ModalBoxBody.tsx | 4 +- .../Modal/ModalBoxCloseButton.test.tsx | 2 +- .../components/Modal/ModalBoxCloseButton.tsx | 8 ++-- .../components/Modal/ModalBoxFooter.test.tsx | 2 +- .../src/components/Modal/ModalBoxFooter.tsx | 4 +- .../components/Modal/ModalBoxHeader.test.tsx | 3 +- .../src/components/Modal/ModalBoxHeader.tsx | 4 +- .../components/Modal/ModalContent.test.tsx | 3 +- .../src/components/Modal/ModalContent.tsx | 18 ++++----- 15 files changed, 50 insertions(+), 49 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.md b/packages/patternfly-4/react-core/src/components/Modal/Modal.md index a108a001d10..541d80bc182 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.md +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.md @@ -1,6 +1,7 @@ --- title: 'Modal' cssPrefix: 'pf-c-modal-box' +typescript: true --- import { Modal, Button } from '@patternfly/react-core'; diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx index 10d6b15f8a6..1a9ab0fc512 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.tsx @@ -1,10 +1,11 @@ -import Modal from './Modal'; import * as React from 'react'; import { shallow } from 'enzyme'; import { KEY_CODES } from '../../helpers/constants'; import { css } from '../../../../react-styles/dist/js'; import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css'; +import { Modal } from './Modal'; + jest.spyOn(document, 'createElement'); jest.spyOn(document, 'addEventListener'); diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx index 8faef3b290b..5017b141486 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx @@ -6,7 +6,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/Backdrop/backdrop.css'; import { KEY_CODES } from '../../helpers/constants'; -import ModalContent from './ModalContent'; +import { ModalContent } from './ModalContent'; export interface ModalProps extends React.HTMLProps { /** content rendered inside the Modal. */ @@ -33,18 +33,22 @@ export interface ModalProps extends React.HTMLProps { isSmall?: boolean; } -export class Modal extends React.Component { +interface ModalState { + container: HTMLElement; +} + +export class Modal extends React.Component { static currentId = 0; id = ''; container?: HTMLDivElement = undefined; static defaultProps = { - width: undefined as any, className: '', isOpen: false, hideTitle: false, ariaDescribedById: '', actions: [] as any[], + onClose: () => undefined as any, isLarge: false, isSmall: false }; @@ -53,12 +57,16 @@ export class Modal extends React.Component { super(props); const newId = Modal.currentId++; this.id = `pf-modal-${newId}`; + + this.state = { + container: undefined + }; } handleEscKeyClick = (event: KeyboardEvent): void => { if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) { - this.props.onClose!(); + this.props.onClose(); } }; @@ -72,10 +80,11 @@ export class Modal extends React.Component { }; componentDidMount() { - if (this.container) { - document.body.appendChild(this.container); - } + const container = document.createElement('div'); + this.setState({ container }); + document.body.appendChild(container); document.addEventListener('keydown', this.handleEscKeyClick, false); + if (this.props.isOpen) { document.body.classList.add(css(styles.backdropOpen)); } else { @@ -103,17 +112,15 @@ export class Modal extends React.Component { render() { const { ...props } = this.props; + const { container } = this.state; - if (!canUseDOM) { + if (!canUseDOM || !container) { return null; } - if (!this.container) { - this.container = document.createElement('div'); - } - - return ReactDOM.createPortal(, this.container); + return ReactDOM.createPortal( + , + container + ); } } - -export default Modal; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx index 93b43508b44..1482af99cf2 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.test.tsx @@ -1,7 +1,8 @@ -import ModalBox from './ModalBox'; import * as React from 'react'; import { shallow } from 'enzyme'; +import { ModalBox } from './ModalBox'; + test('ModalBox Test', () => { const view = shallow( diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx index e895e1fa671..dab4bc4cf88 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx @@ -25,7 +25,7 @@ export const ModalBox: React.FunctionComponent = ({ title, id, ...props -}) => ( +}: ModalBoxProps) => (
= ({ {children}
); - -export default ModalBox; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx index 9efeb382a5f..dfc6363197f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.test.tsx @@ -1,7 +1,8 @@ -import ModalBoxBody from './ModalBoxBody'; import * as React from 'react'; import { shallow } from 'enzyme'; +import { ModalBoxBody } from './ModalBoxBody'; + test('ModalBoxBody Test', () => { const view = shallow(This is a ModalBox header); expect(view).toMatchSnapshot(); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx index de536c3675b..522ef0775ac 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx @@ -13,10 +13,8 @@ export const ModalBoxBody: React.FunctionComponent = ({ children = null, className = '', ...props -}) => ( +}: ModalBoxBodyProps) => (
{children}
); - -export default ModalBoxBody; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx index f33ab8b2372..401a27cbb78 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import ModalBoxCloseButton from './ModalBoxCloseButton'; +import { ModalBoxCloseButton } from './ModalBoxCloseButton'; test('ModalBoxCloseButton Test', () => { const mockfn = jest.fn(); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx index 2c815db7424..994c6bf6001 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx @@ -6,19 +6,17 @@ export interface ModalBoxCloseButtonProps { /** additional classes added to the close button */ className?: string; /** A callback for when the close button is clicked */ - onClose?(): void; + onClose?: () => void; } export const ModalBoxCloseButton: React.FunctionComponent = ({ className = '', - onClose = () => undefined, + onClose = () => undefined as any, ...props -}) => ( +}: ModalBoxCloseButtonProps) => ( ); - -export default ModalBoxCloseButton; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx index dff8854b361..9302a0e5e30 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import ModalBoxFooter from './ModalBoxFooter'; +import { ModalBoxFooter } from './ModalBoxFooter'; test('ModalBoxFooter Test', () => { const view = shallow(This is a ModalBox Footer); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx index 6d6b224093c..34342619465 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx @@ -13,10 +13,8 @@ export const ModalBoxFooter: React.FunctionComponent = ({ children = null, className = '', ...props -}) => ( +}: ModalBoxFooterProps) => (
{children}
); - -export default ModalBoxFooter; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx index 28835b57e6f..6910780229f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { shallow } from 'enzyme'; -import ModalBoxHeader from './ModalBoxHeader'; + import {TitleLevel} from '../Title'; +import { ModalBoxHeader } from './ModalBoxHeader'; test('ModalBoxHeader Test', () => { const view = shallow(This is a ModalBox header); diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx index 1f721eb8b9c..e27d8906241 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx @@ -21,7 +21,7 @@ export const ModalBoxHeader: React.FunctionComponent = ({ hideTitle = false, headingLevel = TitleLevel.h1, ...props -}) => { +}: ModalBoxHeaderProps) => { const hidden = hideTitle ? css(accessibleStyles.screenReader) : ''; return ( @@ -32,5 +32,3 @@ export const ModalBoxHeader: React.FunctionComponent = ({ ); }; - -export default ModalBoxHeader; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx index e6e67505353..b342bbb9cd8 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.test.tsx @@ -1,6 +1,7 @@ import* as React from 'react'; import { shallow } from 'enzyme'; -import ModalContent from './ModalContent'; + +import { ModalContent } from './ModalContent'; test('Modal Content Test only body', () => { const view = shallow( diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx index d323b6cb489..8b28b3bb27e 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx @@ -9,11 +9,11 @@ import styles from '@patternfly/patternfly/layouts/Bullseye/bullseye.css'; import { css } from '@patternfly/react-styles'; import Backdrop from '../Backdrop/Backdrop'; -import ModalBoxBody from './ModalBoxBody'; -import ModalBoxHeader from './ModalBoxHeader'; -import ModalBoxHCloseButton from './ModalBoxCloseButton'; -import ModalBox from './ModalBox'; -import ModalBoxFooter from './ModalBoxFooter'; +import { ModalBoxBody } from './ModalBoxBody'; +import { ModalBoxHeader } from './ModalBoxHeader'; +import { ModalBoxCloseButton } from './ModalBoxCloseButton'; +import { ModalBox } from './ModalBox'; +import { ModalBoxFooter } from './ModalBoxFooter'; export interface ModalContentProps { /** content rendered inside the Modal. */ @@ -35,7 +35,7 @@ export interface ModalContentProps { /** Content of the Modal Footer */ actions?: any, /** A callback for when the close button is clicked */ - onClose?(): void; + onClose?: () => void; /** id to use for Modal Box description */ ariaDescribedById?: string; /** id of the ModalBoxBody */ @@ -49,7 +49,7 @@ export const ModalContent: React.FunctionComponent = ({ title, hideTitle = false, actions = [], - onClose = () => undefined, + onClose = () => undefined as any, isLarge = false, isSmall = false, width = -1, @@ -76,7 +76,7 @@ export const ModalContent: React.FunctionComponent = ({ title={title} id={ariaDescribedById || id} > - + {modalBoxHeader} {children} @@ -87,5 +87,3 @@ export const ModalContent: React.FunctionComponent = ({ ); }; - -export default ModalContent; From 793484d424ca17f7ab0ae4cab5f2f7fcd75a5353 Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Fri, 17 May 2019 11:18:10 -0400 Subject: [PATCH 4/4] Further review comment updates --- .../react-core/src/components/Modal/Modal.tsx | 6 +++--- .../react-core/src/components/Modal/ModalBox.tsx | 8 ++++---- .../react-core/src/components/Modal/ModalBoxBody.tsx | 4 ++-- .../src/components/Modal/ModalBoxCloseButton.tsx | 2 +- .../react-core/src/components/Modal/ModalBoxFooter.tsx | 4 ++-- .../react-core/src/components/Modal/ModalBoxHeader.tsx | 8 ++++---- .../react-core/src/components/Modal/ModalContent.tsx | 8 ++++---- 7 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx index 5017b141486..1f8044ec37f 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/Modal.tsx @@ -9,9 +9,9 @@ import { KEY_CODES } from '../../helpers/constants'; import { ModalContent } from './ModalContent'; export interface ModalProps extends React.HTMLProps { - /** content rendered inside the Modal. */ + /** Content rendered inside the Modal. */ children: React.ReactNode; - /** additional classes added to the Modal */ + /** Additional classes added to the Modal */ className?: string; /** Flag to show the modal */ isOpen?: boolean; @@ -19,7 +19,7 @@ export interface ModalProps extends React.HTMLProps { title: string; /** Flag to hide the title */ hideTitle?: boolean; - /** id to use for Modal Box description */ + /** Id to use for Modal Box description */ ariaDescribedById?: string; /** Action buttons to put in the Modal Footer */ actions?: any, diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx index dab4bc4cf88..77dd28737b0 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBox.tsx @@ -3,17 +3,17 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; export interface ModalBoxProps extends React.HTMLProps { - /** content rendered inside the ModalBox. */ + /** Content rendered inside the ModalBox. */ children: React.ReactNode; - /** additional classes added to the ModalBox */ + /** Additional classes added to the ModalBox */ className?: string; /** Creates a large version of the ModalBox */ isLarge?: boolean; /** Creates a small version of the ModalBox. */ isSmall?: boolean; - /** string to use for Modal Box aria-label */ + /** String to use for Modal Box aria-label */ title: string; - /** id to use for Modal Box description */ + /** Id to use for Modal Box description */ id: string; } diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx index 522ef0775ac..ff46c57a751 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxBody.tsx @@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; export interface ModalBoxBodyProps extends React.HTMLProps { - /** content rendered inside the ModalBoxBody */ + /** Content rendered inside the ModalBoxBody */ children?: React.ReactNode; - /** additional classes added to the ModalBoxBody */ + /** Additional classes added to the ModalBoxBody */ className?: string; } diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx index 994c6bf6001..9bbfec8d900 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxCloseButton.tsx @@ -3,7 +3,7 @@ import { Button } from '../Button'; import { TimesIcon } from '@patternfly/react-icons'; export interface ModalBoxCloseButtonProps { - /** additional classes added to the close button */ + /** Additional classes added to the close button */ className?: string; /** A callback for when the close button is clicked */ onClose?: () => void; diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx index 34342619465..16a804c38ee 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxFooter.tsx @@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; export interface ModalBoxFooterProps { - /** content rendered inside the Footer */ + /** Content rendered inside the Footer */ children?: React.ReactNode; - /** additional classes added to the Footer */ + /** Additional classes added to the Footer */ className?: string; } diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx index e27d8906241..4b49783d4ab 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalBoxHeader.tsx @@ -5,14 +5,14 @@ import { css } from '@patternfly/react-styles'; import { Title, TitleLevel } from '../Title'; export interface ModalBoxHeaderProps { - /** content rendered inside the Header */ + /** Content rendered inside the Header */ children?:React.ReactNode; - /** additional classes added to the button */ + /** Additional classes added to the button */ className?: string; /** Flag to hide the title */ hideTitle?: boolean; - /** the heading level to use */ - headingLevel?: TitleLevel; + /** The heading level to use */ + headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; } export const ModalBoxHeader: React.FunctionComponent = ({ diff --git a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx index 8b28b3bb27e..3818d9773b2 100644 --- a/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx +++ b/packages/patternfly-4/react-core/src/components/Modal/ModalContent.tsx @@ -16,9 +16,9 @@ import { ModalBox } from './ModalBox'; import { ModalBoxFooter } from './ModalBoxFooter'; export interface ModalContentProps { - /** content rendered inside the Modal. */ + /** Content rendered inside the Modal. */ children: React.ReactNode; - /** additional classes added to the button */ + /** Additional classes added to the button */ className?: string; /** Creates a large version of the Modal */ isLarge?: boolean; @@ -36,9 +36,9 @@ export interface ModalContentProps { actions?: any, /** A callback for when the close button is clicked */ onClose?: () => void; - /** id to use for Modal Box description */ + /** Id to use for Modal Box description */ ariaDescribedById?: string; - /** id of the ModalBoxBody */ + /** Id of the ModalBoxBody */ id: string; }