Merge pull request #3132 from benjiwheeler/retry-join-flow-modal-inner-content

add ModalInnerContent component, use it in modals

src/components/modal/addtostudio/presentation.jsx

@@ -11,6 +11,7 @@ const Spinner = require('../../spinner/spinner.jsx');
 const FlexRow = require('../../flex-row/flex-row.jsx');
 const StudioButton = require('./studio-button.jsx');
 const ModalTitle = require('../base/modal-title.jsx');
+const ModalInnerContent = require('../base/modal-inner-content.jsx');
 
 require('../../forms/button.scss');
 require('./modal.scss');
@@ -49,7 +50,7 @@ const AddToStudioModalPresentation = ({
             <div className="addToStudio-modal-header modal-header">
                 <ModalTitle title={contentLabel} />
             </div>
-            <div className="addToStudio-modal-content modal-content">
+            <ModalInnerContent className="addToStudio-modal-content">
                 <div className="studio-list-outer-scrollbox">
                     <div className="studio-list-inner-scrollbox">
                         <div className="studio-list-container">
@@ -101,7 +102,7 @@ const AddToStudioModalPresentation = ({
                         ]}
                     </FlexRow>
                 </Form>
-            </div>
+            </ModalInnerContent>
         </Modal>
     );
 };

src/components/modal/base/modal-inner-content.jsx

@@ -0,0 +1,28 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const React = require('react');
+
+require('./modal-inner-content.scss');
+
+const ModalInnerContent = ({
+    children,
+    className
+}) => (
+    <div className="modal-inner-clear">
+        <div
+            className={classNames(
+                'modal-inner-content',
+                className
+            )}
+        >
+            {children}
+        </div>
+    </div>
+);
+
+ModalInnerContent.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+};
+
+module.exports = ModalInnerContent;

src/components/modal/base/modal-inner-content.scss

@@ -0,0 +1,18 @@
+@import "../../../colors";
+@import "../../../frameless";
+
+/*
+necessary to prevent modal-inner-content's margins from
+unexpectedly collapsing with a parent
+*/
+.modal-inner-clear {
+    overflow: auto;
+    height: 100%;
+}
+
+.modal-inner-content {
+    box-sizing: border-box;
+    display: flex;
+    border-radius: 0;
+    flex-direction: column;
+}

src/components/modal/base/modal.scss

@@ -16,12 +16,6 @@
     padding: 0;
     width: 48.75rem;
 
-    .modal-content { /* content inside of content */
-        display: flex;
-        border-radius: 0;
-        flex-direction: column;
-    }
-
     &:focus {
         outline: none;
     }

src/components/modal/report/modal.jsx

@@ -9,6 +9,7 @@ const Modal = require('../base/modal.jsx');
 const classNames = require('classnames');
 
 const ModalTitle = require('../base/modal-title.jsx');
+const ModalInnerContent = require('../base/modal-inner-content.jsx');
 const Form = require('../../forms/form.jsx');
 const Button = require('../../forms/button.jsx');
 const Select = require('../../forms/select.jsx');
@@ -130,7 +131,7 @@ class ReportModal extends React.Component {
                         onValid={this.handleValid}
                         onValidSubmit={onReport}
                     >
-                        <div className="report-modal-content modal-content">
+                        <ModalInnerContent className="report-modal-content">
                             {isConfirmed ? (
                                 <div className="received">
                                     <div className="received-header">
@@ -198,7 +199,7 @@ class ReportModal extends React.Component {
                                     <FormattedMessage id="report.error" />
                                 </div>
                             )}
-                        </div>
+                        </ModalInnerContent>
                         <FlexRow className="action-buttons">
                             <div className="action-buttons-overflow-fix">
                                 {isConfirmed ? (

src/components/modal/social/presentation.jsx

@@ -6,6 +6,8 @@ const classNames = require('classnames');
 
 const Modal = require('../base/modal.jsx');
 const ModalTitle = require('../base/modal-title.jsx');
+const ModalInnerContent = require('../base/modal-inner-content.jsx');
+
 const FlexRow = require('../../flex-row/flex-row.jsx');
 
 require('../../forms/button.scss');
@@ -37,7 +39,7 @@ const SocialModalPresentation = ({
             <div className="social-modal-header modal-header">
                 <ModalTitle title={intl.formatMessage({id: 'general.copyLink'})} />
             </div>
-            <div className="modal-content social-modal-content">
+            <ModalInnerContent className="social-modal-content">
 
                 {/* top row: link */}
                 <div className="link-section">
@@ -111,7 +113,7 @@ const SocialModalPresentation = ({
                     </FlexRow>
                 </div>
 
-            </div>
+            </ModalInnerContent>
         </Modal>
     );
 };