Remove minWidth adjustment

elastic · Jul 15, 2019 · 27b72f3 · 27b72f3
1 parent ea5ceb1
commit 27b72f3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
@@ -217,7 +217,7 @@ export const FlyoutExample = {
       demo: <FlyoutLarge />,
     },
     {
-      title: 'maxWidth',
+      title: 'Max width',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -231,15 +231,20 @@ export const FlyoutExample = {
       text: (
         <Fragment>
           <p>
-            In this example, we set <EuiCode>maxWidth</EuiCode> to{' '}
-            <EuiCode>448px</EuiCode>, to set the width of the flyout at the
-            ideal width for a form.
+            By default, flyouts will continue to grow with the width of the
+            window. To stop this growth at an ideal width, set{' '}
+            <EuiCode>maxWidth</EuiCode> to <EuiCode>true</EuiCode>, or pass your
+            own custom size.
           </p>
-          <EuiCallOut title="Be sure to set the custom maxWidth value to a number larger than the minWidth otherwise the minWidth will supercede." />
+          <EuiCallOut
+            color="warning"
+            title="Note that there are some caveats to providing a maxWidth that is smaller than the minWidth."
+          />
         </Fragment>
       ),
       snippet: flyoutMaxWidthSnippet,
       demo: <FlyoutMaxWidth />,
+      props: { EuiFlyout },
     },
   ],
 };
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
@@ -46,6 +46,19 @@ export class FlyoutMaxWidth extends Component {
     let flyout;
 
     if (this.state.isFlyoutVisible) {
+      let maxWidthTitle;
+      switch (this.state.flyoutMaxWidth) {
+        case true:
+          maxWidthTitle = 'Default';
+          break;
+        case false:
+          maxWidthTitle = 'No';
+          break;
+        default:
+          maxWidthTitle = `${this.state.flyoutMaxWidth}px`;
+          break;
+      }
+
       flyout = (
         <EuiFlyout
           onClose={this.closeFlyout}
@@ -54,7 +67,7 @@ export class FlyoutMaxWidth extends Component {
           maxWidth={this.state.flyoutMaxWidth}>
           <EuiFlyoutHeader hasBorder>
             <EuiTitle size="m">
-              <h2 id="flyoutMaxWidthTitle">448px wide flyout</h2>
+              <h2 id="flyoutMaxWidthTitle">{maxWidthTitle} maxWidth</h2>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
@@ -110,15 +123,16 @@ export class FlyoutMaxWidth extends Component {
           <strong>default max-width</strong>
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="secondary" onClick={() => this.showFlyout('s', 448)}>
+        <EuiLink color="danger" onClick={() => this.showFlyout('s', 200)}>
           Show <strong>small</strong> flyout with{' '}
-          <strong>larger custom max-width</strong>
+          <strong>smaller custom max-width</strong> -- minWidth wins except for
+          on small screens
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="danger" onClick={() => this.showFlyout('s', 200)}>
+        <EuiLink color="danger" onClick={() => this.showFlyout('s', 448)}>
           Show <strong>small</strong> flyout with{' '}
-          <strong>smaller custom max-width</strong> -- minWidth beats out except
-          for on small screens
+          <strong>larger custom max-width</strong> -- minWidth wins except for
+          on small screens
         </EuiLink>
 
         <EuiSpacer />
@@ -132,15 +146,15 @@ export class FlyoutMaxWidth extends Component {
           <strong>default max-width</strong>
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="secondary" onClick={() => this.showFlyout('m', 900)}>
+        <EuiLink color="danger" onClick={() => this.showFlyout('m', 448)}>
           Show <strong>medium</strong> flyout with{' '}
-          <strong>larger custom max-width</strong>
+          <strong>smaller custom max-width</strong> -- minWidth wins and full
+          100vw wins on small screens
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="warning" onClick={() => this.showFlyout('m', 448)}>
+        <EuiLink color="secondary" onClick={() => this.showFlyout('m', 900)}>
           Show <strong>medium</strong> flyout with{' '}
-          <strong>smaller custom max-width</strong> -- full 100vw wins out on
-          small screens
+          <strong>larger custom max-width</strong>
         </EuiLink>
 
         <EuiSpacer />
@@ -154,15 +168,15 @@ export class FlyoutMaxWidth extends Component {
           <strong>default max-width</strong>
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="secondary" onClick={() => this.showFlyout('l', 1600)}>
+        <EuiLink color="danger" onClick={() => this.showFlyout('l', 448)}>
           Show <strong>large</strong> flyout with{' '}
-          <strong>larger custom max-width</strong>
+          <strong>smaller custom max-width</strong> -- minWidth wins and full
+          100vw wins on small screens
         </EuiLink>
         <EuiSpacer size="s" />
-        <EuiLink color="warning" onClick={() => this.showFlyout('l', 448)}>
+        <EuiLink color="secondary" onClick={() => this.showFlyout('l', 1600)}>
           Show <strong>large</strong> flyout with{' '}
-          <strong>smaller custom max-width</strong> -- full 100vw wins out on
-          small screens
+          <strong>larger custom max-width</strong>
         </EuiLink>
 
         {flyout}

diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap
@@ -69,7 +69,7 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = `
       <div
         class="euiFlyout euiFlyout--medium"
         role="dialog"
-        style="max-width:1024px;min-width:0"
+        style="max-width:1024px"
         tabindex="0"
       >
         <button
@@ -118,7 +118,7 @@ exports[`EuiFlyout max width can be set to a custom value and measurement 1`] =
       <div
         class="euiFlyout euiFlyout--medium"
         role="dialog"
-        style="max-width:24rem;min-width:0"
+        style="max-width:24rem"
         tabindex="0"
       >
         <button

diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js
@@ -44,8 +44,7 @@ export class EuiFlyout extends Component {
       widthClassName = 'euiFlyout--maxWidth-default';
     } else if (maxWidth !== false) {
       const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
-      const minWidth = size !== 's' ? { minWidth: 0 } : undefined;
-      newStyle = { ...style, maxWidth: value, ...minWidth };
+      newStyle = { ...style, maxWidth: value };
     }
 
     const classes = classnames(
@@ -124,8 +123,8 @@ EuiFlyout.propTypes = {
    * Sets the max-width of the page,
    * set to `true` to use the default size,
    * 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.
+   * set to a `number` for a custom width in `px`,
+   * set to a `string` for a custom width in a custom measurement.
    */
   maxWidth: PropTypes.oneOfType([
     PropTypes.bool,