Deprecate previous EuiPage and EuiPageTemplate components

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<WithEuiThemeProps, State> {
 
     return (
       <>
-        <EuiPage>
-          <EuiPageContent
-            role={null}
-            horizontalPosition="center"
+        <EuiPageSection component="div" color="subdued" paddingSize="none">
+          <EuiPanel
+            color="plain"
+            hasShadow
             style={{
-              width: `${width}%`,
+              inlineSize: `${width}%`,
+              marginInline: 'auto',
               overflow: 'hidden',
             }}
           >
@@ -246,8 +247,8 @@ class Sizes extends Component<WithEuiThemeProps, State> {
                 tickFormat={(d) => Number(d).toFixed(2)}
               />
             </Chart>
-          </EuiPageContent>
-        </EuiPage>
+          </EuiPanel>
+        </EuiPageSection>
 
         <EuiSpacer />
 

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: (
     <>
-      <EuiCallOut
-        iconType="warning"
-        color="warning"
-        title={
-          <>
-            The previous version of <strong>EuiPageTemplate</strong> has been
-            deprecated to <strong>EuiPageTemplate_Deprecated</strong>.{' '}
-            <Link to="#deprecated">More info below.</Link>
-          </>
-        }
-      />
-      <EuiSpacer />
       <EuiText>
         <p>
-          The new <strong>EuiPageTemplate</strong> is a namespaced component for
+          <strong>EuiPageTemplate</strong> 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 = () => (
         </>
       }
     />
-
-    <GuideSection
-      title={pageTemplateExamplesSections[4].title}
-      id={pageTemplateExamplesSections[4].id}
-      text={
-        <>
-          <p>
-            The previous version of <strong>EuiPageTemplate</strong> has been
-            deprecated and renamed to{' '}
-            <strong>EuiPageTemplate_Deprecated</strong>.
-          </p>
-          <p>
-            To continue using the previous version, you can update your import
-            statement to{' '}
-            <EuiCode language="ts">
-              {
-                "import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui'"
-              }
-            </EuiCode>
-            .
-          </p>
-        </>
-      }
-      demo={
-        <div className="guideDemo__highlightLayout guideDemo__highlightLayout--border">
-          <Deprecated />
-        </div>
-      }
-      source={[
-        {
-          type: GuideSectionTypes.JS,
-          code: DeprecatedSource,
-        },
-      ]}
-      demoPanelProps={{ paddingSize: 'none' }}
-      props={{ EuiPageTemplate_Deprecated }}
-      playground={pageTemplateConfig}
-    />
   </>
 );

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';