Warning: DO NOT LOOK AT THE COMMIT HISTORY 🙈

New template components

EuiPageTemplate

This new version of the component is a namespaced component that clones the direct children, checking for if they're specifically one of the namespaced components and then clones and applies specific 'global' styling attributes to them based on top-level props and the full configuration of other existing components. If a child is not a namespaced component, it will get wrapped in a page section.

Note
This component no longer utilizes the general template prop to establish what type of layout should be rendered but just decides it based on the content passed in. But of course any configuration can be customized with top-level props.

The template specific versions of these child components are prefixed with _ because they should not be used as standalone components. They should always be used via their namespaced component similar to how EuiSplitPanel is handled.

For full details, read through the new documentation page: https://eui.elastic.co/pr_5905/#/templates/page-template

_EuiPageOuter as the overall wrapping component

The props are similar to that of EuiPage but without restrictWidth. It does add a responsive prop for customizing the breakpoints at which to shift to mobile view.

_EuiPageInner as the overall wrapping component for the main contents (not including sidebar)

The props are similar to EuiPageBody but without restrictWidth and panelProps as it doesn't extend EuiPanel. It does add a border prop which is mainly controlled by the template to add a single left-side border if a pagesidebar exists to provide definition of space.

_EuiPageSidebar as EuiPageTemplate.Sidebar

Note
Still trying to decide if this should become the new version of EuiPageSidebar and deprecate the old one.

This component is similar to the existing EuiPageSideBar in that it doesn't do much but handle some padding and sticky position behavior. However, this version is more customizable, relying less on Sass vars/mixins to allow customizing:

• sticky.offset: Manual customization of the top offset for sticky sidebars, otherwise if sticky=true it will calculate it's top position based on the new data-fixed-headers quantity applied to the body element.
• minWidth: Passed to the style tag, defaults to 260px
• responsive: Allows customizing the array of breakpoint names in which to show the mobile version

EuiPageHeader as EuiPageTemplate.Header

Extends the existing EuiPageHeader passing through props like paddingSize and restrictWidth to match those of top-level props.

EuiPageSection as EuiPageTemplate.Section

Extends the existing EuiPageSection passing through props like paddingSize and restrictWidth to match those of top-level props. I also took the opportunity to fix the output of the class list of EuiPageSection.

_EuiPageEmptyPrompt as EuiPageTemplate.EmptyPrompt

This component basically just wraps an EuiEmptyPrompt with a EuiPageSection, extending the props of both. It does allow easily providing the body content as the children. The main piece here is that it will always center the prompt in the section and handles the configuration of how to display the page section vs empty prompt based on the panelled and color values.

_EuiPageBottomBar as EuiPageTemplate.BottomBar

This component extends EuiBottomBar, but wraps the children in an EuiPageSection to allow restricting the width similar to the rest of the page contents and allowing the same paddingSize values.

Deprecations

• The original EuiPageTemplate has been deprecated and renamed to EuiPageTemplateProps_Deprecated to reflect that. To continue using the deprecated version, consumers will need to change their import to:

@import { EuiPageTemplateProps_Deprecated as EuiPageTemplateProps } from '@elastic/eui';

Other fixes/additions

• Fixed logicalStyle() to return the same value type as was passed in (instead of converting to string)
• Added logicalUnit for vh and vw

Documentation

All of the old template docs have been deleted and re-written for the new component. They've also moved to their own docs folder page_template/. They no longer showcase a "custom" build vs "template" build because the template is fully customizable. The page components examples have been simplified in their organization.

I've updated any usage of the deprecated version in other docs files to use the new template version.

Todo

✅ A11y: Page section roles

Right now the struggle is not being able to contain a role="header" inside of a role="main" element, otherwise I could blanket change the inner components (the wrapper of all page contents) in a <main> element. But since EuiPageHeader renders as a <header> element, this breaks the nesting rule.

Checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• [ ] Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• Updated the Figma library counterpart
• A changelog entry exists and is marked appropriately