@patternfly/react-core 4.264.1 → 4.265.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.264.1",
+  "version": "4.265.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",
@@ -51,16 +51,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.0",
-    "@patternfly/react-styles": "^4.92.0",
-    "@patternfly/react-tokens": "^4.94.0",
+    "@patternfly/react-icons": "^4.93.1",
+    "@patternfly/react-styles": "^4.92.1",
+    "@patternfly/react-tokens": "^4.94.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.221.2",
+    "@patternfly/patternfly": "4.221.3",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^3.0.0",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "3c9dd17f7327ffafa0b9751074b188ea19eaeee6"
+  "gitHead": "48ab4d42a8037f77aa57bdfa3211745d4d873f34"
 }

package/src/components/Badge/Badge.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Text announced by screen readers to indicate the current content/status of the badge. */
+  screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
   /** content rendered inside the Badge */
@@ -15,6 +17,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
   className = '',
   children = '',
+  screenReaderText,
   ...props
 }: BadgeProps) => (
   <span
@@ -22,6 +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>}
   </span>
 );
 Badge.displayName = 'Badge';

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

@@ -31,6 +31,16 @@ 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', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+});
+
+test('Renders screenReaderText passed via prop', () => {
+  render(<Badge screenReaderText="Custom screen reader text">Test</Badge>);
+  expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
+});
+
 test('Renders with custom class name when className prop is provided', () => {
   render(<Badge className="custom-class">Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Badge/examples/BadgeUnread.tsx

@@ -3,6 +3,17 @@ import { Badge } from '@patternfly/react-core';
 
 export const BadgeUnread: React.FunctionComponent = () => (
   <React.Fragment>
-    <Badge key={1}>7</Badge> <Badge key={2}>24</Badge> <Badge key={3}>240</Badge> <Badge key={4}>999+</Badge>
+    <Badge key={1} screenReaderText="Unread Messages">
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Unread Messages">
+      24
+    </Badge>
+    <Badge key={3} screenReaderText="Unread Messages">
+      240
+    </Badge>
+    <Badge key={4} screenReaderText="Unread Messages">
+      999+
+    </Badge>
   </React.Fragment>
 );

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -26,7 +26,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element>();
+  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element | null>();
   const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
@@ -37,6 +37,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       case 'label':
         setBreadcrumb(labelsBreadcrumb(isOpen));
         break;
+      case 'pause-app':
+        setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(isOpen));
+        break;
+      case 'pause-label':
+        setBreadcrumb(pauseRolloutsLabelsBreadcrumb(isOpen));
+        break;
       default:
         break;
     }
@@ -46,14 +52,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setWithMaxMenuHeight(checked);
   };
 
-  const drillOut = (toMenuId: string, fromPathId: string, _breadcrumb: JSX.Element | null) => {
-    const indexOfMenuId = menuDrilledIn.indexOf(toMenuId);
-    const menuDrilledInSansLast = menuDrilledIn.slice(0, indexOfMenuId);
-    const indexOfMenuIdPath = drilldownPath.indexOf(fromPathId);
-    const pathSansLast = drilldownPath.slice(0, indexOfMenuIdPath);
-    setMenuDrilledIn(menuDrilledInSansLast);
-    setDrilldownPath(pathSansLast);
+  const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
+    setMenuDrilledIn(prevMenuDrilledIn => {
+      const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
+      return prevMenuDrilledIn.slice(0, indexOfMenuId);
+    });
+    setDrilldownPath(prevDrilldownPath => {
+      const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);
+      return prevDrilldownPath.slice(0, indexOfMenuIdPath);
+    });
     setActiveMenu(toMenuId);
+    setBreadcrumb(breadcrumb);
   };
 
   const setHeight = (menuId: string, height: number) => {
@@ -146,31 +155,59 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     </Breadcrumb>
   );
 
-  const pauseRolloutsAppGrpBreadcrumb = (
+  const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-app')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
     </Breadcrumb>
   );
 
-  const pauseRolloutsLabelsBreadcrumb = (
+  const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-label')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
     </Breadcrumb>
@@ -205,6 +242,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
         onDrillIn={drillIn}
         onDrillOut={() => drillOut}
         onGetMenuHeight={setHeight}
+        isScrollable={withMaxMenuHeight}
       >
         {breadcrumb && (
           <>
@@ -270,7 +308,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                     itemId="group:app_grouping"
                     description="Groups A-C"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
                         <MenuItem itemId="group_a">Group A</MenuItem>
@@ -285,7 +323,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                   <MenuItem
                     itemId="group:labels"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
                         <MenuItem itemId="label_1">Label 1</MenuItem>