From bbf9a7e5f192b32544b22ec21ed1783b49bfca7b Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Thu, 18 May 2023 20:43:56 +0600 Subject: [PATCH 1/3] Remove iconType/iconProps usage from the docs Signed-off-by: Sirazh Gabdullin --- src-docs/src/views/page/page_bottom_bar.js | 1 - src-docs/src/views/page/page_centered_content.js | 1 - src-docs/src/views/page/page_custom_content.js | 1 - src-docs/src/views/page/page_new.js | 1 - src-docs/src/views/page/page_restricting_width.js | 1 - src-docs/src/views/page/page_simple_empty_content.js | 1 - src-docs/src/views/page_header/page_header.js | 1 - src-docs/src/views/page_header/page_header_example.js | 5 ++--- src-docs/src/views/page_header/playground.js | 3 --- 9 files changed, 2 insertions(+), 13 deletions(-) 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, From 1baba182613158181aceb3619796380be68ea8ae Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Thu, 18 May 2023 20:46:26 +0600 Subject: [PATCH 2/3] Remove iconType/iconProps from OuiPageHeader Signed-off-by: Sirazh Gabdullin --- .../__snapshots__/page_header.test.tsx.snap | 6 --- .../page_header_content.test.tsx.snap | 50 ------------------- .../page_header/_page_header_content.scss | 6 --- .../page/page_header/page_header.test.tsx | 2 - .../page/page_header/page_header.tsx | 14 +----- .../page_header/page_header_content.test.tsx | 20 -------- .../page/page_header/page_header_content.tsx | 32 +----------- 7 files changed, 3 insertions(+), 127 deletions(-) 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( = ({ // Page header content only props: pageTitle, - iconType, - iconProps, tabs, tabsProps, description, @@ -92,14 +90,6 @@ export const OuiPageHeader: FunctionComponent = ({ style ); - useEffect(() => { - if (iconType || iconProps) { - console.warn( - 'WARNING: The `iconType` and `iconProps` properties in `OuiPageHeader` are deprecated and will be removed in the future. Please update your code accordingly.' - ); - } - }, [iconType, iconProps]); - const classes = classNames( 'ouiPageHeader', paddingSizeToClassNameMap[paddingSize], @@ -128,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}

 ); } From 7dfb27263eb689cc14332b5ff1b0b42d9f9129b2 Mon Sep 17 00:00:00 2001 From: Sirazh Gabdullin Date: Wed, 14 Jun 2023 22:50:30 +0600 Subject: [PATCH 3/3] update removal after solving conflict Signed-off-by: Sirazh Gabdullin --- .../page/page_header/page_header.test.tsx | 46 +------------------ .../page/page_header/page_header.tsx | 1 - 2 files changed, 1 insertion(+), 46 deletions(-) diff --git a/src/components/page/page_header/page_header.test.tsx b/src/components/page/page_header/page_header.test.tsx index b897aca415..0ae4c6092d 100644 --- a/src/components/page/page_header/page_header.test.tsx +++ b/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'; @@ -122,48 +122,4 @@ describe('OuiPageHeader', () => { }); }); }); - - 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 48c1d78f11..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,