From 7ec4af463c52ee140cb1e859747cf1baeb9b5b8a Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Tue, 16 Jun 2020 22:34:45 +0300
Subject: [PATCH 1/3] fix(docs): zoom in behavior with modal

---
 storybook/tag-reset.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/storybook/tag-reset.css b/storybook/tag-reset.css
index e90d6008..43507efe 100644
--- a/storybook/tag-reset.css
+++ b/storybook/tag-reset.css
@@ -5,3 +5,7 @@
   border-radius: 0;
   display: inline;
 }
+
+html {
+  height: 100%;
+}
\ No newline at end of file

From 6f3022ca1de3620d3404fb7efe9421135442b3f0 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Tue, 16 Jun 2020 22:47:34 +0300
Subject: [PATCH 2/3] fix(docs): add control button to modal

---
 src/components/Modal/Modal.stories.js | 81 +++++++++++++++++----------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/src/components/Modal/Modal.stories.js b/src/components/Modal/Modal.stories.js
index 3a1fb309..37735854 100644
--- a/src/components/Modal/Modal.stories.js
+++ b/src/components/Modal/Modal.stories.js
@@ -10,32 +10,42 @@ export default {
   component: Modal,
 };
 
-export const defaultStory = () => (
-  <Modal isOpen data-e2e-id="default-modal">
-    <CustomBackground>
+export const defaultStory = () => {
+  return (
+    <React.Fragment>
+      <Modal id="ID_modal_default" data-e2e-id="default-modal">
+        <CustomBackground>
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
+          <br />
       XXXXXXXXXX
-      <br />
-    </CustomBackground>
-  </Modal>
-);
+          <br />
+        </CustomBackground>
+      </Modal>
+
+      <ModalContext.Consumer>
+        { ({ openModal }) => (
+          <Button onClick={ () => openModal('ID_modal_default') }>Open modal</Button>
+        ) }
+      </ModalContext.Consumer>
+    </React.Fragment>
+  );
+};
 
 defaultStory.story = {
   name: 'default',
@@ -43,33 +53,39 @@ defaultStory.story = {
 
 export const withMultipleModals = () => (
   <React.Fragment>
-    <Modal isOpen>
+    <Modal id="ID_withMultipleModals_first" >
       <CustomBackground>
-        XXXXXXXXXX
+        First modal
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
-        XXXXXXXXXX
+        XXXXXXXXXXXXXXXXXXXX
         <br />
+        <ModalContext.Consumer>
+          { ({ openModal }) => (
+            <Button onClick={ () => openModal('ID_withMultipleModals_second') }>Open second modal</Button>
+          ) }
+        </ModalContext.Consumer>
       </CustomBackground>
     </Modal>
-    <Modal isOpen data-e2e-id="multiple-modal">
+
+    <Modal id="ID_withMultipleModals_second" data-e2e-id="multiple-modal">
       <CustomBackground>
-        00000
+        Second modal
         <br />
         00000
         <br />
@@ -81,6 +97,11 @@ export const withMultipleModals = () => (
         <br />
       </CustomBackground>
     </Modal>
+    <ModalContext.Consumer>
+      { ({ openModal }) => (
+        <Button onClick={ () => openModal('ID_withMultipleModals_first') }>Open modal</Button>
+      ) }
+    </ModalContext.Consumer>
   </React.Fragment>
 );
 
@@ -118,7 +139,7 @@ export const withState = () => (
     </Modal>
     <ModalContext.Consumer>
       { ({ openModal }) => (
-        <Button onClick={ () => openModal('ID', { foo: '00', bar: '00' }) }>Open</Button>
+        <Button onClick={ () => openModal('ID', { foo: '00', bar: '00' }) }>Open modal</Button>
       ) }
     </ModalContext.Consumer>
   </React.Fragment>

From e8852676d8470f222b1045713e9c6be624e1eb0a Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Tue, 16 Jun 2020 23:21:52 +0300
Subject: [PATCH 3/3] fix(docs): add contril button to dialog

---
 src/components/Dialog/Dialog.stories.js | 239 ++++++++++++++++--------
 1 file changed, 160 insertions(+), 79 deletions(-)

diff --git a/src/components/Dialog/Dialog.stories.js b/src/components/Dialog/Dialog.stories.js
index 64134b88..72932070 100644
--- a/src/components/Dialog/Dialog.stories.js
+++ b/src/components/Dialog/Dialog.stories.js
@@ -8,20 +8,36 @@ export default {
 };
 
 export const defaultStory = () => (
-  <Dialog size="sm" isOpen data-e2e-id="default-dialog">
-    <Dialog.Header title="Mark Job as Completed" />
-    <Dialog.Body>
-      <Paragraph>
-        Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
-      </Paragraph>
-    </Dialog.Body>
-    <Dialog.Footer>
-      <Button color="neutral" variant="outlined">
-        Cancel
-      </Button>
-      <Button type="submit">Apply</Button>
-    </Dialog.Footer>
-  </Dialog>
+  <ModalContext.Consumer>
+    { ({ openModal, closeModal }) => (
+      <React.Fragment>
+        <Dialog
+          size="sm"
+          onClose={ () => closeModal('default-dialog-id') }
+          id="default-dialog-id"
+          data-e2e-id="default-dialog"
+        >
+          { ({ onClose }) => (
+            <React.Fragment>
+              <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+              <Dialog.Body>
+                <Paragraph>
+                  Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                </Paragraph>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Button color="neutral" variant="outlined" onClick={ onClose }>
+                  Cancel
+                </Button>
+                <Button type="submit" onClick={ onClose }>Apply</Button>
+              </Dialog.Footer>
+            </React.Fragment>
+          ) }
+        </Dialog>
+        <Button onClick={ () => openModal('default-dialog-id') }>Open default dialog</Button>
+      </React.Fragment>
+    ) }
+  </ModalContext.Consumer>
 );
 
 defaultStory.story = {
@@ -29,20 +45,37 @@ defaultStory.story = {
 };
 
 export const withStretch = () => (
-  <Dialog stretch size="sm" isOpen data-e2e-id="default-dialog">
-    <Dialog.Header title="Mark Job as Completed" />
-    <Dialog.Body>
-      <Paragraph>
-        Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
-      </Paragraph>
-    </Dialog.Body>
-    <Dialog.Footer>
-      <Button color="neutral" variant="outlined">
-        Cancel
-      </Button>
-      <Button type="submit">Apply</Button>
-    </Dialog.Footer>
-  </Dialog>
+  <ModalContext.Consumer>
+    { ({ openModal, closeModal }) => (
+      <React.Fragment>
+        <Dialog
+          stretch
+          size="sm"
+          onClose={ () => closeModal('withStretch-dialog-id') }
+          id="withStretch-dialog-id"
+          data-e2e-id="default-dialog"
+        >
+          { ({ onClose }) => (
+            <React.Fragment>
+              <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+              <Dialog.Body>
+                <Paragraph>
+                  Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                </Paragraph>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Button color="neutral" variant="outlined" onClick={ onClose }>
+                  Cancel
+                </Button>
+                <Button type="submit" onClick={ onClose }>Apply</Button>
+              </Dialog.Footer>
+            </React.Fragment>
+          ) }
+        </Dialog>
+        <Button onClick={ () => openModal('withStretch-dialog-id') }>Open dialog with stretch</Button>
+      </React.Fragment>
+    ) }
+  </ModalContext.Consumer>
 );
 
 withStretch.story = {
@@ -50,20 +83,35 @@ withStretch.story = {
 };
 
 export const withLargeSize = () => (
-  <Dialog size="xl" isOpen data-e2e-id="default-dialog">
-    <Dialog.Header title="Mark Job as Completed" />
-    <Dialog.Body>
-      <Paragraph>
-        Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
-      </Paragraph>
-    </Dialog.Body>
-    <Dialog.Footer>
-      <Button color="neutral" variant="outlined">
-        Cancel
-      </Button>
-      <Button type="submit">Apply</Button>
-    </Dialog.Footer>
-  </Dialog>
+  <ModalContext.Consumer>
+    { ({ openModal, closeModal }) => (
+      <React.Fragment>
+        <Dialog size="xl"
+          onClose={ () => closeModal('withLargeSize-dialog-id') }
+          id="withLargeSize-dialog-id"
+          data-e2e-id="default-dialog"
+        >
+          { ({ onClose }) => (
+            <React.Fragment>
+              <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+              <Dialog.Body>
+                <Paragraph>
+                  Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                </Paragraph>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Button color="neutral" variant="outlined" onClick={ onClose }>
+                  Cancel
+                </Button>
+                <Button type="submit" onClick={ onClose }>Apply</Button>
+              </Dialog.Footer>
+            </React.Fragment>
+          ) }
+        </Dialog>
+        <Button onClick={ () => openModal('withLargeSize-dialog-id') }>Open dialog with large size</Button>
+      </React.Fragment>
+    ) }
+  </ModalContext.Consumer>
 );
 
 withLargeSize.story = {
@@ -71,24 +119,40 @@ withLargeSize.story = {
 };
 
 export const withScroll = () => (
-  <Dialog size="sm" isOpen data-e2e-id="default-dialog">
-    <Dialog.Header title="Mark Job as Completed" />
-    <Dialog.Body scrollable>
-      <Column>
-        { new Array(100).fill('').map(() => (
-          <Paragraph key="">
-            Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
-          </Paragraph>
-        )) }
-      </Column>
-    </Dialog.Body>
-    <Dialog.Footer>
-      <Button color="neutral" variant="outlined">
-        Cancel
-      </Button>
-      <Button type="submit">Apply</Button>
-    </Dialog.Footer>
-  </Dialog>
+  <ModalContext.Consumer>
+    { ({ openModal, closeModal }) => (
+      <React.Fragment>
+        <Dialog
+          size="sm"
+          onClose={ () => closeModal('withScroll-dialog-id') }
+          id="withScroll-dialog-id"
+          data-e2e-id="default-dialog"
+        >
+          { ({ onClose }) => (
+            <React.Fragment>
+              <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+              <Dialog.Body scrollable>
+                <Column>
+                  { new Array(100).fill('').map(() => (
+                    <Paragraph key="">
+                      Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                    </Paragraph>
+                  )) }
+                </Column>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Button color="neutral" variant="outlined" onClick={ onClose }>
+                  Cancel
+                </Button>
+                <Button type="submit" onClick={ onClose }>Apply</Button>
+              </Dialog.Footer>
+            </React.Fragment>
+          ) }
+        </Dialog>
+        <Button onClick={ () => openModal('withScroll-dialog-id') }>Open dialog with scroll</Button>
+      </React.Fragment>
+    ) }
+  </ModalContext.Consumer>
 );
 
 withScroll.story = {
@@ -96,27 +160,44 @@ withScroll.story = {
 };
 
 export const withStretchScroll = () => (
-  <Dialog size="sm" isOpen data-e2e-id="default-dialog" stretch>
-    <Dialog.Header title="Mark Job as Completed" />
-    <Dialog.Body scrollable>
-      <Column>
-        { new Array(100).fill('').map(() => (
-          <Paragraph key="">
-            Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
-          </Paragraph>
-        )) }
-      </Column>
-    </Dialog.Body>
-    <Dialog.Footer>
-      <Button color="neutral" variant="outlined">
-        Cancel
-      </Button>
-      <Button type="submit">Apply</Button>
-    </Dialog.Footer>
-  </Dialog>
+  <ModalContext.Consumer>
+    { ({ openModal, closeModal }) => (
+      <React.Fragment>
+        <Dialog
+          stretch
+          size="sm"
+          onClose={ () => closeModal('withStretchScroll-dialog-id') }
+          id="withStretchScroll-dialog-id"
+          data-e2e-id="default-dialog"
+        >
+          { ({ onClose }) => (
+            <React.Fragment>
+              <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+              <Dialog.Body scrollable>
+                <Column>
+                  { new Array(100).fill('').map(() => (
+                    <Paragraph key="">
+                      Fagelia cancrivorous Nahor Curucaneca Echinocaris intrafissural glassful agronomics
+                    </Paragraph>
+                  )) }
+                </Column>
+              </Dialog.Body>
+              <Dialog.Footer>
+                <Button color="neutral" variant="outlined" onClick={ onClose }>
+                  Cancel
+                </Button>
+                <Button type="submit" onClick={ onClose }>Apply</Button>
+              </Dialog.Footer>
+            </React.Fragment>
+          ) }
+        </Dialog>
+        <Button onClick={ () => openModal('withStretchScroll-dialog-id') }>Open dialog with stretch scroll</Button>
+      </React.Fragment>
+    ) }
+  </ModalContext.Consumer>
 );
 
-withScroll.story = {
+withStretchScroll.story = {
   name: 'with stretch scroll',
 };