From c3e06ab38cb5cca8affe6d74292a676ba421b9c5 Mon Sep 17 00:00:00 2001
From: Kaushik Varanasi <kaushik.varanasi1@gmail.com>
Date: Sat, 12 May 2018 15:30:54 +0530
Subject: [PATCH] [added] additional data attributes.

---
 docs/README.md                |  6 ++++++
 specs/Modal.spec.js           | 11 +++++++++++
 src/components/Modal.js       |  1 +
 src/components/ModalPortal.js |  9 +++++----
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index cce49269..ab274454 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -112,6 +112,12 @@ import ReactModal from 'react-modal';
     labelledby: "heading",
     describedby: "full_description"
   }}
+  /*
+    Additional data attributes (optional).
+  */
+  data={{
+    background: "green"
+  }}
   /*
     Overlay ref callback.
   */
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index ff8d7056..5fd1b1c2 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -393,6 +393,17 @@ export default () => {
     unmountModal();
   });
 
+  it("additional data attributes", () => {
+    const modal = renderModal(
+      { isOpen: true, data: { background: "green" } },
+      "hello"
+    );
+    mcontent(modal)
+      .getAttribute("data-background")
+      .should.be.eql("green");
+    unmountModal();
+  });
+
   it("raises an exception if the appElement selector does not match", () => {
     should(() => ariaAppHider.setElement(".test")).throw();
   });
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 34d871c0..550cff12 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -60,6 +60,7 @@ class Modal extends Component {
     shouldReturnFocusAfterClose: PropTypes.bool,
     parentSelector: PropTypes.func,
     aria: PropTypes.object,
+    data: PropTypes.object,
     role: PropTypes.string,
     contentLabel: PropTypes.string,
     shouldCloseOnEsc: PropTypes.bool,
diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index c48b8241..fca33769 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -51,6 +51,7 @@ export default class ModalPortal extends Component {
     role: PropTypes.string,
     contentLabel: PropTypes.string,
     aria: PropTypes.object,
+    data: PropTypes.object,
     children: PropTypes.node,
     shouldCloseOnEsc: PropTypes.bool,
     overlayRef: PropTypes.func,
@@ -315,9 +316,9 @@ export default class ModalPortal extends Component {
       : className;
   };
 
-  ariaAttributes = items =>
+  attributesFromObject = (prefix, items) =>
     Object.keys(items).reduce((acc, name) => {
-      acc[`aria-${name}`] = items[name];
+      acc[`${prefix}-${name}`] = items[name];
       return acc;
     }, {});
 
@@ -346,8 +347,8 @@ export default class ModalPortal extends Component {
           onClick={this.handleContentOnClick}
           role={this.props.role}
           aria-label={this.props.contentLabel}
-          {...this.ariaAttributes(this.props.aria || {})}
-          data-testid={this.props.testId}
+          {...this.attributesFromObject("aria", this.props.aria || {})}
+          {...this.attributesFromObject("data", this.props.data || {})}
         >
           {this.props.children}
         </div>