Page responsive fix

CHANGELOG.md

@@ -3,6 +3,12 @@
 - Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000/files))
 - Add typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
 
+**Breaking changes**
+
+- Altered `EuiPage` and sub-component layout ([#998](https://github.com/elastic/eui/pull/998))
+  - `EuiPageHeader` must now be contained within `EuiPageBody`
+  - `EuiPageSideBar` must now be **outside** of `EuiPageBody`
+
 ## [`1.2.1`](https://github.com/elastic/eui/tree/v1.2.1)
 
 **Bug fixes**
@@ -11,7 +17,7 @@
 
 ## [`1.2.0`](https://github.com/elastic/eui/tree/v1.2.0)
 
-**Note: this release creates a minor regression to the sizing of `EuiTitle`s. This is fixed in `master`.**
+**Note: this release creates a minor regression to the sizing of `EuiTitle`s. This is fixed in `1.2.1`.**
 
 - Added typings for keyCodes ([#988](https://github.com/elastic/eui/pull/988))
 - Changed `EuiXYChart` components exports to `/experimental` subfolder ([#975](https://github.com/elastic/eui/pull/975))

src-docs/src/components/guide_components.scss

@@ -9,6 +9,10 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 
 .guidePage {
   padding: 0;
+
+  @include euiBreakpoint('xs', 's') {
+    display: block; // Fixes IE
+  }
 }
 
 .guideSideNav {
@@ -39,7 +43,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 }
 
 .guidePageContent {
-  flex: 1 1 0%;
+  flex: 1 1 auto;
   padding: $euiSize $euiSizeXL;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;
@@ -49,6 +53,10 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 }
 
 .guideDemo__highlightLayout {
+  .euiPageBody {
+    min-height: 460px;
+  }
+
   div {
     background: transparentize(#0096CC, .9);
   }

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

@@ -15,20 +15,20 @@ import {
 
 export default () => (
   <EuiPage>
-    <EuiPageHeader>
-      <EuiPageHeaderSection>
-        <EuiTitle size="l">
-          <h1>Page title</h1>
-        </EuiTitle>
-      </EuiPageHeaderSection>
-      <EuiPageHeaderSection>
-        Page abilities
-      </EuiPageHeaderSection>
-    </EuiPageHeader>
+    <EuiPageSideBar>
+      SideBar nav
+    </EuiPageSideBar>
     <EuiPageBody>
-      <EuiPageSideBar>
-        SideBar nav
-      </EuiPageSideBar>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Page title</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          Page abilities
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
       <EuiPageContent>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

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

@@ -14,22 +14,21 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-
   <EuiPage>
-    <EuiPageHeader>
-      <EuiPageHeaderSection>
-        <EuiTitle size="l">
-          <h1>Page title</h1>
-        </EuiTitle>
-      </EuiPageHeaderSection>
-      <EuiPageHeaderSection>
-        Page abilities
-      </EuiPageHeaderSection>
-    </EuiPageHeader>
+    <EuiPageSideBar>
+      SideBar nav
+    </EuiPageSideBar>
     <EuiPageBody>
-      <EuiPageSideBar>
-        SideBar nav
-      </EuiPageSideBar>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Page title</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          Page abilities
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
       <EuiPageContent verticalPosition="center"  horizontalPosition="center">
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

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

@@ -14,14 +14,14 @@ import {
 
 export default () => (
   <EuiPage>
-    <EuiPageHeader>
-      <EuiPageHeaderSection>
-        <EuiTitle size="l">
-          <h1>Page title</h1>
-        </EuiTitle>
-      </EuiPageHeaderSection>
-    </EuiPageHeader>
     <EuiPageBody>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiTitle size="l">
+            <h1>Page title</h1>
+          </EuiTitle>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
       <EuiPageContent>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

src/components/page/_page.scss

@@ -1,4 +1,5 @@
 .euiPage {
+  display: flex;
   padding: $euiSize;
   background-color: $euiColorLightestShade;
 
@@ -11,4 +12,9 @@
   &--restrictWidth-default {
     max-width: 1000px;
   }
+
+  @include euiBreakpoint('xs', 's') {
+    flex-direction: column;
+    padding: 0;
+  }
 }

src/components/page/page_body/_page_body.scss

@@ -1,13 +1,7 @@
 .euiPageBody {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: stretch;
-  min-height: 400px; // Temporary till we have a better doc system.
-}
-
-@include euiBreakpoint('xs','s') {
-  .euiPageBody {
-    flex-direction: column;
-  }
+  flex: 1 1 0%;
 }
 

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

@@ -3,7 +3,7 @@
 exports[`EuiPageContentHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPageContentHeader testClass1 testClass2"
+  class="euiPageContentHeader euiPageContentHeader--responsive testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;

src/components/page/page_content/_page_content.scss

@@ -7,15 +7,18 @@
 
   &.euiPageContent--horizontalCenter {
     width: auto;
+    max-width: 100%; // Fixes IE
     margin: auto;
     flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes
   }
-}
-
 
-@include euiBreakpoint('xs','s') {
-  .euiPageContent {
-    border-radius: 0;
-    border: none;
+  // 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
+      border-radius: 0;
+      border-left: none;
+      border-right: none;
+      box-shadow: none;
+    }
   }
 }

src/components/page/page_content/_page_content_header.scss

@@ -1,13 +1,22 @@
+@import '../../panel/variables';
+
 .euiPageContentHeader {
-  margin-bottom: $euiSizeL;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+
+  // Adjust vertical spacing based on content padding prop
+  @each $modifier, $amount in $euiPanelPaddingModifiers {
+    .euiPageContent[class*="#{$modifier}"] & {
+      margin-bottom: $amount;
+    }
+  }
 }
 
 @include euiBreakpoint('xs','s') {
-  .euiPageContentHeader {
+  .euiPageContentHeader--responsive {
     flex-direction: column;
+    align-items: flex-start;
   }
 }

src/components/page/page_content/_page_content_header_section.scss

@@ -1,18 +1,19 @@
-.euiPageContentHeaderSection {
+@import '../../panel/variables';
 
+.euiPageContentHeaderSection {
   & + & {
     margin-left: $euiSizeXL;
   }
 }
 
+// Adjust vertical spacing based on content padding prop
 @include euiBreakpoint('xs','s') {
-
-  .euiPageContentHeaderSection {
-    width: 100%;
-
-    & + & {
-      margin-left: 0;
-      margin-top: $euiSize;
+  @each $modifier, $amount in $euiPanelPaddingModifiers {
+    .euiPageContent[class*="#{$modifier}"] .euiPageContentHeader--responsive {
+      .euiPageContentHeaderSection + .euiPageContentHeaderSection {
+        margin-left: 0;
+        margin-top: $amount/2;
+      }
     }
   }
 }

src/components/page/page_content/page_content_header.js

@@ -2,8 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiPageContentHeader = ({ children, className, ...rest }) => {
-  const classes = classNames('euiPageContentHeader', className);
+export const EuiPageContentHeader = ({ children, className, responsive, ...rest }) => {
+  const classes = classNames(
+    'euiPageContentHeader',
+    {
+      'euiPageContentHeader--responsive': responsive,
+    },
+    className,
+  );
 
   return (
     <div
@@ -18,4 +24,13 @@ export const EuiPageContentHeader = ({ children, className, ...rest }) => {
 EuiPageContentHeader.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Set to false if you don't want the children to stack
+   * at small screen sizes.
+   */
+  responsive: PropTypes.bool,
+};
+
+EuiPageContentHeader.defaultProps = {
+  responsive: true,
 };

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

@@ -3,7 +3,7 @@
 exports[`EuiPageHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiPageHeader testClass1 testClass2"
+  class="euiPageHeader euiPageHeader--responsive testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;

src/components/page/page_header/_page_header.scss

@@ -8,8 +8,11 @@
 
 @include euiBreakpoint('xs','s') {
   .euiPageHeader {
-    flex-direction: column;
-    padding: 0 $euiSize;
+    padding: $euiSize;
     margin-bottom: 0;
   }
+
+  .euiPageHeader--responsive {
+    flex-direction: column;
+  }
 }

src/components/page/page_header/_page_header_section.scss

@@ -1,15 +1,14 @@
 .euiPageHeaderSection {
-
   & + & {
     margin-left: $euiSizeXL;
   }
 }
-@include euiBreakpoint('xs','s') {
 
-  .euiPageHeaderSection {
+@include euiBreakpoint('xs','s') {
+  .euiPageHeader--responsive .euiPageHeaderSection {
     width: 100%;
 
-    & + & {
+    + .euiPageHeaderSection {
       margin-left: 0;
       margin-top: $euiSize;
     }

src/components/page/page_header/page_header.js

@@ -2,8 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiPageHeader = ({ children, className, ...rest }) => {
-  const classes = classNames('euiPageHeader', className);
+export const EuiPageHeader = ({ children, className, responsive, ...rest }) => {
+  const classes = classNames(
+    'euiPageHeader',
+    {
+      'euiPageHeader--responsive': responsive,
+    },
+    className,
+  );
 
   return (
     <div
@@ -18,4 +24,13 @@ export const EuiPageHeader = ({ children, className, ...rest }) => {
 EuiPageHeader.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  /**
+   * Set to false if you don't want the children to stack
+   * at small screen sizes.
+   */
+  responsive: PropTypes.bool,
+};
+
+EuiPageHeader.defaultProps = {
+  responsive: true,
 };

src/components/page/page_side_bar/_page_side_bar.scss

@@ -3,7 +3,7 @@
  */
 .euiPageSideBar {
   min-width: $euiSize * 12; /* 1 */
-  flex: 0 0 0; /* 1 */
+  flex: 0 1 0%; /* 1 */
   margin-right: $euiSizeL;
 }
 

src/components/panel/_mixins.scss

@@ -1,6 +1,7 @@
 /**
  *  Mixin for use in:
  *  - EuiCard
+ *  - EuiPageContent
 */
 @mixin euiPanel($selector){
   @if variable-exists(selector) == false {

src/components/panel/_variables.scss

@@ -1,6 +1,8 @@
 /**
  * Padding map referenced in:
  *  - Popover
+ *  - PageContentHeader
+ *  - PageContentHeaderSection
 */
 $euiPanelPaddingModifiers: (
   "paddingSmall": $euiSizeS,