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

.eslintrc.js

@@ -1,3 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
 const APACHE_2_0_LICENSE_HEADER = `
 /*
  * Licensed to Elasticsearch B.V. under one or more contributor
@@ -69,7 +88,7 @@ module.exports = {
     'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
     'jsx-a11y/aria-props': 'error',
     'jsx-a11y/aria-proptypes': 'error',
-    'jsx-a11y/aria-role': 'error',
+    'jsx-a11y/aria-role': [2, { ignoreNonDOM: true }],
     'jsx-a11y/aria-unsupported-elements': 'error',
     'jsx-a11y/heading-has-content': 'error',
     'jsx-a11y/html-has-lang': 'error',

CHANGELOG.md

@@ -5,6 +5,10 @@
 - Added `element` prop to `EuiPanel` for forcing to `div` or `button` ([#4649](https://github.com/elastic/eui/pull/4649))
 - Increased padding on `EuiCheckableCard` with refactor to use `EuiSplitPanel` ([#4649](https://github.com/elastic/eui/pull/4649))
 - Added `valueInputProps` prop to `EuiColorStops` ([#4669](https://github.com/elastic/eui/pull/4669))
+- 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 `EuiPageContent` by default ([#4662](https://github.com/elastic/eui/pull/4662))
+- Added `bottomBorder` prop to `EuiPageHeader` ([#4662](https://github.com/elastic/eui/pull/4662))
 
 **Bug fixes**
 
@@ -16,6 +20,7 @@
 **Breaking changes**
 
 - Removed `betaBadgeLabel`, `betaBadgeTooltipContent`, and `betaBadgeTitle` props from `EuiPanel` ([#4649](https://github.com/elastic/eui/pull/4649))
+- 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)
 

scripts/a11y-testing.js

@@ -25,6 +25,7 @@ const docsPages = async (root, page) => {
   const pagesToSkip = [
     `${root}#/layout/resizable-container`,
     `${root}#/layout/page`, // Has duplicate `<main>` element
+    `${root}#/layout/page-header`, // Has duplicate `<header>` element
     `${root}#/tabular-content/tables`,
     `${root}#/tabular-content/in-memory-tables`,
     `${root}#/display/aspect-ratio`,

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_example.js

@@ -1,26 +1,35 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
 import { EuiBottomBar, EuiCode } from '../../../../src/components';
-import Playground from './playground';
+
+import { bottomBarConfig } from './playground';
 
 import BottomBar from './bottom_bar';
 const bottomBarSource = require('!!raw-loader!./bottom_bar');
 
-const bottomBarSnippet = `<EuiBottomBar paddingSize="s">
-  <!-- Content goes here -->
-</EuiBottomBar>`;
-
 import BottomBarDisplacement from './bottom_bar_displacement';
 const bottomBarDisplacementSource = require('!!raw-loader!./bottom_bar_displacement');
 
-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: [
@@ -33,8 +42,8 @@ export const BottomBarExample = {
         <>
           <p>
             <strong>EuiBottomBar</strong> is a simple wrapper component that
-            does nothing but fix a dark bar (usually filled with buttons) to the
-            bottom of the page. Use it when you have really long pages or
+            does nothing but affix a dark bar (usually filled with buttons) to
+            the bottom of the page. Use it when you have really long pages or
             complicated, multi-page forms. In the case of forms, only invoke it
             if a form is in a savable state.
           </p>
@@ -46,10 +55,43 @@ export const BottomBarExample = {
           </p>
         </>
       ),
-      playground: Playground,
       props: { EuiBottomBar },
-      snippet: bottomBarSnippet,
       demo: <BottomBar />,
+      playground: bottomBarConfig,
+      snippet: `<EuiBottomBar paddingSize="s">
+  <!-- Content goes here -->
+</EuiBottomBar>`,
+    },
+    {
+      title: 'Positions',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: bottomBarPositionSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Bottom bars default to a 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',
@@ -65,16 +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&apos;s body element.
-            Setting this to <EuiCode>false</EuiCode> can be useful to minimize
-            scrollbar visibility but will cause the bottom bar to overlap body
-            content.
+            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

@@ -1,20 +1,39 @@
 import { PropTypes } from 'react-view';
-import { EuiBottomBar, EuiButton } from '../../../../src/components/';
-import {
-  propUtilityForPlayground,
-  dummyFunction,
-} from '../../services/playground';
+import { EuiButton, EuiBottomBar } from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
 
-export default () => {
+export const bottomBarConfig = () => {
   const docgenInfo = Array.isArray(EuiBottomBar.__docgenInfo)
     ? EuiBottomBar.__docgenInfo[0]
     : EuiBottomBar.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
   propsToUse.children = {
-    value: '<EuiButton fill size="s">Save</EuiButton>',
     type: PropTypes.ReactNode,
-    hidden: false,
+    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 {
@@ -30,9 +49,6 @@ export default () => {
           named: ['EuiBottomBar', 'EuiButton'],
         },
       },
-      customProps: {
-        onToggle: dummyFunction,
-      },
     },
   };
 };

src-docs/src/views/breadcrumbs/breadcrumbs.js

@@ -36,7 +36,7 @@ export default () => {
   ];
 
   return (
-    <EuiPageContent>
+    <EuiPageContent role={null}>
       <EuiBreadcrumbs
         breadcrumbs={breadcrumbs}
         truncate={false}

src-docs/src/views/elastic_charts/sizes.js

@@ -193,6 +193,7 @@ export class Sizes extends Component {
       <Fragment>
         <EuiPage>
           <EuiPageContent
+            role={null}
             horizontalPosition="center"
             style={{
               width: `${width}%`,