From f793a56181d12dd58ff3c4fbfb64504236b2df49 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 Jan 2023 16:20:11 -0500 Subject: [PATCH 1/6] chore(Alert): Allowed for non header elements to be set at the Alert title --- .../react-core/src/components/Alert/Alert.tsx | 17 +++++++++++++---- .../src/components/Alert/examples/Alert.md | 10 +++++++--- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index e390913c4ff..4a5696062f8 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,12 @@ export const Alert: React.FunctionComponent = ({ ); const titleRef = React.useRef(null); + const TitleComponent = (titleHeadingLevel || component) as any; + if (!!titleHeadingLevel) { + // 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(() => { @@ -197,13 +206,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..5916245ced8 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -50,7 +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 there is no description below the alert title, then the `component` prop could be set to a non-heading element such as a `span` or `div`. + * If the alert has a description, the alert title component should likely be a heading level 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'; @@ -88,8 +90,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac } /> alert('Clicked the close button')} />} /> - - + + +

Short alert description

+ ``` ### Alert timeout From f7b0f94b5b8a23ccd25082dc3dd70d7fb0bb175a Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 Jan 2023 19:21:58 -0500 Subject: [PATCH 2/6] fix lint issues --- packages/react-core/src/components/Alert/Alert.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 4a5696062f8..48df9d9356c 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -130,9 +130,11 @@ export const Alert: React.FunctionComponent = ({ const titleRef = React.useRef(null); const TitleComponent = (titleHeadingLevel || component) as any; - if (!!titleHeadingLevel) { + 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.'); + console.warn( + 'Alert: titleHeadingLevel is deprecated, please use the newer component prop instead to set the alert title element.' + ); } const divRef = React.useRef(); From ae149f03535d42abc886b629833d31548b8253ed Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 11 Jan 2023 07:55:11 -0500 Subject: [PATCH 3/6] update docs wording --- packages/react-core/src/components/Alert/examples/Alert.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 5916245ced8..6a6fd84d29b 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -52,8 +52,7 @@ PatternFly supports several properties and variations that can be used to add ex * As demonstrated in the 5th and 6th variations below, use the `component` property to set the element for an alert title. * If there is no description below the alert title, then the `component` prop could be set to a non-heading element such as a `span` or `div`. - * If the alert has a description, the alert title component should likely be a heading level 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`. - + * 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`. ```ts import React from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; From d79f7cba401904d4cbbe7e9a469c3cc570643b5e Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 11 Jan 2023 09:23:32 -0500 Subject: [PATCH 4/6] fix github's lint warnings --- packages/react-core/src/components/Alert/Alert.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 48df9d9356c..43dcfd7f9a5 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -156,9 +156,9 @@ 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); } }, []); @@ -186,7 +186,7 @@ export const Alert: React.FunctionComponent = ({ }, [containsFocus, isMouseOver]); React.useEffect(() => { dismissed && onTimeout(); - }, [dismissed]); + }, [dismissed, timeoutAnimation]); const [isExpanded, setIsExpanded] = useState(false); const onToggleExpand = () => { From 533d6bc24051b0cff06d75c34d3c932e93e37980 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Thu, 12 Jan 2023 09:39:51 -0500 Subject: [PATCH 5/6] clean up useEffect deps --- packages/react-core/src/components/Alert/Alert.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Alert/Alert.tsx b/packages/react-core/src/components/Alert/Alert.tsx index 43dcfd7f9a5..6779d28db7c 100644 --- a/packages/react-core/src/components/Alert/Alert.tsx +++ b/packages/react-core/src/components/Alert/Alert.tsx @@ -161,7 +161,7 @@ export const Alert: React.FunctionComponent = ({ const timer = setTimeout(() => setTimedOut(true), calculatedTimeout); return () => clearTimeout(timer); } - }, []); + }, [timeout]); React.useEffect(() => { const onDocumentFocus = () => { if (divRef.current) { @@ -183,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, timeoutAnimation]); + }, [dismissed, onTimeout]); const [isExpanded, setIsExpanded] = useState(false); const onToggleExpand = () => { From fa4ba73f19023a1c8764fc0c0cf983ed93fcc20b Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 16 Jan 2023 09:23:42 -0500 Subject: [PATCH 6/6] fix wording --- packages/react-core/src/components/Alert/examples/Alert.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 6a6fd84d29b..5aaf0bbab29 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -50,9 +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 `component` property to set the element for an alert title. - * If there is no description below the alert title, then the `component` prop could be set to a non-heading element such as a `span` or `div`. +* 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';