diff --git a/CHANGELOG.md b/CHANGELOG.md index 43d33b7df8e..7ab22f7ed00 100644 --- 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 index e9b1a25ef9f..f09b9799df8 100644 --- 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,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiPageBody is rendered 1`] = ` -
{ let widthClassname; @@ -23,17 +24,22 @@ export const EuiPageBody = ({ const classes = classNames('euiPageBody', widthClassname, className); + const OuterElement = component; + return ( -
+ {children} -
+ ); }; 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', };