@patternfly/react-core 6.6.1-prerelease.4 → 6.6.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-prerelease.3","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.6.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-prerelease.3","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.6.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-prerelease.3","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.6.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.4",
+  "version": "6.6.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-prerelease.0",
-    "@patternfly/react-styles": "^6.6.1-prerelease.0",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.0",
+    "@patternfly/react-icons": "^6.6.1",
+    "@patternfly/react-styles": "^6.6.1",
+    "@patternfly/react-tokens": "^6.6.1",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.20",
+    "@patternfly/patternfly": "6.6.1",
     "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": "1fe30b1dc78a10ff784587cf7ce03d96125fbfb7"
+  "gitHead": "02bbb5540dc894017949e1b3b66083bce4c9deee"
 }

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 RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const ActionListVertical: React.FunctionComponent = () => (
@@ -30,11 +30,7 @@ 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={<RhMicronsCheckmarkIcon />}
-          />
+          <Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup>
@@ -42,11 +38,7 @@ 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={<RhMicronsCheckmarkIcon />}
-          />
+          <Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />
         </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 RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
   <>
@@ -15,12 +15,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
         />
       </ActionListItem>
       <ActionListItem>
-        <Button
-          variant="plain"
-          id="with-icons-check-button"
-          aria-label="check icon button"
-          icon={<RhMicronsCheckmarkIcon />}
-        />
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
       </ActionListItem>
     </ActionList>
     <br />
@@ -40,7 +35,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-list-check-button"
             aria-label="check icon button"
-            icon={<RhMicronsCheckmarkIcon />}
+            icon={<CheckIcon />}
           />
         </ActionListItem>
       </ActionListGroup>
@@ -58,7 +53,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-group-check-button"
             aria-label="check icon button"
-            icon={<RhMicronsCheckmarkIcon />}
+            icon={<CheckIcon />}
           />
         </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 RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-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 RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-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={<RhUiLaptopFillIcon />} variant="danger" title="Danger alert title" />
+    <Alert customIcon={<LaptopIcon />} variant="danger" title="Danger alert title" />
   </Fragment>
 );

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 RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/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 RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/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={<RhUiUploadIcon />}
+        icon={<UploadIcon />}
         {...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 RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
+import UploadIcon from '@patternfly/react-icons/dist/esm/icons/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={<RhUiUploadIcon />}
+        icon={<UploadIcon />}
         {...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, useOUIAProps, OUIAProps } from '../../helpers';
+import { useSSRSafeId } 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'>, OUIAProps {
+export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Additional classes to add to the outer div of the calendar month. */
   className?: string;
   /** Month/year to base other dates around. */
@@ -88,10 +88,6 @@ 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)[]) => {
@@ -155,11 +151,8 @@ 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);
@@ -300,7 +293,7 @@ export const CalendarMonth = ({
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
-    <div className={css(styles.calendarMonth, className)} {...props} {...ouiaProps}>
+    <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, 'pf-m-prev-month')}>
           <Button

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

@@ -64,23 +64,3 @@ 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 RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-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 RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-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' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -44,7 +44,7 @@ export const CardTile: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -62,7 +62,7 @@ export const CardTile: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <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 RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-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' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -56,7 +56,7 @@ export const CardTileMulti: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <b>Tile header</b>
           </Flex>
         </CardHeader>
@@ -73,7 +73,7 @@ export const CardTileMulti: React.FunctionComponent = () => {
           }}
         >
           <Flex gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
-            <RhUiAddIcon />
+            <PlusIcon />
             <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 RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-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 RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-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={<RhUiPlayFillIcon />}
+              icon={<PlayIcon />}
               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 RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-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 RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-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={<RhUiPlayFillIcon />}
+            icon={<PlayIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>

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

@@ -9,7 +9,7 @@ import {
   Button,
   Tooltip
 } from '@patternfly/react-core';
-import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-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={<RhUiPlayFillIcon />}
+            icon={<PlayIcon />}
             onClick={() => setisRunning(!isRunning)}
           />
         </Tooltip>

package/src/components/Compass/Compass.tsx

@@ -1,8 +1,6 @@
 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;
@@ -78,7 +76,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {header && (
         <div
           className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-          {...(!isHeaderExpanded && { inert: IS_INERT })}
+          {...(!isHeaderExpanded && { inert: 'true' })}
         >
           {header}
         </div>
@@ -86,7 +84,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {sidebarStart && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-          {...(!isSidebarStartExpanded && { inert: IS_INERT })}
+          {...(!isSidebarStartExpanded && { inert: 'true' })}
         >
           {sidebarStart}
         </div>
@@ -95,7 +93,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {sidebarEnd && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-          {...(!isSidebarEndExpanded && { inert: IS_INERT })}
+          {...(!isSidebarEndExpanded && { inert: 'true' })}
         >
           {sidebarEnd}
         </div>
@@ -103,7 +101,7 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {footer && (
         <div
           className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-          {...(!isFooterExpanded && { inert: IS_INERT })}
+          {...(!isFooterExpanded && { inert: 'true' })}
         >
           {footer}
         </div>

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

@@ -55,9 +55,6 @@ exports[`Matches the snapshot with drawer 1`] = `
   >
     <div
       class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-      data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
-      data-ouia-component-type="PF6/Drawer"
-      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-drawer__main"

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -4,9 +4,6 @@ exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
-    data-ouia-component-id="OUIA-Generated-Drawer-:r1:"
-    data-ouia-component-type="PF6/Drawer"
-    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"

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

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r12:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -64,13 +64,10 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-pf-:ru:-body"
+      aria-describedby="popover-pf-:ro:-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
-      data-ouia-component-id="OUIA-Generated-Popover-:rv:"
-      data-ouia-component-type="PF6/Popover"
-      data-ouia-safe="true"
       data-popper-escaped="true"
       data-popper-placement="bottom"
       data-popper-reference-hidden="true"
@@ -85,13 +82,10 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-pf-:ru:-body"
+          id="popover-pf-:ro:-body"
         >
           <div
             class="pf-v6-c-calendar-month"
-            data-ouia-component-id="OUIA-Generated-CalendarMonth-:r13:"
-            data-ouia-component-type="PF6/CalendarMonth"
-            data-ouia-safe="true"
           >
             <div
               class="pf-v6-c-calendar-month__header"
@@ -102,7 +96,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r15:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -137,15 +131,14 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="hidden-month-span:r14:"
+                      id="hidden-month-span:rs:"
                     >
                       Month
                     </span>
                     <button
                       aria-expanded="false"
-                      aria-haspopup="menu"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r18:"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -192,7 +185,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r1a:"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -208,7 +201,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:r1b:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -819,7 +812,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -836,7 +829,7 @@ exports[`disabled date picker 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""