@patternfly/react-core 4.256.0 → 4.257.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.256.0",
+  "version": "4.257.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "b7e13a9702cfe902e190000f1cfe059c830cf881"
+  "gitHead": "9aafcbc3a7986f6fb5837f887cf1a25f01a11e8b"
 }

package/src/components/Banner/Banner.tsx

@@ -3,16 +3,18 @@ import styles from '@patternfly/react-styles/css/components/Banner/banner';
 import { css } from '@patternfly/react-styles';
 
 export interface BannerProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the banner */
+  /** Content rendered inside the banner. */
   children?: React.ReactNode;
-  /** Additional classes added to the banner */
+  /** Additional classes added to the banner. */
   className?: string;
-  /** Variant styles for the banner */
-  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
   /** If set to true, the banner sticks to the top of its container */
   isSticky?: boolean;
-  /** Text announced by screen readers to indicate the type of banner. Defaults to "${variant} banner" if this prop is not passed in */
+  /** Text announced by screen readers to indicate the type of banner. This prop should only
+   * be passed in when the banner conveys status/severity.
+   */
   screenReaderText?: string;
+  /** Variant styles for the banner. */
+  variant?: 'default' | 'info' | 'danger' | 'success' | 'warning';
 }
 
 export const Banner: React.FunctionComponent<BannerProps> = ({
@@ -32,8 +34,8 @@ export const Banner: React.FunctionComponent<BannerProps> = ({
     )}
     {...props}
   >
+    {screenReaderText && <span className="pf-u-screen-reader">{screenReaderText}</span>}
     {children}
-    <span className="pf-u-screen-reader">{screenReaderText || `${variant} banner`}</span>
   </div>
 );
 Banner.displayName = 'Banner';

package/src/components/Banner/__tests__/Banner.test.tsx

@@ -51,22 +51,12 @@ test('Renders with class name pf-m-info when "info" is passed to variant prop',
   expect(screen.getByText('Test')).toHaveClass('pf-m-info');
 });
 
-test('Renders pf-u-screen-reader class by default for screenReaderText', () => {
+test('Does not render pf-u-screen-reader class by default', () => {
   render(<Banner>Test</Banner>);
-  expect(screen.getByText('default banner')).toHaveClass('pf-u-screen-reader', { exact: true });
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-u-screen-reader"></span>');
 });
 
-test('Renders screenReaderText as "default banner" by default', () => {
-  render(<Banner>Test</Banner>);
-  expect(screen.getByText('default banner')).toBeInTheDocument();
-});
-
-test('Renders screenReaderText as "success banner" when variant="success"', () => {
-  render(<Banner variant="success">Test</Banner>);
-  expect(screen.getByText('success banner')).toBeInTheDocument();
-});
-
-test('Renders custom screenReaderText passed via prop', () => {
+test('Renders screenReaderText passed via prop', () => {
   render(<Banner screenReaderText="Custom screen reader text">Test</Banner>);
   expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
 });

package/src/components/Banner/__tests__/__snapshots__/Banner.test.tsx.snap

@@ -6,11 +6,6 @@ exports[`Matches the snapshot 1`] = `
     class="pf-c-banner"
   >
     Test
-    <span
-      class="pf-u-screen-reader"
-    >
-      default banner
-    </span>
   </div>
 </DocumentFragment>
 `;

package/src/components/Banner/examples/Banner.md

@@ -5,9 +5,28 @@ cssPrefix: pf-c-banner
 propComponents: ['Banner']
 ---
 
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
 ## Examples
 
 ### Basic
 
+Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+
 ```ts file="./BannerBasic.tsx"
+
+```
+
+### Status
+
+When a banner is used to convey status, it is advised to pass in an icon inside the banner to convey the status in a way besides just color. The `screenReaderText` prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.
+
+In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.
+
+```ts file="./BannerStatus.tsx"
+
 ```

package/src/components/Banner/examples/BannerBasic.tsx

@@ -2,17 +2,15 @@ import React from 'react';
 import { Banner } from '@patternfly/react-core';
 
 export const BannerBasic: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Banner screenReaderText="This is a default Banner">Default banner</Banner>
+  <>
+    <Banner>Default banner</Banner>
     <br />
-    <Banner variant="info" screenReaderText="This is an info Banner">
-      Info banner
-    </Banner>
+    <Banner variant="info">Blue banner</Banner>
     <br />
-    <Banner variant="danger">Danger banner</Banner>
+    <Banner variant="danger">Red banner</Banner>
     <br />
-    <Banner variant="success">Success banner</Banner>
+    <Banner variant="success">Green banner</Banner>
     <br />
-    <Banner variant="warning">Warning banner</Banner>
-  </React.Fragment>
+    <Banner variant="warning">Gold banner</Banner>
+  </>
 );

package/src/components/Banner/examples/BannerStatus.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Banner, Flex, FlexItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const BannerStatus: React.FunctionComponent = () => (
+  <>
+    <Banner screenReaderText="Default banner">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <BellIcon />
+        </FlexItem>
+        <FlexItem>Default banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Info banner" variant="info">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <InfoCircleIcon />
+        </FlexItem>
+        <FlexItem>Info banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Danger banner" variant="danger">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <ExclamationCircleIcon />
+        </FlexItem>
+        <FlexItem>Danger banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Success banner" variant="success">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <CheckCircleIcon />
+        </FlexItem>
+        <FlexItem>Success banner</FlexItem>
+      </Flex>
+    </Banner>
+    <br />
+    <Banner screenReaderText="Warning banner" variant="warning">
+      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+        <FlexItem>
+          <ExclamationTriangleIcon />
+        </FlexItem>
+        <FlexItem>Warning banner</FlexItem>
+      </Flex>
+    </Banner>
+  </>
+);

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -8,6 +8,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { getUniqueId } from '../../helpers/util';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
   Sunday = 0,
@@ -109,8 +110,6 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
 const isSameDate = (d1: Date, d2: Date) =>
   d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
 
-export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));
-
 const today = new Date();
 
 /** The main calendar month component. */

package/src/components/DatePicker/DatePicker.tsx

@@ -6,9 +6,10 @@ import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup } from '../InputGroup/InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
-import { CalendarMonth, CalendarFormat, isValidDate } from '../CalendarMonth';
+import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { useImperativeHandle } from 'react';
 import { KeyTypes } from '../../helpers';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 /** The main date picker component. */
 

package/src/components/Timestamp/Timestamp.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Timestamp/timestamp';
 import { css } from '@patternfly/react-styles';
 import { Tooltip } from '../Tooltip';
+import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum TimestampFormat {
   full = 'full',
@@ -78,7 +79,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   children,
   className,
   customFormat,
-  date: dateProp = new Date(),
+  date: dateProp,
   dateFormat,
   displaySuffix = '',
   is12Hour,
@@ -87,6 +88,24 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
   tooltip,
   ...props
 }: TimestampProps) => {
+  const [date, setDate] = React.useState(() => {
+    const initDate = new Date(dateProp);
+    if (isValidDate(initDate)) {
+      return initDate;
+    }
+
+    return new Date();
+  });
+
+  React.useEffect(() => {
+    const dateFromProp = new Date(dateProp);
+    if (isValidDate(dateFromProp) && dateFromProp.toString() !== new Date(date).toString()) {
+      setDate(dateFromProp);
+    } else if (!dateProp) {
+      setDate(new Date());
+    }
+  }, [dateProp]);
+
   const hasTimeFormat = timeFormat && !customFormat;
   const formatOptions = {
     ...(dateFormat && !customFormat && { dateStyle: dateFormat }),
@@ -94,7 +113,7 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
     ...(is12Hour !== undefined && { hour12: is12Hour })
   };
 
-  const dateAsLocaleString = new Date(dateProp).toLocaleString(locale, {
+  const dateAsLocaleString = new Date(date).toLocaleString(locale, {
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: timeFormat })
   });
@@ -102,19 +121,21 @@ export const Timestamp: React.FunctionComponent<TimestampProps> = ({
 
   const utcTimeFormat = timeFormat !== 'short' ? 'medium' : 'short';
   const convertToUTCString = (date: Date) => new Date(date).toUTCString().slice(0, -3);
-  const utcDateString = new Date(convertToUTCString(dateProp)).toLocaleString(locale, {
+  const utcDateString = new Date(convertToUTCString(date)).toLocaleString(locale, {
     ...formatOptions,
     ...(hasTimeFormat && { timeStyle: utcTimeFormat })
   });
   const defaultTooltipContent = `${utcDateString}${tooltip?.suffix ? ' ' + tooltip.suffix : ' UTC'}`;
 
+  const { dateTime, ...propsWithoutDateTime } = props;
+
   const timestamp = (
     <span
       className={css(styles.timestamp, tooltip && styles.modifiers.helpText, className)}
       {...(tooltip && { tabIndex: 0 })}
-      {...props}
+      {...propsWithoutDateTime}
     >
-      <time className="pf-c-timestamp__text" dateTime={props.dateTime || new Date(dateProp).toISOString()}>
+      <time className="pf-c-timestamp__text" dateTime={dateTime || new Date(date).toISOString()}>
         {!children ? defaultDisplay : children}
       </time>
     </span>

package/src/components/Timestamp/__tests__/Timestamp.test.tsx

@@ -36,12 +36,31 @@ test('Renders with current date by default with default formatting', () => {
   expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
 });
 
+test('Renders with correct datetime attribute with current date by default', () => {
+  render(<Timestamp />);
+  // Because there could be a .001 ms difference in the expected and received datetime value,
+  // we want an ISO value without the ms to expect as the datetime value.
+  const isoDateWithoutMS = new Date().toISOString().split('.')[0];
+
+  expect(screen.getByText(new Date().toLocaleString())).toHaveAttribute(
+    'datetime',
+    expect.stringMatching(isoDateWithoutMS)
+  );
+});
+
 test('Renders passed in date with default formatting', () => {
   render(<Timestamp date={new Date(2022, 0, 1)} />);
 
   expect(screen.getByText('1/1/2022, 12:00:00 AM')).toBeInTheDocument();
 });
 
+test('Renders with correct datetime attribute when date is passed in', () => {
+  const passedDate = new Date(2022, 0, 1);
+  render(<Timestamp date={passedDate} />);
+
+  expect(screen.getByText('1/1/2022, 12:00:00 AM')).toHaveAttribute('datetime', passedDate.toISOString());
+});
+
 test('Renders with custom formatting when dateFormat and timeFormat are passed in', () => {
   render(
     <Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.short} />
@@ -51,7 +70,7 @@ test('Renders with custom formatting when dateFormat and timeFormat are passed i
 });
 
 test('Renders with only date when dateFormat is passed in', () => {
-  render(<Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} dateFormat={TimestampFormat.full} />);
+  render(<Timestamp date={new Date(2022, 0, 1)} dateFormat={TimestampFormat.full} />);
 
   expect(screen.getByText('Saturday, January 1, 2022')).toBeInTheDocument();
 });
@@ -152,9 +171,7 @@ test('Renders with pf-m-help-text class when tooltip is passed in with custom va
 });
 
 test('Renders with default tooltip content for default variant', () => {
-  render(
-    <Timestamp date={new Date('1 Jan 2022 00:00:00 EST')} tooltip={{ variant: TimestampTooltipVariant.default }} />
-  );
+  render(<Timestamp date={new Date(2022, 0, 1, 0, 0, 0)} tooltip={{ variant: TimestampTooltipVariant.default }} />);
 
   expect(screen.getByText('1/1/2022, 5:00:00 AM UTC')).toBeInTheDocument();
 });
@@ -162,7 +179,7 @@ test('Renders with default tooltip content for default variant', () => {
 test('Renders with custom tooltip suffix for default variant', () => {
   render(
     <Timestamp
-      date={new Date('1 Jan 2022 00:00:00 EST')}
+      date={new Date(2022, 0, 1, 0, 0, 0)}
       tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time' }}
     />
   );

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <span
     class="pf-c-timestamp"
-    datetime="2022-01-01T00:00:00.000Z"
   >
     <time
       class="pf-c-timestamp__text"

package/src/helpers/datetimeUtils.ts

@@ -0,0 +1,4 @@
+/**
+ * @param {Date} date - A date to check the validity of
+ */
+export const isValidDate = (date: Date) => Boolean(date && !isNaN(date as any));

package/src/helpers/index.ts

@@ -10,3 +10,4 @@ export * from './useIsomorphicLayout';
 export * from './KeyboardHandler';
 export * from './resizeObserver';
 export * from './useInterval';
+export * from './datetimeUtils';