diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index aadc070c39..43848c3cd1 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -8,8 +8,6 @@ import { createShorthandFactory, UIComponent, UIComponentProps, - ChildrenComponentProps, - ContentComponentProps, commonPropTypes, ColorComponentProps, rtlTextContainer, @@ -24,11 +22,7 @@ export interface HeaderSlotClassNames { description: string } -export interface HeaderProps - extends UIComponentProps, - ChildrenComponentProps, - ContentComponentProps, - ColorComponentProps { +export interface HeaderProps extends UIComponentProps, ColorComponentProps { /** * Accessibility behavior if overridden by the user. */ @@ -66,22 +60,21 @@ class Header extends UIComponent, any> { static Description = HeaderDescription renderComponent({ accessibility, ElementType, classes, variables: v, unhandledProps }) { - const { children, description, content } = this.props + const { children, description } = this.props const hasChildren = childrenExist(children) - const contentElement = childrenExist(children) ? children : content return ( - {rtlTextContainer.createFor({ element: contentElement, condition: !!description })} + {rtlTextContainer.createFor({ element: children, condition: !!description })} {!hasChildren && HeaderDescription.create(description, { defaultProps: () => ({ @@ -96,7 +89,7 @@ class Header extends UIComponent, any> { } } -Header.create = createShorthandFactory({ Component: Header, mappedProp: 'content' }) +Header.create = createShorthandFactory({ Component: Header, mappedProp: 'children' }) /** * A Header organises the content by declaring a content's topic. diff --git a/packages/react/src/components/Header/HeaderDescription.tsx b/packages/react/src/components/Header/HeaderDescription.tsx index 1a91f99665..3a23cc029f 100644 --- a/packages/react/src/components/Header/HeaderDescription.tsx +++ b/packages/react/src/components/Header/HeaderDescription.tsx @@ -2,12 +2,9 @@ import { Accessibility } from '@fluentui/accessibility' import * as React from 'react' import { - childrenExist, createShorthandFactory, UIComponent, UIComponentProps, - ChildrenComponentProps, - ContentComponentProps, commonPropTypes, ColorComponentProps, rtlTextContainer, @@ -16,11 +13,7 @@ import { import { WithAsProp, withSafeTypeForAs } from '../../types' -export interface HeaderDescriptionProps - extends UIComponentProps, - ChildrenComponentProps, - ContentComponentProps, - ColorComponentProps { +export interface HeaderDescriptionProps extends UIComponentProps, ColorComponentProps { /** * Accessibility behavior if overridden by the user. */ @@ -43,15 +36,16 @@ class HeaderDescription extends UIComponent, } renderComponent({ accessibility, ElementType, classes, unhandledProps }) { - const { children, content } = this.props + const { children } = this.props + return ( - {childrenExist(children) ? children : content} + {children} ) } @@ -59,7 +53,7 @@ class HeaderDescription extends UIComponent, HeaderDescription.create = createShorthandFactory({ Component: HeaderDescription, - mappedProp: 'content', + mappedProp: 'children', }) /** diff --git a/packages/react/src/utils/commonPropTypes.ts b/packages/react/src/utils/commonPropTypes.ts index 11b0b2671d..bf24562356 100644 --- a/packages/react/src/utils/commonPropTypes.ts +++ b/packages/react/src/utils/commonPropTypes.ts @@ -20,7 +20,6 @@ export const createCommon = (config: CreateCommonConfig = {}) => { children = 'node', className = true, color = false, - content = 'node', styled = true, } = config return { @@ -42,10 +41,6 @@ export const createCommon = (config: CreateCommonConfig = {}) => { ...(color && { color: PropTypes.string, }), - ...(content && { - content: - content === 'shorthand' ? customPropTypes.itemShorthand : customPropTypes.nodeContent, - }), ...(styled && { styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), variables: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),