[EuiPageLayout] Add bottomBar & [EuiBottomBar] Add more position props

CHANGELOG.md

@@ -1,6 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.12.0`.
+- Added `position`, `usePortal`, `top`, `right`, `bottom`, and `left` props to `EuiBottomBar` ([#4662](https://github.com/elastic/eui/pull/4662))
+- Added `bottomBar` and `bottomBarProps` to `EuiPageTemplate` when `template = 'default'` ([#4662](https://github.com/elastic/eui/pull/4662))
+- Added `role="main"` to the `EuiPageContent` component inside of `EuiPageTemplate` ([#4662](https://github.com/elastic/eui/pull/4662))
+- Added `bottomBorder` props to `EuiPageHeader` ([#4662](https://github.com/elastic/eui/pull/4662))
+
+**Breaking changes**
+
+- Changed `EuiBottomBar` positioning styles from being applied at the CSS layer to the `style` property  ([#4662](https://github.com/elastic/eui/pull/4662))
 
 ## [`31.12.0`](https://github.com/elastic/eui/tree/v31.12.0)
 

src-docs/src/components/guide_page/guide_page.js

@@ -92,23 +92,22 @@ const GuidePageComponent = ({
       </EuiPageHeader>
 
       <EuiPageContent
+        role="main"
         hasShadow={false}
         paddingSize="none"
         color="transparent"
         hasBorder={false}
         borderRadius="none">
         <EuiPageContentBody restrictWidth>
-          <main>
-            <Switch>
-              {playground && (
-                <Route path={`${match.path}/playground`}>{playground}</Route>
-              )}
-              {guidelines && (
-                <Route path={`${match.path}/guidelines`}>{guidelines}</Route>
-              )}
-              <Route path="">{children}</Route>
-            </Switch>
-          </main>
+          <Switch>
+            {playground && (
+              <Route path={`${match.path}/playground`}>{playground}</Route>
+            )}
+            {guidelines && (
+              <Route path={`${match.path}/guidelines`}>{guidelines}</Route>
+            )}
+            <Route path="">{children}</Route>
+          </Switch>
         </EuiPageContentBody>
       </EuiPageContent>
     </>

src-docs/src/components/guide_page/guide_page_chrome.js

@@ -232,7 +232,10 @@ export class GuidePageChrome extends Component {
           direction="column"
           responsive={false}
           gutterSize="none">
-          <EuiFlexItem grow={false} className="guideSideNav__search">
+          <EuiFlexItem
+            role="search"
+            grow={false}
+            className="guideSideNav__search">
             <EuiFieldSearch
               fullWidth
               placeholder="Search"

src-docs/src/components/guide_section/guide_section.tsx

@@ -167,11 +167,7 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
       {renderingPlayground && renderPlayground()}
       {!renderingPlayground && demo && (
         <GuideSectionExample
-          example={
-            <EuiErrorBoundary>
-              <div>{demo}</div>
-            </EuiErrorBoundary>
-          }
+          example={<EuiErrorBoundary>{demo}</EuiErrorBoundary>}
           tabs={renderTabs()}
           ghostBackground={ghostBackground}
           demoPanelProps={demoPanelProps}

src-docs/src/views/app_view.js

@@ -30,7 +30,7 @@ export class AppView extends Component {
   }
 
   componentDidMount() {
-    document.title = `Elastic UI Framework - ${this.props.currentRoute.name}`;
+    document.title = `${this.props.currentRoute.name} - Elastic UI Framework`;
     document.addEventListener('keydown', this.onKeydown);
   }
 

src-docs/src/views/bottom_bar/bottom_bar_displacement.js

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import {
   EuiBottomBar,
   EuiButtonGroup,
-  EuiButtonEmpty,
+  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
@@ -42,13 +42,13 @@ export default () => {
           affordForDisplacement={toggleIdSelected === 'bottomBarStandard'}>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
+              <EuiButton
                 onClick={() => setToggleIdSelected(null)}
                 color="ghost"
                 size="s"
                 iconType="cross">
                 close
-              </EuiButtonEmpty>
+              </EuiButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiBottomBar>

src-docs/src/views/bottom_bar/bottom_bar_example.js

@@ -1,40 +1,42 @@
 import React from 'react';
-
-import { renderToHtml } from '../../services';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
 import { EuiBottomBar, EuiCode } from '../../../../src/components';
 
+import { bottomBarConfig } from './playground';
+
 import BottomBar from './bottom_bar';
 const bottomBarSource = require('!!raw-loader!./bottom_bar');
-const bottomBarHtml = renderToHtml(BottomBar);
-
-const bottomBarSnippet = `<EuiBottomBar paddingSize="s">
-  <!-- Content goes here -->
-</EuiBottomBar>`;
 
 import BottomBarDisplacement from './bottom_bar_displacement';
 const bottomBarDisplacementSource = require('!!raw-loader!./bottom_bar_displacement');
-const bottomBarDisplacementHtml = renderToHtml(BottomBarDisplacement);
 
-const bottomBarDisplacementSnippet = `<EuiBottomBar affordForDisplacement={false}>
-  <!-- Content goes here -->
-</EuiBottomBar>`;
+import BottomBarPosition from './bottom_bar_position';
+import { EuiCallOut } from '../../../../src/components/call_out';
+const bottomBarPositionSource = require('!!raw-loader!./bottom_bar_position');
 
 export const BottomBarExample = {
   title: 'Bottom bar',
+  intro: (
+    <EuiCallOut>
+      <p>
+        <strong>EuiPageTemplate</strong> offers a quick way to{' '}
+        <Link to="/layout/page#showing-a-bottom-bar">
+          apply a bottom bar to your page layouts
+        </Link>
+        .
+      </p>
+    </EuiCallOut>
+  ),
   sections: [
     {
       source: [
         {
           type: GuideSectionTypes.JS,
           code: bottomBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: bottomBarHtml,
-        },
       ],
       text: (
         <>
@@ -54,19 +56,49 @@ export const BottomBarExample = {
         </>
       ),
       props: { EuiBottomBar },
-      snippet: bottomBarSnippet,
       demo: <BottomBar />,
+      playground: bottomBarConfig,
+      snippet: `<EuiBottomBar paddingSize="s">
+  <!-- Content goes here -->
+</EuiBottomBar>`,
     },
     {
-      title: 'Displacement',
+      title: 'Positions',
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: bottomBarDisplacementSource,
+          code: bottomBarPositionSource,
         },
+      ],
+      text: (
+        <>
+          <p>
+            Bottom bars default to being fixed position, in a portal at the
+            bottom of the browser window. Alternatively, you can change the{' '}
+            <EuiCode>position</EuiCode> to <EuiCode>sticky</EuiCode> where it
+            will render in place but stick to the window only as the window edge
+            nears. The <EuiCode>static</EuiCode> position reverts back to
+            default DOM behavior.
+          </p>
+          <p>
+            You can also apply a different set of positioning locations just by
+            adjusting them in with the{' '}
+            <EuiCode>top | right | bottom | left</EuiCode> props.
+          </p>
+        </>
+      ),
+      props: { EuiBottomBar },
+      demo: <BottomBarPosition />,
+      snippet: `<EuiBottomBar position="sticky" bottom={10}>
+  <!-- Content goes here -->
+</EuiBottomBar>`,
+    },
+    {
+      title: 'Displacement',
+      source: [
         {
-          type: GuideSectionTypes.HTML,
-          code: bottomBarDisplacementHtml,
+          type: GuideSectionTypes.JS,
+          code: bottomBarDisplacementSource,
         },
       ],
       text: (
@@ -75,15 +107,18 @@ export const BottomBarExample = {
             There is an <EuiCode>affordForDisplacement</EuiCode> prop
             (defaulting to <EuiCode>true</EuiCode>), which determines whether
             the component makes room for itself by adding bottom padding
-            equivalent to its own height on the document body element. Setting
-            this to <EuiCode>false</EuiCode> can be useful to minimize scrollbar
+            equivalent to its own height on the document{' '}
+            <EuiCode language="html">{'<body>'}</EuiCode> element. Setting this
+            to <EuiCode>false</EuiCode> can be useful to minimize scrollbar
             visibility but will cause the bottom bar to overlap body content.
           </p>
         </>
       ),
       props: { EuiBottomBar },
-      snippet: bottomBarDisplacementSnippet,
       demo: <BottomBarDisplacement />,
+      snippet: `<EuiBottomBar affordForDisplacement={false}>
+  <!-- Content goes here -->
+</EuiBottomBar>`,
     },
   ],
 };

src-docs/src/views/bottom_bar/bottom_bar_position.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { EuiBottomBar, EuiSpacer, EuiText } from '../../../../src/components';
+
+export default () => {
+  return (
+    <>
+      <EuiText>
+        <p>
+          When scrolling past this example block, the{' '}
+          <strong>EuiBottomBar</strong> will stick to the bottom of the browser
+          window (with a 10px offset), but keeps it within the bounds of its
+          parent.
+        </p>
+      </EuiText>
+      <EuiSpacer size="xl" />
+      <EuiSpacer size="xl" />
+      <EuiBottomBar position="sticky" bottom={10}>
+        <EuiText color="ghost" textAlign="center">
+          <p>Scroll to see!</p>
+        </EuiText>
+      </EuiBottomBar>
+    </>
+  );
+};

src-docs/src/views/bottom_bar/playground.js

@@ -0,0 +1,54 @@
+import { PropTypes } from 'react-view';
+import { EuiButton, EuiBottomBar } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const bottomBarConfig = () => {
+  const docgenInfo = Array.isArray(EuiBottomBar.__docgenInfo)
+    ? EuiBottomBar.__docgenInfo[0]
+    : EuiBottomBar.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.ReactNode,
+    value: '<EuiButton color="ghost">Save</EuiButton>',
+  };
+
+  propsToUse.top = {
+    ...propsToUse.top,
+    type: PropTypes.Number,
+  };
+
+  propsToUse.right = {
+    ...propsToUse.right,
+    type: PropTypes.Number,
+    value: '0',
+  };
+
+  propsToUse.bottom = {
+    ...propsToUse.bottom,
+    type: PropTypes.Number,
+    value: '0',
+  };
+
+  propsToUse.left = {
+    ...propsToUse.left,
+    type: PropTypes.Number,
+    value: '0',
+  };
+
+  return {
+    config: {
+      componentName: 'EuiBottomBar',
+      props: propsToUse,
+      scope: {
+        EuiBottomBar,
+        EuiButton,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiBottomBar', 'EuiButton'],
+        },
+      },
+    },
+  };
+};