diff --git a/src-docs/src/views/page/page_bottom_bar.js b/src-docs/src/views/page/page_bottom_bar.js index b37c9e6452..b5af55f109 100644 --- a/src-docs/src/views/page/page_bottom_bar.js +++ b/src-docs/src/views/page/page_bottom_bar.js @@ -34,7 +34,6 @@ export default ({ button = <>, content, sideNav, bottomBar }) => { diff --git a/src-docs/src/views/page/page_centered_content.js b/src-docs/src/views/page/page_centered_content.js index 7df15bcf08..fbeb6dd3e1 100644 --- a/src-docs/src/views/page/page_centered_content.js +++ b/src-docs/src/views/page/page_centered_content.js @@ -29,7 +29,6 @@ export default ({ button = <>, content, sideNav }) => ( diff --git a/src-docs/src/views/page/page_custom_content.js b/src-docs/src/views/page/page_custom_content.js index ecf08fa165..0b2573f0d7 100644 --- a/src-docs/src/views/page/page_custom_content.js +++ b/src-docs/src/views/page/page_custom_content.js @@ -26,7 +26,6 @@ export default ({ button = <> }) => ( Do something]} bottomBorder diff --git a/src-docs/src/views/page/page_new.js b/src-docs/src/views/page/page_new.js index 9a3d9c19ad..af32e5f310 100644 --- a/src-docs/src/views/page/page_new.js +++ b/src-docs/src/views/page/page_new.js @@ -29,7 +29,6 @@ export default ({ button = <>, content, sideNav }) => ( , content, sideNav }) => { , content }) => ( (

- You can further adjust the display of these content types with an - optional iconType placed to the left of the - title, alignItems for adjusting the vertical + You can further adjust the display of these content types by + utilizing alignItems for adjusting the vertical alignment of the two sides, and responsiveOrder{' '} to determine which content side to display first on smaller screens.

diff --git a/src-docs/src/views/page_header/playground.js b/src-docs/src/views/page_header/playground.js index d6d5e6c8b7..43754b3e83 100644 --- a/src-docs/src/views/page_header/playground.js +++ b/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, diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 5edf131776..85c186b3a0 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/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`]

- Page title

`; -exports[`OuiPageHeaderContent props pageTitle is rendered with icon 1`] = ` -
-
-
-

- - Page title -

-
-
-
-`; - -exports[`OuiPageHeaderContent props pageTitle is rendered with icon and iconProps 1`] = ` -
-
-
-

- - Page title -

-
-
-
-`; - exports[`OuiPageHeaderContent props responsive is rendered as false 1`] = `
{ const component = render( { }); }); }); - - describe('deprecation', () => { - it('should console 1 deprecation warning without repetition', () => { - console.warn = jest.fn(); - - const component = mount(); - 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( - - ); - 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(); - - expect(console.warn).not.toHaveBeenCalled(); - }); - }); }); diff --git a/src/components/page/page_header/page_header.tsx b/src/components/page/page_header/page_header.tsx index 97e2359c3e..bb81337cfb 100644 --- a/src/components/page/page_header/page_header.tsx +++ b/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 = ({ // Page header content only props: pageTitle, - iconType, - iconProps, tabs, tabsProps, description, @@ -93,11 +90,6 @@ export const OuiPageHeader: FunctionComponent = ({ style ); - useDeprecatedPropWarning({ - props: { iconType, iconProps }, - version: '2.0.0', - }); - const classes = classNames( 'ouiPageHeader', paddingSizeToClassNameMap[paddingSize], @@ -126,8 +118,6 @@ export const OuiPageHeader: FunctionComponent = ({ alignItems={alignItems} responsive={responsive} pageTitle={pageTitle} - iconType={iconType} - iconProps={iconProps} tabs={tabs} tabsProps={tabsProps} description={description} diff --git a/src/components/page/page_header/page_header_content.test.tsx b/src/components/page/page_header/page_header_content.test.tsx index 418a53de6c..ef25f9fbc9 100644 --- a/src/components/page/page_header/page_header_content.test.tsx +++ b/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( - - ); - - expect(component).toMatchSnapshot(); - }); - - test('is rendered with icon and iconProps', () => { - const component = render( - - ); - - expect(component).toMatchSnapshot(); - }); }); describe('tabs', () => { diff --git a/src/components/page/page_header/page_header_content.tsx b/src/components/page/page_header/page_header_content.tsx index 8677778fdd..46de531df5 100644 --- a/src/components/page/page_header/page_header_content.tsx +++ b/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>; }; 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 = ({ className, pageTitle, - iconType, - iconProps, tabs, tabsProps, description, @@ -161,24 +148,9 @@ export const OuiPageHeaderContent: FunctionComponent let pageTitleNode; if (pageTitle) { - const icon = iconType ? ( - - ) : undefined; - pageTitleNode = ( -

- {icon} - {pageTitle} -

+

{pageTitle}

 ); }