@patternfly/react-core 4.255.2 → 4.257.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.255.2",
+  "version": "4.257.0",
   "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": "16b0f452e3031ba81eda21a873e961bc6aab51fd"
+  "gitHead": "1a114c6117853b688671fd37d90bfd8df69bdde5"
 }

package/src/components/AlertGroup/examples/AlertGroup.md

@@ -45,7 +45,7 @@ When an overflow message appears in an `AlertGroup` using the `isLiveRegion` pro
 
 Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later. 
 
-```ts file="AlertGroupToastOverflowCapture.tsx" isBeta
+```ts file="AlertGroupToastOverflowCapture.tsx"
 ```
 
 ### Asynchronous alert groups
@@ -68,7 +68,7 @@ Click the buttons in the example below to add dynamic alerts to a group.
 
 In the following example, there can be a maximum of 4 alerts shown at once. 
 
-```ts file="AlertGroupSingularDynamicOverflow.tsx" isBeta
+```ts file="AlertGroupSingularDynamicOverflow.tsx"
 ```
 
 ### Multiple dynamic alert groups

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/examples/CalendarMonth.md

@@ -3,7 +3,6 @@ id: Calendar month
 section: components
 cssPrefix: pf-c-calendar-month
 propComponents: ['CalendarMonth', 'CalendarFormat']
-beta: true
 ---
 
 ## Examples

package/src/components/Card/Card.tsx

@@ -18,11 +18,11 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isCompact?: boolean;
   /** Modifies the card to include selectable styling */
   isSelectable?: boolean;
-  /** @beta Specifies the card is selectable, and applies the new raised styling on hover and select */
+  /** Specifies the card is selectable, and applies the new raised styling on hover and select */
   isSelectableRaised?: boolean;
   /** Modifies the card to include selected styling */
   isSelected?: boolean;
-  /** @beta Modifies a raised selectable card to have disabled styling */
+  /** Modifies a raised selectable card to have disabled styling */
   isDisabledRaised?: boolean;
   /** Modifies the card to include flat styling */
   isFlat?: boolean;

package/src/components/DataList/DataList.tsx

@@ -52,7 +52,7 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** @deprecated Order of items in a draggable DataList */
   itemOrder?: string[];
-  /** @beta Object that causes the data list to render hidden inputs which improve selectable item a11y */
+  /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   selectableRow?: SelectableRowObject;
 }
 

package/src/components/DataList/DataListItem.tsx

@@ -16,7 +16,7 @@ export interface DataListItemProps extends Omit<React.HTMLProps<HTMLLIElement>,
   'aria-labelledby': string;
   /** Unique id for the DataList item */
   id?: string;
-  /** @beta Aria label to apply to the selectable input if one is rendered */
+  /** Aria label to apply to the selectable input if one is rendered */
   selectableInputAriaLabel?: string;
 }
 

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -13,7 +13,6 @@ propComponents:
     'DualListSelectorTree',
     'DualListSelectorTreeItemData',
   ]
-beta: true
 ---
 
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -3,7 +3,6 @@ id: Label group
 section: components
 cssPrefix: pf-c-label
 propComponents: ['LabelGroup', 'Label']
-beta: true
 ouia: true
 ---
 
@@ -38,12 +37,12 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Editable labels
 
-```ts file="LabelGroupEditableLabels.tsx"
+```ts isBeta file="LabelGroupEditableLabels.tsx"
 ```
 
 ### Editable labels with add button
 
 For additional documentation that showcases adding a new label, see [label group demos](/components/label-group/react-demos).
 
-```ts file="LabelGroupEditableAdd.tsx"
+```ts isBeta file="LabelGroupEditableAdd.tsx"
 ```

package/src/components/Masthead/examples/Masthead.md

@@ -3,7 +3,6 @@ id: Masthead
 section: components
 cssPrefix: pf-c-masthead
 propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent']
-beta: true
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

package/src/components/Menu/examples/Menu.md

@@ -35,7 +35,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 
 ### With checkbox
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 ```
 
 ### Filtering with text input

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -3,7 +3,6 @@ id: Menu toggle
 section: components
 cssPrefix: pf-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
-beta: true
 ---
 
 import './MenuToggle.css'

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Modifies the text announced by assistive technologies when the progress bar updates. */
+  progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
 }
@@ -71,6 +73,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressAriaLabel,
   progressAriaLabelledBy,
   progressId,
+  progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
   ...props
 }: MultipleFileUploadStatusItemProps) => {
@@ -139,6 +142,13 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
       <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
+        <div className="pf-screen-reader" aria-live="polite">
+          {progressAriaLiveMessage &&
+            typeof progressAriaLiveMessage === 'function' &&
+            progressAriaLiveMessage(+loadPercentage.toFixed(2))}
+          {progressAriaLiveMessage && typeof progressAriaLiveMessage === 'string' && progressAriaLiveMessage}
+          {!progressAriaLiveMessage && `Progress value is ${progressValue || Math.floor(loadPercentage)}%.`}
+        </div>
         <Progress
           title={title}
           value={progressValue || loadPercentage}

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -23,7 +23,39 @@ describe('MultipleFileUploadStatusItem', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('renders custom file name/size/icon when passed', () => {
+  test('renders custom file name/size/icon/progressAriaLiveMessage when passed', () => {
+    const testFile = new File(['foo'], 'testFile.txt');
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        fileName="testCustomFileName.txt"
+        fileSize={42}
+        progressId="test-progress-id"
+        progressAriaLiveMessage="test message"
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders custom function progressAriaLiveMessage when passed', () => {
+    const testFile = new File(['foo'], 'testFile.txt');
+    const { asFragment } = render(
+      <MultipleFileUploadStatusItem
+        file={testFile}
+        fileIcon={<FileImageIcon />}
+        fileName="testCustomFileName.txt"
+        fileSize={42}
+        progressId="test-progress-id"
+        progressAriaLiveMessage={loadPercentage => `test message ${loadPercentage}`}
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('rendersdefault progressAriaLiveMessage when nothing is passed', () => {
     const testFile = new File(['foo'], 'testFile.txt');
     const { asFragment } = render(
       <MultipleFileUploadStatusItem