Added component prop to EuiPageBody (#2410)

elastic · Oct 10, 2019 · 849e463 · 849e463
1 parent 9985aad
commit 849e463
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
+- Added `component` prop to `EuiPageBody`, switching the default from `div` to `main` ([#2410](https://github.com/elastic/eui/pull/2410))
 - Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406))
 
 **Bug fixes**

diff --git a/src/components/page/page_body/__snapshots__/page_body.test.js.snap b/src/components/page/page_body/__snapshots__/page_body.test.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiPageBody is rendered 1`] = `
-<div
+<main
   aria-label="aria-label"
   class="euiPageBody testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiPageBody restrict width can be set to a custom number 1`] = `
-<div
+<main
   aria-label="aria-label"
   class="euiPageBody euiPageBody--restrictWidth-custom testClass1 testClass2"
   data-test-subj="test subject string"
@@ -18,7 +18,7 @@ exports[`EuiPageBody restrict width can be set to a custom number 1`] = `
 `;
 
 exports[`EuiPageBody restrict width can be set to a custom value and measurement 1`] = `
-<div
+<main
   aria-label="aria-label"
   class="euiPageBody euiPageBody--restrictWidth-custom testClass1 testClass2"
   data-test-subj="test subject string"
@@ -27,7 +27,7 @@ exports[`EuiPageBody restrict width can be set to a custom value and measurement
 `;
 
 exports[`EuiPageBody restrict width can be set to a default 1`] = `
-<div
+<main
   aria-label="aria-label"
   class="euiPageBody euiPageBody--restrictWidth-default testClass1 testClass2"
   data-test-subj="test subject string"

diff --git a/src/components/page/page_body/page_body.js b/src/components/page/page_body/page_body.js
@@ -7,6 +7,7 @@ export const EuiPageBody = ({
   restrictWidth,
   style,
   className,
+  component,
   ...rest
 }) => {
   let widthClassname;
@@ -23,17 +24,22 @@ export const EuiPageBody = ({
 
   const classes = classNames('euiPageBody', widthClassname, className);
 
+  const OuterElement = component;
+
   return (
-    <div className={classes} style={newStyle || style} {...rest}>
+    <OuterElement className={classes} style={newStyle || style} {...rest}>
       {children}
-    </div>
+    </OuterElement>
   );
 };
 
 EuiPageBody.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-
+  /**
+   * Sets the HTML element for `EuiPageBody`.
+   */
+  component: PropTypes.string,
   /**
    * Sets the max-width of the page,
    * set to `true` to use the default size,
@@ -50,4 +56,5 @@ EuiPageBody.propTypes = {
 
 EuiPageBody.defaultProps = {
   restrictWidth: false,
+  component: 'main',
 };