Added restrictWidth to EuiPage

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/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--restrictWidth-default 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,16 @@ 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.any,
 };
+
+EuiPage.defaultProps = {
+  restrictWidth: true,
+}

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();
+  });
 });