Attempting to fix with EuiFlyout maxWidth

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**
 

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 },
  },
  ],
 };

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>

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>
 );

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');
  }
 }

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,