@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/src/deprecated/components/Modal/Modal.tsx

@@ -4,7 +4,8 @@ import { canUseDOM, KeyTypes, PickOptional } from '../../../helpers';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
 import { ModalContent } from './ModalContent';
-import { OUIAProps, getDefaultOUIAId } from '../../../helpers';
+import { OUIAProps } from '../../../helpers';
+import { SSRSafeIds } from '../../../helpers/SSRSafeIds/SSRSafeIds';
 
 export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'>, OUIAProps {
   /** Action buttons to add to the standard modal footer. Ignored if the footer property
@@ -92,7 +93,7 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  ouiaStateId: string;
+  mounted: boolean;
 }
 
 class Modal extends Component<ModalProps, ModalState> {
@@ -135,7 +136,7 @@ class Modal extends Component<ModalProps, ModalState> {
     this.backdropId = `pf-modal-part-${backdropIdNum}`;
 
     this.state = {
-      ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
+      mounted: false
     };
   }
 
@@ -167,6 +168,7 @@ class Modal extends Component<ModalProps, ModalState> {
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
+    this.setState({ mounted: true });
     const {
       appendTo,
       title,
@@ -238,32 +240,38 @@ class Modal extends Component<ModalProps, ModalState> {
       ...props
     } = this.props;
 
-    if (!canUseDOM || !this.getElement(appendTo)) {
+    if (!this.state.mounted || !canUseDOM || !this.getElement(appendTo)) {
       return null;
     }
 
-    return ReactDOM.createPortal(
-      <ModalContent
-        {...props}
-        boxId={this.boxId}
-        labelId={this.labelId}
-        descriptorId={this.descriptorId}
-        backdropId={this.backdropId}
-        title={title}
-        titleIconVariant={titleIconVariant}
-        titleLabel={titleLabel}
-        aria-label={ariaLabel}
-        aria-describedby={ariaDescribedby}
-        aria-labelledby={ariaLabelledby}
-        bodyAriaLabel={bodyAriaLabel}
-        bodyAriaRole={bodyAriaRole}
-        ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
-        ouiaSafe={ouiaSafe}
-        position={position}
-        elementToFocus={elementToFocus}
-      />,
-      this.getElement(appendTo)
-    ) as React.ReactElement<any>;
+    return (
+      <SSRSafeIds prefix="pf-" ouiaComponentType={`Modal${this.props.variant ? `-${this.props.variant}` : ''}`}>
+        {(_, generatedOuiaId) =>
+          ReactDOM.createPortal(
+            <ModalContent
+              {...props}
+              boxId={this.boxId}
+              labelId={this.labelId}
+              descriptorId={this.descriptorId}
+              backdropId={this.backdropId}
+              title={title}
+              titleIconVariant={titleIconVariant}
+              titleLabel={titleLabel}
+              aria-label={ariaLabel}
+              aria-describedby={ariaDescribedby}
+              aria-labelledby={ariaLabelledby}
+              bodyAriaLabel={bodyAriaLabel}
+              bodyAriaRole={bodyAriaRole}
+              ouiaId={ouiaId !== undefined ? ouiaId : generatedOuiaId}
+              ouiaSafe={ouiaSafe}
+              position={position}
+              elementToFocus={elementToFocus}
+            />,
+            this.getElement(appendTo)
+          ) as React.ReactElement<any>
+        }
+      </SSRSafeIds>
+    );
   }
 }
 

package/src/deprecated/components/Modal/ModalBoxCloseButton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { Button } from '../../../components/Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { OUIAProps } from '../../../helpers';
 
 export interface ModalBoxCloseButtonProps extends OUIAProps {
@@ -29,7 +29,7 @@ export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonPro
       aria-label={ariaLabel}
       {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
       {...props}
-      icon={<TimesIcon />}
+      icon={<RhMicronsCloseIcon />}
     />
   </div>
 );

package/src/deprecated/components/Modal/ModalBoxTitle.tsx

@@ -3,11 +3,11 @@ import modalStyles from '@patternfly/react-styles/css/components/ModalBox/modal-
 import { css } from '@patternfly/react-styles';
 import { capitalize } from '../../../helpers';
 import { Tooltip } from '../../../components/Tooltip';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import { useIsomorphicLayoutEffect } from '../../../helpers';
 
 export const isVariantIcon = (icon: any): icon is string =>
@@ -39,11 +39,11 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
   const h1 = useRef<HTMLHeadingElement>(null);
   const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
   const variantIcons = {
-    success: <CheckCircleIcon />,
-    danger: <ExclamationCircleIcon />,
-    warning: <ExclamationTriangleIcon />,
-    info: <InfoCircleIcon />,
-    custom: <BellIcon />
+    success: <RhUiCheckCircleFillIcon />,
+    danger: <RhUiErrorFillIcon />,
+    warning: <RhUiWarningFillIcon />,
+    info: <RhUiInformationFillIcon />,
+    custom: <RhUiNotificationFillIcon />
   };
   const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;
 

package/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -15,11 +15,11 @@ exports[`ModalBoxTitle alert variant 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 576 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
         />
       </svg>
     </span>
@@ -84,11 +84,11 @@ exports[`ModalBoxTitle custom variant 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 896 1024"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+          d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
         />
       </svg>
     </span>
@@ -121,11 +121,11 @@ exports[`ModalBoxTitle danger variant 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
         />
       </svg>
     </span>
@@ -158,11 +158,11 @@ exports[`ModalBoxTitle info variant 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
         />
       </svg>
     </span>
@@ -195,11 +195,11 @@ exports[`ModalBoxTitle success variant 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
         />
       </svg>
     </span>

package/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`Modal Content Test description 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-3"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -38,11 +38,11 @@ exports[`Modal Content Test description 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -103,7 +103,7 @@ exports[`Modal Content Test isOpen 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-2"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -117,11 +117,11 @@ exports[`Modal Content Test isOpen 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -177,7 +177,7 @@ exports[`Modal Content Test only body 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -191,11 +191,11 @@ exports[`Modal Content Test only body 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -251,7 +251,7 @@ exports[`Modal Content Test with footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-4"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -265,11 +265,11 @@ exports[`Modal Content Test with footer 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -330,7 +330,7 @@ exports[`Modal Content Test with onclose 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-6"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r5:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -344,11 +344,11 @@ exports[`Modal Content Test with onclose 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -409,7 +409,7 @@ exports[`Modal Content test without footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-5"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -423,11 +423,11 @@ exports[`Modal Content test without footer 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -483,7 +483,7 @@ exports[`Modal Test with custom footer 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-8"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -497,11 +497,11 @@ exports[`Modal Test with custom footer 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>
@@ -566,7 +566,7 @@ exports[`Modal Test with custom header 1`] = `
           <button
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-7"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:r6:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -580,11 +580,11 @@ exports[`Modal Test with custom header 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 352 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                 />
               </svg>
             </span>

package/src/deprecated/components/Modal/examples/Modal.md

@@ -127,7 +127,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### With dropdown
 
-To present a menu of actions or links to a user, you can add a [dropdown](/components/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
 
 ```ts file="./ModalWithDropdown.tsx"
 
@@ -143,7 +143,7 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/form).
+To collect user input within a modal, you can add a [form](/components/forms/form).
 
 To submit the form from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
 

package/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap

@@ -81,12 +81,24 @@ exports[`Tile renders with icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div
@@ -118,12 +130,24 @@ exports[`Tile renders with stacked icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div
@@ -155,12 +179,24 @@ exports[`Tile renders with stacked large icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div

package/src/deprecated/components/Tile/examples/Tile.md

@@ -8,15 +8,13 @@ deprecated: true
 
 import { useState } from 'react';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import './Tile.css';
 
 **Note:** Tile has been deprecated. Use the [card](/components/card#cards-as-tiles) component instead.
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
-
 ### Basic tile
 
 Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.

package/src/deprecated/components/Tile/examples/TileStacked.tsx

@@ -1,15 +1,15 @@
 import { Tile } from '@patternfly/react-core/deprecated';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const TileStacked: React.FunctionComponent = () => (
   <div role="listbox" aria-label="Stacked tiles">
-    <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+    <Tile title="Default" icon={<RhUiNotificationFillIcon />} isStacked isSelected={false}>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+    <Tile title="Selected" icon={<RhUiNotificationFillIcon />} isStacked isSelected>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+    <Tile title="Disabled" icon={<RhUiNotificationFillIcon />} isStacked isDisabled isSelected={false}>
       Subtext goes here
     </Tile>
   </div>

package/src/deprecated/components/Tile/examples/TileStackedWithLargeIcons.tsx

@@ -1,15 +1,15 @@
 import { Tile } from '@patternfly/react-core/deprecated';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const TileStackedWithLargeIcons: React.FunctionComponent = () => (
   <div role="listbox" aria-label="Stacked tiles with large icons">
-    <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
+    <Tile title="Default" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isSelected={false}>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
+    <Tile title="Selected" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isSelected>
       Subtext goes here
     </Tile>{' '}
-    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
+    <Tile title="Disabled" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
       Subtext goes here
     </Tile>
   </div>