diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index e390913c4ff..6779d28db7c 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -57,8 +57,10 @@ export interface AlertProps extends Omit, 'actio timeoutAnimation?: number; /** Title of the alert. */ title: React.ReactNode; - /** Sets the heading level to use for the alert title. Default is h4. */ + /** @deprecated Sets the heading level to use for the alert title. Default is h4. */ titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + /** Sets the element to use as the alert title. Default is h4. */ + component?: keyof JSX.IntrinsicElements; /** Adds accessible text to the alert toggle. */ toggleAriaLabel?: string; /** Position of the tooltip which is displayed if text is truncated. */ @@ -99,7 +101,8 @@ export const Alert: React.FunctionComponent = ({ actionClose, actionLinks, title, - titleHeadingLevel: TitleHeadingLevel = 'h4', + titleHeadingLevel, + component = 'h4', children = '', className = '', ouiaId, @@ -126,6 +129,14 @@ export const Alert: React.FunctionComponent = ({ ); const titleRef = React.useRef(null); + const TitleComponent = (titleHeadingLevel || component) as any; + if (titleHeadingLevel !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.' + ); + } + const divRef = React.useRef(); const [isTooltipVisible, setIsTooltipVisible] = useState(false); React.useEffect(() => { @@ -145,12 +156,12 @@ export const Alert: React.FunctionComponent = ({ const [containsFocus, setContainsFocus] = useState(); const dismissed = timedOut && timedOutAnimation && !isMouseOver && !containsFocus; React.useEffect(() => { - timeout = timeout === true ? 8000 : Number(timeout); - if (timeout > 0) { - const timer = setTimeout(() => setTimedOut(true), timeout); + const calculatedTimeout = timeout === true ? 8000 : Number(timeout); + if (calculatedTimeout > 0) { + const timer = setTimeout(() => setTimedOut(true), calculatedTimeout); return () => clearTimeout(timer); } - }, []); + }, [timeout]); React.useEffect(() => { const onDocumentFocus = () => { if (divRef.current) { @@ -172,10 +183,10 @@ export const Alert: React.FunctionComponent = ({ const timer = setTimeout(() => setTimedOutAnimation(true), timeoutAnimation); return () => clearTimeout(timer); } - }, [containsFocus, isMouseOver]); + }, [containsFocus, isMouseOver, timeoutAnimation]); React.useEffect(() => { dismissed && onTimeout(); - }, [dismissed]); + }, [dismissed, onTimeout]); const [isExpanded, setIsExpanded] = useState(false); const onToggleExpand = () => { @@ -197,13 +208,13 @@ export const Alert: React.FunctionComponent = ({ return null; } const Title = ( - {getHeadingContent} - + ); return ( diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index a50f9a861fc..5aaf0bbab29 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -50,8 +50,9 @@ PatternFly supports several properties and variations that can be used to add ex * As demonstrated in the 3rd and 4th variations below, use the `actionClose` property to add an `` component, which can be used to manage and customize alert dismissals. `actionClose` can be used with or without the presence of `actionLinks`. -* As demonstrated in the 5th and 6th variations below, use the `titleHeadingLevel` property to set the heading level of an alert title. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`. - +* As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title. + * If the `description` prop is not passed in, then the `component` prop should be set to a non-heading element such as a `span` or `div`. + * If the `description` prop is passed in, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`. ```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; @@ -88,8 +89,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac } /> alert('Clicked the close button')} />} /> - - + + +

Short alert description

+
``` ### Alert timeout