Merge pull request #254 from dabapps/modal-fixes

Modal fixes
dabapps · Jul 20, 2018 · 1f46976 · 1f46976
2 parents e8f3bb1 + 61233db
commit 1f46976
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/less/modals.less b/src/less/modals.less
@@ -69,17 +69,20 @@
 }
 
 .modal-position {
-  padding: 0 @gutter-width / 2;
+  padding: @modal-margin-vertical @modal-margin-horizontal;
   margin: 0 auto;
 
-  @modal-margins: @margin-large * 2;
-  @modal-header-and-footer-margins: (@margin-large * 2) * 2;
-  @modal-header-and-footer-content: 50px * 2; // Magic number to allow slightly larger content
-  @modal-header-and-footer-space: @modal-margins + @modal-header-and-footer-margins + @modal-header-and-footer-content;
+  // For internal use only
+  @modal-margin-vertical-double: @modal-margin-vertical * 2;
 
   &.scrollable {
+    .modal {
+      display: flex;
+      flex-direction: column;
+      max-height: ~'calc(100vh - @{modal-margin-vertical-double})';
+    }
+
     .modal-body {
-      max-height: ~'calc(100vh - @{modal-header-and-footer-space})';
       overflow: auto;
     }
   }
@@ -115,6 +118,7 @@
 
 .modal {
   .content-box();
+  margin: 0;
   position: relative;
   z-index: 1;
   transform: translate3d(0, 0, 0);

diff --git a/src/less/variables.less b/src/less/variables.less
@@ -122,6 +122,9 @@
 @modal-footer-background: @modal-header-background;
 @modal-footer-border: @modal-header-border;
 
+@modal-margin-vertical: @gutter-width / 2;
+@modal-margin-horizontal: @gutter-width / 2;
+
 @well-background: @grey-lightest;
 @well-border: @border-base;
 

diff --git a/src/ts/components/modals/modal.examples.md b/src/ts/components/modals/modal.examples.md
@@ -16,6 +16,8 @@ class ModalExample extends React.Component {
     };
 
     this.onClickOpenModal = this.onClickOpenModal.bind(this);
+    this.onClickOpenScrollableModal = this.onClickOpenScrollableModal.bind(this);
+    this.onClickOpenSmallModal = this.onClickOpenSmallModal.bind(this);
     this.onClickCloseModal = this.onClickCloseModal.bind(this);
   }
 
@@ -56,15 +58,85 @@ class ModalExample extends React.Component {
     });
   }
 
+  onClickOpenScrollableModal () {
+    this.setState({
+      modals: [
+        <Modal scrollable onClickOutside={this.onClickCloseModal}>
+          <ModalHeader>
+            <ModalCloseIcon onClick={this.onClickCloseModal}>
+              {/* Replace this char with an icon */}
+              {X_CHAR}
+            </ModalCloseIcon>
+            <h5>
+              Header
+            </h5>
+          </ModalHeader>
+          <ModalBody>
+            <DabIpsum count={20} />
+          </ModalBody>
+          <ModalFooter>
+            <SpacedGroup block className="margin-vertical-base">
+              <Button onClick={this.onClickCloseModal}>
+                Cancel
+              </Button>
+              <Button className="primary" onClick={this.onClickCloseModal}>
+                Done
+              </Button>
+            </SpacedGroup>
+          </ModalFooter>
+        </Modal>
+      ]
+    });
+  }
+
+  onClickOpenSmallModal () {
+    this.setState({
+      modals: [
+        <Modal small scrollable onClickOutside={this.onClickCloseModal}>
+          <ModalHeader>
+            <ModalCloseIcon onClick={this.onClickCloseModal}>
+              {/* Replace this char with an icon */}
+              {X_CHAR}
+            </ModalCloseIcon>
+            <h5>
+              Header
+            </h5>
+          </ModalHeader>
+          <ModalBody>
+            <DabIpsum count={1} />
+          </ModalBody>
+          <ModalFooter>
+            <SpacedGroup block className="margin-vertical-base">
+              <Button onClick={this.onClickCloseModal}>
+                Cancel
+              </Button>
+              <Button className="primary" onClick={this.onClickCloseModal}>
+                Done
+              </Button>
+            </SpacedGroup>
+          </ModalFooter>
+        </Modal>
+      ]
+    });
+  }
+
   render () {
     const { modals } = this.state;
 
     return (
       <div>
-        <Button onClick={this.onClickOpenModal}>
+        <Button block onClick={this.onClickOpenModal}>
           Open modal example
         </Button>
 
+        <Button block onClick={this.onClickOpenScrollableModal}>
+          Open scrollable modal example
+        </Button>
+
+        <Button block onClick={this.onClickOpenSmallModal}>
+          Open small modal example
+        </Button>
+
         <ModalRenderer modals={modals} />
       </div>
     );
@@ -73,3 +145,18 @@ class ModalExample extends React.Component {
 
 <ModalExample />
 ```
+
+#### Less variables
+```less
+@modal-background: @content-box-background;
+@modal-header-background: @content-box-header-background;
+@modal-header-border: @content-box-header-border;
+
+@modal-footer-background: @modal-header-background;
+@modal-footer-border: @modal-header-border;
+
+@modal-margin-vertical: @gutter-width / 2;
+@modal-margin-horizontal: @gutter-width / 2;
+
+@modal-z-index: 1100;
+```
diff --git a/src/ts/components/modals/modal.tsx b/src/ts/components/modals/modal.tsx
@@ -55,7 +55,9 @@ export class Modal extends PureComponent<ModalProps, {}> {
       <div>
         <div className="modal-overlay" onClick={onClickOutside} />
         <div {...remainingProps} className={classNames(myClassNames)}>
-          <Component className="modal">{children}</Component>
+          <Component className={classNames('modal', className)}>
+            {children}
+          </Component>
         </div>
       </div>
     );

diff --git a/src/ts/components/navigation/nav-bar.examples.md b/src/ts/components/navigation/nav-bar.examples.md
@@ -88,4 +88,6 @@ class NavBarExample extends React.Component {
 @nav-bar-background: @body-background; // @white;
 @nav-bar-border: @border-base;
 @nav-bar-height: @input-height + @padding-base * 2;
+
+@nav-bar-z-index: 500;
 ```
diff --git a/src/ts/components/navigation/side-bar.examples.md b/src/ts/components/navigation/side-bar.examples.md
@@ -70,4 +70,6 @@ class SideBarExample extends React.Component {
 @side-bar-background: @body-background;
 @side-bar-border: @border-base;
 @side-bar-width: 250px;
+
+@side-bar-z-index: 1200;
 ```
diff --git a/tests/__snapshots__/modals.tsx.snap b/tests/__snapshots__/modals.tsx.snap
@@ -129,7 +129,7 @@ exports[`Modal should take regular element attributes 1`] = `
     className="modal-position"
   >
     <div
-      className="modal"
+      className="modal my-class"
     />
   </div>
 </div>