@patternfly/react-core 4.255.2 → 4.257.0

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

@@ -25,6 +25,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -86,7 +92,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         aria-disabled="false"
         aria-label="buttonAriaLabel"
         class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-id="OUIA-Generated-Button-plain-8"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
@@ -135,6 +141,12 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -217,7 +229,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when passed 1`] = `
+exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progressAriaLiveMessage when passed 1`] = `
 <DocumentFragment>
   <li
     class="pf-c-multiple-file-upload__status-item"
@@ -242,6 +254,12 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when pa
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        test message
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -326,6 +344,121 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon when pa
 </DocumentFragment>
 `;
 
+exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMessage when passed 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
+  >
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        test message 0
+      </div>
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
+        >
+          <span
+            class="pf-c-multiple-file-upload__status-item-progress"
+          >
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testCustomFileName.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              42
+            </span>
+          </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
+          <span
+            class="pf-c-progress__measure"
+          >
+            0%
+          </span>
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
 exports[`MultipleFileUploadStatusItem renders custom progress value/variant when passed 1`] = `
 <DocumentFragment>
   <li
@@ -351,6 +484,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 42%.
+      </div>
       <div
         class="pf-c-progress pf-m-warning"
         id="test-progress-id"
@@ -428,7 +567,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         aria-disabled="false"
         aria-label="Remove from list"
         class="pf-c-button pf-m-plain"
-        data-ouia-component-id="OUIA-Generated-Button-plain-5"
+        data-ouia-component-id="OUIA-Generated-Button-plain-7"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
         type="button"
@@ -477,6 +616,12 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -586,6 +731,12 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     <div
       class="pf-c-multiple-file-upload__status-item-main"
     >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
       <div
         class="pf-c-progress"
         id="test-progress-id"
@@ -667,3 +818,118 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
   </li>
 </DocumentFragment>
 `;
+
+exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage when nothing is passed 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-c-multiple-file-upload__status-item"
+  >
+    <div
+      class="pf-c-multiple-file-upload__status-item-icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 384 512"
+        width="1em"
+      >
+        <path
+          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+        />
+      </svg>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-main"
+    >
+      <div
+        aria-live="polite"
+        class="pf-screen-reader"
+      >
+        Progress value is 0%.
+      </div>
+      <div
+        class="pf-c-progress"
+        id="test-progress-id"
+      >
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__description"
+          id="test-progress-id-description"
+        >
+          <span
+            class="pf-c-multiple-file-upload__status-item-progress"
+          >
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-text"
+            >
+              testCustomFileName.txt
+            </span>
+            <span
+              class="pf-c-multiple-file-upload__status-item-progress-size"
+            >
+              42
+            </span>
+          </span>
+        </div>
+        <div
+          aria-hidden="true"
+          class="pf-c-progress__status"
+        >
+          <span
+            class="pf-c-progress__measure"
+          >
+            0%
+          </span>
+        </div>
+        <div
+          aria-labelledby="test-progress-id-description"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="pf-c-progress__bar"
+          role="progressbar"
+        >
+          <div
+            class="pf-c-progress__indicator"
+            style="width: 0%;"
+          >
+            <span
+              class="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="pf-c-multiple-file-upload__status-item-close"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Remove from list"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Button-plain-6"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 512 512"
+          width="1em"
+        >
+          <path
+            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+          />
+        </svg>
+      </button>
+    </div>
+  </li>
+</DocumentFragment>
+`;

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -4,7 +4,6 @@ section: components
 cssPrefix: pf-c-multiple-file-upload
 propComponents:
   ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem']
-beta: true
 ---
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -14,7 +14,6 @@ propComponents:
     'NotificationDrawerListItemBody',
     'NotificationDrawerListItemHeader',
   ]
-beta: true
 ---
 
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/components/Panel/examples/Panel.md

@@ -3,7 +3,6 @@ id: Panel
 section: components
 cssPrefix: pf-c-panel
 propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
-beta: true
 ---
 
 ## Examples

package/src/components/Popover/Popover.tsx

@@ -39,11 +39,11 @@ export enum PopoverPosition {
  */
 
 export interface PopoverProps {
-  /** @beta Text announced by screen reader when alert severity variant is set to indicate
+  /** Text announced by screen reader when alert severity variant is set to indicate
    * severity level.
    */
   alertSeverityScreenReaderText?: string;
-  /** @beta Severity variants for an alert popover. This modifies the color of the header to
+  /** Severity variants for an alert popover. This modifies the color of the header to
    * match the severity.
    */
   alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
@@ -128,7 +128,7 @@ export interface PopoverProps {
    * popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
    */
   headerContent?: React.ReactNode | ((hide: () => void) => React.ReactNode);
-  /** @beta Icon to be displayed in the popover header. **/
+  /** Icon to be displayed in the popover header. **/
   headerIcon?: React.ReactNode;
   /** Hides the popover when a click occurs outside (only works if isVisible is not controlled
    * by the user).

package/src/components/Popover/examples/Popover.md

@@ -58,10 +58,10 @@ Note: If you use the isVisible prop, either refer to the example above or if you
 
 ### Popover with icon in the title
 
-```ts file="./PopoverWithIconInTheTitle.tsx" isBeta 
+```ts file="./PopoverWithIconInTheTitle.tsx" 
 ```
 
 ### Alert popover
 
-```ts file="./PopoverAlert.tsx" isBeta 
+```ts file="./PopoverAlert.tsx" 
 ```

package/src/components/Select/examples/Select.md

@@ -2613,7 +2613,7 @@ class SelectWithFooterCheckbox extends React.Component {
 
 ### View more
 
-```js isBeta
+```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
@@ -2708,7 +2708,7 @@ class SelectViewMore extends React.Component {
 
 ### View more with checkboxes
 
-```js isBeta
+```js
 import React from 'react';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 

package/src/components/Slider/examples/Slider.md

@@ -3,7 +3,6 @@ id: Slider
 section: components
 cssPrefix: pf-c-slider
 propComponents: ['Slider', 'SliderStepObject']
-beta: true
 ---
 
 import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';

package/src/components/TextArea/examples/TextArea.md

@@ -266,7 +266,7 @@ import { TextArea } from '@patternfly/react-core';
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js isBeta
+```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 

package/src/components/TextInput/examples/TextInput.md

@@ -46,5 +46,5 @@ propComponents: ['TextInput']
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts isBeta file="./TextInputIconSprite.tsx"
+```ts file="./TextInputIconSprite.tsx"
 ```

package/src/components/TreeView/examples/TreeView.md

@@ -3,7 +3,6 @@ id: Tree view
 section: components
 cssPrefix: pf-c-tree-view
 propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
-beta: true
 ---
 
 import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon } from '@patternfly/react-icons';

package/src/components/Wizard/Wizard.tsx

@@ -18,9 +18,9 @@ export interface WizardStep {
   name: React.ReactNode;
   /** The component to render in the main body */
   component?: any;
-  /** @beta The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
+  /** The content to render in the drawer panel (use when hasDrawer prop is set on the wizard).   */
   drawerPanelContent?: any;
-  /** @beta Custom drawer toggle button that opens the drawer. */
+  /** Custom drawer toggle button that opens the drawer. */
   drawerToggleButton?: React.ReactNode;
   /** Setting to true hides the side nav and footer */
   isFinishedStep?: boolean;
@@ -108,9 +108,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   isNavExpandable?: boolean;
   /** Callback function to signal the current step in the wizard */
   onCurrentStepChanged?: (step: WizardStep) => void;
-  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer?: boolean;
-  /** @beta Flag indicating the wizard drawer is expanded */
+  /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
 }
 

package/src/components/Wizard/WizardToggle.tsx

@@ -29,9 +29,9 @@ export interface WizardToggleProps {
   mainAriaLabel?: string;
   /** If the wizard is in-page */
   isInPage?: boolean;
-  /** @beta Flag indicating the wizard has a drawer for at least one of the wizard steps */
+  /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer?: boolean;
-  /** @beta Flag indicating the wizard drawer is expanded */
+  /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
 }
 

package/src/components/Wizard/examples/Wizard.md

@@ -901,7 +901,7 @@ class WizardInModal extends React.Component {
 
 ### Wizard with drawer
 
-```js isBeta
+```js
 import React from 'react';
 import {
   Button,

package/src/demos/MultipleFileUploadDemos.md

@@ -1,7 +1,6 @@
 ---
 id: File upload - multiple
 section: components
-beta: true
 ---
 
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -1,7 +1,6 @@
 ---
 id: Notification drawer
 section: components
-beta: true
 ---
 
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';