diff --git a/src-docs/src/views/elastic_charts/sizes.tsx b/src-docs/src/views/elastic_charts/sizes.tsx index 50729c2dfca..ad91b65a1d2 100644 --- a/src-docs/src/views/elastic_charts/sizes.tsx +++ b/src-docs/src/views/elastic_charts/sizes.tsx @@ -25,10 +25,10 @@ import { EuiTitle, EuiFlexGrid, EuiFlexItem, - EuiPageContent_Deprecated as EuiPageContent, + EuiPageSection, EuiFormRow, EuiRange, - EuiPage, + EuiPanel, EuiButton, EuiCopy, } from '../../../../src/components'; @@ -192,12 +192,13 @@ class Sizes extends Component { return ( <> - - + @@ -246,8 +247,8 @@ class Sizes extends Component { tickFormat={(d) => Number(d).toFixed(2)} /> - - + + diff --git a/src-docs/src/views/page_template/deprecated.tsx b/src-docs/src/views/page_template/deprecated.tsx deleted file mode 100644 index d41715f94fd..00000000000 --- a/src-docs/src/views/page_template/deprecated.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useState } from 'react'; - -import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '../../../../src'; - -export default () => { - const [showBottomBar, setshowBottomBar] = useState(false); - - return ( - setshowBottomBar((showing) => !showing), - }, - ], - }} - > - {'content'} - - ); -}; diff --git a/src-docs/src/views/page_template/examples.tsx b/src-docs/src/views/page_template/examples.tsx index 8710a56cc5f..043fb6bd47c 100644 --- a/src-docs/src/views/page_template/examples.tsx +++ b/src-docs/src/views/page_template/examples.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { GuideSection } from '../../components/guide_section/guide_section'; -import { GuideSectionTypes } from '../../components/guide_section/guide_section_types'; import { EuiText, @@ -11,7 +10,6 @@ import { EuiPageHeader, EuiPageSection, EuiPageSidebar, - EuiPageTemplate_Deprecated, } from '../../../../src'; import { _EuiPageTemplate } from '../../../../src/components/page_template/page_template'; @@ -26,12 +24,6 @@ const BottomBarSource = require('!!raw-loader!./page_template_bottom_bar'); import Empty from './page_template_empty'; const EmptySource = require('!!raw-loader!./page_template_empty'); -import Deprecated from './deprecated'; -const DeprecatedSource = require('!!raw-loader!./deprecated'); - -// @ts-ignore Importing JS file -import { pageTemplateConfig } from './playground'; - // This array is used inside routes.js to create the sidenav sub-sections export const pageTemplateExamplesSections = [ { @@ -137,21 +129,9 @@ export const PageTemplateInfo = { title: 'Page template', intro: ( <> - - The previous version of EuiPageTemplate has been - deprecated to EuiPageTemplate_Deprecated.{' '} - More info below. - - } - /> -

- The new EuiPageTemplate is a namespaced component for + EuiPageTemplate is a namespaced component for creating the different types of page layout patterns described in these docs. It is somewhat opinionated, but still has the ability to customize most of the inner components directly on their instance. @@ -424,43 +404,5 @@ export const PageTemplateExample = () => ( } /> - - -

- The previous version of EuiPageTemplate has been - deprecated and renamed to{' '} - EuiPageTemplate_Deprecated. -

-

- To continue using the previous version, you can update your import - statement to{' '} - - { - "import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui'" - } - - . -

- - } - demo={ -
- -
- } - source={[ - { - type: GuideSectionTypes.JS, - code: DeprecatedSource, - }, - ]} - demoPanelProps={{ paddingSize: 'none' }} - props={{ EuiPageTemplate_Deprecated }} - playground={pageTemplateConfig} - /> ); diff --git a/src-docs/src/views/page_template/playground.js b/src-docs/src/views/page_template/playground.js deleted file mode 100644 index 610a0941312..00000000000 --- a/src-docs/src/views/page_template/playground.js +++ /dev/null @@ -1,78 +0,0 @@ -import { PropTypes } from 'react-view'; -import { - EuiPageTemplate_Deprecated as EuiPageTemplate, - EuiPageHeader, - EuiButton, -} from '../../../../src/components/'; -import { - propUtilityForPlayground, - generateCustomProps, -} from '../../services/playground'; - -export const pageTemplateConfig = () => { - const docgenInfo = Array.isArray(EuiPageTemplate.__docgenInfo) - ? EuiPageTemplate.__docgenInfo[0] - : EuiPageTemplate.__docgenInfo; - const propsToUse = propUtilityForPlayground(docgenInfo.props); - - // TODO: Follow up on how to allow passing an object to a prop - // propsToUse.pageHeader = simulateFunction({ - // ...propsToUse.pageHeader, - // custom: { - // value: '{ pageTitle: "Page title" }', - // }, - // }); - - propsToUse.children = { - ...propsToUse.children, - value: 'Children', - type: PropTypes.ReactNode, - hidden: false, - }; - - propsToUse.bottomBar = { - ...propsToUse.bottomBar, - type: PropTypes.String, - }; - - propsToUse.direction = { - ...propsToUse.direction, - value: 'row', - }; - - propsToUse.pageSideBar = { - ...propsToUse.pageSideBar, - value: 'Side bar', - type: PropTypes.String, - hidden: false, - }; - - propsToUse.restrictWidth = { - ...propsToUse.restrictWidth, - type: PropTypes.String, - }; - - propsToUse.fullHeight = { - ...propsToUse.fullHeight, - type: PropTypes.Boolean, - }; - - return { - config: { - componentName: 'EuiPageTemplate', - props: propsToUse, - scope: { - EuiPageTemplate, - EuiPageHeader, - EuiButton, - }, - imports: { - '@elastic/eui': { - named: ['EuiPageTemplate', 'EuiPageHeader', 'EuiButton'], - }, - }, - customProps: generateCustomProps(['pageHeader']), - }, - playgroundClassName: 'guideDemo__highlightLayout--playground', - }; -}; diff --git a/src/components/index.scss b/src/components/index.scss index 9d2983b50e2..4443e3a4c91 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -10,7 +10,6 @@ @import 'form/index'; @import 'markdown_editor/index'; @import 'notification/index'; -@import 'page/index'; // Page needs to come after Panel for cascade specificity @import 'tree_view/index'; @import 'side_nav/index'; @import 'search_bar/index'; diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap deleted file mode 100644 index 58d259b75d3..00000000000 --- a/src/components/page/__snapshots__/page_template.test.tsx.snap +++ /dev/null @@ -1,1204 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageTemplate_Deprecated fullHeight is rendered with noscroll 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated fullHeight is rendered with true 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated restrict width can be set to a custom number 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated restrict width can be turned off 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody is rendered with pageBodyProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody is rendered with pageContentBodyProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody is rendered with pageContentProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody is rendered with pageHeader 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody minHeight is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody paddingSize is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody style is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody with pageSideBar is rendered 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredBody with pageSideBar is rendered with pageSideBarProps 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent is rendered with pageBodyProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent is rendered with pageContentBodyProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent is rendered with pageContentProps 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent is rendered with pageHeader 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent minHeight is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent paddingSize is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent style is rendered 1`] = ` -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent with pageSideBar is rendered 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template centeredContent with pageSideBar is rendered with pageSideBarProps 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default is rendered with pageBodyProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default is rendered with pageContentBodyProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default is rendered with pageContentProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default is rendered with pageHeader 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default minHeight is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default paddingSize is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default style is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default with pageSideBar is rendered 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template default with pageSideBar is rendered with pageSideBarProps 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty is rendered with pageBodyProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty is rendered with pageContentBodyProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty is rendered with pageContentProps 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty is rendered with pageHeader 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty minHeight is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty paddingSize is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty style is rendered 1`] = ` -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty with pageSideBar is rendered 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated template empty with pageSideBar is rendered with pageSideBarProps 1`] = ` -
-
- Side Bar -
-
-
-
-
-
-
-`; - -exports[`EuiPageTemplate_Deprecated with bottomBar is rendered 1`] = ` -
-
-
-
-
-
-

- Page level controls -

-
- Bottom Bar -
-
-

- There is a new region landmark with page level controls at the end of the document. -

-
-
-`; diff --git a/src/components/page/_index.scss b/src/components/page/_index.scss deleted file mode 100644 index 81f2a02f338..00000000000 --- a/src/components/page/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'page_content/index'; -@import 'page_side_bar/index'; diff --git a/src/components/page/index.ts b/src/components/page/index.ts index 6326b61083b..a36b4b516c0 100644 --- a/src/components/page/index.ts +++ b/src/components/page/index.ts @@ -12,19 +12,6 @@ export { EuiPage } from './page'; export type { EuiPageBodyProps } from './page_body'; export { EuiPageBody } from './page_body'; -export type { - EuiPageContentProps, - EuiPageContentBodyProps, - EuiPageContentHeaderProps, - EuiPageContentHeaderSectionProps, -} from './page_content'; -export { - EuiPageContent_Deprecated, - EuiPageContentBody_Deprecated, - EuiPageContentHeader_Deprecated, - EuiPageContentHeaderSection_Deprecated, -} from './page_content'; - export type { EuiPageHeaderContentProps, EuiPageHeaderProps, @@ -39,11 +26,5 @@ export { export type { EuiPageSectionProps } from './page_section'; export { EuiPageSection } from './page_section'; -export type { EuiPageSideBarProps_Deprecated } from './page_side_bar'; -export { EuiPageSideBar_Deprecated } from './page_side_bar'; - export type { EuiPageSidebarProps } from './page_sidebar'; export { EuiPageSidebar } from './page_sidebar'; - -export type { EuiPageTemplateProps_Deprecated } from './page_template'; -export { EuiPageTemplate_Deprecated } from './page_template'; diff --git a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap deleted file mode 100644 index cd73b26af04..00000000000 --- a/src/components/page/page_content/__snapshots__/page_content.test.tsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageContent accepts panel props 1`] = ` -
-`; - -exports[`EuiPageContent horizontalPosition is rendered 1`] = ` -
-`; - -exports[`EuiPageContent is rendered 1`] = ` -
-`; - -exports[`EuiPageContent role can be removed 1`] = ` -
-`; - -exports[`EuiPageContent verticalPosition is rendered 1`] = ` -
-`; diff --git a/src/components/page/page_content/__snapshots__/page_content_body.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content_body.test.tsx.snap deleted file mode 100644 index a6edab30afc..00000000000 --- a/src/components/page/page_content/__snapshots__/page_content_body.test.tsx.snap +++ /dev/null @@ -1,53 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageContentBody is rendered 1`] = ` -
-`; - -exports[`EuiPageContentBody paddingSize l is rendered 1`] = ` -
-`; - -exports[`EuiPageContentBody paddingSize m is rendered 1`] = ` -
-`; - -exports[`EuiPageContentBody paddingSize none is rendered 1`] = ` -
-`; - -exports[`EuiPageContentBody paddingSize s is rendered 1`] = ` -
-`; - -exports[`EuiPageContentBody restrict width can be set to a custom number 1`] = ` -
-`; - -exports[`EuiPageContentBody restrict width can be set to a custom value and does not override custom style 1`] = ` -
-`; - -exports[`EuiPageContentBody restrict width can be set to a default 1`] = ` -
-`; diff --git a/src/components/page/page_content/__snapshots__/page_content_header.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content_header.test.tsx.snap deleted file mode 100644 index 829eb226b4b..00000000000 --- a/src/components/page/page_content/__snapshots__/page_content_header.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageContentHeader is rendered 1`] = ` -
-`; diff --git a/src/components/page/page_content/__snapshots__/page_content_header_section.test.tsx.snap b/src/components/page/page_content/__snapshots__/page_content_header_section.test.tsx.snap deleted file mode 100644 index 7c4e83a039e..00000000000 --- a/src/components/page/page_content/__snapshots__/page_content_header_section.test.tsx.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageContentHeaderSection is rendered 1`] = ` -
-`; diff --git a/src/components/page/page_content/_index.scss b/src/components/page/page_content/_index.scss deleted file mode 100644 index a34983e1981..00000000000 --- a/src/components/page/page_content/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'page_content'; -@import 'page_content_body'; -@import 'page_content_header'; -@import 'page_content_header_section'; diff --git a/src/components/page/page_content/_page_content.scss b/src/components/page/page_content/_page_content.scss deleted file mode 100644 index 7062f6d5eda..00000000000 --- a/src/components/page/page_content/_page_content.scss +++ /dev/null @@ -1,25 +0,0 @@ -.euiPageContent { - width: 100%; - min-width: 0; // Make sure that inner flex layouts don't get larger than this container - - // Assumes that in the default theme, the borders are touching the edge of the EuiPage so remove them. - &.euiPageContent--borderRadiusNone { // Nested for specificity - border-left-width: 0; - border-right-width: 0; - border-bottom-width: 0; - } - - &.euiPageContent--verticalCenter { - align-self: center; - margin-top: auto; - margin-bottom: auto; - flex-grow: 0; - } - - &.euiPageContent--horizontalCenter { - width: auto; - margin-left: auto; - margin-right: auto; - flex-grow: 0; // Offsets the properties of .euiPanel within flexboxes - } -} diff --git a/src/components/page/page_content/_page_content_body.scss b/src/components/page/page_content/_page_content_body.scss deleted file mode 100644 index b426ea42a94..00000000000 --- a/src/components/page/page_content/_page_content_body.scss +++ /dev/null @@ -1,19 +0,0 @@ -.euiPageContentBody { - &--restrictWidth-default, - &--restrictWidth-custom { - margin-left: auto; - margin-right: auto; - width: 100%; - } - - &--restrictWidth-default { - max-width: $euiPageDefaultMaxWidth; - } -} - -// Uses the same values as EuiPanel -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPageContentBody--#{$modifier} { - padding: $amount; - } -} diff --git a/src/components/page/page_content/_page_content_header.scss b/src/components/page/page_content/_page_content_header.scss deleted file mode 100644 index f830d09686d..00000000000 --- a/src/components/page/page_content/_page_content_header.scss +++ /dev/null @@ -1,20 +0,0 @@ -.euiPageContentHeader { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - // Adjust vertical spacing based on content padding prop - @each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPageContent[class*='#{$modifier}'] & { - margin-bottom: $amount; - } - } -} - -@include euiBreakpoint('xs', 's') { - .euiPageContentHeader--responsive { - flex-direction: column; - align-items: flex-start; - } -} diff --git a/src/components/page/page_content/_page_content_header_section.scss b/src/components/page/page_content/_page_content_header_section.scss deleted file mode 100644 index 910f7e4b917..00000000000 --- a/src/components/page/page_content/_page_content_header_section.scss +++ /dev/null @@ -1,17 +0,0 @@ -.euiPageContentHeaderSection { - & + & { - margin-left: $euiSizeXL; - } -} - -// Adjust vertical spacing based on content padding prop -@include euiBreakpoint('xs', 's') { - @each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPageContent[class*='#{$modifier}'] .euiPageContentHeader--responsive { - .euiPageContentHeaderSection + .euiPageContentHeaderSection { - margin-left: 0; - margin-top: $amount / 2; - } - } - } -} diff --git a/src/components/page/page_content/index.ts b/src/components/page/page_content/index.ts deleted file mode 100644 index 5d9de54a192..00000000000 --- a/src/components/page/page_content/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export type { EuiPageContentProps } from './page_content'; -export { EuiPageContent_Deprecated } from './page_content'; -export type { EuiPageContentBodyProps } from './page_content_body'; -export { EuiPageContentBody_Deprecated } from './page_content_body'; -export type { EuiPageContentHeaderProps } from './page_content_header'; -export { EuiPageContentHeader_Deprecated } from './page_content_header'; -export type { EuiPageContentHeaderSectionProps } from './page_content_header_section'; -export { EuiPageContentHeaderSection_Deprecated } from './page_content_header_section'; diff --git a/src/components/page/page_content/page_content.test.tsx b/src/components/page/page_content/page_content.test.tsx deleted file mode 100644 index 9a334b84753..00000000000 --- a/src/components/page/page_content/page_content.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../../test/required_props'; -import { render } from '../../../test/rtl'; - -import { EuiPageContent_Deprecated as EuiPageContent } from './page_content'; - -describe('EuiPageContent', () => { - test('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('verticalPosition is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('horizontalPosition is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('role can be removed', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('accepts panel props', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); -}); diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx deleted file mode 100644 index 55a13aa0c68..00000000000 --- a/src/components/page/page_content/page_content.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps } from '../../common'; - -import { EuiPanel, _EuiPanelProps, _EuiPanelDivlike } from '../../panel/panel'; - -export type EuiPageContentVerticalPositions = 'center'; -export type EuiPageContentHorizontalPositions = 'center'; - -const verticalPositionToClassNameMap: { - [position in EuiPageContentVerticalPositions]: string | null; -} = { - center: 'euiPageContent--verticalCenter', -}; - -const horizontalPositionToClassNameMap: { - [position in EuiPageContentHorizontalPositions]: string | null; -} = { - center: 'euiPageContent--horizontalCenter', -}; - -export type EuiPageContentProps = CommonProps & - // Use only the div properties of EuiPanel (not button) - _EuiPanelProps & - Omit<_EuiPanelDivlike, 'onClick' | 'role'> & { - verticalPosition?: EuiPageContentVerticalPositions; - horizontalPosition?: EuiPageContentHorizontalPositions; - /** - * There should only be one EuiPageContent per page and should contain the main contents. - * If this is untrue, set role = `null`, or change it to match your needed aria role - */ - role?: HTMLAttributes['role'] | null; - }; - -/** - * @deprecated Use EuiPageSection instead - */ -export const EuiPageContent_Deprecated: FunctionComponent< - EuiPageContentProps -> = ({ - verticalPosition, - horizontalPosition, - paddingSize = 'l', - borderRadius, - children, - className, - role: _role = 'main', - ...rest -}) => { - const role = _role === null ? undefined : _role; - - const borderRadiusClass = - borderRadius === 'none' ? 'euiPageContent--borderRadiusNone' : ''; - - const classes = classNames( - 'euiPageContent', - borderRadiusClass, - verticalPosition ? verticalPositionToClassNameMap[verticalPosition] : null, - horizontalPosition - ? horizontalPositionToClassNameMap[horizontalPosition] - : null, - className - ); - - return ( - - {children} - - ); -}; diff --git a/src/components/page/page_content/page_content_body.test.tsx b/src/components/page/page_content/page_content_body.test.tsx deleted file mode 100644 index b3164442701..00000000000 --- a/src/components/page/page_content/page_content_body.test.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../../test/required_props'; -import { render } from '../../../test/rtl'; - -import { - EuiPageContentBody_Deprecated as EuiPageContentBody, - PADDING_SIZES, -} from './page_content_body'; - -describe('EuiPageContentBody', () => { - test('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('paddingSize', () => { - PADDING_SIZES.forEach((size) => { - it(`${size} is rendered`, () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - }); - - describe('restrict width', () => { - test('can be set to a default', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('can be set to a custom number', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('can be set to a custom value and does not override custom style', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); -}); diff --git a/src/components/page/page_content/page_content_body.tsx b/src/components/page/page_content/page_content_body.tsx deleted file mode 100644 index e55e0ae55c7..00000000000 --- a/src/components/page/page_content/page_content_body.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; -import { - _EuiPageRestrictWidth, - setPropsForRestrictedPageWidth, -} from '../_restrict_width'; - -const paddingSizeToClassNameMap = { - none: null, - s: 'euiPageContentBody--paddingSmall', - m: 'euiPageContentBody--paddingMedium', - l: 'euiPageContentBody--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - -export interface EuiPageContentBodyProps - extends CommonProps, - HTMLAttributes, - _EuiPageRestrictWidth { - /** - * Adjust the padding. - * When using this setting it's best to be consistent throughout all similar usages - */ - paddingSize?: (typeof PADDING_SIZES)[number]; -} - -/** - * @deprecated Use EuiPageSection instead - */ -export const EuiPageContentBody_Deprecated: FunctionComponent< - EuiPageContentBodyProps -> = ({ - children, - restrictWidth = false, - paddingSize = 'none', - style, - className, - ...rest -}) => { - const { widthClassName, newStyle } = setPropsForRestrictedPageWidth( - restrictWidth, - style - ); - - const classes = classNames( - 'euiPageContentBody', - paddingSizeToClassNameMap[paddingSize], - { - [`euiPageContentBody--${widthClassName}`]: widthClassName, - }, - className - ); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/page/page_content/page_content_header.test.tsx b/src/components/page/page_content/page_content_header.test.tsx deleted file mode 100644 index aa1ef8073fe..00000000000 --- a/src/components/page/page_content/page_content_header.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../../test/required_props'; -import { render } from '../../../test/rtl'; - -import { EuiPageContentHeader_Deprecated as EuiPageContentHeader } from './page_content_header'; - -describe('EuiPageContentHeader', () => { - test('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); -}); diff --git a/src/components/page/page_content/page_content_header.tsx b/src/components/page/page_content/page_content_header.tsx deleted file mode 100644 index ff3fbe0b59c..00000000000 --- a/src/components/page/page_content/page_content_header.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps } from '../../common'; - -export interface EuiPageContentHeaderProps - extends CommonProps, - HTMLAttributes { - /** - * Set to false if you don't want the children to stack - * at small screen sizes. - */ - responsive?: boolean; -} - -/** - * @deprecated Use EuiPageHeader instead - */ -export const EuiPageContentHeader_Deprecated: FunctionComponent< - EuiPageContentHeaderProps -> = ({ children, className, responsive = true, ...rest }) => { - const classes = classNames( - 'euiPageContentHeader', - { - 'euiPageContentHeader--responsive': responsive, - }, - className - ); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/page/page_content/page_content_header_section.test.tsx b/src/components/page/page_content/page_content_header_section.test.tsx deleted file mode 100644 index 9b77a311f06..00000000000 --- a/src/components/page/page_content/page_content_header_section.test.tsx +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../../test/required_props'; -import { render } from '../../../test/rtl'; - -import { EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection } from './page_content_header_section'; - -describe('EuiPageContentHeaderSection', () => { - test('is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); -}); diff --git a/src/components/page/page_content/page_content_header_section.tsx b/src/components/page/page_content/page_content_header_section.tsx deleted file mode 100644 index b721352c7db..00000000000 --- a/src/components/page/page_content/page_content_header_section.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps } from '../../common'; - -export interface EuiPageContentHeaderSectionProps - extends CommonProps, - HTMLAttributes {} - -/** - * @deprecated Use EuiPageHeader instead - */ -export const EuiPageContentHeaderSection_Deprecated: FunctionComponent< - EuiPageContentHeaderSectionProps -> = ({ children, className, ...rest }) => { - const classes = classNames('euiPageContentHeaderSection', className); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/page/page_side_bar/__snapshots__/page_side_bar.test.tsx.snap b/src/components/page/page_side_bar/__snapshots__/page_side_bar.test.tsx.snap deleted file mode 100644 index c6f0dc737c2..00000000000 --- a/src/components/page/page_side_bar/__snapshots__/page_side_bar.test.tsx.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiPageSideBar is rendered 1`] = ` -
-`; - -exports[`EuiPageSideBar paddingSize l is rendered 1`] = ` -
-`; - -exports[`EuiPageSideBar paddingSize m is rendered 1`] = ` -
-`; - -exports[`EuiPageSideBar paddingSize none is rendered 1`] = ` -
-`; - -exports[`EuiPageSideBar paddingSize s is rendered 1`] = ` -
-`; - -exports[`EuiPageSideBar sticky is rendered 1`] = ` -
-`; diff --git a/src/components/page/page_side_bar/_index.scss b/src/components/page/page_side_bar/_index.scss deleted file mode 100644 index 0822f6a29d3..00000000000 --- a/src/components/page/page_side_bar/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'page_side_bar'; diff --git a/src/components/page/page_side_bar/_page_side_bar.scss b/src/components/page/page_side_bar/_page_side_bar.scss deleted file mode 100644 index 4083d7c0af5..00000000000 --- a/src/components/page/page_side_bar/_page_side_bar.scss +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Note: Margin is added in _page.scss when EuiPage has `paddingSize` - * 1. Prevent side bar width from changing when content width changes. - */ -.euiPageSideBar { - min-width: $euiPageSidebarMinWidth + ($euiSizeL * 2); - flex: 0 1 0%; /* 1 */ -} - -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPageSideBar--#{$modifier} { - padding: $amount; - } -} - -@include euiBreakpoint('xs', 's') { - .euiPageSideBar { - width: 100%; - } -} - -@include euiBreakpoint('m', 'l', 'xl') { - .euiPageSideBar--sticky { - @include euiScrollBar; - overflow-y: auto; - flex-grow: 1; - position: sticky; - max-height: 100vh; - top: 0; - } -} diff --git a/src/components/page/page_side_bar/index.ts b/src/components/page/page_side_bar/index.ts deleted file mode 100644 index 4b8069aafb9..00000000000 --- a/src/components/page/page_side_bar/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export type { EuiPageSideBarProps_Deprecated } from './page_side_bar'; -export { EuiPageSideBar_Deprecated } from './page_side_bar'; diff --git a/src/components/page/page_side_bar/page_side_bar.test.tsx b/src/components/page/page_side_bar/page_side_bar.test.tsx deleted file mode 100644 index 3d1976bb51b..00000000000 --- a/src/components/page/page_side_bar/page_side_bar.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../../test/required_props'; -import { render } from '../../../test/rtl'; - -import { - EuiPageSideBar_Deprecated as EuiPageSideBar, - PADDING_SIZES, -} from './page_side_bar'; - -describe('EuiPageSideBar', () => { - test('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('sticky is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('paddingSize', () => { - PADDING_SIZES.forEach((size) => { - it(`${size} is rendered`, () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - }); -}); diff --git a/src/components/page/page_side_bar/page_side_bar.tsx b/src/components/page/page_side_bar/page_side_bar.tsx deleted file mode 100644 index ea6d94d32c2..00000000000 --- a/src/components/page/page_side_bar/page_side_bar.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; - -const paddingSizeToClassNameMap = { - none: null, - s: 'euiPageSideBar--paddingSmall', - m: 'euiPageSideBar--paddingMedium', - l: 'euiPageSideBar--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - -/** - * @deprecated Use the new EuiPageSidebarProps in page/page_sidebar instead - */ -export interface EuiPageSideBarProps_Deprecated - extends CommonProps, - HTMLAttributes { - /** - * Adds `position: sticky` - */ - sticky?: boolean; - /** - * Adds padding around the children - */ - paddingSize?: (typeof PADDING_SIZES)[number]; -} - -/** - * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead - */ -export const EuiPageSideBar_Deprecated: FunctionComponent< - EuiPageSideBarProps_Deprecated -> = ({ children, className, sticky, paddingSize = 'none', ...rest }) => { - const classes = classNames( - 'euiPageSideBar', - paddingSizeToClassNameMap[paddingSize], - { - 'euiPageSideBar--sticky': sticky, - }, - className - ); - - return ( -
- {children} -
- ); -}; diff --git a/src/components/page/page_template.test.tsx b/src/components/page/page_template.test.tsx deleted file mode 100644 index 419e0588592..00000000000 --- a/src/components/page/page_template.test.tsx +++ /dev/null @@ -1,173 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { requiredProps } from '../../test/required_props'; -import { render } from '../../test/rtl'; - -import { - EuiPageTemplate_Deprecated as EuiPageTemplate, - TEMPLATES, -} from './page_template'; - -describe('EuiPageTemplate_Deprecated', () => { - test('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('restrict width', () => { - test('can be turned off', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('can be set to a custom number', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - - describe('template', () => { - TEMPLATES.forEach((template) => { - describe(`${template}`, () => { - it('is rendered', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - it('paddingSize is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - it('minHeight is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - it('style is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - describe('with pageSideBar', () => { - test('is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('is rendered with pageSideBarProps', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - - test('is rendered with pageHeader', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('is rendered with pageBodyProps', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('is rendered with pageContentProps', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('is rendered with pageContentBodyProps', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - }); - }); - - describe('with bottomBar', () => { - test('is rendered', () => { - const { container } = render( - - ); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); - - describe('fullHeight', () => { - test('is rendered with true', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - - test('is rendered with noscroll', () => { - const { container } = render(); - - expect(container.firstChild).toMatchSnapshot(); - }); - }); -}); diff --git a/src/components/page/page_template.tsx b/src/components/page/page_template.tsx deleted file mode 100644 index fa66c61ce23..00000000000 --- a/src/components/page/page_template.tsx +++ /dev/null @@ -1,552 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { CSSProperties, FunctionComponent, ReactNode } from 'react'; -import classNames from 'classnames'; -import { css } from '@emotion/react'; -import { EuiPage, EuiPageProps } from './page'; -import { - EuiPageSideBar_Deprecated as EuiPageSideBar, - EuiPageSideBarProps_Deprecated as EuiPageSideBarProps, -} from './page_side_bar'; -import { EuiPageBody, EuiPageBodyProps } from './page_body'; -import { EuiPageHeader, EuiPageHeaderProps } from './page_header'; -import { - EuiPageContent_Deprecated as EuiPageContent, - EuiPageContentBody_Deprecated as EuiPageContentBody, - EuiPageContentProps, - EuiPageContentBodyProps, -} from './page_content'; -import { EuiBottomBarProps, EuiBottomBar } from '../bottom_bar'; -import { useIsWithinBreakpoints } from '../../services'; -import { EuiFlexGroup, EuiFlexItem } from '../flex'; -import { useEuiPaddingSize, logicalCSS } from '../../global_styling'; - -export const TEMPLATES = [ - 'default', - 'centeredBody', - 'centeredContent', - 'empty', -] as const; - -export type EuiPageTemplateProps_Deprecated = Omit< - EuiPageProps, - 'paddingSize' -> & { - /** - * Choose between 3 types of templates. - * `default`: Typical layout with nothing centered - * `centeredBody`: The panelled content is centered - * `centeredContent`: The content inside the panel is centered - * `empty`: Removes the panneling of the page content - */ - template?: (typeof TEMPLATES)[number]; - /** - * Padding size will not get applied to the over-arching #EuiPage, - * but will propogate through all the components to keep them in sync - */ - paddingSize?: 'none' | 's' | 'm' | 'l'; - /** - * Optionally include #EuiPageSideBar content. - * The inclusion of this will affect the whole layout - */ - pageSideBar?: ReactNode; - /** - * Gets passed along to the #EuiPageSideBar component - */ - pageSideBarProps?: EuiPageSideBarProps; - /** - * Optionally include an #EuiPageHeader by passing an object of its props - */ - pageHeader?: EuiPageHeaderProps; - /** - * Gets passed along to the #EuiPageBody component - */ - pageBodyProps?: EuiPageBodyProps; - /** - * Gets passed along to the #EuiPageContent component - */ - pageContentProps?: EuiPageContentProps; - /** - * Gets passed along to the #EuiPageContentBody component - */ - pageContentBodyProps?: EuiPageContentBodyProps; - /** - * Adds contents inside of an EuiBottomBar. - * Only works when `template = 'default'` - */ - bottomBar?: EuiBottomBarProps['children']; - /** - * Gets passed along to the #EuiBottomBar component if `bottomBar` has contents - */ - bottomBarProps?: EuiBottomBarProps; - /** - * Stretches or restricts the height to 100% of the parent; - * `true`: scrolls the EuiPageContentBody; - * `noscroll`: removes all scroll ability; - * Only works when `template = 'default | empty'` and breakpoint is `m` and above - */ - fullHeight?: boolean | 'noscroll'; - /** - * Minimum height in which to enforce scrolling - */ - minHeight?: CSSProperties['minHeight']; -}; - -/** - * This component has been deprecated in favor of the new - * namespaced version. You can still import this component - * until August 2023 by importing `as EuiPageTemplate`. - * - * @deprecated use EuiPageTemplate from page_template/page_template instead - */ -export const EuiPageTemplate_Deprecated: FunctionComponent< - EuiPageTemplateProps_Deprecated -> = ({ - template = 'default', - restrictWidth = true, - grow = true, - paddingSize = 'l', - fullHeight, - children, - className, - pageSideBar, - pageSideBarProps, - pageHeader, - pageBodyProps, - pageContentProps, - pageContentBodyProps, - bottomBar, - bottomBarProps, - minHeight = 460, - ...rest -}) => { - // BWC page header margin to match padding - const headerMargin = css( - logicalCSS('margin-bottom', useEuiPaddingSize(paddingSize)) - ); - - /** - * Full height ~madness~ logic - */ - const canFullHeight = - useIsWithinBreakpoints(['m', 'l', 'xl']) && - (template === 'default' || template === 'empty'); - const fullHeightClass = { 'eui-fullHeight': fullHeight && canFullHeight }; - const yScrollClass = { 'eui-yScroll': fullHeight && canFullHeight }; - - if (canFullHeight && fullHeight) { - // By using flex group it will also fix the negative margin issues for nested flex groups - children = ( - - - {children} - - - ); - - pageBodyProps = { - ...pageBodyProps, - className: classNames(fullHeightClass, pageBodyProps?.className), - }; - pageContentProps = { - ...pageContentProps, - className: classNames(yScrollClass, pageContentProps?.className), - }; - pageContentBodyProps = { - ...pageContentBodyProps, - className: classNames(fullHeightClass, pageContentBodyProps?.className), - }; - } - - const classes = classNames('euiPageTemplate', fullHeightClass, className); - const pageStyle = { minHeight, ...rest.style }; - - /** - * This seems very repetitious but it's the most readable, scalable, and maintainable - */ - - switch (template) { - /** - * CENTERED BODY - * The panelled content is centered - */ - case 'centeredBody': - return pageSideBar ? ( - - - {pageSideBar} - - - - {pageHeader && ( - - )} - - - {children} - - - - - ) : ( - - - {pageHeader && ( - - )} - {/* Extra page body to get the correct alignment and padding of the centered EuiPageContent */} - - - - {children} - - - - - - ); - - /** - * CENTERED CONTENT - * The content inside the panel is centered - */ - case 'centeredContent': - return pageSideBar ? ( - - - {pageSideBar} - - - - {pageHeader && ( - - )} - - - {children} - - - - - ) : ( - - - {pageHeader && ( - - )} - {/* Extra page content to get the correct alignment and padding of the centered EuiPageContent */} - - - - {children} - - - - - - ); - - /** - * EMPTY - * No panelling at all - */ - case 'empty': - return pageSideBar ? ( - - - {pageSideBar} - - - - {pageHeader && ( - - )} - - - {children} - - - - - ) : ( - - - {pageHeader && ( - - )} - - - {children} - - - - - ); - - /** - * DEFAULT - * Typical layout with nothing "centered" - */ - default: - // Only the default template can display a bottom bar - const bottomBarNode = bottomBar ? ( - - {/* Wrapping the contents with EuiPageContentBody allows us to match the restrictWidth to keep the contents aligned */} - - {bottomBar} - - - ) : undefined; - - return pageSideBar ? ( - - - {pageSideBar} - - - {/* The extra PageBody is to accommodate the bottom bar stretching to both sides */} - - - {pageHeader && ( - - )} - - - {children} - - - - {bottomBarNode} - - - ) : ( - - - {pageHeader && ( - - )} - - - {children} - - - {bottomBarNode} - - - ); - } -}; diff --git a/upcoming_changelogs/7265.md b/upcoming_changelogs/7265.md new file mode 100644 index 00000000000..4a72a7c4707 --- /dev/null +++ b/upcoming_changelogs/7265.md @@ -0,0 +1,3 @@ +**Breaking changes** + +- Removed `EuiPageTemplate_Deprecated`, `EuiPageSideBar_Deprecated`, and `EuiPageContent*_Deprecated`