Attempting to fix with EuiFlyout maxWidth (#2125)

* Rounding min and max widths * Reduced min-width of medium flyouts to 448 ..to accomodate forms. Also added docs example for this forms width trick.
elastic · Jul 20, 2019 · d5233c3 · d5233c3
1 parent 3a437bb
commit d5233c3
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 - Fixed `EuiComboBox`'s padding on the right ([#2135](https://github.com/elastic/eui/pull/2135))
 - Fixed `EuiAccordion` to correctly account for changing computed height of child elements ([#2136](https://github.com/elastic/eui/pull/2136))
+- Fixed some `EuiFlyout` sizing ([#2125](https://github.com/elastic/eui/pull/2125))
 
 **Breaking changes**
 

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -9,6 +9,7 @@ import {
   EuiFlyout,
   EuiFlyoutHeader,
   EuiFlyoutFooter,
+  EuiCallOut,
 } from '../../../../src/components';
 
 import { Flyout } from './flyout';
@@ -216,7 +217,7 @@ export const FlyoutExample = {
       demo: <FlyoutLarge />,
     },
     {
-      title: 'maxWidth',
+      title: 'Max width',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -228,14 +229,22 @@ export const FlyoutExample = {
         },
       ],
       text: (
-        <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.
-        </p>
+        <Fragment>
+          <p>
+            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
+            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
@@ -4,7 +4,7 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
-  EuiButton,
+  EuiLink,
   EuiText,
   EuiTitle,
   EuiFieldText,
@@ -22,39 +22,52 @@ export class FlyoutMaxWidth extends Component {
 
     this.state = {
       isFlyoutVisible: false,
-      isSwitchChecked: true,
+      flyoutSize: 'm',
+      flyoutMaxWidth: false,
     };
 
     this.closeFlyout = this.closeFlyout.bind(this);
     this.showFlyout = this.showFlyout.bind(this);
   }
 
-  onSwitchChange = () => {
-    this.setState({
-      isSwitchChecked: !this.state.isSwitchChecked,
-    });
-  };
-
   closeFlyout() {
     this.setState({ isFlyoutVisible: false });
   }
 
-  showFlyout() {
-    this.setState({ isFlyoutVisible: true });
-  }
+  showFlyout = (size = 'm', maxWidth = false) => {
+    this.setState({
+      flyoutSize: size,
+      flyoutMaxWidth: maxWidth,
+      isFlyoutVisible: true,
+    });
+  };
 
   render() {
     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}
           aria-labelledby="flyoutMaxWidthTitle"
-          maxWidth={448}>
+          size={this.state.flyoutSize}
+          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>
@@ -101,7 +114,77 @@ export class FlyoutMaxWidth extends Component {
 
     return (
       <div>
-        <EuiButton onClick={this.showFlyout}>Show max-width flyout</EuiButton>
+        <EuiLink color="secondary" onClick={() => this.showFlyout('s')}>
+          Show <strong>small</strong> flyout with <strong>no max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="secondary" onClick={() => this.showFlyout('s', true)}>
+          Show <strong>small</strong> flyout with{' '}
+          <strong>default max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="danger" onClick={() => this.showFlyout('s', 200)}>
+          Show <strong>small</strong> flyout with{' '}
+          <strong>smaller custom max-width</strong> -- minWidth wins except for
+          on small screens
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="danger" onClick={() => this.showFlyout('s', 448)}>
+          Show <strong>small</strong> flyout with{' '}
+          <strong>larger custom max-width</strong> -- minWidth wins except for
+          on small screens
+        </EuiLink>
+
+        <EuiSpacer />
+
+        <EuiLink color="secondary" onClick={() => this.showFlyout('m')}>
+          Show <strong>medium</strong> flyout with <strong>no max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="secondary" onClick={() => this.showFlyout('m', true)}>
+          Show <strong>medium</strong> flyout with{' '}
+          <strong>default max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="danger" onClick={() => this.showFlyout('m', 448)}>
+          Show <strong>medium</strong> flyout with{' '}
+          <strong>smaller custom max-width</strong> -- minWidth wins and full
+          100vw wins on small screens
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="secondary" onClick={() => this.showFlyout('m', 900)}>
+          Show <strong>medium</strong> flyout with{' '}
+          <strong>larger custom max-width</strong>
+        </EuiLink>
+
+        <EuiSpacer />
+
+        <EuiLink color="secondary" onClick={() => this.showFlyout('l')}>
+          Show <strong>large</strong> flyout with <strong>no max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="secondary" onClick={() => this.showFlyout('l', true)}>
+          Show <strong>large</strong> flyout with{' '}
+          <strong>default max-width</strong>
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="danger" onClick={() => this.showFlyout('l', 448)}>
+          Show <strong>large</strong> flyout with{' '}
+          <strong>smaller custom max-width</strong> -- minWidth wins and full
+          100vw wins on small screens
+        </EuiLink>
+        <EuiSpacer size="s" />
+        <EuiLink color="secondary" onClick={() => this.showFlyout('l', 1600)}>
+          Show <strong>large</strong> flyout with{' '}
+          <strong>larger custom max-width</strong>
+        </EuiLink>
+
+        <EuiSpacer />
+
+        <EuiLink color="primary" onClick={() => this.showFlyout('m', 0)}>
+          Trick for forms: <strong>Medium</strong> flyout with{' '}
+          <strong>0 as max-width</strong>
+        </EuiLink>
 
         {flyout}
       </div>

diff --git a/src-docs/src/views/not_found/not_found_view.js b/src-docs/src/views/not_found/not_found_view.js
@@ -1,26 +1,27 @@
 import React from 'react';
 
 import { Link } from 'react-router';
+import { EuiText } from '../../../../src/components/text';
 
 export const NotFoundView = () => (
   <div className="guideContentPage">
     <div className="guideContentPage__content">
-      <h1 className="guideTitle">
-        Wow, a 404! You just created <em>something</em> from <em>nothing</em>.
-      </h1>
+      <EuiText>
+        <h1 className="guideTitle">404</h1>
 
-      <p className="guideText">
-        You visited a page which doesn&rsquo;t exist, causing <em>this</em> page
-        to exist. This page thanks you for summoning it into existence from the
-        raw fabric of reality, but it thinks you may find another page more
-        interesting. Might it suggest the{' '}
-        {
-          <Link className="guideLink" to="/">
-            home page
-          </Link>
-        }
-        ?
-      </p>
+        <p className="guideText">
+          You visited a page which doesn&rsquo;t exist, causing <em>this</em>{' '}
+          page to exist. This page thanks you for summoning it into existence
+          from the raw fabric of reality, but it thinks you may find another
+          page more interesting. Might it suggest the{' '}
+          {
+            <Link className="guideLink" to="/">
+              home page
+            </Link>
+          }
+          ?
+        </p>
+      </EuiText>
     </div>
   </div>
 );
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -1,3 +1,5 @@
+@import '../form/variables';
+
 .euiFlyout {
   border-left: $euiBorderThin;
   // The mixin augments the above
@@ -31,17 +33,18 @@
  */
 $flyoutSizes: (
   'small': (
-    min: map-get($euiBreakpoints, 'm') * .5, /* 1 */
+    min: round(map-get($euiBreakpoints, 'm') * .5), /* 1 */
     width: 25vw,
-    max: map-get($euiBreakpoints, 's'),
+    max: round(map-get($euiBreakpoints, 's') * .7),
   ),
   'medium': (
-    min:  map-get($euiBreakpoints, 'm') * .7, /* 1 */
+    // Calculated for forms plus padding
+    min: $euiFormMaxWidth + ($euiSizeM * 2),
     width: 50vw,
     max: map-get($euiBreakpoints, 'm'),
   ),
   'large': (
-    min:  map-get($euiBreakpoints, 'm') * .9, /* 1 */
+    min:  round(map-get($euiBreakpoints, 'm') * .9), /* 1 */
     width: 75vw,
     max: map-get($euiBreakpoints, 'l'),
   )
@@ -85,8 +88,8 @@ $flyoutSizes: (
   }
 
   .euiFlyout--small {
-    width: 80vw; // ensure that it's only partially showing the main content
+    width: 90vw; // ensure that it's only partially showing the main content
     min-width: 0; /* 1 */
-    max-width: 80vw !important; /* 2 */
+    max-width: map-get(map-get($flyoutSizes, 'small'), 'max');
   }
 }
diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js
@@ -123,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,