@patternfly/react-core 5.0.0-alpha.96 → 5.0.0-alpha.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.96",
+  "version": "5.0.0-alpha.97",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "88e143dc1df5a48525453a2038c495f9ee5b8f62"
+  "gitHead": "2f2eb377c744647e34d557e1550ae7a01f87f5a6"
 }

package/src/components/Badge/Badge.tsx

@@ -25,7 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
-    {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -31,9 +31,9 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Does not render pf-screen-reader class by default', () => {
+test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -336,7 +336,7 @@ export const CalendarMonth = ({
           <tr>
             {calendar[0].map(({ date }, index) => (
               <th key={index} className={styles.calendarMonthDay} scope="col">
-                <span className="pf-screen-reader">{longWeekdayFormat(date)}</span>
+                <span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
                 <span aria-hidden>{weekdayFormat(date)}</span>
               </th>
             ))}

package/src/components/Card/Card.tsx

@@ -141,7 +141,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     >
       {hasSelectableInput && (
         <input
-          className="pf-screen-reader"
+          className="pf-v5-screen-reader"
           id={`${id}-input`}
           {...ariaProps}
           type="checkbox"

package/src/components/DataList/DataListItem.tsx

@@ -93,7 +93,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
             >
               {onSelectableRowChange && (
                 <input
-                  className="pf-screen-reader"
+                  className="pf-v5-screen-reader"
                   type="radio"
                   checked={isSelected}
                   onChange={(event) => onSelectableRowChange(event, id)}

package/src/components/DataList/examples/DataList.md

@@ -68,9 +68,9 @@ import { css } from '@patternfly/react-styles';
 
 ```
 
-### Selectable rows
+### Clickable rows
 
-```ts file="./DataListSelectableRows.tsx"
+```ts file="./DataListClickableRows.tsx"
 
 ```
 

package/src/components/DataList/examples/{DataListSelectableRows.tsx → DataListClickableRows.tsx}

@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DataListSelectableRows: React.FunctionComponent = () => {
+export const DataListClickableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
@@ -46,24 +46,24 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DataList
-        aria-label="selectable data list example"
+        aria-label="clickable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
         onSelectableRowChange={handleInputChange}
       >
-        <DataListItem aria-labelledby="selectable-action-item1" id="item1">
+        <DataListItem aria-labelledby="clickable-action-item1" id="item1">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-action-item1">Single actionable Primary content</span>
+                  <span id="clickable-action-item1">Single actionable Primary content</span>
                 </DataListCell>,
                 <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-action-item1 selectable-action-action1"
-              id="selectable-action-action1"
+              aria-labelledby="clickable-action-item1 clickable-action-action1"
+              id="clickable-action-action1"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -76,7 +76,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen1}
                     onClick={onToggle1}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 1"
+                    aria-label="Data list clickable rows example kebab toggle 1"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>
@@ -102,19 +102,19 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
-        <DataListItem aria-labelledby="selectable-actions-item2" id="item2">
+        <DataListItem aria-labelledby="clickable-actions-item2" id="item2">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-actions-item2">Selectable actions Primary content</span>
+                  <span id="clickable-actions-item2">clickable actions Primary content</span>
                 </DataListCell>,
-                <DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
+                <DataListCell key="secondary content">clickable actions Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-actions-item2 selectable-actions-action2"
-              id="selectable-actions-action2"
+              aria-labelledby="clickable-actions-item2 clickable-actions-action2"
+              id="clickable-actions-action2"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -127,7 +127,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen2}
                     onClick={onToggle2}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 2"
+                    aria-label="Data list clickable rows example kebab toggle 2"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>

package/src/components/DataList/examples/DataListDraggable.tsx

@@ -93,10 +93,10 @@ export const DataListDraggable: React.FunctionComponent = () => {
           ))}
         </DataList>
       </Droppable>
-      <div className="pf-screen-reader" aria-live="assertive">
+      <div className="pf-v5-screen-reader" aria-live="assertive">
         {liveText}
       </div>
-      <div className="pf-screen-reader" id={`description-${uniqueId}`}>
+      <div className="pf-v5-screen-reader" id={`description-${uniqueId}`}>
         Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
         the drag, or any other key to cancel the drag operation.
       </div>

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

@@ -190,7 +190,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Sunday
                     </span>
@@ -205,7 +205,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Monday
                     </span>
@@ -220,7 +220,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Tuesday
                     </span>
@@ -235,7 +235,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Wednesday
                     </span>
@@ -250,7 +250,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Thursday
                     </span>
@@ -265,7 +265,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Friday
                     </span>
@@ -280,7 +280,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Saturday
                     </span>

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -148,7 +148,7 @@ 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">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {progressAriaLiveMessage &&
             typeof progressAriaLiveMessage === 'function' &&
             progressAriaLiveMessage(+loadPercentage.toFixed(2))}

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

@@ -25,7 +25,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -137,7 +137,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -246,7 +246,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message
       </div>
@@ -357,7 +357,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         test message 0
       </div>
@@ -468,7 +468,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 42%.
       </div>
@@ -594,7 +594,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -705,7 +705,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>
@@ -814,7 +814,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
     >
       <div
         aria-live="polite"
-        class="pf-screen-reader"
+        class="pf-v5-screen-reader"
       >
         Progress value is 0%.
       </div>

package/src/demos/ProgressDemo.md

@@ -31,7 +31,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />
@@ -71,7 +71,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {`Progress value is ${currentValue}%.`}
         </div>
         <Progress value={currentValue} title="Title" />

package/src/demos/ProgressStepperDemo.md

@@ -46,7 +46,7 @@ ProgressStepperDemo = () => {
         <br />
       </StackItem>
       <StackItem>
-        <div className="pf-screen-reader" aria-live="polite">
+        <div className="pf-v5-screen-reader" aria-live="polite">
           {steps[currentStep] && `On ${steps[currentStep].title}.`}
           {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
         </div>