@patternfly/react-core 6.6.0-prerelease.5 → 6.6.0-prerelease.7

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -14,8 +14,8 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 
 export const DataListMixedExpandable: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = useState(false);
@@ -68,7 +68,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="primary content">
                   <div id="m-ex-item1">Primary content</div>
@@ -94,7 +94,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -141,7 +141,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="secondary content">
                   <div id="m-ex-item2">Secondary content</div>
@@ -166,7 +166,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
             <DataListItemCells
               dataListCells={[
                 <DataListCell isIcon key="icon">
-                  <CodeBranchIcon />
+                  <RhUiBranchFillIcon />
                 </DataListCell>,
                 <DataListCell key="tertiary content">
                   <div id="m-ex-item3">Tertiary content</div>
@@ -226,7 +226,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -16,7 +16,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = useState(true);
@@ -103,7 +103,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -176,7 +176,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={isOpen2}

package/src/components/DatePicker/DatePicker.tsx

@@ -6,7 +6,7 @@ import { TextInput, TextInputProps } from '../TextInput/TextInput';
 import { Button } from '../Button';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
+import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
 import { CalendarMonth, CalendarFormat } from '../CalendarMonth';
 import { KeyTypes } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
@@ -333,7 +333,7 @@ const DatePickerBase = (
                 aria-label={buttonAriaLabel}
                 onClick={() => setPopoverOpen(!popoverOpen)}
                 isDisabled={isDisabled}
-                icon={<OutlinedCalendarAltIcon />}
+                icon={<RhUiCalendarIcon />}
                 aria-haspopup="dialog"
               />
             </InputGroupItem>

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

@@ -51,24 +51,12 @@ exports[`With popover opened 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 32 32"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 448 512"
-                >
-                  <path
-                    d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
-                  />
-                </svg>
+                <path
+                  d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                />
               </svg>
             </span>
           </button>
@@ -856,24 +844,12 @@ exports[`disabled date picker 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 32 32"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 448 512"
-                >
-                  <path
-                    d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
-                  />
-                </svg>
+                <path
+                  d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                />
               </svg>
             </span>
           </button>

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -21,8 +21,8 @@ import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
-import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
+import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
+import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
 ## Examples
 

package/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx

@@ -9,8 +9,8 @@ import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
-import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
+import RhUiFlagFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-flag-fill-icon';
+import RhUiLanguageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-language-fill-icon';
 
 export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
   <DescriptionList aria-label="With icons examples">
@@ -29,7 +29,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       <DescriptionListDescription>example</DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>
+      <DescriptionListTerm icon={<RhUiLanguageFillIcon />}>Pod selector</DescriptionListTerm>
       <DescriptionListDescription>
         <Button variant="link" isInline icon={<RhUiAddCircleFillIcon />}>
           app=MyApp
@@ -37,7 +37,7 @@ export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
       </DescriptionListDescription>
     </DescriptionListGroup>
     <DescriptionListGroup>
-      <DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>
+      <DescriptionListTerm icon={<RhUiFlagFillIcon />}>Annotation</DescriptionListTerm>
       <DescriptionListDescription>2 Annotations</DescriptionListDescription>
     </DescriptionListGroup>
   </DescriptionList>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -105,12 +105,11 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
   const [shouldCollapseSpace, setShouldCollapseSpace] = useState(hidden);
   const previouslyFocusedElement = useRef(null);
-  let currWidth: number = 0;
-  let panelRect: DOMRect;
-  let end: number;
-  let start: number;
-  let bottom: number;
-  let setInitialVals: boolean = true;
+  const resizeState = useRef({
+    initialPointerPos: 0,
+    initialPanelSize: 0,
+    currWidth: 0
+  });
 
   if (isStatic && focusTrap?.enabled) {
     // eslint-disable-next-line no-console
@@ -186,8 +185,20 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
   };
 
+  const setInitialResizeState = (controlPosition: number) => {
+    const panelRect = panel.current.getBoundingClientRect();
+    const initialPanelSize = position === 'bottom' ? panelRect.height : panelRect.width;
+
+    resizeState.current = {
+      initialPointerPos: controlPosition,
+      initialPanelSize,
+      currWidth: initialPanelSize
+    };
+  };
+
   const handleTouchStart = (e: React.TouchEvent) => {
     e.stopPropagation();
+    setInitialResizeState(position === 'bottom' ? e.touches[0].clientY : e.touches[0].clientX);
     document.addEventListener('touchmove', callbackTouchMove, { passive: false });
     document.addEventListener('touchend', callbackTouchEnd);
     isResizing = true;
@@ -196,11 +207,11 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const handleMousedown = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
+    setInitialResizeState(position === 'bottom' ? e.clientY : e.clientX);
     document.addEventListener('mousemove', callbackMouseMove);
     document.addEventListener('mouseup', callbackMouseUp);
     drawerRef.current.classList.add(css(styles.modifiers.resizing));
     isResizing = true;
-    setInitialVals = true;
   };
 
   const handleMouseMove = (e: MouseEvent) => {
@@ -223,33 +234,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
 
-    if (setInitialVals) {
-      panelRect = panel.current.getBoundingClientRect();
-      if (isRTL) {
-        start = panelRect.right;
-        end = panelRect.left;
-      } else {
-        end = panelRect.right;
-        start = panelRect.left;
-      }
-      bottom = panelRect.bottom;
-      setInitialVals = false;
-    }
-    const mousePos = controlPosition;
+    const { initialPointerPos, initialPanelSize } = resizeState.current;
+    const delta = controlPosition - initialPointerPos;
     let newSize = 0;
     if (position === 'end' || position === 'right') {
-      newSize = isRTL ? mousePos - end : end - mousePos;
+      newSize = isRTL ? initialPanelSize + delta : initialPanelSize - delta;
     } else if (position === 'start' || position === 'left') {
-      newSize = isRTL ? start - mousePos : mousePos - start;
+      newSize = isRTL ? initialPanelSize - delta : initialPanelSize + delta;
     } else {
-      newSize = bottom - mousePos;
+      newSize = initialPanelSize - delta;
     }
 
     if (position === 'bottom') {
       panel.current.style.overflowAnchor = 'none';
     }
     panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
-    currWidth = newSize;
+    resizeState.current.currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
 
@@ -259,8 +259,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
     drawerRef.current.classList.remove(css(styles.modifiers.resizing));
     isResizing = false;
-    onResize && onResize(e, currWidth, id);
-    setInitialVals = true;
+    onResize && onResize(e, resizeState.current.currWidth, id);
     document.removeEventListener('mousemove', callbackMouseMove);
     document.removeEventListener('mouseup', callbackMouseUp);
   };
@@ -271,7 +270,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       return;
     }
     isResizing = false;
-    onResize && onResize(e, currWidth, id);
+    onResize && onResize(e, resizeState.current.currWidth, id);
     document.removeEventListener('touchmove', callbackTouchMove);
     document.removeEventListener('touchend', callbackTouchEnd);
   };
@@ -301,7 +300,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     e.preventDefault();
 
     if (key === 'Escape' || key === 'Enter') {
-      onResize && onResize(e, currWidth, id);
+      onResize && onResize(e, resizeState.current.currWidth, id);
     }
     const panelRect = panel.current.getBoundingClientRect();
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
@@ -328,7 +327,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       panel.current.style.overflowAnchor = 'none';
     }
     panel.current.style.setProperty(cssPanelMdFlexBasis.name, newSize + 'px');
-    currWidth = newSize;
+    resizeState.current.currWidth = newSize;
     setSeparatorValue(calcValueNow());
   };
   const boundaryCssVars: any = {};

package/src/components/Dropdown/examples/Dropdown.md

@@ -17,7 +17,7 @@ propComponents:
 ---
 
 import { useState, useRef } from 'react';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -27,7 +27,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
       shouldFocusToggleOnSelect

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
 import { useSSRSafeId } from '../../helpers';
-import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
+import RhUiGripVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-grip-vertical-fill-icon';
 import { Button, ButtonVariant } from '../Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -86,7 +86,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
             <Button
               variant={ButtonVariant.plain}
               component="span"
-              icon={<GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />}
+              icon={<RhUiGripVerticalFillIcon style={{ verticalAlign: '-0.3em' }} />}
             />
           </div>
         )}

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

@@ -20,9 +20,9 @@ import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons
 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 PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples

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

@@ -25,9 +25,9 @@ import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons
 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 PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 interface Option {
   text: string;
@@ -155,7 +155,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Available"
             key="availableSortButton"
             isDisabled={isDisabled}
-            icon={<PficonSortCommonAscIcon />}
+            icon={<RhMicronsSortDownSmallToLargeIcon />}
           />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -167,7 +167,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={<EllipsisVIcon />}
+                icon={<RhUiEllipsisVerticalFillIcon />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -190,7 +190,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Chosen"
             key="chosenSortButton"
             isDisabled={isDisabled}
-            icon={<PficonSortCommonAscIcon />}
+            icon={<RhMicronsSortDownSmallToLargeIcon />}
           />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -202,7 +202,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={<EllipsisVIcon />}
+                icon={<RhUiEllipsisVerticalFillIcon />}
               />
             )}
             isOpen={isChosenKebabOpen}

package/src/components/EmptyState/__tests__/Generated/EmptyStateIcon.test.tsx

@@ -2,13 +2,13 @@
  * This test was generated
  */
 import { render } from '@testing-library/react';
-import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
+import RhUiProfileFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-profile-fill-icon';
 import { EmptyStateIcon } from '../../EmptyStateIcon';
 // any missing imports can usually be resolved by adding them here
 import { Spinner } from '../../../Spinner/Spinner';
 
 it('EmptyStateIcon should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={UserIcon} />);
+  const { asFragment } = render(<EmptyStateIcon className={"''"} icon={RhUiProfileFillIcon} />);
   expect(asFragment()).toMatchSnapshot();
 });
 

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -11,24 +11,12 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
+      viewBox="0 0 32 32"
       width="1em"
     >
-      <svg
-        class="pf-v6-icon-default"
-        viewBox="0 0 448 512"
-      >
-        <path
-          d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
-        />
-      </svg>
-      <svg
-        class="pf-v6-icon-rh-ui"
-        viewBox="0 0 32 32"
-      >
-        <path
-          d="M20.354 15.702C22.545 14.273 24 11.805 24 9c0-4.411-3.589-8-8-8S8 4.589 8 9a7.995 7.995 0 0 0 3.646 6.702C6.053 17.538 2 22.801 2 29a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-6.199-4.053-11.462-9.646-13.298ZM10 9c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6ZM4.041 28C4.551 21.85 9.72 17 16 17s11.449 4.85 11.959 11H4.041Z"
-        />
-      </svg>
+      <path
+        d="M29.75 29a.75.75 0 0 1-.75.75H3a.75.75 0 0 1-.75-.75c0-6.283 4.241-11.583 10.007-13.219A7.755 7.755 0 0 1 8.25 9c0-4.273 3.477-7.75 7.75-7.75S23.75 4.727 23.75 9a7.751 7.751 0 0 1-4.007 6.781C25.509 17.417 29.75 22.717 29.75 29Z"
+      />
     </svg>
   </div>
 </DocumentFragment>

package/src/components/Hint/examples/Hint.md

@@ -6,7 +6,7 @@ propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
 import { Fragment, useState } from 'react';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -12,7 +12,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -37,7 +37,7 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
     >

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -11,7 +11,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const HintBasicWithoutTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -36,7 +36,7 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
     >

package/src/components/InputGroup/examples/InputGroup.md

@@ -8,7 +8,6 @@ propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText']
 import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
-import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples

package/src/components/List/examples/List.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 

package/src/components/List/examples/ListIcons.tsx

@@ -1,11 +1,11 @@
 import { List, ListItem } from '@patternfly/react-core';
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListIcons: React.FunctionComponent = () => (
   <List isPlain>
-    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
     <ListItem icon={<KeyIcon />}>Second</ListItem>
     <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>

package/src/components/List/examples/ListLargeIcons.tsx

@@ -1,11 +1,11 @@
 import { List, ListItem } from '@patternfly/react-core';
-import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import RhUiLearnFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-learn-fill-icon';
 import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
 import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 export const ListLargeIcons: React.FunctionComponent = () => (
   <List isPlain iconSize="large">
-    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<RhUiLearnFillIcon />}>First</ListItem>
     <ListItem icon={<KeyIcon />}>Second</ListItem>
     <ListItem icon={<DesktopIcon />}>Third</ListItem>
   </List>

package/src/components/LoginPage/LoginForm.tsx

@@ -5,8 +5,8 @@ import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ValidatedOptions } from '../../helpers/constants';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
+import RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';
+import RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';
 import { HelperText, HelperTextItem } from '../HelperText';
 
 export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
@@ -130,7 +130,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
                 variant="control"
                 onClick={() => setPasswordHidden(!passwordHidden)}
                 aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
-                icon={passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+                icon={passwordHidden ? <RhUiViewFillIcon /> : <RhUiViewOffFillIcon />}
               />
             </InputGroupItem>
           </InputGroup>