Fixing EuiPageContent layout (#1024)

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)
 

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"
 />
 `;

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

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

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;
     }
   }
+  **/
 }