Deprecate previous EuiPage and EuiPageTemplate components (#7265)

elastic · Oct 18, 2023 · 0e7f309 · 0e7f309
1 parent 6f5d004
commit 0e7f309
Show file tree

Hide file tree

Showing 35 changed files with 14 additions and 2,893 deletions.
diff --git 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<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 />
 

diff --git a/src-docs/src/views/page_template/deprecated.tsx b/src-docs/src/views/page_template/deprecated.tsx
diff --git 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: (
     <>
-      <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}
-    />
   </>
 );
diff --git a/src-docs/src/views/page_template/playground.js b/src-docs/src/views/page_template/playground.js
diff --git 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';