From f2312b5df40ff373385813201b80c2abe43fd9be Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 18 Jul 2018 11:16:28 -0400
Subject: [PATCH] Fixing EuiPageContent layout (#1024)

---
 CHANGELOG.md                                  |  6 ++-
 .../__snapshots__/page_body.test.js.snap      |  2 +-
 src/components/page/page_body/_page_body.scss | 10 +++++
 src/components/page/page_body/page_body.js    | 39 ++++++++++++++++++-
 .../page/page_content/_page_content.scss      | 11 ++++--
 5 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f820364b5c4..cb464b3d212 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.0.1`.
+- Added `restrictWidth` option to `EuiPageBody` ([#1024](https://github.com/elastic/eui/pull/1024))
+
+**Bug fixes**
+
+- Fixed `EuiPageContent` centered layouts ([#1024](https://github.com/elastic/eui/pull/1024))
 
 ## [`3.0.1`](https://github.com/elastic/eui/tree/v3.0.1)
 
diff --git a/src/components/page/page_body/__snapshots__/page_body.test.js.snap b/src/components/page/page_body/__snapshots__/page_body.test.js.snap
index fdfb6a502a1..35574c6eb50 100644
--- a/src/components/page/page_body/__snapshots__/page_body.test.js.snap
+++ b/src/components/page/page_body/__snapshots__/page_body.test.js.snap
@@ -3,7 +3,7 @@
 exports[`EuiPageBody is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPageBody testClass1 testClass2"
+  class="euiPageBody euiPage--widthIsNotRestricted testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/page/page_body/_page_body.scss b/src/components/page/page_body/_page_body.scss
index 71db92a5858..3307437e94e 100644
--- a/src/components/page/page_body/_page_body.scss
+++ b/src/components/page/page_body/_page_body.scss
@@ -3,5 +3,15 @@
   flex-direction: column;
   align-items: stretch;
   flex: 1 1 0%;
+
+  &--restrictWidth-default,
+  &--restrictWidth-custom {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--restrictWidth-default {
+    max-width: 1000px;
+  }
 }
 
diff --git a/src/components/page/page_body/page_body.js b/src/components/page/page_body/page_body.js
index 1f20db5c6ce..7c1ba034314 100644
--- a/src/components/page/page_body/page_body.js
+++ b/src/components/page/page_body/page_body.js
@@ -2,12 +2,32 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiPageBody = ({ children, className, ...rest }) => {
-  const classes = classNames('euiPageBody', className);
+export const EuiPageBody = ({ children, restrictWidth, style, className, ...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('euiPageBody', widthClassname, className);
 
   return (
     <div
       className={classes}
+      style={style}
       {...rest}
     >
       {children}
@@ -18,4 +38,19 @@ export const EuiPageBody = ({ children, className, ...rest }) => {
 EuiPageBody.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
+  ]),
+};
+
+EuiPageBody.defaultProps = {
+  restrictWidth: false,
 };
diff --git a/src/components/page/page_content/_page_content.scss b/src/components/page/page_content/_page_content.scss
index d50cb125402..e06f386de99 100644
--- a/src/components/page/page_content/_page_content.scss
+++ b/src/components/page/page_content/_page_content.scss
@@ -3,23 +3,28 @@
 
   &.euiPageContent--verticalCenter {
     align-self: center;
+    margin-top: auto;
+    margin-bottom: auto;
+    flex-grow: 0;
   }
 
   &.euiPageContent--horizontalCenter {
     width: auto;
     max-width: 100%; // Fixes IE
-    margin: auto;
+    margin-left: auto;
+    margin-right: auto;
     flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes
   }
 
+  /** TEMPORARILY REMOVING
   // At small screens, the content extends edge to edge, so remove the side borders and shadow
   @include euiBreakpoint('xs', 's') {
-    &.euiPanel:not(.euiPageContent--horizontalCenter) { // Override panel styles without the need for !important
-      // Temporarily removing
+    .euiPanel:not(.euiPageContent--horizontalCenter) { // Override panel styles without the need for !important
       // border-radius: 0;
       // border-left: none;
       // border-right: none;
       // box-shadow: none;
     }
   }
+  **/
 }