@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,13 +1,14 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { useSSRSafeId, useOUIAProps, OUIAProps, useHasAnimations } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
  */
 
-export interface DualListSelectorProps extends OUIAProps {
+export interface DualListSelectorProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;
   /** ID of the dual list selector. */
@@ -21,10 +22,6 @@ export interface DualListSelectorProps extends OUIAProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
-  /** 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;
 }
 
 export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
@@ -33,13 +30,10 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   id,
   isTree = false,
   hasAnimations: hasAnimationsProp,
-  ouiaId,
-  ouiaSafe = true,
   ...props
 }: DualListSelectorProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const randomId = useSSRSafeId();
-  const ouiaProps = useOUIAProps(DualListSelector.displayName, ouiaId, ouiaSafe);
 
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
@@ -47,7 +41,6 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
         className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)}
         id={id || randomId}
         {...props}
-        {...ouiaProps}
       >
         {children}
       </div>

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -7,7 +7,6 @@ import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-m
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 import { useHasAnimations } from '../../helpers';
-import { IS_INERT } from '../../helpers/inert';
 
 export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
@@ -79,7 +78,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: isExpanded ? undefined : IS_INERT
+        inert: isExpanded ? undefined : ''
       })
   );
 

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

@@ -59,31 +59,6 @@ describe('Opt-in animations', () => {
   });
 });
 
-test('Matches snapshot', () => {
-  const { asFragment } = render(<DualListSelector ouiaId="ouia-id" data-testid="test-id" />);
-  expect(asFragment()).toMatchSnapshot();
-});
-
-test('Renders with custom ouiaId', () => {
-  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
-  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
-});
-
-test('Renders with expected ouia component type', () => {
-  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
-  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-component-type', 'PF6/DualListSelector');
-});
-
-test('Renders with ouiaSafe defaulting to true', () => {
-  render(<DualListSelector data-testid="test-id" ouiaId="test-id" />);
-  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'true');
-});
-
-test('Renders with ouiaSafe=false when specified', () => {
-  render(<DualListSelector data-testid="test-id" ouiaId="test-id" ouiaSafe={false} />);
-  expect(screen.getByTestId('test-id')).toHaveAttribute('data-ouia-safe', 'false');
-});
-
 // Following tests should be moved to a separate DualListSelectorPane test file
 describe('DualListSelector', () => {
   test('basic', () => {

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

@@ -90,12 +90,24 @@ exports[`DualListSelector with search inputs 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
-                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <path
-                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
-                  />
+                  <svg
+                    class="pf-v6-icon-default"
+                    viewBox="0 0 512 512"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                  <svg
+                    class="pf-v6-icon-rh-ui"
+                    viewBox="0 0 32 32"
+                  >
+                    <path
+                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
+                    />
+                  </svg>
                 </svg>
               </span>
               <input
@@ -120,16 +132,3 @@ exports[`DualListSelector with search inputs 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`Matches snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-dual-list-selector"
-    data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/DualListSelector"
-    data-ouia-safe="true"
-    data-testid="test-id"
-    id="pf-:re:"
-  />
-</DocumentFragment>
-`;

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -17,12 +17,12 @@ propComponents:
 
 import { Fragment, useEffect, useMemo, useState } from 'react';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples

package/src/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -8,9 +8,9 @@ import {
   DualListSelectorControl
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 interface Option {
   text: string;
@@ -105,13 +105,13 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-          icon={<RhMicronsCaretRightIcon />}
+          icon={<AngleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<RhMicronsDoubleCaretRightIcon />}
+          icon={<AngleDoubleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
@@ -123,7 +123,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-          icon={<RhMicronsCaretLeftIcon />}
+          icon={<AngleLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx

@@ -15,10 +15,10 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Option {
   text: string;
@@ -107,12 +107,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
   );
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState
-      titleText="No results found"
-      variant={EmptyStateVariant.sm}
-      headingLevel="h4"
-      icon={RhMicronsSearchIcon}
-    >
+    <EmptyState titleText="No results found" variant={EmptyStateVariant.sm} headingLevel="h4" icon={SearchIcon}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -158,13 +153,13 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-          icon={<RhMicronsCaretRightIcon />}
+          icon={<AngleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<RhMicronsDoubleCaretRightIcon />}
+          icon={<AngleDoubleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
@@ -176,7 +171,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-          icon={<RhMicronsCaretLeftIcon />}
+          icon={<AngleLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx

@@ -8,9 +8,9 @@ import {
   DualListSelectorControl
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 
 interface Option {
   text: string;
@@ -107,7 +107,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           aria-label="Add selected"
           tooltipContent="Add selected"
           tooltipProps={{ position: 'top', 'aria-live': 'off' }}
-          icon={<RhMicronsCaretRightIcon />}
+          icon={<AngleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
@@ -115,7 +115,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           aria-label="Add all"
           tooltipContent="Add all"
           tooltipProps={{ position: 'right', 'aria-live': 'off' }}
-          icon={<RhMicronsDoubleCaretRightIcon />}
+          icon={<AngleDoubleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
@@ -131,7 +131,7 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           aria-label="Remove selected"
           tooltipContent="Remove selected"
           tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
-          icon={<RhMicronsCaretLeftIcon />}
+          icon={<AngleLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -22,12 +22,12 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 interface Option {
   text: string;
@@ -221,12 +221,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
   };
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState
-      headingLevel="h4"
-      titleText="No results found"
-      icon={RhMicronsSearchIcon}
-      variant={EmptyStateVariant.sm}
-    >
+    <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -276,13 +271,13 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
             onClick={() => moveSelected(true)}
             aria-label="Add selected"
-            icon={<RhMicronsCaretRightIcon />}
+            icon={<AngleRightIcon />}
           />
           <DualListSelectorControl
             isDisabled={availableOptions.length === 0 || isDisabled}
             onClick={() => moveAll(true)}
             aria-label="Add all"
-            icon={<RhMicronsDoubleCaretRightIcon />}
+            icon={<AngleDoubleRightIcon />}
           />
           <DualListSelectorControl
             isDisabled={chosenOptions.length === 0 || isDisabled}
@@ -294,7 +289,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             onClick={() => moveSelected(false)}
             isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
             aria-label="Remove selected"
-            icon={<RhMicronsCaretLeftIcon />}
+            icon={<AngleLeftIcon />}
           />
         </DualListSelectorControlsWrapper>
         <DualListSelectorPane

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx

@@ -16,10 +16,10 @@ import {
   EmptyStateActions
 } from '@patternfly/react-core';
 import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-left-icon';
-import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
-import RhMicronsDoubleCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-double-caret-right-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface FoodNode {
   id: string;
@@ -259,12 +259,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
         listMinHeight="300px"
       >
         {filterApplied && options.length === 0 && (
-          <EmptyState
-            headingLevel="h4"
-            titleText="No results found"
-            icon={RhMicronsSearchIcon}
-            variant={EmptyStateVariant.sm}
-          >
+          <EmptyState headingLevel="h4" titleText="No results found" icon={SearchIcon} variant={EmptyStateVariant.sm}>
             <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
             <EmptyStateFooter>
               <EmptyStateActions>
@@ -295,13 +290,13 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           isDisabled={!checkedLeafIds.filter((x) => visibleAvailableLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
-          icon={<RhMicronsCaretRightIcon />}
+          icon={<AngleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<RhMicronsDoubleCaretRightIcon />}
+          icon={<AngleDoubleRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === 0}
@@ -313,7 +308,7 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           onClick={() => moveChecked(false)}
           isDisabled={!checkedLeafIds.filter((x) => visibleChosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
-          icon={<RhMicronsCaretLeftIcon />}
+          icon={<AngleLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       {buildPane(true)}

package/src/components/EmptyState/examples/EmptyState.md

@@ -6,56 +6,45 @@ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyState
 ---
 
 import { useState } from 'react';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
-import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
-
 ### Basic
 
 ```ts file="EmptyStateBasic.tsx"
-
 ```
 
 ### Extra small
 
 ```ts file="EmptyStateExtraSmall.tsx"
-
 ```
 
 ### Small
 
 ```ts file="EmptyStateSmall.tsx"
-
 ```
 
 ### Large
 
 ```ts file="EmptyStateLarge.tsx"
-
 ```
 
 ### Extra large
 
 ```ts file="EmptyStateExtraLarge.tsx"
-
 ```
 
 ### With status
-
 ```ts file="EmptyStateWithStatus.tsx"
-
 ```
 
 ### Spinner
 
 ```ts file="EmptyStateSpinner.tsx"
-
 ```
 
 ### No match found
 
 ```ts file="EmptyStateNoMatchFound.tsx"
-
 ```

package/src/components/EmptyState/examples/EmptyStateBasic.tsx

@@ -1,8 +1,8 @@
 import { Button, EmptyState, EmptyStateBody, EmptyStateActions, EmptyStateFooter } from '@patternfly/react-core';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateBasic: React.FunctionComponent = () => (
-  <EmptyState titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
+  <EmptyState titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
+  <EmptyState variant={EmptyStateVariant.xl} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateExtraSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
+  <EmptyState variant={EmptyStateVariant.xs} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>This represents an the empty state pattern in PatternFly. The icon is optional.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateLarge: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
+  <EmptyState variant={EmptyStateVariant.lg} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -1,8 +1,8 @@
 import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
-  <EmptyState titleText="No results found" headingLevel="h4" icon={RhMicronsSearchIcon}>
+  <EmptyState titleText="No results found" headingLevel="h4" icon={SearchIcon}>
     <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>

package/src/components/EmptyState/examples/EmptyStateSmall.tsx

@@ -6,10 +6,10 @@ import {
   EmptyStateActions,
   EmptyStateFooter
 } from '@patternfly/react-core';
-import RhUiModuleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-module-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
 export const EmptyStateSmall: React.FunctionComponent = () => (
-  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={RhUiModuleIcon}>
+  <EmptyState variant={EmptyStateVariant.sm} titleText="Empty state" headingLevel="h4" icon={CubesIcon}>
     <EmptyStateBody>
       This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to
       meet a variety of needs.

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -6,7 +6,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -16,7 +16,7 @@ export enum ExpandableSectionVariant {
 
 /** The main expandable section component. */
 
-export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'>, OUIAProps {
+export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Content rendered inside the expandable section. */
   children?: React.ReactNode;
   /** Additional classes added to the expandable section. */
@@ -84,10 +84,6 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * This is useful when the toggle text should function as a heading in the document structure.
    */
   toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** 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;
 }
 
 interface ExpandableSectionState {
@@ -138,8 +134,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
     displaySize: 'default',
     isWidthLimited: false,
     isIndented: false,
-    variant: 'default',
-    ouiaSafe: true
+    variant: 'default'
   };
 
   private calculateToggleText(
@@ -237,8 +232,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       truncateMaxLines,
       direction,
       toggleWrapper = 'div',
-      ouiaId,
-      ouiaSafe,
       ...props
     } = this.props;
 
@@ -314,7 +307,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
                     className
                   )}
                   {...props}
-                  {...getOUIAProps(ExpandableSection.displayName, ouiaId, ouiaSafe)}
                 >
                   {variant === ExpandableSectionVariant.default && expandableToggle}
                   <div