feat(Modal): Convert Modal component to typescript #1942
Conversation
|
PatternFly-React preview: https://1942-pr-patternfly-react-patternfly.surge.sh |
Codecov Report
@@ Coverage Diff @@
## master #1942 +/- ##
==========================================
- Coverage 81.9% 81.84% -0.07%
==========================================
Files 628 628
Lines 7053 7112 +59
Branches 201 236 +35
==========================================
+ Hits 5777 5821 +44
+ Misses 1167 1163 -4
- Partials 109 128 +19
Continue to review full report at Codecov.
|
|
@jeff-phillips-18 can you also add integration tests for this component as outlined on this README? |
da525b0 to
13902ff
Compare
|
Added integration tests and demo page |
13902ff to
2fce11a
Compare
| /** A callback for when the close button is clicked */ | ||
| onClose: PropTypes.func, | ||
| onClose?(): void; |
There was a problem hiding this comment.
Nitpicky, but we've been doing onClose?: () => void. Sometimes different docgen versions pick it up differently.
| container?: HTMLDivElement = undefined; | ||
|
|
||
| static defaultProps = { | ||
| width: undefined as any, |
There was a problem hiding this comment.
Can remove this line, width is by default undefined.
| constructor(props: ModalProps) { | ||
| super(props); | ||
| const newId = Modal.currentId++; | ||
| this.id = `pf-modal-${newId}`; |
There was a problem hiding this comment.
For AboutModal, I added this to state for lifecycle purposes instead of just this. Perhaps we should be consistent?
There was a problem hiding this comment.
Personally I prefer it to just be an instance variable than on state. To me, the id is not stateful.
| if (event.keyCode === KEY_CODES.ESCAPE_KEY && this.props.isOpen) { | ||
| this.props.onClose(); | ||
| this.props.onClose!(); |
There was a problem hiding this comment.
Let's set onClose = () => undefined as any in defaultProps (if we can) and avoid the ugly shebang!
| } | ||
| } | ||
| }; | ||
|
|
||
| componentDidMount() { | ||
| document.body.appendChild(this.container); | ||
| if (this.container) { |
There was a problem hiding this comment.
I initialized the container here in AboutModal which makes more sense to do than in render() IMO. That way we don't rely on render being called before componentDidMount. See my AboutModal PR.
| isLarge: PropTypes.bool, | ||
| /** Creates a small version of the Modal */ | ||
| isSmall: PropTypes.bool, | ||
| onClose?(): void; |
| @@ -94,7 +88,4 @@ const ModalContent = ({ | |||
| ); | |||
| }; | |||
|
|
|||
| ModalContent.propTypes = propTypes; | |||
| ModalContent.defaultProps = defaultProps; | |||
|
|
|||
| export default ModalContent; | |||
| id, | ||
| hideTitle = false, | ||
| actions = [], | ||
| onClose = () => undefined, |
There was a problem hiding this comment.
Probably will need to change to () => undefined as any
| onClose = () => undefined, | ||
| isLarge = false, | ||
| isSmall = false, | ||
| width = -1, |
There was a problem hiding this comment.
I appreciate this instead of null.
| cy.get('#showDefaultModalButton').then((modalButton: JQuery<HTMLButtonElement>) => { | ||
| cy.wrap(modalButton).click(); | ||
| cy.get('.pf-c-modal-box').then(() => { | ||
| cy.get('.pf-c-modal-box .pf-c-button[aria-label="Close"]').then(closeButton => { |
There was a problem hiding this comment.
Great tests. Thanks a lot!
9fd7dee to
163d17c
Compare
163d17c to
d6c773d
Compare
| import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; | ||
|
|
||
| export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> { | ||
| /** content rendered inside the ModalBox. */ |
There was a problem hiding this comment.
We have been updating our docs to use sentence case. Can you please update these comments.
| import styles from '@patternfly/patternfly/components/ModalBox/modal-box.css'; | ||
|
|
||
| export interface ModalBoxBodyProps extends React.HTMLProps<HTMLDivElement> { | ||
| /** content rendered inside the ModalBoxBody */ |
There was a problem hiding this comment.
Same comment about Sentence case here and for all other exported interfaces.
| /** Flag to hide the title */ | ||
| hideTitle?: boolean; | ||
| /** the heading level to use */ | ||
| headingLevel?: TitleLevel; |
There was a problem hiding this comment.
We should be using a union of the strings here as was decided upon by the team.
d6c773d to
793484d
Compare
What: Convert Modal component to typescript
Additional issues: Allows specification of heading level on the ModalBoxHeader
Fixes #1736, #1996