Adds maxWidth prop to EuiModal (#1165)

* add maxWidth prop to EuiModal * switch default to true
elastic · Sep 6, 2018 · d3fb21f · d3fb21f
1 parent eff7556
commit d3fb21f
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.9.0`.
+- Added `maxWidth` prop to `EuiModal` ([#1165](https://github.com/elastic/eui/pull/1165))
 
 ## [`3.9.0`](https://github.com/elastic/eui/tree/v3.9.0)
 

diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js
@@ -87,7 +87,7 @@ export class Modal extends Component {
         <EuiOverlayMask>
           <EuiModal
             onClose={this.closeModal}
-            style={{ width: '800px' }}
+            style={{ width: '400px' }}
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle >

diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
@@ -62,7 +62,7 @@ export const ModalExample = {
     props: { EuiConfirmModal },
     demo: <ConfirmModal />,
   }, {
-    title: 'Overflow overflow test',
+    title: 'Overflow test',
     source: [{
       type: GuideSectionTypes.JS,
       code: overflowTestSource,

diff --git a/src-docs/src/views/modal/overflow_test.js b/src-docs/src/views/modal/overflow_test.js
@@ -50,7 +50,6 @@ export class OverflowTest extends Component {
         <EuiOverlayMask>
           <EuiModal
             onClose={this.closeModal}
-            style={{ width: '800px' }}
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle >

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders EuiConfirmModal 1`] = `
 <div>
   <div
     aria-label="aria-label"
-    class="euiModal euiModal--confirmation testClass1 testClass2"
+    class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
     data-test-subj="test subject string"
     tabindex="0"
   >

diff --git a/src/components/modal/__snapshots__/modal.test.js.snap b/src/components/modal/__snapshots__/modal.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders EuiModal 1`] = `
 <div>
   <div
     aria-label="aria-label"
-    class="euiModal testClass1 testClass2"
+    class="euiModal euiModal--maxWidth-default testClass1 testClass2"
     data-test-subj="test subject string"
     tabindex="0"
   >

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -23,6 +23,10 @@
   }
 }
 
+.euiModal--maxWidth-default {
+  max-width: map-get($euiBreakpoints, "m");
+}
+
 .euiModal--confirmation {
   width: 450px;
   min-width: auto;

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -23,10 +23,21 @@ export class EuiModal extends Component {
       className,
       children,
       onClose, // eslint-disable-line no-unused-vars
+      maxWidth,
+      style,
       ...rest
     } = this.props;
 
-    const classes = classnames('euiModal', className);
+    let newStyle;
+    let widthClassName;
+    if (maxWidth === true) {
+      widthClassName = 'euiModal--maxWidth-default';
+    } else if (maxWidth !== false) {
+      const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
+      newStyle = { ...style, maxWidth: value };
+    }
+
+    const classes = classnames('euiModal', widthClassName, className);
 
     return (
       <FocusTrap
@@ -43,6 +54,7 @@ export class EuiModal extends Component {
           className={classes}
           onKeyDown={this.onKeyDown}
           tabIndex={0}
+          style={newStyle || style}
           {...rest}
         >
           <EuiButtonIcon
@@ -65,4 +77,20 @@ EuiModal.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   onClose: PropTypes.func.isRequired,
+  /**
+   * Sets the max-width of the modal.
+   * Set to `true` to use the default (`euiBreakpoints 'm'`),
+   * set to `false` to not restrict the width,
+   * set to a number for a custom width in px,
+   * set to a string for a custom width in custom measurement.
+   */
+  maxWidth: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+};
+
+EuiModal.defaultProps = {
+  maxWidth: true,
 };