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

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

@@ -39,7 +39,7 @@ Object.values([
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
     const { asFragment } = render(
-      <Drawer isExpanded={isExpanded}>
+      <Drawer isExpanded={isExpanded} ouiaId="ouia-id">
         <DrawerContent panelContent={panelContent}>
           <DrawerContentBody>{drawerContent}</DrawerContentBody>
         </DrawerContent>
@@ -187,3 +187,100 @@ test(`Renders with ${styles.modifiers.pill} class when specified`, () => {
 
   expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.pill);
 });
+
+test('Renders with custom ouiaId', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-component-type', 'PF6/Drawer');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(
+    <Drawer data-testid="drawer" ouiaId="test-id" ouiaSafe={false}>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+  expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
+});
+
+test(`Does not render with ${styles.modifiers.viewport} class by default`, () => {
+  render(
+    <Drawer data-testid="drawer">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).not.toHaveClass(styles.modifiers.viewport);
+});
+
+test(`Renders with ${styles.modifiers.viewport} when isViewport is specified`, () => {
+  render(
+    <Drawer data-testid="drawer" isViewport>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.viewport);
+});
+
+test('Resizeable DrawerPanelContent without drawer content does not throw', async () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const panelContent = (
+    <DrawerPanelContent isResizable>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const user = userEvent.setup();
+
+  render(
+    <Drawer isExpanded isViewport>
+      <DrawerContent panelContent={panelContent} />
+    </Drawer>
+  );
+
+  await user.tab();
+  await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
+
+  expect(consoleError).not.toHaveBeenCalled();
+  consoleError.mockRestore();
+});

package/src/components/Drawer/__tests__/DrawerCloseButton.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ButtonProps } from '../../Button';
+import { DrawerCloseButton } from '../DrawerCloseButton';
+
+test('Renders with spread buttonProps', () => {
+  render(<DrawerCloseButton buttonProps={{ isDisabled: true }} />);
+  expect(screen.getByRole('button')).toBeDisabled();
+});
+
+test('Calls onClose when clicked', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(<DrawerCloseButton onClose={onClose} buttonProps={{ isDisabled: false }} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('Does not spread onClick from buttonProps but spreads other props', async () => {
+  const onClose = jest.fn();
+  const buttonOnClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <DrawerCloseButton
+      onClose={onClose}
+      buttonProps={{ id: 'drawer-close-button', onClick: buttonOnClick } as ButtonProps}
+    />
+  );
+
+  const button = screen.getByRole('button');
+  expect(button).toHaveAttribute('id', 'drawer-close-button');
+
+  await user.click(button);
+
+  expect(onClose).toHaveBeenCalledTimes(1);
+  expect(buttonOnClick).not.toHaveBeenCalled();
+});

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

@@ -4,6 +4,9 @@ exports[`Drawer expands from bottom 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-bottom"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rd:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -19,7 +22,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r8:"
+        id="pf-drawer-panel-:re:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -36,7 +39,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rf:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -77,6 +80,9 @@ exports[`Drawer has resizable callback and id 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rj:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -128,7 +134,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -170,6 +176,9 @@ exports[`Drawer has resizable css and color variants 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded pf-m-panel-left"
+    data-ouia-component-id="OUIA-Generated-Drawer-:rg:"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -185,11 +194,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="pf-drawer-panel-:ra:"
+        id="pf-drawer-panel-:rh:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-:ra:"
+          aria-controls="pf-drawer-panel-:rh:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -222,7 +231,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:ri:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -264,6 +273,9 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -280,7 +292,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r2:"
+        id="pf-drawer-panel-:r4:"
         inert=""
       />
     </div>
@@ -292,6 +304,9 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -308,7 +323,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-:r5:"
+        id="pf-drawer-panel-:r9:"
         inert=""
       />
     </div>
@@ -320,6 +335,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -335,7 +353,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r0:"
+        id="pf-drawer-panel-:r1:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -352,7 +370,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -393,6 +411,9 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -408,7 +429,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r6:"
+        id="pf-drawer-panel-:rb:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -425,7 +446,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -466,6 +487,9 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
 <DocumentFragment>
   <div
     class="pf-v6-c-drawer pf-m-expanded"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Drawer"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-drawer__main"
@@ -481,7 +505,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="pf-drawer-panel-:r3:"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -498,7 +522,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-:r4:"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

package/src/components/Drawer/examples/Drawer.md

@@ -13,7 +13,7 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerPanelFocusTrapObject,
+    DrawerPanelFocusTrapObject
   ]
 section: components
 ---

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,14 +1,13 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { useSSRSafeId } from '../../helpers';
+import { useSSRSafeId, useOUIAProps, OUIAProps, useHasAnimations } 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 {
+export interface DualListSelectorProps extends OUIAProps {
   /** Additional classes applied to the dual list selector. */
   className?: string;
   /** ID of the dual list selector. */
@@ -22,6 +21,10 @@ export interface DualListSelectorProps {
    * 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> = ({
@@ -30,10 +33,13 @@ 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 }}>
@@ -41,6 +47,7 @@ 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,6 +7,7 @@ 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. */
@@ -78,7 +79,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: isExpanded ? undefined : ''
+        inert: isExpanded ? undefined : IS_INERT
       })
   );
 

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

@@ -59,6 +59,31 @@ 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,24 +90,12 @@ exports[`DualListSelector with search inputs 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <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>
+                  <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>
               </span>
               <input
@@ -132,3 +120,16 @@ 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 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 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 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 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 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';
 
 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={<AngleRightIcon />}
+          icon={<RhMicronsCaretRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<AngleDoubleRightIcon />}
+          icon={<RhMicronsDoubleCaretRightIcon />}
         />
         <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={<AngleLeftIcon />}
+          icon={<RhMicronsCaretLeftIcon />}
         />
       </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 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';
+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';
 
 interface Option {
   text: string;
@@ -107,7 +107,12 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
   );
 
   const buildEmptyState = (isAvailable: boolean) => (
-    <EmptyState titleText="No results found" variant={EmptyStateVariant.sm} headingLevel="h4" icon={SearchIcon}>
+    <EmptyState
+      titleText="No results found"
+      variant={EmptyStateVariant.sm}
+      headingLevel="h4"
+      icon={RhMicronsSearchIcon}
+    >
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>
@@ -153,13 +158,13 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-          icon={<AngleRightIcon />}
+          icon={<RhMicronsCaretRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-          icon={<AngleDoubleRightIcon />}
+          icon={<RhMicronsDoubleCaretRightIcon />}
         />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
@@ -171,7 +176,7 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-          icon={<AngleLeftIcon />}
+          icon={<RhMicronsCaretLeftIcon />}
         />
       </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 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 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';
 
 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={<AngleRightIcon />}
+          icon={<RhMicronsCaretRightIcon />}
         />
         <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={<AngleDoubleRightIcon />}
+          icon={<RhMicronsDoubleCaretRightIcon />}
         />
         <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={<AngleLeftIcon />}
+          icon={<RhMicronsCaretLeftIcon />}
         />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane