Skip to content

Commit

Permalink
Version 4 (#314)
Browse files Browse the repository at this point in the history 
* Cleanup a bit using react fragments

* Add new ARIA role prop that default to `diablog`

* Add ariaLabelledby and ariaDescribedby props

* Add typescript definitions

* Fix tests

* Update README.md

* Fix tests

* `focusTrapped` default value is now true

* Fix tests

* Use the last react portal api and remove react-lifecycles-compat and react-minimalist-portal

* Update 📷

* Update package size limit

* Fix issue which was blocking the scroll

* Fix for the container prop

* Update README
  • Loading branch information
@pradel
pradel committed May 8, 2019
1 parent f94bbee commit 8028b3c
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 270 deletions.
9 changes: 8 additions & 1 deletion README.md
View file
Expand Up @@ -5,8 +5,9 @@
[![codecov](https://img.shields.io/codecov/c/github/pradel/react-responsive-modal/master.svg)](https://codecov.io/gh/pradel/react-responsive-modal)
[![dependencies Status](https://david-dm.org/pradel/react-responsive-modal/status.svg)](https://david-dm.org/pradel/react-responsive-modal)

A simple responsive react modal compatible with React 15, 16 and ready for React 17.
A simple responsive and accessible react modal compatible with React 16 and ready for React 17.

- Focus trap inside the modal.
- Centered modals.
- Scrolling modals.
- Multiple modals.
Expand Down Expand Up @@ -98,6 +99,12 @@ ReactDOM.render(<App />, document.getElementById('app'));
| blockScroll | `bool` | `true` | Whether to block scrolling when dialog is open |
| focusTrapped | `bool` | `false` | When the modal is open, trap focus within it |
| focusTrapOptions | `object` | | Options to be passed to the focus trap, details available at https://github.com/davidtheclark/focus-trap#focustrap--createfocustrapelement-createoptions |
| overlayId | `string` | `null` | id attribute for overlay |
| modalId | `string` | `null` | id attribute for modal |
| closeIconId | `string` | `null` | id attribute for close icon |
| role | `string` | `'dialog'` | ARIA role for modal |
| ariaLabelledby | `string` | | ARIA label for modal |
| ariaDescribedby | `string` | | ARIA description for modal |

<!-- --end-insert-props-- -->

Expand Down
198 changes: 104 additions & 94 deletions __tests__/__snapshots__/modal.js.snap
View file
Expand Up @@ -19,7 +19,6 @@ exports[`modal render should render the content 1`] = `
"transitionExitActive": "test-react-responsive-modal-transition-exit-active",
}
}
closeIconId={null}
closeIconSize={28}
closeIconSvgPath={
<path
Expand All @@ -29,28 +28,25 @@ exports[`modal render should render the content 1`] = `
closeOnEsc={true}
closeOnOverlayClick={true}
focusTrapOptions={Object {}}
focusTrapped={false}
modalId={null}
focusTrapped={true}
onClose={[MockFunction]}
onEntered={null}
onEscKeyDown={null}
onExited={null}
onOverlayClick={null}
open={true}
overlayId={null}
role="dialog"
showCloseIcon={true}
styles={Object {}}
>
<Portal>
<Portal
containerInfo={
<div>
<Portal
containerInfo={
<div>
<div
class="test-react-responsive-modal-overlay test-react-responsive-modal-transition-enter test-react-responsive-modal-transition-enter-active"
>
<div
class="test-react-responsive-modal-overlay test-react-responsive-modal-transition-enter test-react-responsive-modal-transition-enter-active"
aria-modal="true"
class="test-react-responsive-modal-modal"
role="dialog"
>
<div
class="test-react-responsive-modal-modal"
>
<div>
<div>
modal content
</div>
Expand All @@ -72,103 +68,117 @@ exports[`modal render should render the content 1`] = `
</div>
</div>
</div>
</div>
}
>
<CSSTransition
appear={true}
classNames={
Object {
"appear": "test-react-responsive-modal-transition-enter",
"appearActive": "test-react-responsive-modal-transition-enter-active",
"enter": "test-react-responsive-modal-transition-enter",
"enterActive": "test-react-responsive-modal-transition-enter-active",
"exit": "test-react-responsive-modal-transition-exit",
"exitActive": "test-react-responsive-modal-transition-exit-active",
}
}
in={true}
onEntered={[Function]}
onExited={[Function]}
timeout={50}
>
<CSSTransition
<Transition
appear={true}
classNames={
Object {
"appear": "test-react-responsive-modal-transition-enter",
"appearActive": "test-react-responsive-modal-transition-enter-active",
"enter": "test-react-responsive-modal-transition-enter",
"enterActive": "test-react-responsive-modal-transition-enter-active",
"exit": "test-react-responsive-modal-transition-exit",
"exitActive": "test-react-responsive-modal-transition-exit-active",
}
}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={50}
unmountOnExit={false}
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={50}
unmountOnExit={false}
<div
className="test-react-responsive-modal-overlay"
onClick={[Function]}
>
<div
className="test-react-responsive-modal-overlay"
id={null}
aria-modal="true"
className="test-react-responsive-modal-modal"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
role="dialog"
>
<div
className="test-react-responsive-modal-modal"
id={null}
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
<FocusTrap
_createFocusTrap={[Function]}
active={true}
focusTrapOptions={
Object {
"clickOutsideDeactivates": true,
}
}
paused={false}
tag="div"
>
<div>
modal content
</div>
<CloseIcon
classNames={Object {}}
classes={
Object {
"closeButton": "test-react-responsive-modal-close-button",
"closeIcon": "test-react-responsive-modal-close-icon",
"modal": "test-react-responsive-modal-modal",
"overlay": "test-react-responsive-modal-overlay",
"overlayCenter": "test-react-responsive-modal-overlay-center",
"transitionEnter": "test-react-responsive-modal-transition-enter",
"transitionEnterActive": "test-react-responsive-modal-transition-enter-active",
"transitionExit": "test-react-responsive-modal-transition-exit",
"transitionExitActive": "test-react-responsive-modal-transition-exit-active",
<div>
modal content
</div>
<CloseIcon
classNames={Object {}}
classes={
Object {
"closeButton": "test-react-responsive-modal-close-button",
"closeIcon": "test-react-responsive-modal-close-icon",
"modal": "test-react-responsive-modal-modal",
"overlay": "test-react-responsive-modal-overlay",
"overlayCenter": "test-react-responsive-modal-overlay-center",
"transitionEnter": "test-react-responsive-modal-transition-enter",
"transitionEnterActive": "test-react-responsive-modal-transition-enter-active",
"transitionExit": "test-react-responsive-modal-transition-exit",
"transitionExitActive": "test-react-responsive-modal-transition-exit-active",
}
}
}
closeIconSize={28}
closeIconSvgPath={
<path
d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"
/>
}
id={null}
onClickCloseIcon={[Function]}
styles={Object {}}
>
<button
className="test-react-responsive-modal-close-button"
id={null}
onClick={[Function]}
>
<svg
className="test-react-responsive-modal-close-icon"
height={28}
viewBox="0 0 36 36"
width={28}
xmlns="http://www.w3.org/2000/svg"
>
closeIconSize={28}
closeIconSvgPath={
<path
d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"
/>
</svg>
</button>
</CloseIcon>
</div>
}
id={null}
onClickCloseIcon={[Function]}
styles={Object {}}
>
<button
className="test-react-responsive-modal-close-button"
id={null}
onClick={[Function]}
>
<svg
className="test-react-responsive-modal-close-icon"
height={28}
viewBox="0 0 36 36"
width={28}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"
/>
</svg>
</button>
</CloseIcon>
</div>
</FocusTrap>
</div>
</Transition>
</CSSTransition>
</Portal>
</div>
</Transition>
</CSSTransition>
</Portal>
</Modal>
`;
7 changes: 6 additions & 1 deletion __tests__/modal.js
View file
Expand Up @@ -137,7 +137,12 @@ describe('modal', () => {
describe('closeIcon', () => {
it('should hide closeIcon when showCloseIcon is false', () => {
const wrapper = mount(
<Modal {...defaultProps} open showCloseIcon={false}>
<Modal
{...defaultProps}
open
showCloseIcon={false}
focusTrapped={false}
>
<div>modal content</div>
</Modal>
);
Expand Down
3 changes: 2 additions & 1 deletion docs/index.mdx
View file
Expand Up @@ -9,8 +9,9 @@ import Modal from '../src/modal.js';

# react-responsive-modal

A simple responsive react modal compatible with React 15, 16 and ready for React 17.
A simple responsive and accessible react modal compatible with React 16 and ready for React 17.

- Focus trap inside the modal.
- Centered modals.
- Scrolling modals.
- Multiple modals.
Expand Down
14 changes: 6 additions & 8 deletions package.json
View file
@@ -1,7 +1,7 @@
{
"name": "react-responsive-modal",
"version": "3.6.0",
"description": "A simple responsive react modal",
"description": "A simple responsive and accessible react modal",
"main": "lib/index.js",
"module": "lib/index.es.js",
"jsnext:main": "lib/index.es.js",
Expand Down Expand Up @@ -59,21 +59,19 @@
"focus-trap-react": "^4.0.1",
"no-scroll": "^2.1.1",
"prop-types": "^15.6.2",
"react-lifecycles-compat": "^3.0.4",
"react-minimalist-portal": "^2.3.1",
"react-transition-group": "^2.4.0"
"react-transition-group": "^4.0.0"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0"
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"devDependencies": {
"@babel/cli": "7.4.4",
"@babel/core": "7.4.4",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/preset-env": "7.4.4",
"@babel/preset-react": "7.0.0",
"@types/react": "16.8.16",
"@types/react": "16.8.17",
"@types/react-dom": "16.8.4",
"babel-eslint": "10.0.1",
"babel-jest": "24.8.0",
Expand Down Expand Up @@ -111,7 +109,7 @@
"size-limit": [
{
"path": "lib/index.js",
"limit": "9 KB"
"limit": "8 KB"
}
],
"license": "MIT"
Expand Down

0 comments on commit 8028b3c

Please sign in to comment.