Added restrictWidth to EuiPage (#896)

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888))
+- Added `restrictWidth` to `EuiPage` ([#896](https://github.com/elastic/eui/pull/896))
 
 **Bug fixes**
 - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892))

src-docs/src/components/guide_components.scss

@@ -34,11 +34,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   background: linear-gradient(90deg, $euiColorLightestShade 50%, $euiColorEmptyShade 50%);
 }
 
-#guide {
-  margin: auto;
-  max-width: 1240px;
-}
-
 .guidePage {
   padding: 0;
 }

src-docs/src/views/app_view.js

@@ -52,7 +52,7 @@ export class AppView extends Component {
     const { navigation } = routes;
 
     return (
-      <EuiPage className="guidePage">
+      <EuiPage restrictWidth={1240} className="guidePage">
         <EuiPageBody>
           <EuiErrorBoundary>
             <GuidePageChrome

src-docs/src/views/page/page_example.js

@@ -7,6 +7,7 @@ import {
 } from '../../components';
 
 import {
+  EuiCode,
   EuiPage,
   EuiPageBody,
   EuiPageContent,
@@ -50,11 +51,20 @@ export const PageExample = {
       code: pageHtml,
     }],
     text: (
-      <p>
-        Page layouts are modular and have the ability to add or remove components
-        as needed for the design. These examples are colored for illustrative
-        purposes only.
-      </p>
+      <div>
+        <p>
+          Page layouts are modular and have the ability to add or remove components
+          as needed for the design. These examples are colored for illustrative
+          purposes only.
+        </p>
+        <p>
+          By default, the entire page will always be 100% of the window&apos;s width,
+          to max this out the typical width and center the page, set
+          the <EuiCode>restrictWidth</EuiCode> prop to <EuiCode>true</EuiCode>. You
+          can also pass an integer to this property to max out the width at a custom
+          size.
+        </p>
+      </div>
     ),
     props: {
       EuiPage,

src/components/page/__snapshots__/page.test.js.snap

@@ -3,7 +3,16 @@
 exports[`EuiPage is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPage testClass1 testClass2"
+  class="euiPage euiPage--widthIsNotRestricted testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiPage sets a max-width 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPage euiPage--restrictWidth-custom testClass1 testClass2"
+  data-test-subj="test subject string"
+  style="max-width:1024px"
+/>
+`;

src/components/page/_page.scss

@@ -1,3 +1,14 @@
 .euiPage {
   padding: $euiSize;
+  background-color: $euiColorLightestShade;
+
+  &--restrictWidth-default,
+  &--restrictWidth-custom {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--restrictWidth-default {
+    max-width: 1000px;
+  }
 }

src/components/page/page.js

@@ -2,12 +2,36 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiPage = ({ children, className, ...rest }) => {
-  const classes = classNames('euiPage', className);
+export const EuiPage = ({ children, className, restrictWidth, style, ...rest }) => {
+  let widthClassname;
+
+  if (restrictWidth === true) {
+    widthClassname = 'euiPage--restrictWidth-default';
+  } else if (restrictWidth === false) {
+    widthClassname = 'euiPage--widthIsNotRestricted';
+  } else {
+    widthClassname = 'euiPage--restrictWidth-custom';
+
+    // if style has been passed as a prop, add to it
+    if (style) {
+      style.maxWidth = `${restrictWidth}px`;
+    }
+    // otherwise create a new object
+    else {
+      style = { maxWidth: `${restrictWidth}px` };
+    }
+  }
+
+  const classes = classNames(
+    'euiPage',
+    widthClassname,
+    className,
+  );
 
   return (
     <div
       className={classes}
+      style={style}
       {...rest}
     >
       {children}
@@ -18,4 +42,19 @@ export const EuiPage = ({ children, className, ...rest }) => {
 EuiPage.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+
+  /**
+   * 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.
+   */
+  restrictWidth: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number
+  ]),
 };
+
+EuiPage.defaultProps = {
+  restrictWidth: false,
+}

src/components/page/page.test.js

@@ -13,4 +13,13 @@ describe('EuiPage', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('sets a max-width', () => {
+    const component = render(
+      <EuiPage {...requiredProps} restrictWidth={1024} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });