elastic · cchaos · Feb 26, 2021 · Feb 6, 2021 · Feb 6, 2021 · Feb 7, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,10 +8,27 @@
 - Fixed the return type of `getDefaultEuiMarkdownUiPlugins` ([#4567](https://github.com/elastic/eui/pull/4567))
 - Fixed inverse handling of boolean sorting in `EuiDataGrid` ([#4561](https://github.com/elastic/eui/pull/4561))
 
+## Feature: EuiPageTemplate ([#4517](https://github.com/elastic/eui/pull/4517))
+
+- Added new `EuiPageTemplate` component as a shortcut for creating the different types of page layout patterns
+- Added props `grow` and `direction` to `EuiPage`
+- Added props `panelled`, `panelProps`, and `paddingSize` to `EuiPageBody`
+- Added props `restrictWidth` and `paddingSize` to `EuiPageBody`
+- Added prop `paddingSize` to `EuiPageHeader`
+- Updated `tabs` prop of `EuiPageHeaderContent` to render `large` size
+- Added prop `sticky` to `EuiPageSideBar`
+- Added Sass variable `$euiPageSidebarMinWidth` for changing default `min-width` of `EuiPageSideBar`
+- Added `href` and other anchor props to `EuiHeaderSectionItemButton`
+
+**Bug fixes**
+
+- Fixed horizontal overflow of `EuiPageContent`
+- Fixed horizontal overflow of `EuiBreadcrumbs`
+
 ## [`31.8.0`](https://github.com/elastic/eui/tree/v31.8.0)
 
 - Reverted part of [#4509](https://github.com/elastic/eui/pull/4509) and returned `EuiDataGrid`'s background content area to an empty shade ([#4542](https://github.com/elastic/eui/pull/4542))
-- Added exports for all EUI component props matching `EuiComponentProps` name pattern. ([#4517](https://github.com/elastic/eui/pull/4517))
+- Added exports for all EUI component props matching `EuiComponentProps` name pattern ([#4517](https://github.com/elastic/eui/pull/4517))
 - Added `truncate`, `disabled`, and `emphasize` props to `EuiSideNavItem` ([#4488](https://github.com/elastic/eui/pull/4488))
 - Added `truncate` prop to `EuiSideNav` ([#4488](https://github.com/elastic/eui/pull/4488))
 - Added support for all `color`s of `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504))
@@ -37,7 +54,7 @@
 
 ## [`31.7.0`](https://github.com/elastic/eui/tree/v31.7.0)
 
-- Added `whiteSpace` prop to `EuiCodeBlock`. ([#4475](https://github.com/elastic/eui/pull/4475))
+- Added `whiteSpace` prop to `EuiCodeBlock` ([#4475](https://github.com/elastic/eui/pull/4475))
 - Added a light background to `EuiDataGrid` and removed unnecessary height on its container ([#4509](https://github.com/elastic/eui/pull/4509))
 
 **Bug fixes**

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="favicon.ico"></head><body class="guideBody"><div id="guide" style="height: 100%"></div><script src="bundle.min.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="favicon.ico"></head><body class="guideBody"><div id="guide"></div><script src="bundle.min.js"></script></body></html>
diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
@@ -24,6 +24,7 @@ const { AxePuppeteer } = require('@axe-core/puppeteer');
 const docsPages = async (root, page) => {
   const pagesToSkip = [
     `${root}#/layout/resizable-container`,
+    `${root}#/layout/page`, // Has duplicate `<main>` element
     `${root}#/tabular-content/tables`,
     `${root}#/tabular-content/in-memory-tables`,
     `${root}#/display/aspect-ratio`,

diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
@@ -6,8 +6,6 @@ import {
   listExtraDeps,
 } from '../../services';
 
-import { EuiSpacer } from '../../../../src/components';
-
 const pkg = require('../../../../package.json');
 
 const getVersion = (packageName) => {
@@ -28,19 +26,48 @@ const getVersion = (packageName) => {
  * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 6. We pass the files and dependencies as params to CS through a POST call.
  * */
+import { ThemeContext } from '../with_theme';
 
 const displayTogglesRawCode = require('!!raw-loader!../../views/form_controls/display_toggles')
   .default;
 
+export const CodeSandboxLink = ({ ...rest }) => {
+  return (
+    <ThemeContext.Consumer>
+      {(context) => <CodeSandboxLinkComponent context={context} {...rest} />}
+    </ThemeContext.Consumer>
+  );
+};
+
 /* 1 */
-export const CodeSandboxLink = ({ children, content }) => {
+export const CodeSandboxLinkComponent = ({
+  children,
+  className,
+  content,
+  context,
+}) => {
+  let cssFile;
+  switch (context.theme) {
+    case 'amsterdam-light':
+      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_light.css';
+      break;
+    case 'amsterdam-dark':
+      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_dark.css';
+      break;
+    case 'dark':
+      cssFile = '@elastic/eui/dist/eui_theme_dark.css';
+      break;
+    default:
+      cssFile = '@elastic/eui/dist/eui_theme_light.css';
+      break;
+  }
+
   let indexContent;
 
   if (!content) {
     /* 2 */
     indexContent = `import ReactDOM from 'react-dom';
-import '@elastic/eui/dist/eui_theme_light.css'
-// import '@elastic/eui/dist/eui_theme_dark.css'
+import '${cssFile}';
 import React from 'react';
 
 import {
@@ -82,8 +109,7 @@ ReactDOM.render(
     // The Code Sanbbox demo needs to import CSS at the top of the document. CS has trouble
     // with our dynamic imports so we need to warn the user for now
     const exampleStart = `import ReactDOM from 'react-dom';
-// import '@elastic/eui/dist/eui_theme_dark.css';
-import '@elastic/eui/dist/eui_theme_light.css'`;
+import '${cssFile}';`;
 
     // Concat the three pieces of the example into a single string to use for index.js
     const cleanedContent = `${exampleStart}
@@ -155,13 +181,10 @@ ${exampleClose}
       action="https://codesandbox.io/api/v1/sandboxes/define"
       method="POST"
       target="_blank"
-      className="eui-textRight">
+      className={className}>
       {/* 6 */}
       <input type="hidden" name="parameters" value={params} />
-
-      <EuiSpacer size="s" />
       {childWithSubmit}
-      <EuiSpacer size="s" />
     </form>
   );
 };
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -3,66 +3,36 @@
 $guideSideNavWidth: 240px;
 $guideZLevelHighest: $euiZLevel9 + 1000;
 
-.guideBody {
-  background: linear-gradient(90deg, $euiPageBackgroundColor 50%, $euiColorEmptyShade 50%);
-
-  &--overflowHidden {
-    overflow: hidden;
-  }
+#guide { // sass-lint:disable-line no-ids
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - #{$euiHeaderHeightCompensation});
 }
 
 @include euiHeaderAffordForFixed;
 
-.euiBody--headerIsFixed {
-  .guideSideNav {
-    top: $euiHeaderHeightCompensation;
-  }
-}
-
 .euiBody--headerIsFixed--double {
   @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
 
-  .guideSideNav {
-    top: $euiHeaderHeightCompensation * 2;
-  }
-
   .euiHeader:not(.euiHeader--fixed) {
     // Force headers below the full screen.
     // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
     z-index: 0;
   }
 }
 
-.guidePage {
-  padding: 0;
-}
-
 .guideSideNav {
-  width: $guideSideNavWidth;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-
-  .guideSideNav__identity {
-    border-bottom: $euiBorderThin;
-    padding: $euiSize;
-  }
-
-  .guideSideNav__theme {
-    font-size: $euiFontSizeS;
-    color: $euiColorDarkShade;
-  }
+  min-width: $guideSideNavWidth;
+}
 
-  .guideSideNav__content {
-    @include euiScrollBar;
+.guideSideNav__content {
+  @include euiYScroll;
+  padding: 0 $euiSizeL $euiSizeL;
+}
 
-    width: $guideSideNavWidth;
-    padding: $euiSize;
-    position: absolute;
-    bottom: 0;
-    top: 132px;
-    overflow-y: auto;
-  }
+.guideSideNav__search {
+  flex-shrink: 0;
+  padding: $euiSizeL;
 }
 
 .guideSideNav__item {
@@ -90,31 +60,36 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   color: $euiColorDarkShade;
 }
 
-.guidePageContent {
-  flex: 1 1 auto;
-  padding: $euiSize $euiSizeXL;
-  min-height: 100vh;
-  background-color: $euiColorEmptyShade;
-  border-left: $euiBorderThin;
-  max-width: $euiPageDefaultMaxWidth;
-  margin-left: 240px;
+.guideDemo__highlightLayout,
+.guideDemo__highlightLayout--playground,
+.guideDemo__highlightLayout--legacy {
+  border: 1px solid transparentize($euiColorPrimary, .9);
+  overflow: hidden;
+  height: 460px;
+  display: flex;
+
+  .euiPageSideBar--sticky {
+    top: 0;
+  }
 }
 
-.guideDemo__highlightLayout {
-  .euiPageBody {
-    min-height: 460px;
+.guideDemo__highlightLayout--playground > div:not(.euiPage) {
+  height: 100%;
+  width: 100%;
+  padding: 0 !important; // sass-lint:disable-line no-important
+
+  > .euiPage--grow {
+    height: 100%;
   }
+}
 
+.guideDemo__highlightLayout--legacy {
   > div,
   > div > div {
     background: transparentize($euiColorPrimary, .9);
   }
 }
 
-.guideDemo__highlightLayout--single {
-  background: transparentize($euiColorPrimary, .9);
-}
-
 .guideDemo__highlightSpacer {
   .euiSpacer {
     background: transparentize($euiColorPrimary, .9);
@@ -124,14 +99,14 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 .guideDemo__highlightGrid {
   .euiFlexItem {
     background: transparentize($euiColorPrimary, .9);
-    padding: 16px;
+    padding: $euiSize;
   }
 }
 
 .guideDemo__highlightGridWrap {
   .euiFlexItem div {
     background: transparentize($euiColorPrimary, .9);
-    padding: 16px;
+    padding: $euiSize;
   }
 }
 
@@ -239,6 +214,25 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   height: 100%;
   left: 0;
   top: 0;
+  z-index: $euiZHeader + 1;
+  overflow: auto;
+
+  &--withHeader {
+    top: $euiHeaderHeightCompensation;
+    bottom: 0;
+    height: auto;
+    z-index: $euiZHeader - 1;
+    display: flex;
+    flex-direction: column;
+
+    .euiPageSideBar--sticky {
+      top: 0;
+    }
+  }
+}
+
+.guideBody--overflowHidden {
+  overflow: hidden;
 }
 
 .euiDataGridRowCell--favoriteFranchise {
@@ -264,46 +258,30 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
 @import 'guide_rule/index';
 
 @include euiBreakpoint('xs', 's') {
-  .guidePage {
-    display: block; // Fixes IE
+  .guideSideNav {
+    width: 100%;
   }
 
-  .guideBody {
-    background: none;
+  .guideSideNav__content {
+    padding: 0;
+    border-top: $euiBorderThin;
   }
+}
 
-  .guideSideNav {
-    position: static;
-    width: auto;
-
-    // This is a temporary hack till we fix how classes pass into form controls
-    .euiFormControlLayout,
-    input[type='search'] {
-      max-width: 100%;
-    }
-
-    .guideSideNav__content {
-      position: relative;
-      width: auto;
-      top: auto;
-      bottom: auto;
-      padding: 0;
-      overflow-y: hidden;
-    }
+.guideHomePage__blockformCard {
+  min-width: 200px;
+  flex-basis: 100% !important;
 
-    .guideSideNav__identity {
-      position: relative;
-      width: auto;
-    }
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiBreakpoint('s', 'm') {
+    flex-basis: 45% !important; // sass-lint:disable-line no-important
+  }
 
-    .guideSideNav__mobileToggle {
-      background: $euiColorPrimary;
-      color: $euiColorEmptyShade !important;
-    }
+  @include euiBreakpoint('l') {
+    flex-basis: 30% !important; // sass-lint:disable-line no-important
   }
 
-  .guidePageContent {
-    margin-left: 0;
-    width: 100%;
+  @include euiBreakpoint('xl') {
+    flex-basis: 22% !important; // sass-lint:disable-line no-important
   }
 }
diff --git a/src-docs/src/components/guide_components_amsterdam.scss b/src-docs/src/components/guide_components_amsterdam.scss
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="favicon.ico"></head><body class="guideBody"><div id="guide" style="height: 100%"></div><script src="bundle.min.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="favicon.ico"></head><body class="guideBody"><div id="guide"></div><script src="bundle.min.js"></script></body></html>