@patternfly/react-core 6.6.2 → 6.7.0-prerelease.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.7.0-prerelease.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.7.0-prerelease.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.7.0-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.2",
+  "version": "6.7.0-prerelease.2",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.1",
-    "@patternfly/react-styles": "^6.6.1",
-    "@patternfly/react-tokens": "^6.6.1",
+    "@patternfly/react-icons": "^6.7.0-prerelease.0",
+    "@patternfly/react-styles": "^6.7.0-prerelease.0",
+    "@patternfly/react-tokens": "^6.7.0-prerelease.1",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.1",
+    "@patternfly/patternfly": "6.6.0-prerelease.49",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "02bbb5540dc894017949e1b3b66083bce4c9deee"
+  "gitHead": "6a486021829bef4ba8c6a772c035b364ab5f0686"
 }

package/src/components/ActionList/examples/ActionList.md

@@ -7,8 +7,8 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
-import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-checkmark-icon';
 
 ## Examples
 

package/src/components/ActionList/examples/ActionListVertical.tsx

@@ -1,5 +1,5 @@
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const ActionListVertical: React.FunctionComponent = () => (
@@ -30,7 +30,11 @@ export const ActionListVertical: React.FunctionComponent = () => (
           <Button aria-label="Close vertical action list group 1" variant="plain" icon={<RhMicronsCloseIcon />} />
         </ActionListItem>
         <ActionListItem>
-          <Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
+          <Button
+            aria-label="Toggle vertical action list example group 1"
+            variant="plain"
+            icon={<RhMicronsCheckmarkIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup>
@@ -38,7 +42,11 @@ export const ActionListVertical: React.FunctionComponent = () => (
           <Button aria-label="Close vertical action list group 2" variant="plain" icon={<RhMicronsCloseIcon />} />
         </ActionListItem>
         <ActionListItem>
-          <Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
+          <Button
+            aria-label="Toggle vertical action list example group 2"
+            variant="plain"
+            icon={<RhMicronsCheckmarkIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
     </ActionList>

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -1,6 +1,6 @@
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
   <>
@@ -15,7 +15,12 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
         />
       </ActionListItem>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
+        <Button
+          variant="plain"
+          id="with-icons-check-button"
+          aria-label="check icon button"
+          icon={<RhMicronsCheckmarkIcon />}
+        />
       </ActionListItem>
     </ActionList>
     <br />
@@ -35,7 +40,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-list-check-button"
             aria-label="check icon button"
-            icon={<CheckIcon />}
+            icon={<RhMicronsCheckmarkIcon />}
           />
         </ActionListItem>
       </ActionListGroup>
@@ -53,7 +58,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-group-check-button"
             aria-label="check icon button"
-            icon={<CheckIcon />}
+            icon={<RhMicronsCheckmarkIcon />}
           />
         </ActionListItem>
       </ActionListGroup>

package/src/components/Alert/examples/Alert.md

@@ -12,7 +12,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user
 import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
-import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 
 Micro animations have been added for `<Alert>` components within an `<AlertGroup>`. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the `hasAnimations` property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.

package/src/components/Alert/examples/AlertCustomIcons.tsx

@@ -4,7 +4,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user
 import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
-import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
 
 export const AlertCustomIcons: React.FunctionComponent = () => (
   <Fragment>
@@ -12,6 +12,6 @@ export const AlertCustomIcons: React.FunctionComponent = () => (
     <Alert customIcon={<RhUiContainerFillIcon />} variant="info" title="Info alert title" />
     <Alert customIcon={<DatabaseIcon />} variant="success" title="Success alert title" />
     <Alert customIcon={<RhUiServerStackFillIcon />} variant="warning" title="Warning alert title" />
-    <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
+    <Alert customIcon={<RhUiLaptopFillIcon />} variant="danger" title="Danger alert title" />
   </Fragment>
 );

package/src/components/Backdrop/Backdrop.tsx

@@ -1,20 +1,39 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
+import { useHasAnimations } from '../../helpers';
 
 export interface BackdropProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the backdrop */
   children?: React.ReactNode;
   /** Additional classes added to the backdrop */
   className?: string;
+  /** Flag indicating whether animations are enabled. Animations are enabled by default. */
+  hasAnimations?: boolean;
+  /** Flag to show the backdrop when animations are enabled. Set to false while the backdrop remains mounted to play its exit transition. */
+  isVisible?: boolean;
 }
 
 export const Backdrop: React.FunctionComponent<BackdropProps> = ({
   children = null,
   className = '',
+  hasAnimations: hasAnimationsProp = true,
+  isVisible = true,
   ...props
-}: BackdropProps) => (
-  <div {...props} className={css(styles.backdrop, className)}>
-    {children}
-  </div>
-);
+}: BackdropProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
+
+  return (
+    <div
+      {...props}
+      className={css(
+        styles.backdrop,
+        hasAnimations && styles.modifiers.animate,
+        hasAnimations && isVisible && styles.modifiers.show,
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
 Backdrop.displayName = 'Backdrop';

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

@@ -21,11 +21,45 @@ test(`Renders with the ${styles.backdrop}`, () => {
   expect(screen.getByText('Test')).toHaveClass(styles.backdrop);
 });
 
-test(`Renders with only the class ${styles.backdrop} by default`, () => {
+test('Renders with animations enabled by default', () => {
   render(<Backdrop>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
+test('Renders without animation classes when animations are explicitly disabled', () => {
+  render(<Backdrop hasAnimations={false}>Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass(styles.backdrop, { exact: true });
 });
 
+test('Renders as visible by default when animations are enabled', () => {
+  render(<Backdrop hasAnimations>Test</Backdrop>);
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
+test('Renders as hidden when animations are enabled and isVisible is false', () => {
+  render(
+    <Backdrop hasAnimations isVisible={false}>
+      Test
+    </Backdrop>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, { exact: true });
+});
+
+test('Renders as visible when animations are enabled and isVisible is true', () => {
+  render(
+    <Backdrop hasAnimations isVisible>
+      Test
+    </Backdrop>
+  );
+  expect(screen.getByText('Test')).toHaveClass(styles.backdrop, styles.modifiers.animate, styles.modifiers.show, {
+    exact: true
+  });
+});
+
 test('Renders with custom class name when className prop is passed', () => {
   render(<Backdrop className="test-class">Test</Backdrop>);
   expect(screen.getByText('Test')).toHaveClass('test-class');

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

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-backdrop"
+    class="pf-v6-c-backdrop pf-m-animate pf-m-show"
   >
     Backdrop
   </div>

package/src/components/Button/examples/Button.md

@@ -12,7 +12,7 @@ import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 

package/src/components/Button/examples/ButtonCircle.tsx

@@ -3,7 +3,7 @@ import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-micron
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 
 interface LoadingPropsType {
   spinnerAriaValueText: string;
@@ -75,7 +75,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
         isCircle
         {...(!isUploading && { 'aria-label': 'Upload circle variant example' })}
         onClick={() => setIsUploading(!isUploading)}
-        icon={<UploadIcon />}
+        icon={<RhUiUploadIcon />}
         {...uploadingProps}
       />
     </Flex>

package/src/components/Button/examples/ButtonProgress.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Flex } from '@patternfly/react-core';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 
 interface LoadingPropsType {
   spinnerAriaValueText: string;
@@ -59,7 +59,7 @@ export const ButtonProgress: React.FunctionComponent = () => {
         variant="plain"
         {...(!isUploading && { 'aria-label': 'Upload' })}
         onClick={() => setIsUploading(!isUploading)}
-        icon={<UploadIcon />}
+        icon={<RhUiUploadIcon />}
         {...uploadingProps}
       />
       <br />

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -8,7 +8,7 @@ import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -63,7 +63,7 @@ export interface CalendarFormat {
   inlineProps?: CalendarMonthInlineProps;
 }
 
-export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'>, OUIAProps {
   /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
   /** Month/year to base other dates around. */
@@ -88,6 +88,10 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
    * monthAppendTo={document.getElementById('target')}
    */
   monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -151,8 +155,11 @@ export const CalendarMonth = ({
   isDateFocused = false,
   inlineProps,
   monthAppendTo = 'inline',
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: CalendarProps) => {
+  const ouiaProps = useOUIAProps(CalendarMonth.displayName, ouiaId, ouiaSafe);
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
     .map((monthNum) => new Date(1990, monthNum))
     .map(monthFormat);
@@ -293,7 +300,7 @@ export const CalendarMonth = ({
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
-    <div className={css(styles.calendarMonth, className)} {...props}>
+    <div className={css(styles.calendarMonth, className)} {...props} {...ouiaProps}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button

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

@@ -64,3 +64,23 @@ test('InlineProps render correct wrapper component and attributes', () => {
   const title = screen.getByText('Title');
   expect(title).toBeVisible();
 });
+
+test('Renders with custom ouiaId', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-component-type', 'PF6/CalendarMonth');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  const { container } = render(<CalendarMonth date={new Date(2024, 0, 15)} ouiaId="test-id" ouiaSafe={false} />);
+  expect(container.firstChild).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/Card/examples/Card.md

@@ -20,7 +20,7 @@ import { Fragment, useState } from 'react';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 ## Examples
 

package/src/components/Card/examples/CardTile.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 export const CardTile: React.FunctionComponent = () => {
   const [isChecked, setIsChecked] = useState('');
@@ -26,7 +26,7 @@ export const CardTile: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -44,7 +44,7 @@ export const CardTile: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -62,7 +62,7 @@ export const CardTile: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header (disabled)</b>
           </Flex>
         </CardHeader>

package/src/components/Card/examples/CardTileMulti.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 
 export const CardTileMulti: React.FunctionComponent = () => {
   const [isChecked1, setIsChecked1] = useState(false);
@@ -39,7 +39,7 @@ export const CardTileMulti: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -56,7 +56,7 @@ export const CardTileMulti: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -73,7 +73,7 @@ export const CardTileMulti: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <PlusIcon />
+            <RhUiAddIcon />
             <b>Tile header (disabled)</b>
           </Flex>
         </CardHeader>

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 ## Examples
 

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
   const [isRunning, setisRunning] = useState(false);
@@ -24,7 +24,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
               variant="plain"
               hasNoPadding
               aria-label="Run in web terminal"
-              icon={<PlayIcon />}
+              icon={<RhUiPlayFillIcon />}
               onClick={() => setisRunning(!isRunning)}
             />
           </Tooltip>

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -7,7 +7,7 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 
 import { Fragment, useState } from 'react';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 **Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
 

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -7,7 +7,7 @@ import {
   Button,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = useState(false);
@@ -57,7 +57,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           <Button
             variant="plain"
             aria-label="Run in web terminal"
-            icon={<PlayIcon />}
+            icon={<RhUiPlayFillIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -9,7 +9,7 @@ import {
   Button,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
 
 export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -73,7 +73,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
           <Button
             variant="plain"
             aria-label="Run in web terminal"
-            icon={<PlayIcon />}
+            icon={<RhUiPlayFillIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>

package/src/components/Compass/Compass.tsx

@@ -1,6 +1,8 @@
 import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
+import { IS_INERT } from '../../helpers/inert';
+
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Compass. */
   className?: string;
@@ -10,6 +12,8 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   dock?: React.ReactNode;
   /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */
   isDockExpanded?: boolean;
+  /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */
+  isDockExpandableExpanded?: boolean;
   /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and
    * will handle toggling the visibility of the text in individual isDocked components.
    */
@@ -43,6 +47,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   masthead,
   dock,
   isDockExpanded,
+  isDockExpandableExpanded,
   isDockTextExpanded,
   header,
   isHeaderExpanded = true,
@@ -67,6 +72,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
           className={css(
             `${styles.compass}__dock`,
             isDockExpanded && styles.modifiers.expanded,
+            isDockExpandableExpanded && styles.modifiers.expandableExpanded,
             isDockTextExpanded && styles.modifiers.textExpanded
           )}
         >
@@ -76,7 +82,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {header && (
         <div
           className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-          {...(!isHeaderExpanded && { inert: 'true' })}
+          {...(!isHeaderExpanded && { inert: IS_INERT })}
         >
           {header}
         </div>
@@ -84,7 +90,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {sidebarStart && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-          {...(!isSidebarStartExpanded && { inert: 'true' })}
+          {...(!isSidebarStartExpanded && { inert: IS_INERT })}
         >
           {sidebarStart}
         </div>
@@ -93,7 +99,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {sidebarEnd && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-          {...(!isSidebarEndExpanded && { inert: 'true' })}
+          {...(!isSidebarEndExpanded && { inert: IS_INERT })}
         >
           {sidebarEnd}
         </div>
@@ -101,7 +107,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {footer && (
         <div
           className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-          {...(!isFooterExpanded && { inert: 'true' })}
+          {...(!isFooterExpanded && { inert: IS_INERT })}
         >
           {footer}
         </div>

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

@@ -94,6 +94,21 @@ test('Renders footer without expanded class and with inert when isFooterExpanded
   expect(footerElement).toHaveAttribute('inert');
 });
 
+test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded />);
+  expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded);
+});
+
+test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => {
+  render(<Compass dock={<div>Dock content</div>} isDockExpandableExpanded={false} />);
+  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+});
+
+test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => {
+  render(<Compass dock={<div>Dock content</div>} />);
+  expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded);
+});
+
 test('Renders with drawer when drawerContent is provided', () => {
   render(<Compass drawerContent={<div>Drawer content</div>} />);
   expect(screen.getByText('Drawer content')).toBeVisible();