@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

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.0-prerelease.8","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.0","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.0-prerelease.8","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.0","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.0-prerelease.8","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.0","private":true}

package/package.json

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

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/Breadcrumb/examples/Breadcrumb.md

@@ -8,7 +8,7 @@ ouia: true
 
 import { useRef, useState } from 'react';
 import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCaretDownFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-fill-icon';
 
 ## Examples
 

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/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;
@@ -76,7 +78,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 +86,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 +95,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 +103,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/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -137,6 +137,7 @@ exports[`With popover opened 1`] = `
                     </span>
                     <button
                       aria-expanded="false"
+                      aria-haspopup="menu"
                       class="pf-v6-c-menu-toggle"
                       data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
                       data-ouia-component-type="PF6/MenuToggle"
@@ -165,7 +166,7 @@ exports[`With popover opened 1`] = `
                             width="1em"
                           >
                             <path
-                              d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+                              d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
                             />
                           </svg>
                         </span>

package/src/components/DescriptionList/DescriptionList.tsx

@@ -1,6 +1,6 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
-import { formatBreakpointMods } from '../../helpers';
+import { formatBreakpointMods, useOUIAProps, OUIAProps } from '../../helpers';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
 import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
@@ -13,7 +13,7 @@ export interface BreakpointModifiers {
   '2xl'?: string;
 }
 
-export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'> {
+export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElement>, 'type'>, OUIAProps {
   /** Anything that can be rendered inside of the list */
   children?: React.ReactNode;
   /** Additional classes added to the list */
@@ -71,6 +71,10 @@ export interface DescriptionListProps extends Omit<React.HTMLProps<HTMLDListElem
     xl?: string;
     '2xl'?: string;
   };
+  /** 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 setBreakpointModifiers = (prefix: string, modifiers: BreakpointModifiers) => {
@@ -99,8 +103,11 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
   horizontalTermWidthModifier,
   orientation,
   style,
+  ouiaId,
+  ouiaSafe = true,
   ...props
 }: DescriptionListProps) => {
+  const ouiaProps = useOUIAProps(DescriptionList.displayName, ouiaId, ouiaSafe);
   if (isAutoFit && autoFitMinModifier) {
     style = {
       ...style,
@@ -139,6 +146,7 @@ export const DescriptionList: React.FunctionComponent<DescriptionListProps> = ({
       )}
       style={style}
       {...props}
+      {...ouiaProps}
     >
       {children}
     </dl>

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

@@ -4,7 +4,7 @@ import { DescriptionList } from '../DescriptionList';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 
 test('Renders to match snapshot', () => {
-  const { asFragment } = render(<DescriptionList />);
+  const { asFragment } = render(<DescriptionList ouiaId="ouia-id" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -155,3 +155,23 @@ test(`Renders style when isAutoFit and horizontalTermWidthModifier is set`, () =
     `--${styles.descriptionList}--GridTemplateColumns--min: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-sm: 50px; --${styles.descriptionList}--GridTemplateColumns--min-on-md: 100px; --${styles.descriptionList}--GridTemplateColumns--min-on-lg: 150px; --${styles.descriptionList}--GridTemplateColumns--min-on-xl: 200px; --${styles.descriptionList}--GridTemplateColumns--min-on-2xl: 300px;`
   );
 });
+
+test('Renders with custom ouiaId', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-component-type', 'PF6/DescriptionList');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<DescriptionList aria-label="list" ouiaId="test-id" ouiaSafe={false} />);
+  expect(screen.getByLabelText('list')).toHaveAttribute('data-ouia-safe', 'false');
+});

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

@@ -4,6 +4,9 @@ exports[`Renders to match snapshot 1`] = `
 <DocumentFragment>
   <dl
     class="pf-v6-c-description-list"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/DescriptionList"
+    data-ouia-safe="true"
   />
 </DocumentFragment>
 `;