From c1e6bc0f84ea5d894f6e1f2b0fcf999eaca50756 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 10:29:59 -0400
Subject: [PATCH 1/7] Adjust positioning of modal close button

---
 styles/components/_modal.scss | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 8893338b..60d97865 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -52,9 +52,19 @@ $fixed-footer-height: 5rem + ($gap * 4);
 
       .modal__dismiss {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: $gap;
+        right: $gap;
         width: 8rem;
+
+        @include media($medium-screen) {
+          top: $gap * 2;
+          right: $gap * 2;
+        }
+
+        @include media($large-screen) {
+          top: $gap * 4;
+          right: $gap * 4;
+        }
       }
 
       .block-list {

From 27b03eea04d7ff9e32d5d8e84b4f5702821a17b0 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:44:59 -0400
Subject: [PATCH 2/7] Emit and respond to a modalOpen event, which
 conditionally adds a class to the body

---
 js/index.js        | 10 ++++++++++
 js/mixins/modal.js |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/js/index.js b/js/index.js
index 2d195ce8..653038f4 100644
--- a/js/index.js
+++ b/js/index.js
@@ -41,8 +41,18 @@ const app = new Vue({
     CcpoApproval,
     LocalDatetime
   },
+
   mounted: function() {
+    this.$on('modalOpen', isOpen => {
+      if (isOpen) {
+        document.body.className += ' modal-open'
+      } else {
+        document.body.className = document.body.className.replace(' modal-open', '')
+      }
+    })
+
     const modalOpen = document.querySelector("#modalOpen")
+
     if (modalOpen) {
       const modal = modalOpen.getAttribute("data-modal")
       this.openModal(modal)
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
index 4f6af652..bb2bba05 100644
--- a/js/mixins/modal.js
+++ b/js/mixins/modal.js
@@ -2,9 +2,11 @@ export default {
   methods: {
     closeModal: function(name) {
       this.modals[name] = false
+      this.$emit('modalOpen', false)
     },
     openModal: function (name) {
       this.modals[name] = true
+      this.$emit('modalOpen', true)
     }
   },
   data: function() {

From a4d303cefdbe014b352ae5ae6ee416348b579656 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:45:17 -0400
Subject: [PATCH 3/7] Hide the bodys overflow when a modal is open so it doesnt
 scroll

---
 styles/components/_modal.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 60d97865..aa0b1c44 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -1,5 +1,11 @@
 $fixed-footer-height: 5rem + ($gap * 4);
 
+body {
+  &.modal-open {
+    overflow-y: hidden;
+  }
+}
+
 .modal {
   position: fixed;
   z-index: 3;

From 163006f4bf5fef615300c068876d77c869a04fe7 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:46:45 -0400
Subject: [PATCH 4/7] Add max height to modal container Use IE specific
 overflow rule to show scrollbar Set specific max height in ie only

---
 styles/components/_modal.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index aa0b1c44..90015844 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -17,6 +17,7 @@ body {
 
   .modal__container {
     height: 100vh;
+    max-height: 100vh;
   }
 
   .modal__dialog {
@@ -42,7 +43,13 @@ body {
       background-color: $color-white;
       padding: $gap * 2;
       width: 100%;
+
       overflow-y: auto;
+      -ms-overflow-style: scrollbar;
+
+      @include ie-only {
+        max-height: calc(100vh - #{$gap * 8});
+      }
 
       @include media($medium-screen) {
         padding: $gap * 4;

From ecb57c9c9640b3784361569e093ddb4b91270fd4 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:47:07 -0400
Subject: [PATCH 5/7] remove old style

---
 styles/components/_global_layout.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index 8cd32c8e..f4b2aa12 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -8,10 +8,6 @@
   > footer {
     margin-top: auto;
   }
-
-  &.modalOpen {
-    overflow-y: hidden;
-  }
 }
 
 .global-layout {

From 38927815c1845a8fa305287829299c632ecf3817 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:47:19 -0400
Subject: [PATCH 6/7] remove old class

---
 templates/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/base.html b/templates/base.html
index bbb49fe5..2c2b4141 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,7 +10,7 @@
   {% endassets %}
   <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
 </head>
-<body class="{% if g.modalOpen %} modalOpen{% endif %}">
+<body>
 
   <div id='app-root'>
 

From 10bf9dba26d8b577212d80b4fbaa14ba7e047dd9 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Thu, 20 Sep 2018 11:47:29 -0400
Subject: [PATCH 7/7] remove broken textinput component

---
 templates/styleguide.html | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/templates/styleguide.html b/templates/styleguide.html
index 5aed52fb..15d7d8ce 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -7,6 +7,7 @@
 
 
 {% block content %}
+  <div id='modalOpen' data-modal='styleguideModal'></div>
 
   {% call Modal(name='styleguideModal', dismissable=True) %}
     <h1>A modal dialog</h1>
@@ -130,29 +131,6 @@
       </div>
 
       <form>
-        <textinput inline-template validation='dollars' value='1231231'>
-          <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
-            <label for='basic-text-1'>
-              Dollars Text Input
-              <span class='usa-input__help'>
-                This is some help text to explain what this form field is and why you should fill it out.
-              </span>
-              <template v-if='showError'>{{ Icon('alert') }}</template>
-              <template v-if='showValid'>{{ Icon('ok') }}</template>
-            </label>
-            <masked-input
-              v-on:input='onInput'
-              v-on:change='onChange'
-              v-model='renderedValue'
-              id='basic-text-1'
-              type='text'
-              ref='input'
-              placeholder='$'
-              :guide="true"
-              :mask="mask">
-            </masked-input>
-          </div>
-        </textinput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>