Fix modal min-width issue in IE11 (#1174)

IE has trouble with min-widths and flex boxes if not used as as a pixel value. This PR makes the min-width use our max-form width (400px) as the min-width we'd accept on a modal. I picked that value because it's good for short notices, and our modals tend to hold input values of some kind. I updated our default modal to not use style tags for width so this would be a better default for IE11.

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - Added `maxWidth` prop to `EuiModal` ([#1165](https://github.com/elastic/eui/pull/1165))
 
+**Bug fixes**
+
+- Fixed an IE11 `EuiModal` width issue by changing the `min-width` to a pixel value ([#1174](https://github.com/elastic/eui/pull/1174))
+
 ## [`3.9.0`](https://github.com/elastic/eui/tree/v3.9.0)
 
 - Added `infraApp` icon ([#1161](https://github.com/elastic/eui/pull/1161))

src-docs/src/views/modal/modal.js

@@ -87,7 +87,6 @@ export class Modal extends Component {
         <EuiOverlayMask>
           <EuiModal
             onClose={this.closeModal}
-            style={{ width: '400px' }}
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle >

src/components/modal/_index.scss

@@ -1 +1,3 @@
+@import "../form/variables";
+
 @import "modal";

src/components/modal/_modal.scss

@@ -1,6 +1,8 @@
 /**
  * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
  *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
+ * 2. IE has trouble with min-widths on flex elements. Use the pixel value
+ *    from our forms since that's usually the smallest we want them.
  */
 
 .euiModal {
@@ -12,7 +14,7 @@
   background-color: $euiColorEmptyShade;
   border-radius: $euiBorderRadius;
   z-index: $euiZModal;
-  min-width: 50%;
+  min-width: $euiFormMaxWidth;
   animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
 
   .euiModal__flex { /* 1 */