Remove iconType and iconProps from OuiPageHeader

src-docs/src/views/page/page_bottom_bar.js

@@ -34,7 +34,6 @@ export default ({ button = <></>, content, sideNav, bottomBar }) => {
           <OuiPageHeader
             bottomBorder
             restrictWidth
-            iconType="logoOpenSearch"
             pageTitle="Page title"
             rightSideItems={[button]}
           />

src-docs/src/views/page/page_centered_content.js

@@ -29,7 +29,6 @@ export default ({ button = <></>, content, sideNav }) => (
     <OuiPageBody panelled>
       <OuiPageHeader
         restrictWidth
-        iconType="logoOpenSearch"
         pageTitle="Page title"
         rightSideItems={[button]}
       />

src-docs/src/views/page/page_custom_content.js

@@ -26,7 +26,6 @@ export default ({ button = <></> }) => (
   <OuiPage paddingSize="l">
     <OuiPageBody>
       <OuiPageHeader
-        iconType="logoOpenSearch"
         pageTitle="Page title"
         rightSideItems={[button, <OuiButton>Do something</OuiButton>]}
         bottomBorder

src-docs/src/views/page/page_new.js

@@ -29,7 +29,6 @@ export default ({ button = <></>, content, sideNav }) => (
     <OuiPageBody panelled>
       <OuiPageHeader
         restrictWidth
-        iconType="logoOpenSearch"
         pageTitle="Page title"
         rightSideItems={[button]}
         tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}

src-docs/src/views/page/page_restricting_width.js

@@ -30,7 +30,6 @@ export default ({ button = <></>, content, sideNav }) => {
       <OuiPageBody panelled>
         <OuiPageHeader
           restrictWidth={'75%'}
-          iconType="logoOpenSearch"
           pageTitle="Page title"
           rightSideItems={[button]}
           description="Restricting the width to 75%."

src-docs/src/views/page/page_simple_empty_content.js

@@ -24,7 +24,6 @@ export default ({ button = <></>, content }) => (
     <OuiPageBody>
       <OuiPageHeader
         restrictWidth
-        iconType="logoOpenSearch"
         pageTitle="Page title"
         rightSideItems={[button]}
         paddingSize="l"

src-docs/src/views/page_header/page_header.js

@@ -21,7 +21,6 @@ import {
 export default () => (
   <OuiPageHeader
     pageTitle="Page title"
-    iconType="logoKibana"
     tabs={[
       {
         label: 'Tab 1',

src-docs/src/views/page_header/page_header_example.js

@@ -75,9 +75,8 @@ export const PageHeaderExample = {
             and primary array item will be displayed on the far right.
           </p>
           <p>
-            You can further adjust the display of these content types with an
-            optional <OuiCode>iconType</OuiCode> placed to the left of the
-            title, <OuiCode>alignItems</OuiCode> for adjusting the vertical
+            You can further adjust the display of these content types by
+            utilizing <OuiCode>alignItems</OuiCode> for adjusting the vertical
             alignment of the two sides, and <OuiCode>responsiveOrder</OuiCode>{' '}
             to determine which content side to display first on smaller screens.
           </p>

src-docs/src/views/page_header/playground.js

@@ -22,7 +22,6 @@ import {
 } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
-  iconValidator,
   simulateFunction,
   generateCustomProps,
   createOptionalEnum,
@@ -53,8 +52,6 @@ export const pageHeaderConfig = () => {
     : OuiPageHeader.__docgenInfo;
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
-  propsToUse.iconType = iconValidator(propsToUse.iconType);
-
   propsToUse.pageTitle = {
     ...propsToUse.pageTitle,
     type: PropTypes.String,

src/components/page/page_header/__snapshots__/page_header.test.tsx.snap

@@ -210,12 +210,6 @@ exports[`OuiPageHeader props page content props are passed down is rendered 1`]
         <h1
           class="ouiTitle ouiTitle--large"
         >
-          <span
-            aria-label="aria-label"
-            class="ouiPageHeaderContent__titleIcon testClass1 testClass2"
-            data-ouiicon-type="logoKibana"
-            data-test-subj="test subject string"
-          />
           Page title
         </h1>
         <div

src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap

@@ -354,56 +354,6 @@ exports[`OuiPageHeaderContent props pageTitle is rendered 1`] = `
 </div>
 `;
 
-exports[`OuiPageHeaderContent props pageTitle is rendered with icon 1`] = `
-<div
-  class="ouiPageHeaderContent"
->
-  <div
-    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
-  >
-    <div
-      class="ouiFlexItem"
-    >
-      <h1
-        class="ouiTitle ouiTitle--large"
-      >
-        <span
-          class="ouiPageHeaderContent__titleIcon"
-          data-ouiicon-type="logoKibana"
-        />
-        Page title
-      </h1>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`OuiPageHeaderContent props pageTitle is rendered with icon and iconProps 1`] = `
-<div
-  class="ouiPageHeaderContent"
->
-  <div
-    class="ouiFlexGroup ouiFlexGroup--gutterLarge ouiFlexGroup--alignItemsFlexStart ouiFlexGroup--directionRow ouiFlexGroup--responsive ouiPageHeaderContent__top"
-  >
-    <div
-      class="ouiFlexItem"
-    >
-      <h1
-        class="ouiTitle ouiTitle--large"
-      >
-        <span
-          aria-label="aria-label"
-          class="ouiPageHeaderContent__titleIcon testClass1 testClass2"
-          data-ouiicon-type="logoKibana"
-          data-test-subj="test subject string"
-        />
-        Page title
-      </h1>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`OuiPageHeaderContent props responsive is rendered as false 1`] = `
 <div
   class="ouiPageHeaderContent"

src/components/page/page_header/_page_header_content.scss

@@ -13,12 +13,6 @@
   width: 100%;
 }
 
-.ouiPageHeaderContent__titleIcon {
-  top: -$ouiSizeXS;
-  position: relative;
-  margin-right: $ouiSize;
-}
-
 @include ouiBreakpoint('m', 'l', 'xl') {
   .ouiPageHeaderContent__rightSideItems {
     flex-direction: row-reverse;

src/components/page/page_header/page_header.test.tsx

@@ -29,7 +29,7 @@
  */
 
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { render } from 'enzyme';
 import { requiredProps } from '../../../test';
 
 import { OuiPageHeader, OuiPageHeaderProps } from './page_header';
@@ -65,8 +65,6 @@ describe('OuiPageHeader', () => {
         const component = render(
           <OuiPageHeader
             pageTitle="Page title"
-            iconType="logoKibana"
-            iconProps={requiredProps}
             tabs={tabs}
             tabsProps={requiredProps}
             description="Description"
@@ -124,48 +122,4 @@ describe('OuiPageHeader', () => {
       });
     });
   });
-
-  describe('deprecation', () => {
-    it('should console 1 deprecation warning without repetition', () => {
-      console.warn = jest.fn();
-
-      const component = mount(<OuiPageHeader iconType="dashboardApp" />);
-      component.setProps({ iconType: 'database' });
-
-      expect(console.warn).toHaveBeenCalledTimes(1);
-      expect(console.warn).toHaveBeenCalledWith(
-        '[DEPRECATED] The `iconType` prop is deprecated and will be removed in v2.0.0.'
-      );
-    });
-
-    it('should console 2 deprecation warning without repetition', () => {
-      console.warn = jest.fn();
-
-      const component = mount(
-        <OuiPageHeader iconType="dashboardApp" iconProps={{ color: 'red' }} />
-      );
-      component.setProps({
-        iconType: 'database',
-        iconProps: { color: 'blue' },
-      });
-
-      const results = [
-        '[DEPRECATED] The `iconType` prop is deprecated and will be removed in v2.0.0.',
-        '[DEPRECATED] The `iconProps` prop is deprecated and will be removed in v2.0.0.',
-      ];
-
-      expect(console.warn).toHaveBeenCalledTimes(2);
-      results.forEach((item) =>
-        expect(console.warn).toHaveBeenCalledWith(item)
-      );
-    });
-
-    it('should not console deprecation warning', () => {
-      console.warn = jest.fn();
-
-      mount(<OuiPageHeader />);
-
-      expect(console.warn).not.toHaveBeenCalled();
-    });
-  });
 });

src/components/page/page_header/page_header.tsx

@@ -39,7 +39,6 @@ import {
   _OuiPageRestrictWidth,
   setPropsForRestrictedPageWidth,
 } from '../_restrict_width';
-import { useDeprecatedPropWarning } from '../../../utils';
 
 const paddingSizeToClassNameMap = {
   none: null,
@@ -79,8 +78,6 @@ export const OuiPageHeader: FunctionComponent<OuiPageHeaderProps> = ({
 
   // Page header content only props:
   pageTitle,
-  iconType,
-  iconProps,
   tabs,
   tabsProps,
   description,
@@ -93,11 +90,6 @@ export const OuiPageHeader: FunctionComponent<OuiPageHeaderProps> = ({
     style
   );
 
-  useDeprecatedPropWarning({
-    props: { iconType, iconProps },
-    version: '2.0.0',
-  });
-
   const classes = classNames(
     'ouiPageHeader',
     paddingSizeToClassNameMap[paddingSize],
@@ -126,8 +118,6 @@ export const OuiPageHeader: FunctionComponent<OuiPageHeaderProps> = ({
         alignItems={alignItems}
         responsive={responsive}
         pageTitle={pageTitle}
-        iconType={iconType}
-        iconProps={iconProps}
         tabs={tabs}
         tabsProps={tabsProps}
         description={description}

src/components/page/page_header/page_header_content.test.tsx

@@ -69,26 +69,6 @@ describe('OuiPageHeaderContent', () => {
 
         expect(component).toMatchSnapshot();
       });
-
-      test('is rendered with icon', () => {
-        const component = render(
-          <OuiPageHeaderContent pageTitle="Page title" iconType="logoKibana" />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
-
-      test('is rendered with icon and iconProps', () => {
-        const component = render(
-          <OuiPageHeaderContent
-            pageTitle="Page title"
-            iconType="logoKibana"
-            iconProps={requiredProps}
-          />
-        );
-
-        expect(component).toMatchSnapshot();
-      });
     });
 
     describe('tabs', () => {

src/components/page/page_header/page_header_content.tsx

@@ -31,7 +31,6 @@
 import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
-import { OuiIcon, OuiIconProps, IconType } from '../../icon';
 import { OuiTab, OuiTabs, OuiTabsProps } from '../../tabs';
 import { Props as OuiTabProps } from '../../tabs/tab';
 import { OuiFlexGroup, OuiFlexItem, OuiFlexGroupProps } from '../../flex';
@@ -56,16 +55,6 @@ export type OuiPageHeaderContentTitle = {
    * A simple string is best
    */
   pageTitle?: ReactNode;
-  /**
-   * Optional icon to place to the left of the title
-   * @deprecated The `iconType` prop is deprecated and will be removed in the future.
-   */
-  iconType?: IconType;
-  /**
-   * Additional OuiIcon props to apply to the optional icon
-   * @deprecated The `iconProps` prop is deprecated and will be removed in the future.
-   */
-  iconProps?: Partial<Omit<OuiIconProps, 'type'>>;
 };
 
 export type OuiPageHeaderContentTabs = {
@@ -83,7 +72,7 @@ export type OuiPageHeaderContentTabs = {
 };
 
 /**
- * The left side can either be a title with optional description and/or icon;
+ * The left side can either be a title with optional description;
  * Or a list of tabs,
  * Or a custom node
  */
@@ -128,8 +117,6 @@ export type OuiPageHeaderContentProps = CommonProps &
 export const OuiPageHeaderContent: FunctionComponent<OuiPageHeaderContentProps> = ({
   className,
   pageTitle,
-  iconType,
-  iconProps,
   tabs,
   tabsProps,
   description,
@@ -161,24 +148,9 @@ export const OuiPageHeaderContent: FunctionComponent<OuiPageHeaderContentProps>
 
   let pageTitleNode;
   if (pageTitle) {
-    const icon = iconType ? (
-      <OuiIcon
-        size="xl"
-        {...iconProps}
-        type={iconType}
-        className={classNames(
-          'ouiPageHeaderContent__titleIcon',
-          iconProps?.className
-        )}
-      />
-    ) : undefined;
-
     pageTitleNode = (
       <OuiTitle size="l">
-        <h1>
-          {icon}
-          {pageTitle}
-        </h1>
+        <h1>{pageTitle}</h1>
       </OuiTitle>
     );
   }