fixes modal section width, adds close button; closes #735

Datawheel · Oct 7, 2019 · 428a1e5 · 428a1e5
1 parent 33b7b8d
commit 428a1e5
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git a/packages/cms/src/components/Profile.jsx b/packages/cms/src/components/Profile.jsx
@@ -4,7 +4,7 @@ import {hot} from "react-hot-loader/root";
 import {connect} from "react-redux";
 import PropTypes from "prop-types";
 import {fetchData} from "@datawheel/canon-core";
-import {Dialog} from "@blueprintjs/core";
+import {Dialog, Icon} from "@blueprintjs/core";
 
 import libs from "../utils/libs";
 
@@ -185,20 +185,27 @@ class Profile extends Component {
               </div>
             )}
           </main>
-        </div>
-        <Dialog
-          isOpen={modalSection}
-          onClose={() => this.setState({modalSlug: null})}
-          usePortal={false}
-        >
-          <div className="bp3-dialog-body">
+
+          {/* modal sections */}
+          <Dialog
+            className="cp-modal-section-dialog"
+            portalClassName="cp-modal-section-portal"
+            backdropClassName="cp-modal-section-backdrop"
+            isOpen={modalSection}
+            onClose={() => this.setState({modalSlug: null})}
+          >
+            <button className="cp-dialog-close-button" onClick={() => this.setState({modalSlug: null})}>
+              <Icon className="cp-dialog-close-button-icon" icon="cross" />
+              <span className="u-visually-hidden">close section</span>
+            </button>
+
             <Section
               isModal={true}
               contents={modalSection}
               loading={loading}
             />
-          </div>
-        </Dialog>
+          </Dialog>
+        </div>
       </React.Fragment>
     );
   }

diff --git a/packages/cms/src/components/sections/Section.css b/packages/cms/src/components/sections/Section.css
@@ -166,3 +166,39 @@
     top: 0;
   }
 }
+
+/* MODAL */
+[class*="-dialog"].cp-modal-section-dialog { /* specificity bump needed to override blueprint */
+  position: relative; /* needed to position close button */
+  /* sizing */
+  width: var(--container-width);
+  max-width: calc(100% - var(--gutter-lg));
+  padding-bottom: 0;
+}
+.cp-modal-section {
+  padding: var(--gutter-lg); /* equalize padding */
+}
+.cp-dialog-close-button {
+  /* sizing (equal to modal section padding) */
+  width: var(--gutter-lg);
+  height: var(--gutter-lg);
+  /* positioning */
+  position: absolute;
+  top: 0;
+  right: 0;
+  text-align: center;
+  /* theming */
+  @mixin button-reset;
+  color: var(--dark-1);
+  /* transitions */
+  transition:
+    color 0.1s ease-out,
+    opacity 0.1s ease-out,
+    transform 0.1s ease-out;
+
+  /* interactions */
+  &:hover, &:focus {
+    transform: scale(1.5);
+    color: var(--accent-dark);
+  }
+}
diff --git a/packages/cms/src/components/sections/Section.jsx b/packages/cms/src/components/sections/Section.jsx
@@ -232,6 +232,8 @@ class Section extends Component {
             contents.position === "sticky" ? " is-sticky" : ""
           }${
             isStickyIE ? " ie-is-stuck" : ""
+          }${
+            isModal ? " cp-modal-section" : ""
           }`}
           ref={this.section}
           key={`section-${contents.id}`}