From 718c1dfa29ce29998294a49aa09f5a6cbba4d160 Mon Sep 17 00:00:00 2001
From: streamich <streamich@gmail.com>
Date: Thu, 4 Apr 2019 19:33:26 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20don't=20blur=20elements?=
 =?UTF-8?q?=20with=20data-modal-ignore=20attribute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/en/Modal.md              |  2 ++
 src/Modal/__story__/story.tsx | 18 +++++++++++++++---
 src/Modal/index.ts            | 10 ++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/docs/en/Modal.md b/docs/en/Modal.md
index d1330a7d..b3867cf6 100644
--- a/docs/en/Modal.md
+++ b/docs/en/Modal.md
@@ -56,3 +56,5 @@ Accepts all [`<Overlay>`](./Overlay.md) props in addition to:
 - `close()` &mdash; method to calle `onClose` event.
 - `idTitle` &mdash; id to set for aria title element.
 - `idDescription` &mdash; id to set for aria description element.
+
+Root nodes with `data-modal-ignore` attribute will not be dirty mutated (to create blur effect).
diff --git a/src/Modal/__story__/story.tsx b/src/Modal/__story__/story.tsx
index 759d1dad..e6e113cc 100644
--- a/src/Modal/__story__/story.tsx
+++ b/src/Modal/__story__/story.tsx
@@ -1,9 +1,11 @@
 import {createElement as h} from 'react';
+import {createPortal} from 'react-dom';
 import {storiesOf} from '@storybook/react';
 import {action} from '@storybook/addon-actions';
 import {Modal} from '..';
 import {Toggle} from '../../Toggle';
 import ShowDocs from '../../ShowDocs'
+import {AfterTimeout} from '../../AfterTimeout';
 
 storiesOf('UI/Modal', module)
   .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Modal.md')}))
@@ -17,9 +19,19 @@ storiesOf('UI/Modal', module)
   .add('Button underneath', () =>
     <div>
       <button onClick={() => alert('CLICKED')}>Click me!</button>
-      <Modal>
-        foobar
-      </Modal>
+      {createPortal(
+        <button onClick={() => alert('CLICKED')}>This should be blurred</button>,
+        document.body
+      )}
+      {createPortal(
+        <button data-modal-ignore="" onClick={() => alert('CLICKED')}>This element should not be blurred</button>,
+        document.body
+      )}
+      <AfterTimeout>
+        <Modal>
+          foobar
+        </Modal>
+      </AfterTimeout>
     </div>
   )
   .add('With inputs', () =>
diff --git a/src/Modal/index.ts b/src/Modal/index.ts
index ac536206..3ca269da 100644
--- a/src/Modal/index.ts
+++ b/src/Modal/index.ts
@@ -7,6 +7,8 @@ import {Overlay, IOverlayProps} from '../Overlay';
 let id = 0;
 const ESC = 27;
 
+const ignoreAttribute = 'data-modal-ignore';
+
 export interface IModalProps extends IOverlayProps {
   blur?: number;
   dontLockFocus?: boolean;
@@ -57,6 +59,10 @@ export class Modal extends Component<IModalProps, IModalState> {
       const sibling = siblings[i] as HTMLElement;
       const sib = sibling as any;
 
+      if (sibling.hasAttribute(ignoreAttribute)) {
+        continue;
+      }
+
       if (sibling === this.el) {
         continue;
       }
@@ -101,6 +107,10 @@ export class Modal extends Component<IModalProps, IModalState> {
     for (let i = 0; i < siblings.length; i++) {
       const sibling = siblings[i] as HTMLElement;
 
+      if (sibling.hasAttribute(ignoreAttribute)) {
+        continue;
+      }
+
       if (sibling === el) {
         continue;
       }