Added maxWidth prop to EuiFlyout (#1090)

elastic · Aug 7, 2018 · 4cfa4c9 · 4cfa4c9
1 parent 24b45a8
commit 4cfa4c9
Show file tree

Hide file tree

Showing 15 changed files with 521 additions and 237 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@
 - Added `repositionOnScroll` prop to `EuiPopover` which enables repositioning the popover when the window is scrolled. ([#1064](https://github.com/elastic/eui/pull/1064))
 - Allow `_` and `*` characters to be used in `EuiSearchBar` query terms ([#1058](https://github.com/elastic/eui/pull/1058))
 - Added more `status` options for `EuiSteps` ([#1088](https://github.com/elastic/eui/pull/1088))
+- Added `maxWidth` prop `EuiFlyout` ([#1090](https://github.com/elastic/eui/pull/1090))
+- Added `string` to allowed `restrictWidth` prop type of `EuiPage` and `EuiPageBody` ([#1090](https://github.com/elastic/eui/pull/1090))
 
 **Bug fixes**
 
@@ -15,6 +17,7 @@
 - Fixed `EuiBasicTable` to inform its parent about a selection change triggered by a different set of `items` ([#1086](https://github.com/elastic/eui/pull/1086))
 - Fixed width of `EuiFilterGroup`'s popover ([#1078](https://github.com/elastic/eui/pull/1078))
 - Fixed `EuiStepsHorizontal`'s title wrapping in IE ([#1088](https://github.com/elastic/eui/pull/1088))
+- Fixed wrong class name being added to `EuiPageBody` when `restrictWidth !== false` ([#1090](https://github.com/elastic/eui/pull/1090))
 
 ## [`3.3.0`](https://github.com/elastic/eui/tree/v3.3.0)
 

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
@@ -2,16 +2,9 @@ import React from 'react';
 
 import { renderToHtml } from '../../services';
 
-import {
-  GuideSectionTypes,
-} from '../../components';
+import { GuideSectionTypes } from '../../components';
 
-import {
-  EuiCode,
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiFlyoutFooter,
-} from '../../../../src/components';
+import { EuiCode, EuiFlyout, EuiFlyoutHeader, EuiFlyoutFooter } from '../../../../src/components';
 
 import { Flyout } from './flyout';
 const flyoutSource = require('!!raw-loader!./flyout');
@@ -29,36 +22,43 @@ export const FlyoutExample = {
   title: 'Flyout',
   sections: [
     {
-      source: [{
-        type: GuideSectionTypes.JS,
-        code: flyoutSource,
-      }, {
-        type: GuideSectionTypes.HTML,
-        code: flyoutHtml,
-      }],
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: flyoutHtml,
+        },
+      ],
       text: (
         <div>
           <p>
-            <EuiCode>EuiFlyout</EuiCode> is a fixed position panel that pops in
-            from the right side of the screen. It should be used any time you
-            need to perform quick, individual actions to a larger page or list.
+            <EuiCode>EuiFlyout</EuiCode> is a fixed position panel that pops in from the right side
+            of the screen. It should be used any time you need to perform quick, individual actions
+            to a larger page or list.
           </p>
 
           <ul>
             <li>
-              <EuiCode>size</EuiCode> accepts <EuiCode>s / m / l</EuiCode> and
-              defines the width of the panel.
+              <EuiCode>size</EuiCode> accepts <EuiCode>s / m / l</EuiCode> and defines the width of
+              the panel.
             </li>
             <li>
-              <EuiCode>ownFocus</EuiCode> is a boolean that
-              when <EuiCode>true</EuiCode> will lock the mouse / keyboard focus
-              to within the flyout. It is off by default.
+              <EuiCode>ownFocus</EuiCode> is a boolean that when <EuiCode>true</EuiCode> will lock
+              the mouse / keyboard focus to within the flyout. It is off by default.
+            </li>
+            <li>
+              <EuiCode>maxWidth</EuiCode> accepts a boolean or number. When set to{' '}
+              <EuiCode>true</EuiCode>, it adds a predefined maxWidth or you can pass an integer set
+              the max width to a custom pixel value or a string to set it to a custom measurement.
             </li>
           </ul>
 
           <p>
-            Notice how these examples use <EuiCode>aria-labelledby</EuiCode> to
-            announce the flyout to screen readers when the user opens it.
+            Notice how these examples use <EuiCode>aria-labelledby</EuiCode> to announce the flyout
+            to screen readers when the user opens it.
           </p>
         </div>
       ),
@@ -67,39 +67,44 @@ export const FlyoutExample = {
     },
     {
       title: 'More complicated Flyout',
-      source: [{
-        type: GuideSectionTypes.JS,
-        code: flyoutComplicatedSource,
-      }, {
-        type: GuideSectionTypes.HTML,
-        code: flyoutComplicatedHtml,
-      }],
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutComplicatedSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: flyoutComplicatedHtml,
+        },
+      ],
       text: (
         <p>
           In this example we use <EuiCode>EuiFlyoutHeader</EuiCode> and
-          <EuiCode>EuiFlyoutFooter</EuiCode> to allow for fixed position navigation
-          and actions within a flyout. Note that any content
-          within <EuiCode>EuiContentBody</EuiCode> will automatcially overflow.
+          <EuiCode>EuiFlyoutFooter</EuiCode> to allow for fixed position navigation and actions
+          within a flyout. Note that any content within <EuiCode>EuiContentBody</EuiCode> will
+          automatcially overflow.
         </p>
       ),
       props: { EuiFlyoutFooter },
       demo: <FlyoutComplicated />,
     },
     {
       title: 'Flyout sizing and focus',
-      source: [{
-        type: GuideSectionTypes.JS,
-        code: flyoutSizeSource,
-      }, {
-        type: GuideSectionTypes.HTML,
-        code: flyoutSizeHtml,
-      }],
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutSizeSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: flyoutSizeHtml,
+        },
+      ],
       text: (
         <p>
-          In this example, we set <EuiCode>size</EuiCode> to <EuiCode>s</EuiCode> and
-          apply the <EuiCode>ownFocus</EuiCode> prop. The latter not only traps the
-          focus of our flyout, but also adds background overlay to reinforce your
-          boundries.
+          In this example, we set <EuiCode>size</EuiCode> to <EuiCode>s</EuiCode> and apply the{' '}
+          <EuiCode>ownFocus</EuiCode> prop. The latter not only traps the focus of our flyout, but
+          also adds background overlay to reinforce your boundries.
         </p>
       ),
       demo: <FlyoutSize />,