Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(Alert): Allowed for non header elements to be set at the Alert title #8518

Merged
merged 6 commits into from
Jan 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 21 additions & 10 deletions packages/react-core/src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,10 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, '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. */
Expand Down Expand Up @@ -99,7 +101,8 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
actionClose,
actionLinks,
title,
titleHeadingLevel: TitleHeadingLevel = 'h4',
titleHeadingLevel,
component = 'h4',
children = '',
className = '',
ouiaId,
Expand All @@ -126,6 +129,14 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
);

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<HTMLDivElement>();
const [isTooltipVisible, setIsTooltipVisible] = useState(false);
React.useEffect(() => {
Expand All @@ -145,12 +156,12 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
const [containsFocus, setContainsFocus] = useState<boolean | undefined>();
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) {
Expand All @@ -172,10 +183,10 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
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 = () => {
Expand All @@ -197,13 +208,13 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
return null;
}
const Title = (
<TitleHeadingLevel
<TitleComponent
{...(isTooltipVisible && { tabIndex: 0 })}
ref={titleRef}
className={css(styles.alertTitle, truncateTitle && styles.modifiers.truncate)}
>
{getHeadingContent}
</TitleHeadingLevel>
</TitleComponent>
);

return (
Expand Down
11 changes: 7 additions & 4 deletions packages/react-core/src/components/Alert/examples/Alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<AlertActionCloseButton>` 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';
Expand Down Expand Up @@ -88,8 +89,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac
}
/>
<Alert variant="success" title="Success alert title" actionClose={<AlertActionCloseButton onClose={() => alert('Clicked the close button')} />} />
<Alert variant="success" title="h1 Success alert title" titleHeadingLevel="h1" />
<Alert variant="success" title="h6 Success alert title" titleHeadingLevel="h6" />
<Alert variant="success" title="div success alert title" component="div" />
<Alert variant="success" title="h6 Success alert title" component="h6" >
<p>Short alert description</p>
</Alert>
</React.Fragment>
```
### Alert timeout
Expand Down